Spaces:
Running
Running
File size: 4,503 Bytes
e9421cf 9cd79dc e9421cf 9cd79dc e9421cf 9cd79dc e9421cf 9cd79dc e9421cf 9cd79dc e9421cf 9cd79dc e9421cf 9cd79dc e9421cf 9cd79dc e9421cf | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | <!DOCTYPE html>
<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>
|