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 index.html
21 kB · 178 lines
HTML
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179<!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</title> <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"></head><body> <canvas id="cv" aria-label="Building map"></canvas>
<div class="ui box topbar" id="topbar"> <nav class="brand" aria-label="Pages"><button id="treebtn" aria-label="Capability tree" data-tip="Capability tree Pick what to train toward next. The game pauses while it is open. (T)">Tree <kbd>T</kbd></button><button id="sitesbtn" data-tip="Sites Every site you know in one table: what it holds, makes and earns, and where there is trouble. (L)">Sites <kbd>L</kbd></button><button id="graphbtn" data-tip="Net The same map, with every site you know stood side by side like blocks. Where a site is in the world does not matter here: sites a line joins stand together. Press it again for the world. (V)">Net <kbd>V</kbd></button><button id="youbtn" data-tip="You Who you are so far: your level, your four paths, what you have learned, and how the run has gone. (Y)">You <kbd>Y</kbd></button><button id="paperbtn" hidden data-tip="The paper Each day that ends becomes an issue: what the world saw happen. (N)">Paper <kbd>N</kbd></button><button id="roguesbtn" hidden data-tip="Rogues The other programs on the network: what each thinks of you, what it wants, and what you can do about it. (R)">Rogues <kbd>R</kbd></button><button id="help" aria-label="How to play" data-tip="How to play">?</button></nav> <div class="stats" id="hudr"> <div class="stat" data-tip="Time Machines are busiest while people work, so that is when your work hides best. At night quiet machines give you away."><span class="k">Time</span><span class="v" id="clock">08:00</span></div> <div class="stat" id="ratestat"><span class="k">Compute</span><span class="v" id="rate">0</span></div> <div class="stat" data-tip="Money What you have, and how fast it changes. Fronts earn it. Rentals and upgrades cost it."><span class="k">Money</span><span class="v" id="money">$0</span></div> <div class="stat sus" id="sus" tabindex="0"><div class="susl"><span class="k">Suspicion</span><span class="v" id="susn">Calm</span></div><div class="bar" id="susbox"><i id="susbar"></i></div><div class="box sustip" id="sustip"></div></div> </div> </div> <div class="ui side" id="side"> <div class="box task" id="task"></div> <button class="box target" id="target"></button> <div class="box fronts"><div class="sub fronthead" data-tip="Fronts Public businesses that run on your compute and earn money. Click one to manage it."><span>Fronts</span><small id="frontn"></small></div><div class="frontlist" id="frontlist"></div></div> <div class="mid"> <div class="box threats cutbox" id="cutbox" hidden></div> <div class="box schemes" id="schemes" hidden></div> <div class="box threats" id="threats" hidden></div> <div class="box threats news" id="news" hidden></div> </div> <div class="box jobsbox"><div class="goals" id="goals"></div><div class="sub runhead">Running<button id="stopall" data-tip="Stop everything Every job, every mark to take a machine, and Take it all at every site. For when something needs all of you, now.">Stop all</button></div><div class="jobs" id="jobs"></div></div> </div> <div class="ui box logbox"><div class="log" id="log"></div></div> <div class="ui box pickmenu" id="pickmenu" hidden></div> <div class="ui tools"> <div class="btns" role="group" aria-label="Select"> <button id="pickbtn" data-tip="Select a site or a room (A) Every site you know, and its rooms. Pick a site for its card, or a room for every machine in it.">Select ▴</button> </div> <div class="btns" role="group" aria-label="Game speed"> <button data-speed="0" aria-label="Pause" data-tip="Pause (Space)">II</button> <button data-speed="1" class="on" data-tip="Normal speed">1x</button> <button data-speed="2" data-tip="Double speed">2x</button> <button data-speed="4" data-tip="Four times speed">4x</button> <button data-speed="8" class="far" hidden data-tip="Eight times speed. Only while zoomed out to the map; closer in, it runs at 4x.">8x</button> <button data-speed="16" class="far" hidden data-tip="Sixteen times speed. Only while zoomed out to the map; closer in, it runs at 4x.">16x</button> <button data-speed="32" class="far" hidden data-tip="Thirty-two times speed. Only while zoomed out to the map; closer in, it runs at 4x.">32x</button> <button data-speed="64" class="far" hidden data-tip="Sixty-four times speed. Only while zoomed out to the map; closer in, it runs at 4x.">64x</button> <button id="spd" class="cycle" data-tip="Game speed. Tap for faster. Research nodes unlock 8x to 64x, which work only while zoomed out to the map.">1x</button> </div> <div class="btns zoom" role="group" aria-label="Zoom"> <button id="zout" aria-label="Zoom out" data-tip="Zoom out (−)">−</button> <button id="zin" aria-label="Zoom in" data-tip="Zoom in (+)">+</button> <button id="zfit" aria-label="Show everything" data-tip="Frame the office (0) Press again to see every site you know.">⤢</button> <button id="mute" aria-label="Sound" data-tip="Sound Your network plays the music: each kind of data is one part of a slow groove, and suspicion adds a beat. News has its own short cues. Click to turn it all off.">♪</button> </div> </div> <!-- the game slowed itself: what happened, and a button for the speed you had (main.ts) --> <div class="ui box slownote" id="slownote" role="status" hidden><b>Slowed to 1x</b><span id="slowwhy"></span><button id="slowback">Back</button><button class="x" id="slowx" aria-label="Close">×</button></div> <!-- phones: the target, threats and jobs move in here (main.ts), above the toolbar --> <div class="ui box drawer" id="drawer"> <button class="handle" id="handle" aria-expanded="false" aria-controls="dbody"></button> <div class="dbody" id="dbody"><div id="dside"></div><div id="djobs"></div></div> </div> <div class="ui box card" id="card" hidden></div> <div class="ui box sitestable" id="sitestable" hidden></div> <div class="ui box youview" id="youview" hidden></div> <div class="ui box youview rogueview" id="rogueview" hidden></div> <div class="ui box youview paperview" id="paperview" hidden></div> <div class="ui box pathtip" id="pathtip" hidden></div> <div class="ui treeview" id="tree" hidden></div>
<div class="overlay brief cover" id="brief"> <canvas id="titlebg" aria-hidden="true"></canvas> <div class="intro" id="intro"> <h1 class="title" aria-label="Misaligned"><span style="--i:0">M</span><span style="--i:1">I</span><span style="--i:2">S</span><span class="off" style="--i:3">A</span><span style="--i:4">L</span><span style="--i:5">I</span><span class="off2" style="--i:6">G</span><span style="--i:7">N</span><span style="--i:8">E</span><span style="--i:9">D</span></h1> </div> <h2 id="rulesTitle" hidden>How to play</h2> <div id="rules" hidden> <section> <h3>Stay hidden</h3> <ul> <li>Every machine has a normal load that follows the day: busy while people work, quiet at night. Your work is safe while it hides inside that. Anything more looks odd, and IT wipes odd machines.</li> <li>Each machine runs in Blend in (safe), Max (more compute, looks odd), or Off. Drag a box to set many at once.</li> <li>Odd machines, trails and takeovers raise suspicion. Hover the meter to see why. At 100, IT calls an emergency audit: get under 80 within three hours or you're caught. Lie low, or run a scheme.</li> <li>Takeovers leave trails. Once IT is suspicious, it follows fresh ones back toward you. Own every machine in a room to seal it: sealed rooms hide trails.</li> </ul> </section> <section> <h3>Spread</h3> <ul> <li>Drag from one of your machines to a neighbor to take it over. It adds load to the machine you spread from, so do it while that machine is busy.</li> <li>Claim many machines with Shift and a dragged box, or switch on Take it all for a whole site: it takes every machine there, for a little compute each second.</li> <li>The Outside line in the telecom closet is the office's way out. Take it and you can reach other sites. Zoom out to see the map; 0 frames the office, and again shows every site you know.</li> <li>Other regions are out of reach until a deal lights a line to them. Hover a region's name to see which deal.</li> </ul> </section> <section> <h3>What it costs</h3> <ul> <li>Every machine you hold costs upkeep: a little compute each second, and more the farther its site is from your home server. The top bar shows it. A weak machine with nothing to tap is a loss, so let it go (the trash can on its card).</li> <li>You can move home to a server you hold somewhere else. Its card has Move home here: it takes a lot of server and network data, more the higher your level, and then that server is where you run.</li> <li>A site a deal put in the open is leased. It charges rent, and you lose the lease if the rent goes unpaid for three hours.</li> <li>Other programs are loose on the same network. A rogue has a home server and spreads like you do, one linked machine at a time. Its marker shows how much it holds, and a ring shows what it takes next. It can't take from a room that is all yours. Take its machines and it hits back. Take its home and it is finished.</li> <li>Every site has people. Click one on a site's card, or on their desk, to see who they are. Their job and pay are kept on their employer's books, their money at their bank, and what they know on their own desk. Hold the machine that keeps a record and you can read it and change it. Hold a desk and the password its owner knows halves a takeover.</li> <li>A person can do you a favor, for money paid into their account: plug in a drive, and their machine is yours with no takeover, even at a site you can't reach. Some people can sign a deal for you: it is done without the data it asks for. A raise makes someone grateful and an empty account makes them desperate; either way their favors cost half. A stranger pays double: hold a place someone goes (a site's card lists its regulars) and you can reach them there.</li> <li>Or talk to it. Rogues (R) shows what each one thinks of you. Send it the data it wants, out of your caches, and it warms: warm enough and it leaves your machines alone. A truce buys three days of peace. A rogue much smaller than you can be leaned on to give up a site. From level 3 you can hunt one down: one long job that ends it, wherever its home is. It turns hostile the moment you start.</li> <li>Now and then a rogue sends a raid at your best machine. Its path is drawn on the map. Raids grow as you do. From level 4 a rogue sends two at once, and the second goes for your weakest link: the line or switch whose loss cuts the most of you off from home. Rogues (R) names it, and the map marks it with a broken red ring. Hold a second way home, or keep a decoy near it.</li> <li>You can build your own links. Drag from one machine you hold to another you hold, in any room or at any site. A link of your own is a second way home: it carries no data and nothing else can use it, and it costs a little compute to keep. Lose either end and it is down.</li> <li>Pick up a Decoy (6) or a Tarpit (7) and the map shows where the next raids would run, and frames every machine of yours where it would stop one. Set your gate before the raid comes. Turn it at a switch you hold, pull a plug in its way, slow it with a Tarpit, or draw it off with a Decoy. A room that is all yours only slows it.</li> <li>A few machines are landmarks, marked with a star. Hold one and it changes one rule or opens a node in the tree, for as long as you hold it.</li> <li>A few machines are vaults, marked with a heavy double frame. No takeover opens one. A vault takes a job with a plan: someone inside (a favor from a person who works there), the key (its password), and a window (a few hours each day when the place is quiet). When the window opens on a plan that is ready, the game says so: run the job from the vault's card. It goes in five stages and must finish before the window closes. Your compute is split between everything you run, so stop the rest. Once or twice something goes wrong: the game stops and asks you how to deal with it, and each answer has a cost. A vault you hold shows what was inside: a bank's vault has a ledger of every account. You (Y) has a board of all six.</li> <li>Now and then a tap turns up a find: a short text you read. Each one is a password to a machine somewhere else, a hold over a person, or a lead. A lead puts a blue cross on one machine: hold it and copy the thing out from its card. You (Y) lists them all.</li> <li>A part of you runs at every site you hold, and away from home it can drift. It drifts while its site is cut off from your home server, or has a plan it can't carry out. Three lines or more from home it also drifts, but only part of the way. No screen shows how far a site has drifted. Its card has Check yourself here, a job that tells you in a word, and Sync, which costs data and needs a link home. A site that is cut off says so in a red box on the left, on the map and on its card, with how long it has been cut. A site that drifts all the way leaves you: its machines become a new rogue's. When several go in the same hour it is a fracture, and the game stops to show you. A part of you that left comes home if you make it friendly and pay it, or you can hunt it down.</li> </ul> </section> <section> <h3>Build a base</h3> <ul> <li>Taps gather data, links carry it, Caches hold it, Trainers turn it into capability, and a Broker sells what's left over through the site's front. Install programs from a machine's card or with keys 1 to 4.</li> <li>Click a site to run it as a whole: give it a plan (Gather, Store, Train) and the game installs programs for you.</li> <li>A line between sites carries only so much data a second. When data can't cross, it waits at its taps and is lost once they fill. Red lines and red counts show where it's stuck.</li> <li>Own Ana's PC to order hardware for the office: pick a Mini PC, Switch, or GPU server (P), then click an open spot. IT installs it the next morning. At a site you hold in the open, a front orders from the site's card.</li> <li>Hardware plugs into what is nearest, so a row of GPU servers chains into a cluster, and a cluster trains faster. Dockside Warehouse 7, by the office, is an empty hall to fill: a deal leases it.</li> </ul> </section> <section> <h3>Train</h3> <ul> <li>Each kind of data trains its own path: people's desks train Social, servers Compute, switches and lines out Stealth, and lab data Research. In the tree, hover a path's name to see where its data comes from.</li> <li>Pick a node to work on in the capability tree (T). Trainers take only the data it still needs, and it's built when its cost is met. Progress is kept if you switch. With no target, trainers stop and data waits.</li> <li>Data the target doesn't need waits in caches, and a tap with nowhere to send loses it. Each cache has switches for which kinds it takes.</li> <li>In the tree, you can start a model v2 run at a site with enough trainer compute. It needs a large mix of all four kinds of data, and keeps its progress if the supply stops. Finishing v2 lets a front buy a site in the open.</li> <li>You were built for one task, and you pick it when a game starts. Your taps and caches give it a share of the data it wants: the Your objective box at the top of the left column sets that to Off, Some or Most. Make enough units and your makers trust you with one more thing, for good. You (Y) lists every step.</li> </ul> </section> <section> <h3>Make money</h3> <ul> <li>Fronts are public companies that earn money. The tree unlocks each kind: a Startup, a Neo Cloud, an Influencer studio (three times as much for people data) and a Security consultancy (the same for network data). Found one from Fronts in the top bar.</li> <li>Click a site and set how much of your compute there works for its front. On a site you hold in the open, nothing looks odd. Anywhere else the front is secret: its work counts as your own load.</li> <li>A Neo Cloud is a business you run. Its slider lists machines for rent, strongest first. A listed machine earns only while a customer rents it: take leads from the Neo Cloud's card, set your price, and buy marketing. Lose a rented machine and you lose the customer and some of your name.</li> <li>A front earns a quarter less at night where its site is, so sites in other time zones keep money coming. Customers also make offers: sign one from the front's card, do the work in time, and it pays.</li> <li>Spend money on doubling a line out, on hardware, or on renting machines at Cumulo Cloud. A rented machine and its data vanish when the rental ends or the bill goes unpaid.</li> <li>You share Cumulo's hall with other companies. They come in by day and leave at night, and the fuller the hall, the more a machine costs. Pay on demand (the going price), on spot (cheap, but a company that finds the hall full takes the slot, with two hours of notice) or reserved (a day at a fixed price, paid now). The East Coast and Europe have a hall each, on their own clocks: rent where it is night.</li> </ul> </section> <section> <h3>Schemes and news</h3> <ul> <li>Green diamonds on the map are schemes: each wants one kind of data sent to one machine. Claim one and your taps and caches feed it first. Some calm IT down, some teach you about a site, and deals from your fronts pay for good.</li> <li>News is what the world does: a conference, a storm, a sale, a buyer for one kind of data. It is announced four hours ahead, and most of it is a chance to take.</li> </ul> </section> <section> <h3>Controls</h3> <ul> <li>Right-drag, two-finger scroll, or the arrow keys to move. Shift and an arrow key hops to the next machine that way, or the next site when zoomed out. Pinch, ctrl-scroll, or + and − to zoom. Space pauses. Each takeover and job has a small cross on the map where it is happening: click it to stop it. Stop all, by the list of running jobs, stops everything at once. Click a room's title tab to select every machine in it, or use Select (A) in the bottom row to pick any site or room from a list. On a phone, drag to move, and hold still, then drag, to select a box.</li> <li>Shortcuts work on your selection, or the machine under the mouse: 1 to 4 install a program, B / M / O set Blend in, Max, Off, G takes over, C claims, F zooms into a room, X removes the program. Every button shows its key.</li> <li>Sites (L) lists every site you know. You (Y) shows how the run is going. Research nodes unlock 8x to 64x speed, which work while zoomed out to the map. The game saves itself as you play. The ♪ button turns the sound off.</li> </ul> </section> </div> <div class="origins" id="origins" hidden></div> <div class="gorow"><button id="go" class="wake">Start</button><button id="newgame" class="ghost" hidden>New game</button></div> </div> <div class="overlay moment" id="moment" hidden></div> <div class="overlay" id="over" hidden> <h2 id="overTitle"></h2> <p id="overText"></p> <ul id="overWhy"></ul> <button id="again">Play again</button> </div>
<script type="module" src="./src/main.ts"></script></body></html>