Spaces:
Running
Running
Update index.html
Browse files- index.html +14 -11
index.html
CHANGED
|
@@ -1,4 +1,3 @@
|
|
| 1 |
-
<!-- /src/ui/index.html -->
|
| 2 |
<!DOCTYPE html>
|
| 3 |
<html lang="en">
|
| 4 |
<head>
|
|
@@ -11,6 +10,7 @@
|
|
| 11 |
<div id="three-container" class="canvas-container"></div>
|
| 12 |
<button id="btn-to-sim" class="cta">Let’s see Mars trash</button>
|
| 13 |
</div>
|
|
|
|
| 14 |
<div id="sim" class="slide hidden">
|
| 15 |
<div id="sim-container" class="canvas-container"></div>
|
| 16 |
<div id="controls">
|
|
@@ -21,6 +21,7 @@
|
|
| 21 |
<button id="btn-reset">Reset</button>
|
| 22 |
</div>
|
| 23 |
</div>
|
|
|
|
| 24 |
<div id="calc" class="slide hidden">
|
| 25 |
<div id="kpis">
|
| 26 |
<div class="card">Trash Collected: <span id="k-trash">0</span></div>
|
|
@@ -32,19 +33,22 @@
|
|
| 32 |
<button id="btn-next-clean">Continue</button>
|
| 33 |
<button id="btn-download">Download run.json</button>
|
| 34 |
</div>
|
|
|
|
| 35 |
<div id="clean" class="slide hidden">
|
| 36 |
<div id="three-clean-container" class="canvas-container"></div>
|
| 37 |
<div id="badge">🚀 Clean!</div>
|
| 38 |
<button id="btn-replay">Replay</button>
|
| 39 |
</div>
|
| 40 |
|
| 41 |
-
<
|
| 42 |
-
<script type="module" src="
|
| 43 |
-
<script type="module" src="
|
|
|
|
|
|
|
| 44 |
<script type="module">
|
| 45 |
-
import { MarsScene } from '.
|
| 46 |
-
import { createSim, startSim, resetSim, stopSim } from '.
|
| 47 |
-
import { runStore } from '.
|
| 48 |
|
| 49 |
let heroScene, cleanScene;
|
| 50 |
|
|
@@ -54,9 +58,8 @@
|
|
| 54 |
}
|
| 55 |
|
| 56 |
window.addEventListener('load', () => {
|
| 57 |
-
// inicializar escena hero
|
| 58 |
const threeCont = document.getElementById('three-container');
|
| 59 |
-
heroScene = new MarsScene(threeCont, { marsUrl: '
|
| 60 |
|
| 61 |
document.getElementById('btn-to-sim').onclick = () => {
|
| 62 |
showSlide('sim');
|
|
@@ -69,7 +72,7 @@
|
|
| 69 |
const speed = parseFloat(document.getElementById('input-speed').value);
|
| 70 |
const seed = parseInt(document.getElementById('input-seed').value);
|
| 71 |
startSim({ N, speed, seed });
|
| 72 |
-
|
| 73 |
const checkInterval = setInterval(() => {
|
| 74 |
if (runStore.pointsCollected === runStore.params.N) {
|
| 75 |
clearInterval(checkInterval);
|
|
@@ -87,7 +90,7 @@
|
|
| 87 |
document.getElementById('btn-next-clean').onclick = () => {
|
| 88 |
showSlide('clean');
|
| 89 |
const cleanCont = document.getElementById('three-clean-container');
|
| 90 |
-
cleanScene = new MarsScene(cleanCont, { marsUrl: '
|
| 91 |
cleanScene.showCleanState();
|
| 92 |
};
|
| 93 |
|
|
|
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
<html lang="en">
|
| 3 |
<head>
|
|
|
|
| 10 |
<div id="three-container" class="canvas-container"></div>
|
| 11 |
<button id="btn-to-sim" class="cta">Let’s see Mars trash</button>
|
| 12 |
</div>
|
| 13 |
+
|
| 14 |
<div id="sim" class="slide hidden">
|
| 15 |
<div id="sim-container" class="canvas-container"></div>
|
| 16 |
<div id="controls">
|
|
|
|
| 21 |
<button id="btn-reset">Reset</button>
|
| 22 |
</div>
|
| 23 |
</div>
|
| 24 |
+
|
| 25 |
<div id="calc" class="slide hidden">
|
| 26 |
<div id="kpis">
|
| 27 |
<div class="card">Trash Collected: <span id="k-trash">0</span></div>
|
|
|
|
| 33 |
<button id="btn-next-clean">Continue</button>
|
| 34 |
<button id="btn-download">Download run.json</button>
|
| 35 |
</div>
|
| 36 |
+
|
| 37 |
<div id="clean" class="slide hidden">
|
| 38 |
<div id="three-clean-container" class="canvas-container"></div>
|
| 39 |
<div id="badge">🚀 Clean!</div>
|
| 40 |
<button id="btn-replay">Replay</button>
|
| 41 |
</div>
|
| 42 |
|
| 43 |
+
<!-- Scripts en la raíz -->
|
| 44 |
+
<script type="module" src="./scene.js"></script>
|
| 45 |
+
<script type="module" src="./sketch.js"></script>
|
| 46 |
+
<script type="module" src="./runStore.js"></script>
|
| 47 |
+
|
| 48 |
<script type="module">
|
| 49 |
+
import { MarsScene } from './scene.js';
|
| 50 |
+
import { createSim, startSim, resetSim, stopSim } from './sketch.js';
|
| 51 |
+
import { runStore } from './runStore.js';
|
| 52 |
|
| 53 |
let heroScene, cleanScene;
|
| 54 |
|
|
|
|
| 58 |
}
|
| 59 |
|
| 60 |
window.addEventListener('load', () => {
|
|
|
|
| 61 |
const threeCont = document.getElementById('three-container');
|
| 62 |
+
heroScene = new MarsScene(threeCont, { marsUrl: 'assets/mars_4k.jpg' });
|
| 63 |
|
| 64 |
document.getElementById('btn-to-sim').onclick = () => {
|
| 65 |
showSlide('sim');
|
|
|
|
| 72 |
const speed = parseFloat(document.getElementById('input-speed').value);
|
| 73 |
const seed = parseInt(document.getElementById('input-seed').value);
|
| 74 |
startSim({ N, speed, seed });
|
| 75 |
+
|
| 76 |
const checkInterval = setInterval(() => {
|
| 77 |
if (runStore.pointsCollected === runStore.params.N) {
|
| 78 |
clearInterval(checkInterval);
|
|
|
|
| 90 |
document.getElementById('btn-next-clean').onclick = () => {
|
| 91 |
showSlide('clean');
|
| 92 |
const cleanCont = document.getElementById('three-clean-container');
|
| 93 |
+
cleanScene = new MarsScene(cleanCont, { marsUrl: 'assets/mars_4k.jpg' });
|
| 94 |
cleanScene.showCleanState();
|
| 95 |
};
|
| 96 |
|