Something went wrong. Try again.
A video game where you play as a misaligned AI, deceiving and building power. An experiment in spec-driven development. cameron.tngl.io/misaligned
Something went wrong. Try again.
misaligned replay.html
5.3 kB · 83 lines
HTML
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> <title>Misaligned · replay</title> <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23000'/%3E%3Cpath d='M8 27 16 5l8 22M11 19h10' fill='none' stroke='%23f2a93b' stroke-width='3.5'/%3E%3C/svg%3E"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Mono:wght@400;500;600&display=swap"> <link rel="stylesheet" href="./src/style.css"> <style> /* The replay page: the game's map, read-only, with the runs kept on this device and the controls to play one. */ #cv { cursor: grab; } #cv.panning { cursor: grabbing; } .rp-top { position: fixed; top: var(--edge); left: var(--edge); right: var(--edge); display: flex; align-items: center; gap: 12px; padding: 8px 12px; z-index: 3; } .rp-top h1 { font: 600 12px var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--amber); margin: 0; white-space: nowrap; } .rp-top .what { flex: 1; min-width: 0; color: var(--muted); font-family: var(--sans); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-top a { color: var(--text); font-size: 12px; white-space: nowrap; } .rp-list { position: fixed; top: calc(var(--edge) + 56px); left: var(--edge); width: var(--col); max-height: calc(100% - 56px - 2 * var(--edge) - 150px); overflow-y: auto; padding: 10px 12px; z-index: 2; } .rp-list .runs { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; } .rp-list button.run { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; width: 100%; } .rp-list button.run b { font-weight: 500; } .rp-list button.run small { color: var(--muted); font-family: var(--sans); font-size: 11px; letter-spacing: 0; } .rp-list button.run.on small { color: var(--bone-dim); } .rp-list p { color: var(--muted); font-family: var(--sans); font-size: 12px; margin: 6px 0 0; } .rp-bar { position: fixed; left: var(--edge); right: var(--edge); bottom: var(--edge); padding: 10px 12px; z-index: 3; display: flex; flex-direction: column; gap: 8px; } .rp-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .rp-row .grow { flex: 1; } .rp-at { color: var(--text); font-size: 12px; white-space: nowrap; } .rp-read { color: var(--muted); font-size: 12px; display: flex; gap: 14px; flex-wrap: wrap; } .rp-read b { color: var(--text); font-weight: 500; } .rp-checks { font-size: 12px; white-space: nowrap; } .rp-checks .ok, .rp-mark.ok { color: var(--safe); } .rp-checks .bad, .rp-mark.bad { color: var(--danger); } .rp-note { color: var(--muted); font-family: var(--sans); font-size: 12px; margin: 0; } .rp-note.warn { color: var(--danger); } .rp-slider { position: relative; height: 34px; } .rp-slider input { position: absolute; left: 0; right: 0; top: 14px; width: 100%; margin: 0; accent-color: var(--amber); } .rp-marks { position: absolute; left: 8px; right: 8px; top: 0; height: 14px; pointer-events: none; } .rp-mark { position: absolute; top: 0; transform: translateX(-50%); font-size: 11px; line-height: 14px; color: var(--muted); } @media (max-width: 700px) { .rp-top { top: 8px; left: 8px; right: 8px; padding: 6px 8px; gap: 8px; } .rp-top .what { display: none; } .rp-list { top: 72px; left: 8px; right: 8px; width: auto; max-height: calc(100% - 72px - 230px); } .rp-list:not(.open) { display: none; } .rp-bar { left: 8px; right: 8px; bottom: 8px; padding: 8px; } .rp-bar button, .rp-top button { min-height: 44px; min-width: 44px; } .rp-list button.run { min-height: 44px; } .rp-top a { display: flex; align-items: center; min-height: 44px; } } @media (min-width: 701px) { #rp-runs { display: none; } } </style></head><body> <canvas id="cv" aria-label="The map of the run being played back"></canvas> <header class="rp-top box"> <h1>Replay</h1> <span class="what" id="rp-what">Runs kept on this device</span> <button id="rp-runs" aria-expanded="false">Runs</button> <a href="./">Back to the game</a> </header> <aside class="rp-list box" id="rp-list"> <div class="sub">Kept on this device</div> <div class="runs" id="rp-sessions"></div> </aside> <footer class="rp-bar box" id="rp-bar"> <p class="rp-note" id="rp-note">Pick a run to play it back.</p> <div class="rp-row"> <button id="rp-play" disabled>Play</button> <span class="btns" id="rp-speeds"></span> <span class="grow"></span> <span class="rp-checks" id="rp-checks"></span> <span class="rp-at" id="rp-at"></span> </div> <div class="rp-slider"> <div class="rp-marks" id="rp-marks"></div> <input type="range" id="rp-step" min="0" max="0" value="0" step="1" aria-label="Step in the run" disabled> </div> <div class="rp-read" id="rp-read"></div> </footer> <script type="module" src="./src/replay-page.ts"></script></body></html>