Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <title>Clean Mars Simulation</title> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <div id="hero" class="slide"> | |
| <div id="three-container" class="canvas-container"></div> | |
| <button id="btn-to-sim" class="cta">Let’s see Mars trash</button> | |
| </div> | |
| <div id="sim" class="slide hidden"> | |
| <div id="sim-container" class="canvas-container"></div> | |
| <div id="controls"> | |
| <label> N: <input type="number" id="input-N" min="10" max="500" value="100" /></label> | |
| <label> Speed: <input type="range" id="input-speed" min="0.5" max="3.0" step="0.1" value="1.0" /></label> | |
| <label> Seed: <input type="number" id="input-seed" value="1234" /></label> | |
| <button id="btn-start">Start</button> | |
| <button id="btn-reset">Reset</button> | |
| </div> | |
| </div> | |
| <div id="calc" class="slide hidden"> | |
| <div id="kpis"> | |
| <div class="card">Trash Collected: <span id="k-trash">0</span></div> | |
| <div class="card">Distance: <span id="k-dist">0</span></div> | |
| <div class="card">Steps: <span id="k-steps">0</span></div> | |
| <div class="card">Time: <span id="k-time">0</span></div> | |
| <div class="card">Energy: <span id="k-energy">0</span></div> | |
| </div> | |
| <button id="btn-next-clean">Continue</button> | |
| <button id="btn-download">Download run.json</button> | |
| </div> | |
| <div id="clean" class="slide hidden"> | |
| <div id="three-clean-container" class="canvas-container"></div> | |
| <div id="badge">🚀 Clean!</div> | |
| <button id="btn-replay">Replay</button> | |
| </div> | |
| <!-- Scripts en la raíz --> | |
| <script type="module" src="./scene.js"></script> | |
| <script type="module" src="./sketch.js"></script> | |
| <script type="module" src="./runStore.js"></script> | |
| <script type="module"> | |
| import { MarsScene } from './scene.js'; | |
| import { createSim, startSim, resetSim, stopSim } from './sketch.js'; | |
| import { runStore } from './runStore.js'; | |
| let heroScene, cleanScene; | |
| function showSlide(id) { | |
| document.querySelectorAll('.slide').forEach(el => el.classList.add('hidden')); | |
| document.getElementById(id).classList.remove('hidden'); | |
| } | |
| window.addEventListener('load', () => { | |
| const threeCont = document.getElementById('three-container'); | |
| heroScene = new MarsScene(threeCont, { marsUrl: 'assets/mars_4k.jpg' }); | |
| document.getElementById('btn-to-sim').onclick = () => { | |
| showSlide('sim'); | |
| const simCont = document.getElementById('sim-container'); | |
| createSim(simCont); | |
| }; | |
| document.getElementById('btn-start').onclick = () => { | |
| const N = parseInt(document.getElementById('input-N').value); | |
| const speed = parseFloat(document.getElementById('input-speed').value); | |
| const seed = parseInt(document.getElementById('input-seed').value); | |
| startSim({ N, speed, seed }); | |
| const checkInterval = setInterval(() => { | |
| if (runStore.pointsCollected === runStore.params.N) { | |
| clearInterval(checkInterval); | |
| stopSim(); | |
| showSlide('calc'); | |
| updateKPIs(); | |
| } | |
| }, 200); | |
| }; | |
| document.getElementById('btn-reset').onclick = () => { | |
| resetSim(); | |
| }; | |
| document.getElementById('btn-next-clean').onclick = () => { | |
| showSlide('clean'); | |
| const cleanCont = document.getElementById('three-clean-container'); | |
| cleanScene = new MarsScene(cleanCont, { marsUrl: 'assets/mars_4k.jpg' }); | |
| cleanScene.showCleanState(); | |
| }; | |
| document.getElementById('btn-download').onclick = () => { | |
| const blob = new Blob([runStore.exportJSON()], { type: 'application/json' }); | |
| const url = URL.createObjectURL(blob); | |
| const a = document.createElement('a'); | |
| a.href = url; | |
| a.download = 'run.json'; | |
| a.click(); | |
| }; | |
| document.getElementById('btn-replay').onclick = () => { | |
| showSlide('sim'); | |
| resetSim(); | |
| }; | |
| }); | |
| function updateKPIs() { | |
| document.getElementById('k-trash').innerText = runStore.pointsCollected; | |
| document.getElementById('k-dist').innerText = runStore.metrics.totalDistance.toFixed(3); | |
| document.getElementById('k-steps').innerText = runStore.metrics.steps; | |
| document.getElementById('k-time').innerText = runStore.metrics.timeElapsed.toFixed(2); | |
| document.getElementById('k-energy').innerText = runStore.metrics.energy.toFixed(3); | |
| } | |
| </script> | |
| </body> | |
| </html> | |