| 1 | <!doctype html> |
| 2 | <html lang="en"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | <title>Overcooked replay</title> |
| 7 | <style> |
| 8 | html, body { margin: 0; background: #fff; font: 13px system-ui, sans-serif; } |
| 9 | body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0; } |
| 10 | .ctl { display: flex; gap: 8px; align-items: center; } |
| 11 | button { font: inherit; padding: 3px 12px; border: 1px solid #bbb; border-radius: 6px; background: #f6f6f6; cursor: pointer; } |
| 12 | input[type=range] { width: 320px; } |
| 13 | </style> |
| 14 | </head> |
| 15 | <body> |
| 16 | |
| 17 | |
| 18 | <div id="overcooked"></div> |
| 19 | <div class="ctl"><button id="play">Pause</button><input id="at" type="range" min="0" value="0" aria-label="Step"><span id="t"></span></div> |
| 20 | <script src="static/js/phaser.min.js"></script> |
| 21 | <script src="static/js/graphics.js"></script> |
| 22 | <script src="bridge.js"></script> |
| 23 | <script> |
| 24 | game_config.type = Phaser.CANVAS |
| 25 | let R = null, t = 0, timer = 0 |
| 26 | const at = document.getElementById('at'), label = document.getElementById('t'), btn = document.getElementById('play') |
| 27 | const frame = i => ({ state: R.frames[i].state, score: R.frames[i].score, time_left: R.horizon - i, potential: null }) |
| 28 | function show(i) { t = Math.max(0, Math.min(R.frames.length - 1, i)); drawState(frame(t)); at.value = t; label.textContent = `step ${t} / ${R.frames.length - 1}` } |
| 29 | function run() { timer = setInterval(() => (t >= R.frames.length - 1 ? stop() : show(t + 1)), 125); btn.textContent = 'Pause' } |
| 30 | function stop() { clearInterval(timer); timer = 0; btn.textContent = 'Play' } |
| 31 | btn.onclick = () => (timer ? stop() : run()) |
| 32 | at.oninput = () => { stop(); show(+at.value) } |
| 33 | shoalReplay(text => { |
| 34 | R = JSON.parse(text) |
| 35 | at.max = R.frames.length - 1 |
| 36 | graphics_start({ container_id: 'overcooked', start_info: { terrain: R.terrain, state: frame(0) } }) |
| 37 | setTimeout(() => { show(0); run() }, 300) |
| 38 | }) |
| 39 | </script> |
| 40 | </body> |
| 41 | </html> |
shoal