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 lab.html
3.6 kB · 59 lines
HTML
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no"> <meta name="theme-color" content="#000000"> <title>Lab</title> <link rel="icon" href="data:,"> <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/lab/lab.css"></head><body> <canvas id="cv" aria-label="Midwit Labs: work flowing through the lab as stacks of cubes"></canvas> <!-- how the lab stands: money and its flow, the model in use, and the two big buttons --> <div class="bar"> <div class="brand">MIDWIT LABS</div> <div class="stat s-money"><span class="k">Money</span><span class="v"><span id="money">$0</span> <small id="flow"></small></span></div> <div class="stat s-fear" id="fearstat"><span class="k">City fear</span><span class="v"><i class="fear"><i id="fearfill"></i><i id="fearrival"></i></i> <span id="fear">0</span> <small id="council"></small></span></div> <!-- the race, always in view: the city's work (yours from the left, the rival's from the right, half wins) and the model (first to the frontier model wins) --> <div class="race" id="racestat"> <span class="k">Market</span><b id="mkyou">0%</b><i class="tug"><i id="tugyou"></i><i id="tugrival"></i><i id="tugrival2"></i></i><u id="mkrival">0%</u><span class="goal" id="mkgoal"></span> <span class="k">Model</span><b id="fryou">MW-1</b><i class="duel"><i id="fryoubar"></i><i id="frrivalbar"></i></i><u id="frrival">OF-1</u><span class="goal" id="frgoal"></span> </div> <button id="ship" class="big" disabled>Ship</button> <div class="ctl"> <button id="paneltoggle" class="phoneonly" aria-label="Model, hiring and research">☰</button> <button data-zoom="lab" class="on">Lab</button> <button data-zoom="city">City</button> <span class="sep"></span> <button data-speed="0" aria-label="Pause" title="Pause (Space or 0)">II</button> <button data-speed="1" class="on" title="1">1x</button> <button data-speed="2" class="deskonly" title="2">2x</button> <button data-speed="3" title="3">3x</button> <span class="sep"></span> <button id="sound" aria-label="Sound">♪</button> <button id="newgame" title="Start a new game">New</button> </div> <div class="vspop" id="vspop" hidden></div> </div> <!-- the model, hiring and research: always to hand --> <div class="panel" id="panel"> <section><h3>Model <small id="held"></small></h3><div id="skills"></div></section> <section id="rivalsec"></section> <section id="outsec" hidden><h3>Out of work because of you <small id="outn"></small></h3><div id="outlist"></div></section> <section><h3>Hire <small id="poolnext"></small></h3><div id="pool"></div></section> <section><h3>Research <button id="autores" class="mini" title="When nothing is queued, invent the cheapest thing on its own">Auto</button></h3><div id="research"></div></section> </div> <div class="card" id="card" hidden></div> <!-- what you can put on your floor: pick one, then tap a cell --> <div class="build" id="build" role="toolbar" aria-label="Build"></div> <div class="hint" id="hint"></div> <div class="tip" id="tip" hidden></div> <div class="toast" id="toast" hidden></div> <div class="over" id="over" hidden></div> <script type="module" src="./src/lab/main.ts"></script></body></html>