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.
200 kB · 2027 lines
TypeScript
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581158215831584158515861587158815891590159115921593159415951596159715981599160016011602160316041605160616071608160916101611161216131614161516161617161816191620162116221623162416251626162716281629163016311632163316341635163616371638163916401641164216431644164516461647164816491650165116521653165416551656165716581659166016611662166316641665166616671668166916701671167216731674167516761677167816791680168116821683168416851686168716881689169016911692169316941695169616971698169917001701170217031704170517061707170817091710171117121713171417151716171717181719172017211722172317241725172617271728172917301731173217331734173517361737173817391740174117421743174417451746174717481749175017511752175317541755175617571758175917601761176217631764176517661767176817691770177117721773177417751776177717781779178017811782178317841785178617871788178917901791179217931794179517961797179817991800180118021803180418051806180718081809181018111812181318141815181618171818181918201821182218231824182518261827182818291830183118321833183418351836183718381839184018411842184318441845184618471848184918501851185218531854185518561857185818591860186118621863186418651866186718681869187018711872187318741875187618771878187918801881188218831884188518861887188818891890189118921893189418951896189718981899190019011902190319041905190619071908190919101911191219131914191519161917191819191920192119221923192419251926192719281929193019311932193319341935193619371938193919401941194219431944194519461947194819491950195119521953195419551956195719581959196019611962196319641965196619671968196919701971197219731974197519761977197819791980198119821983198419851986198719881989199019911992199319941995199619971998199920002001200220032004200520062007200820092010201120122013201420152016201720182019202020212022202320242025202620272028import { isGuard, PORT_KEEP, nextStep, coverNow, mineNow, has, NODES, NODE_LIST, PATHS, PATH_LIST, PROGRAMS, pathData, needs, nodeOpen, tapBuffer, tapStuck, cacheSize, staleRate, dataReaches, dataType, trainerBuffer, canInstall, tapActive, tapRate, cleanupTarget, cleanupShares, earlySpare, EARLY_UNTIL, freshTrails, clock, dayOf, hourOf, income, jobFor, levelNeed, BUILDS, BUILD_LIST, orderPrice, orderWork, openBuildSite, sitePlan, billPaid, powerRate, POWER_BACK, type Build, pathOf, canLetGo, deadWeight, roomMachines, share, sourceFor, visible, spareOf, spare, upkeep, upkeepOf, siteHops, rentOf, rogueOf, rogueHeld, rogueCap, stanceOf, STANCES, truceOn, rogueWants, rogueSays, cached, giftBlock, truceBlock, leanBlock, leanSite, GIFT_DATA, TRUCE_DATA, leanSize, leaseGrace, moveNeed, moveBlock, progNeed, takeWork, timeLabel, TRACE_COLD, owned, gateLoad, lostPerMin, siteName, siteOf, claimAtOnce, rogueLook, GLYPH_CHAR, ROGUES, SIZES, BROKER_LOT, buyBlock, sitePrice, clusters, clusterBoost, brokerFront, zoneOf, localHour, regionOpen, openNow, OPEN_HOURS, cooled, COOL_BOOST, newsText, capNow, AUCTION, GOALS, MILESTONES, milestone, CONTRACTS, CONTRACT_FEE, contractNeed, contractHours, contractPay, contractAsk, demoDay, builtShare, AUTO_WAIT, auctionBlock, type LogLine, type LogKind, kindOf, logSince, FRONT_KINDS, FRONT_LIST, payRate, siteData, frontLimit, frontOf, foundBlock, foundCost, orderDesk, type FrontKind, canRent, rentBlock, rentRate, reserveCost, billOf, payBlock, lineCost, siteLines, type Size, START_HOUR, ruseDef, ruseBlock, ruseText, dealPrice, payDealBlock, DEAL_PAY, RUSES, DEAL_BACK, HOUR, NOSCAN, SITE_CALM, FACTORY, type RuseDef, type Ruse, VERSION_2, versionBlock, versionPower, runMoveBlock, PLANS, PLAN_LIST, takeAllCost, takeAllCostAt, takeable, TAKE_ALL_COST, type Plan, resetAt, nodeCost, reps, frontFits, powerFree, powerRoom, powerLoad, powerPrice, powerBlock, unpowered, leaseRate, POWER_STEP, type Goal, type Machine, type Path, type Prog, type State, type Upgrade} from './sim';import { readsMind, personDef, peopleAt, deskOwner, passwordFor, readsJob, readsBank, recordBlock, RECORD_WORK, PAY_MAX, RAISE, moodOf, MOODS, favorsOf, typedToday, ERRAND_HOURS, wayTo, knowsHaunt, isThere, regularsAt, visitorsAt, hhmm, ROLE_NAME, canAct, type RecordVerb } from './people';import { lockAt, witnessesAt, sightingsOf, present, SIGHT_WORD, SIGHT_ODD, DISCREDIT_DAYS, HEAT_WORD, TRACE_WINDOW, forgetWord, hottest, onRoute, msgById, type Message } from './watch';import { RAID, SENTRY, WALL, fate, fire, jobHours, moveKey, moveText, placeOf, raidAt, raidHeld, raidHours, raidMoves, raidStatus, raider, shut, stopText, unplugged, wallOf, weakLink } from './raids';import { DRIFT, drifts, integrities, integrity, syncBlock, cutSites, syncNeed, type Integrity } from './drift';import { CUSTOMERS, PRICES, PRICE_LIST, PUSH, customerName, listedMachines, missedToday, pushBlock, renterOf, rentPay, stock, type Price } from './cloud';import { decide, fwarn, hours, promise, sbtn, slist, srow, sval, type FrontChip, type FrontParts } from './ui-front';import { crisisRows, pressBar, pressLine, pressTab, pressWarn, stageWord } from './ui-press';import { EXPOSE, STAGE_NAMES, pressFor, pressStage, type Answer } from './exposure';import { PAYS, PAY_LIST, PRICE_EMPTY, PRICE_FULL, RESERVE_DAYS, hallCount, hallPrice, priceDay, rentPlan, rentProgs, runOf, slotsAt, tenantOf, type Pay } from './hall.ts';import { HALL_COLS } from './world';import type { DataType } from './world';import { LANDMARKS, allNight, holds, isLandmark, landmarkSays, landmarksAt, nextDoorSite, whereIs } from './landmarks';import { HANGS_ON, WHILE, bizAhead, bizLines, bizOf, bizWord, bled, jobsADay, BACK, backBlock, backPrice } from './sitelife';import { zoomToSite, type View } from './view';import { patch } from './patch';import { act } from './act';import { logoSvg } from './logos';import { findCards, needSays } from './finds';import { behind, locked } from './vaults';import { heldVaultHtml, ledgerView, lockedVaultHtml, vaultBoardHtml } from './ui-vaults';import { operationsHtml } from './ui-operations';import { findsHtml } from './ui-finds';import { logTime, known, moneyRate, siteCount } from './sim';import { taskRing, youTask } from './ui-task';import { shareHtml, wireShare } from './ui-share';import { screen } from './telemetry';import { onePage, opening } from './layers';import { stepsOf } from './task';import { DAY_SECONDS, jobTime, usd, usdDay } from './money';import { forScreen } from './keys';import { tickerLine } from './notice';import { BANK, HOLDINGS, HOLDING_LIST, LOAN, holdOff, holdState, holding, holdings, loanBlock, loanOf, loanSize } from './holdings';
const $ = (id: string) => document.getElementById(id)!;let lastCard = '', cardOf = '', lastJobs = '', lastLog = -1, logOpen = false;export const toggleLog = (on = !logOpen) => { logOpen = on; lastLog = -2; };export const logShown = () => logOpen;/** The open log's filter: every line, or one kind (see kindOf in sim.ts). */let logKind: LogKind | 'all' = 'all';export const setLogKind = (k: string) => { logKind = (['trouble', 'progress', 'story'] as const).find(x => x === k) ?? 'all'; lastLog = -2; };
export function resetUI() { tickSeen = -1; tickUntil = 0; lastFronts = ''; lastCard = ''; lastJobs = ''; lastLog = -1; lastTree = ''; lastTip = ''; lastSus = ''; }
const pct = (x: number) => `${Math.round(x * 100)}%`;const makes = (S: State, m: Machine) => m.power * (S.use[m.id] ?? 0);type Act = { act: string; arg?: string; title: string; desc?: string; sub?: string; on?: boolean; locked?: boolean; warn?: boolean; primary?: boolean; quiet?: boolean }; // primary: the thing to do next, in amber. quiet: rare and final, out of the way
/** The key that does the same thing as each card button (see shortcuts in main.ts). */const PROG_KEY: Record<string, string> = { tap: '1', cache: '2', trainer: '3', broker: '4', firewall: '5', sentry: '6', honeypot: '7' };function keyFor(a: Act) { switch (a.act) { case 'take': return 'G'; case 'claim': case 'unclaim': case 'claimall': case 'claimscheme': return 'C'; case 'build': return a.arg === 'gpu' ? 'P' : ''; case 'zoom': return 'F'; case 'uninstall': return 'X'; case 'letgo': return 'Del'; case 'install': case 'installall': return PROG_KEY[a.arg ?? ''] ?? ''; default: return ''; }}function actsHtml(acts: Act[]) { if (!acts.length) return ''; return `<div class="acts">${acts.map(a => { const key = keyFor(a), text = forScreen([a.desc, a.warn ? a.sub : ''].filter(Boolean).join(' ')), tip = text ? ` title="${text.replace(/"/g, '"')}"` : ''; const sub = a.sub ? `<small class="${a.warn ? 'warn' : ''}">${a.sub}</small>` : ''; const cls = (a.act === 'install' || a.act === 'installall' ? 'act half' : 'act') + (a.warn ? ' warn' : '') + (a.primary ? ' primary' : '') + (a.quiet ? ' quiet' : '') + (a.on ? ' on' : ''); // programs sit two to a row // "Small server · $60K": the name sits on the left and its number on the right const cut = a.title.indexOf(' · '), label = cut < 0 ? `<span>${a.title}</span>` : `<span>${a.title.slice(0, cut)}</span><em>${a.title.slice(cut + 3)}</em>`; if (a.locked) return `<button class="${cls} locked" disabled${tip}>${label}${sub}</button>`; return `<button class="${cls}" data-act="${a.act}" data-arg="${a.arg ?? ''}"${tip}>${label}${key ? `<kbd>${key}</kbd>` : ''}${sub}</button>`; }).join('')}</div>`;}/** A grid of small readouts, each a label over its number: [label, value, hot?, tip?] */const CHIP_TIP: Record<string, string> = { 'use/normal': 'What you use of it, and its normal load now. Your work hides inside the normal load: going over looks odd.', power: 'The power bill here, a day. A building pays for its own machines; you pay for hardware you added, and for all of a site you hold in the open.', spare: 'Compute left after its program. Your jobs share it.', upkeep: 'What holding this costs, in compute a second. It is more the farther the site is from your home server.', odd: 'How odd it looks. Anyone in the room notices a machine that looks odd.', trail: 'A fresh trail. Someone in the room can notice it, and an admin can follow it back toward your home.', runs: 'How much of what its program needs it gets.', buffer: 'Data waiting at this tap. When it is full, new data is lost.', lost: 'Data lost here in the last minute.', holds: 'Data stored here.', data: 'Data waiting in this trainer.', room: 'Machines you hold in this room. Hold them all to seal it.', normal: 'Its normal load right now. Your work hides inside this.', 'up to': 'Compute it makes once it is yours.', carries: 'Data crossing here a second, and the most it can carry.', front: "The share of this machine's work going to its site's front.", rental: 'What this rental costs, or how long it has left.', rented: 'Listed machines a customer is paying for, of all you list. The rest are idle: they earn nothing and run nothing of yours.', demand: 'How much compute customers want right now. Busy in working hours, slow at night, and it drifts over days.', price: 'What new customers pay against the going rate. Cheap wins more of them and earns less from each.', awareness: 'How many people have heard of your Neo Cloud. Marketing raises it. It fades by half in two days.', reputation: 'Your name. It rises when a customer finishes its term and falls when one loses its machine. Big customers only call a good name.',};function chips(items: [string, string, boolean?, string?][]) { return `<div class="chips">${items.map(([k, v, hot, tip]) => { const t = tip ?? CHIP_TIP[k], wide = Math.max(k.length - 2, v.length) > 8; // a long one takes two places return `<span class="${hot ? 'hot' : ''}${wide ? ' wide' : ''}"${t ? ` title="${t}"` : ''}><i>${k}</i>${v}</span>`; }).join('')}</div>`;}/** A site's line out, as a chip: how much it carries. */const lineChip = (S: State, m: Machine): [string, string, boolean?, string?] => ['line', `${m.cap}/s`, false, `Line out\n${siteName(S, siteOf(S, m))}'s line to the outside. Data between sites crosses here, up to ${m.cap} a second.`];/** How odd a machine here may look before the site's own staff reset it, as a chip. None at the office, or while they are calmed. */function resetChip(S: State, site: string): [string, string, boolean?, string?][] { const at = resetAt(S, site); return at === null ? [] : [['reset at', `${at}% odd`, false, `Reset at\n${siteName(S, site)} has its own staff. They reset any machine of yours that looks ${at}% odd or more.`]];}/** A line of plain text. With a tip, the line stays short and the rest is said on hover. *//** A rogue's name in its own colour, after its mark, as every panel writes it. */const rn = (id: string, name: string) => { const L = rogueLook(id); return `<b class="rn" style="--rc:${L.color}">${GLYPH_CHAR[L.glyph]} ${name}</b>`; };/** Every rogue name the log may hold, past ones too, to the rogue it belongs to. */let namesKey = '', namesRe: RegExp | null = null, nameIds = new Map<string, string>();function logNames(S: State, text: string) { const k = S.rogues.map(R => `${R.id}:${R.name}`).join(); if (k !== namesKey) { namesKey = k; nameIds = new Map(); for (const d of ROGUES) for (const n of d.names) nameIds.set(n, d.id); for (const R of S.rogues) nameIds.set(R.name, R.id); namesRe = new RegExp(`\\b(${[...nameIds.keys()].sort((a, b) => b.length - a.length).join('|')})\\b`, 'g'); // names are words and numbers } return namesRe ? text.replace(namesRe, n => rn(nameIds.get(n)!, n)) : text;}const note = (text: string, warn = false, tip = '') => `<p class="note${warn ? ' warn' : ''}"${tip ? ` data-tip="${forScreen(tip).replace(/"/g, '"')}"` : ''}>${forScreen(text)}</p>`;
const TYPE_NAME: Record<DataType, string> = { people: 'people', network: 'network', lab: 'lab', servers: 'server' };const hr = (h: number) => `${Math.floor(h)}${h % 1 >= 0.5 ? ':30' : ''}`;/** A colored word for a kind of data, matching its path in the tree. */const typeWord = (t: DataType, text: string) => `<b class="t-${pathOf(t)}">${text}</b>`;/** A machine's data, drawn and not written, in one row. Three shapes, each in its kind's color: * diamonds are a source and how rich it is (the pips over it on the map), with a bar of the day lit while it gives data and a tick for now; * dots are the kinds it takes; squares are the pieces it holds. The words are in each one's tip. */function dataRow(S: State, m: Machine) { const kinds = Object.keys(TYPE_NAME) as DataType[], tip = (t: string) => ` title="${t.replace(/"/g, '"')}"`; let h = ''; if (m.data) { // a source: here whether you tap it or not, lit while a tap on it gathers const t = dataType(m), rate = `${tapRate(S, m).toFixed(1)}/s`, live = m.prog === 'tap' && tapActive(S, m); const p = S.people.find(q => q.id === m.owner), all = S.upgrades.has('billable') || m.kind === 'files' || m.kind === 'server'; const [from, to] = all ? [0, 24] : p ? [p.arrive, p.leave] : m.kind === 'backup' ? [1, 3.5] : [Math.min(...S.people.map(q => q.arrive)), Math.max(...S.people.map(q => q.leave))]; const when = all ? 'always' : p ? `while ${p.name} works, ${hr(p.arrive)}–${hr(p.leave)}` : m.kind === 'backup' ? 'nightly, 1:00–3:30' : 'while anyone is in'; const now = Math.floor(hourOf(S) * 2) / 2; h += `<span class="dsrc t-${pathOf(t)}${live ? ' live' : ''}"${tip(`${TYPE_NAME[t]} data\nA tap here gathers ${rate} ${when}. It trains ${PATHS[pathOf(t)].name}.${m.prog === 'tap' && !live ? ' Idle now.' : ''}`)}>` + `<b>${'<i></i>'.repeat(m.data)}</b>${rate}<i class="day" style="--a:${(from / 24 * 100).toFixed(1)}%;--b:${(to / 24 * 100).toFixed(1)}%;--n:${(now / 24 * 100).toFixed(1)}%"></i></span>`; } if (m.prog === 'trainer' && !S.versionRun?.active) // what the target still needs: a trainer takes only those kinds h += `<span class="dwant"${tip(S.target ? `Training for ${NODES[S.target].name}\nIt takes only ${kinds.filter(t => needs(S, t)).map(t => TYPE_NAME[t]).join(', ') || 'no more'} data.` : 'No target\nIt takes nothing until you pick a node in the tree.')}>${ kinds.map(t => `<i class="t-${pathOf(t)}${needs(S, t) ? ' on' : ''}"></i>`).join('')}</span>`; const size = m.prog === 'tap' ? tapBuffer(S) : m.prog === 'cache' ? cacheSize(S, m) : m.prog === 'trainer' ? trainerBuffer(S) : m.prog === 'broker' ? BROKER_LOT : 0; if (size) { // what it holds: a square for each place, or one bar when there are too many to count const held = m.prog === 'tap' ? Array<DataType>(Math.min(size, Math.floor(m.acc))).fill(dataType(m)) : m.held, n = (t: DataType) => held.filter(x => x === t).length; const says = m.prog === 'tap' ? `Buffer\n${CHIP_TIP.buffer}` : m.prog === 'broker' ? `Lot\nIt sells when it holds ${BROKER_LOT}.` : `Holds\n${kinds.filter(n).map(t => `${n(t)} ${TYPE_NAME[t]}`).join(', ') || (m.prog === 'trainer' ? 'Nothing. It waits for data.' : 'Nothing yet.')}${m.prog === 'cache' && held.length ? ` It goes stale at ${(staleRate(m) * (holding(S, 'as4') ? 0.5 : 1) * 60).toFixed(1)} a minute.` : ''}`; const cells = size <= 12 ? kinds.flatMap(t => Array(n(t)).fill(`<i class="t-${pathOf(t)} on"></i>`)).join('') + '<i></i>'.repeat(Math.max(0, size - held.length)) : kinds.filter(n).map(t => `<i class="t-${pathOf(t)} on" style="flex:${n(t)}"></i>`).join('') + `<i style="flex:${Math.max(0, size - held.length)}"></i>`; h += `<span class="dheld${tapStuck(S, m) ? ' hot' : ''}"${tip(says)}><b class="${size <= 12 ? '' : 'strip'}">${cells}</b>${held.length}/${size}</span>`; } return h ? `<div class="dataline">${h}</div>` : '';}/** Which kinds of data a cache takes. A click picks one kind alone, or every kind if it is already alone; Shift-click adds or drops a kind. A kind it stops taking is thrown out. */function allowHtml(m: Machine) { const kinds = Object.keys(TYPE_NAME) as DataType[]; return `<div class="allow"><span class="sub">Takes</span>${kinds.map(t => `<button data-act="allow" data-arg="${t}" class="t-${pathOf(t)}${m.refuse.includes(t) ? '' : ' on'}" title="${m.refuse.length === kinds.length - 1 && !m.refuse.includes(t) ? 'Take every kind of data again.' : `Take only ${TYPE_NAME[t]} data. The cache throws out the other kinds it holds.`} Shift-click to add or drop this kind and keep the others.">${TYPE_NAME[t]}</button>`).join('')}</div>`;}/** Which kind crosses an egress first when it's busy. Click the lit one again to clear it. */function prioHtml(m: Machine) { const kinds = Object.keys(TYPE_NAME) as DataType[]; return `<div class="allow"><span class="sub">First</span>${kinds.map(t => `<button data-act="prio" data-arg="${t}" class="t-${pathOf(t)}${m.prio === t ? ' on' : ''}" title="When the line is busy, other kinds leave half its room for ${TYPE_NAME[t]} data.">${TYPE_NAME[t]}</button>`).join('')}</div>`;}/** A cloud hall, drawn small: a square for each slot where it sits in the hall (yours amber, another company's grey, a free one * an outline), then the going price over the hall's day, a bar an hour, with this hour lit. */function hallRow(S: State, site: string) { const n = hallCount(S, site), p = hallPrice(S, site), lh = Math.floor(localHour(S, site)), dear = p >= 1.25; return `<div class="dataline"><span class="dhall" title="Slots in the hall\n${n.all - n.free} of its ${n.all} slots are taken: ${n.yours} yours, ${n.theirs} other companies', ${n.free} free. Companies come in by day and leave at night. The fuller the hall, the more a machine in it costs."><small class="dl">slots</small><b style="--cols:${HALL_COLS}">${ slotsAt(S, site).map(m => `<i class="${m.owned ? 'on' : tenantOf(S, m) ? 'theirs' : ''}"></i>`).join('')}</b>${n.all - n.free}/${n.all}</span>` + `<span class="dprice${dear ? ' hot' : ''}" title="The going price\n${pct(p)} of the list price right now. It runs from ${pct(PRICE_EMPTY)} in an empty hall to ${pct(PRICE_FULL)} in a full one. The bars are today, hour by hour, if you keep the slots you hold."><small class="dl">price</small><b>${ priceDay(S, site).map((v, h) => `<i class="${h === lh ? 'now' : ''}" style="height:${Math.round(v / PRICE_FULL * 16)}px"></i>`).join('')}</b>${pct(p)}</span></div>`;}/** The three ways to pay for a rented machine. For a machine you rent, a way you can't change to is greyed out and says why. */function payPick(S: State, m: Machine | null) { const now = m?.lease?.pay ?? S.hall.pay; return `<div class="pick">${PAY_LIST.map(p => { const why = m && p !== now ? payBlock(S, m, p) : null; const cost = m && p === 'reserved' && p !== now ? ` · ${usd(reserveCost(S, m.lease!.size))}` : ''; return `<button data-act="${m ? 'setpay' : 'hallpay'}" data-arg="${p}" class="${p === now ? 'on' : ''}"${why ? ' disabled' : ''} title="${PAYS[p].tip}${why ? `\nNot now: ${why}.` : ''}">${PAYS[p].name}${cost}</button>`; }).join('')}</div>`;}/** What the hall rents next, before you rent it: a size, how long a reservation runs, and the program it comes up with. */function rentPicks(S: State, sizes = true) { const H = S.hall, progs = rentProgs(S); let h = sizes ? `<div class="pick">${(Object.keys(SIZES) as Size[]).map(z => `<button data-act="hallsize" data-arg="${z}" class="${H.size === z ? 'on' : ''}" title="${SIZES[z].name}\n${SIZES[z].power} compute a second. ${usdDay(leaseRate(S, z))} a day at the list price.">${SIZES[z].name}<small>${SIZES[z].power}/s</small></button>`).join('')}</div>` : ''; h += payPick(S, null); if (H.pay === 'reserved') h += `<div class="pick">${RESERVE_DAYS.map(d => `<button data-act="halldays" data-arg="${d}" class="${H.days === d ? 'on' : ''}" title="Reserve for ${d} day${d > 1 ? 's' : ''}, paid now. After that it goes on at the going price.">${d} day${d > 1 ? 's' : ''}</button>`).join('')}</div>`; h += `<div class="pick">${['', ...progs].map(p => `<button data-act="hallprog" data-arg="${p}" class="${(H.prog ?? '') === p ? 'on' : ''}" title="${p ? `${PROGRAMS[p as Prog].name}\nIt comes up running a ${PROGRAMS[p as Prog].name.toLowerCase()}, with nothing to install: ${PROGRAMS[p as Prog].short}.` : 'No program\nIt comes up empty. A plan for the hall, or you, puts a program on it.'}">${p ? PROGRAMS[p as Prog].name : 'None'}</button>`).join('')}</div>`; return h;}/** What a rental of many costs, in a few words: a day's bill, or what is paid now. */const rentCost = (S: State, plan: { perSec: number; now: number }) => S.hall.pay === 'reserved' ? usd(plan.now) : `${usdDay(plan.perSec)}/day`;/** A hall's card: what you rent next, then Rent 1, 10 and 50 (from the longest run of free slots side by side), * and Pick slots, to drag across the hall for as many as you like. */function rentSection(S: State, site: string) { const free = slotsAt(S, site).filter(m => canRent(S, m)).length; if (!free) return note(S.machines.some(m => m.special === 'account' && m.owned && siteOf(S, m) === site) ? 'No free slot right now. Companies leave at night.' : 'Open an account at the gateway to rent here.'); const H = S.hall, z = SIZES[H.size].name.toLowerCase(), what = (n: number) => `${n === 1 ? `a ${z}` : `${n} ${z}s`}${H.prog ? ` running ${PROGRAMS[H.prog].name.toLowerCase()}${n === 1 ? '' : 's'}` : ''}`; const sizes = [...new Set([1, 10, 50].map(n => Math.min(n, free)))]; const acts: Act[] = sizes.map(n => { const plan = rentPlan(S, runOf(S, site, n)), short = plan.ok < plan.slots.length; return { act: 'rentn', arg: `${site}|${n}`, title: `Rent ${n}`, warn: !plan.ok, primary: n === sizes[sizes.length - 1] && !short, sub: !plan.ok ? `you have ${usd(S.money)}` : `${rentCost(S, plan)}${short ? ` · money for ${plan.ok}` : ''}`, desc: `Rent ${what(n)} at once, ${PAYS[H.pay].name.toLowerCase()}${H.pay === 'reserved' ? ` for ${H.days} day${H.days > 1 ? 's' : ''}` : ''}: free slots side by side, so trainers join up. Each one in fills the hall a little, so the going price rises.` }; }); acts.push({ act: 'rentpick', arg: site, title: 'Pick slots', sub: 'drag across the hall', desc: `Drag across the hall's free slots to rent as many as you cover (${what(2).replace(/^2 /, '')}), or pick one slot to rent just that one. Esc or a right-click puts it down.` }); return rentPicks(S) + actsHtml(acts).replace('class="acts"', 'class="acts two"');}const hoursLeft = (S: State, t: number) => hours(Math.max(0, (t - S.t) / HOUR));/** A slot in a cloud hall that is not yours: who has it, or what you can rent into it. */function rentHtml(S: State, m: Machine) { const site = siteOf(S, m), t = tenantOf(S, m); let h = hallRow(S, site); if (t) return h + note(`<b>${CUSTOMERS[t.who][0]}</b>: ${CUSTOMERS[t.who][1]}. It has this slot for ${hoursLeft(S, t.until)} more.`); if (!canRent(S, m)) return h + note('A free slot. Open an account at the gateway to rent it.'); const pay = S.hall.pay, days = S.hall.days; h += rentPicks(S, false); return h + actsHtml((Object.keys(SIZES) as Size[]).map(size => { const z = SIZES[size], why = rentBlock(S, m, size, pay, days); return { act: 'rent', arg: size, title: `${z.name} · ${z.power}/s`, warn: !!why, sub: why ?? (pay === 'reserved' ? `${usd(reserveCost(S, size) * days)} for ${days > 1 ? `${days} days` : 'a day'}` : `${usdDay(rentRate(S, size, pay, site))}/day`), desc: `Rent a ${z.name.toLowerCase()} (${z.power} compute/s) into this slot${S.hall.prog ? `, running a ${PROGRAMS[S.hall.prog].name.toLowerCase()}` : ''}. It holds no data of its own: feed it through your lines. ${PAYS[pay].tip}` }; }));}/** A labelled part of a card: every card groups what it shows the same way. */function section(label: string, body: string) { return body ? `<div class="sect"><div class="sub">${label}</div>${body}</div>` : ''; }
const TRASH = '<svg viewBox="0 0 16 16" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.5 4h11M6.5 4V2.5h3V4M4 4l.7 9.5h6.6L12 4M6.8 6.5v4.5M9.2 6.5v4.5"/></svg>';/** Moving home: on your home server while you move, where you are going; on a server you hold, the offer to move there. */function homeBody(S: State, m: Machine) { const n = moveNeed(S), kinds = (['servers', 'network'] as DataType[]); const bars = () => `<div class="costs">${kinds.map(t => `<span class="cost t-${pathOf(t)}"><b>${TYPE_WORD[t]}</b>${S.move!.got[t]}/${n[t]}<i style="width:${Math.round(100 * Math.min(1, S.move!.got[t] / n[t]))}%"></i></span>`).join('')}</div>`; if (m.home) return S.move ? note(`Moving to ${S.byId[S.move.to].name} at ${siteName(S, siteOf(S, S.byId[S.move.to]))}.`) + bars() : ''; if (S.move?.to === m.id) return note('Moving here.', false, 'Moving here\nYour taps and caches send it server and network data first, ahead of the tree.') + bars() + actsHtml([{ act: 'stopmove', title: 'Stop the move', quiet: true, desc: 'Stay where you are. What was sent is lost.' }]); const why = moveBlock(S, m); if (why && (why.startsWith('needs') || why.startsWith('a rented') || why.startsWith('take'))) return ''; // not a place you could live if (new Set(owned(S).filter(x => !x.rented && !x.lease).map(x => siteOf(S, x))).size < 2) return ''; // with one site there is nowhere to move, and a new player has enough to read return actsHtml([{ act: 'movehome', title: 'Move home here', warn: !!why, sub: why ?? `${n.servers} server and ${n.network} network data`, desc: `Run from here and not from where you are now. This server takes ${n.servers} server data and ${n.network} network data from your taps and caches, ahead of the tree. The more capable you are, the more there is to move: this is the amount at level ${S.rank}. When it has them, this is home: upkeep is counted from here, and losing this machine loses the game.` }]);}/** A landmark's part of its machine's card: its title, what it is, what it gives, and whether you hold it. */const landmarkSection = (S: State, id: string) => isLandmark(id) ? section('Landmark', note(`<b>${LANDMARKS[id].title}.</b> ${landmarkSays(S, id)}`, false, `${LANDMARKS[id].title}\n${LANDMARKS[id].story}`)) : '';/** What finds say on a machine's card: a lead that marks it and the button to copy the thing out, a password a find gave you, a search. */const findSections = (S: State, m: Machine) => findCards(S, m).map(c => section(c.label, c.text.map(t => note(t)).join('') + actsHtml(c.acts.map(a => ({ act: 'find', arg: a.arg, title: a.title, sub: a.why ?? a.sub, locked: !!a.why, warn: !!a.why, primary: !a.why, desc: a.desc }))))).join('');/** A vault's part of its machine's card (see ui-vaults.ts). Locked: the plan, then the job stage by stage and * what has gone wrong. Yours: what was inside, and a bank's ledger. */const vaultSection = (S: State, m: Machine) => (m.owned ? heldVaultHtml : lockedVaultHtml)(S, m, { section, note, chips, actsHtml });/** A raid and this machine: one short line on what the raid does here, and the moves you can make at this * machine as buttons, best first: the same moves, worked out the same way, as the pin's button on the map * (see raidMoves in raids.ts). A move that would come too late is shown, locked, so you know why it is not there. * A raid your guards hold says so, and needs nothing. */function raidSection(S: State, m: Machine) { const mins = (t: number) => { const n = Math.max(1, Math.ceil((t / HOUR) * 60)); return `${n} minute${n > 1 ? 's' : ''}`; }; const hrs = hours; let h = unplugged(S, m) ? note(`Unplugged for ${mins(m.unplug! - S.t)} more. No work, and no raid can pass.`) : ''; const all = S.raids.flatMap(r => raidMoves(S, r, true)).filter(mv => mv.at === m.id), seen = new Set<string>(); const moves = all.filter(mv => !seen.has(mv.kind) && (seen.add(mv.kind), true)).slice(0, 3); // the best of each kind, three at most: the card stays short const hit = raidAt(S, m.id), r = hit?.raid ?? S.raids.find(x => x.id === moves[0]?.raid), R = r && raider(S, r); if (!r || !R) return h ? section('Raid', h) : ''; const prize = S.byId[r.prize].name, when = hrs(raidHours(S, r)), str = `strength ${Math.max(1, Math.ceil(r.hp))} of ${r.max}`; const tip = `${R.name}'s raid\nIt is after ${prize}, ${str}. Its way is the dashed line on the map. Sentries wear it down, a firewall holds it at a door, a honeypot draws it in. The pin has the best move against it, wherever that is.`; const end = fate(S, r), held = raidHeld(S, r); if (held) h += note(`${R.name}'s raid, ${str}: ${held.replace(' · ', ', ')}.`, false, tip); else if (end.end !== 'prize') h += note(`${R.name}'s raid, ${str}. Held: ${stopText(S, r).replace(/^./, c => c.toLowerCase())}.`, false, tip); else if (r.decoy) h += note(`${R.name}'s raid goes for your honeypot on ${S.byId[r.decoy].name}.`, false, tip); else if (hit?.role === 'prize') h += note(`${R.name}'s raid takes this in ${when}.`, true, tip); else if (hit?.role === 'here') h += note(`${R.name}'s raid is here, ${str}. ${r.path[0] ? `Next: ${S.byId[r.path[0]].name}, in ${mins(r.hopAt - S.t)}.` : ''}`, true, tip); else if (hit) h += note(`${R.name}'s raid passes here, on its way to ${prize} (${when}).`, true, tip); else h += note(`${R.name}'s raid passes near here.`, false, tip); if (m.kind === 'switch' && r.steered.includes(m.id)) h += note(`You turned it here${r.steer[m.id] ? `: out by ${S.byId[r.steer[m.id]].name}` : ''}. Once for each raid.`); const acts: Act[] = moves.map((mv, i) => { const t = moveText(S, mv); return { act: 'move', arg: moveKey(mv), title: mv.kind === 'steer' ? `Out by ${S.byId[mv.to!].name}` : t.title.replace(` on ${m.name}`, '').replace(` at ${m.name}`, ''), sub: t.sub, desc: t.tip, locked: mv.late, primary: i === 0 && !mv.late }; }); return section('Raid', h + actsHtml(acts));}/** A guard's line on its machine's card: how much of a firewall stands, what a sentry is hitting, a honeypot resting. */function guardNote(S: State, m: Machine): string { if (m.prog === 'firewall') { const k = wallOf(m) / WALL.max, on = S.raids.some(r => r.path[0] === m.id && S.t >= r.hopAt); return note(k <= 0 ? 'Firewall down. It grows back while no raid is on it.' : on ? `Firewall holding a raid: ${Math.round(k * 100)}% stands.` : k < 1 ? `Firewall ${Math.round(k * 100)}%, growing back.` : `Firewall standing at ${placeOf(S, m)}.`, k <= 0 || on, `Firewall\nNo raid passes while it stands. A raid wears it down, faster the stronger it is; it grows back ${WALL.regrow} an hour, of ${WALL.max}, while no raid is on it. A sentry beside it gets more hits while it holds.`); } if (m.prog === 'sentry') { const n = S.raids.filter(r => r.at === m.id || S.adj[m.id].includes(r.at)).length; return note(n ? `Firing at ${n > 1 ? `${n} raids` : 'a raid'}: ${fire(S, S.raids.find(r => r.at === m.id || S.adj[m.id].includes(r.at))!.at)} strength an hour.` : 'Sentry on watch: this machine and those linked to it.', false, `Sentry\nTakes ${SENTRY} strength an hour off each raid on this machine or one linked to it. Sentries add up.`); } if (m.prog === 'honeypot') return note((m.trapT ?? 0) > S.t ? `Honeypot resting: draws again in ${Math.ceil((m.trapT! - S.t) / HOUR)}h.` : `Honeypot set: draws raids within ${RAID.lure} links.`, false, `Honeypot\nA raid that comes within ${RAID.lure} links turns toward it and is held ${RAID.trap} hours, then goes on. Then it rests ${RAID.rest} hours.`); return '';}/** The ports of a machine you hold: each link out of it, closed to raids or open. Closed, no raid uses the * link and your data still crosses. Once a rogue is about. */function portsHtml(S: State, m: Machine): string { if (!m.owned || !S.rogues.length) return ''; const ns = S.adj[m.id].filter(id => S.byId[id] && (S.byId[id].owned || S.adj[id].some(x => S.byId[x].owned) || S.byId[id].rival)); if (!ns.length) return ''; return note('Ports: close a link to raids. Your data still crosses.', false, `Ports\nA closed port is a wall to raids: a raid goes round it, and with no way round it forces it open in ${RAID.force} hours. Your own data still crosses. Each costs ${PORT_KEEP}/s to keep closed. Close the ones that make a raid take the long way, past your sentries.`) + actsHtml(ns.map(id => { const o = S.byId[id], closed = shut(S, m.id, id), here = !!m.ports?.includes(id); return closed && !here ? { act: '', title: `${o.name} · closed`, sub: 'at the other end', locked: true, desc: 'Closed at the other end. Open it there.' } : { act: closed ? 'openport' : 'port', arg: id, title: `${o.name}${o.rival ? ' · rogue' : ''}`, sub: closed ? `closed · ${PORT_KEEP}/s` : 'open', desc: closed ? 'Closed to raids. Click to open it again.' : `Open. Click to close this link to raids, for ${PORT_KEEP}/s.`, on: closed } as Act; })).replace('class="acts"', 'class="acts two"');}type Chip = [string, string, boolean?, string?];/** One row of readouts at most. Each takes a place, a long one two; what does not fit is left off, so put what is wrong first. */function chipRow(items: Chip[], slots = 4) { const out: Chip[] = []; let used = 0; for (const c of items) { const w = Math.max(c[0].length - 2, c[1].length) > 8 ? 2 : 1; if (used + w <= slots) { out.push(c); used += w; } } return chips(out);}type Tab = { id: string; label: string; body: string; dot?: boolean };/** A card's parts behind a row of words, so the card stays short: the open one is underlined in amber, and one * that holds the thing to do next has an amber dot. With one part there is no row. */function tabbed(act: string, cur: string, tabs: Tab[]) { const live = tabs.filter(t => t.body); if (!live.length) return ''; const open = live.find(t => t.id === cur) ?? live[0]; if (live.length < 2) return open.body; return `<div class="acts2 tabs2">${live.map(t => `<button data-act="${act}" data-arg="${t.id}" class="${t === open ? 'on' : ''}">${t.label}${t.dot && t !== open ? '<i class="dot"></i>' : ''}</button>`).join('')}</div>` + open.body;}/** Which part of a machine's card is open. It stays put as you click from machine to machine; a machine without it shows its program. */let machineTab = 'prog', machineAt = '';/** A phone's Let go was pressed once on this machine: a second press lets it go. */let lettingGo = '';const esc = (t: string) => t.replace(/"/g, '"');/** A picture button in a row of actions: an icon, a word or number under it, and the words in its tip. * A locked one has no action: a tap shows its tip, which says why. */function atile(act: string, arg: string, icon: string, tip: string, num = '', cls = '', label = tip.split('\n')[0]) { const does = cls.split(' ').includes('locked') ? '' : ` data-act="${act}" data-arg="${arg}"`; return `<button class="atile${cls ? ` ${cls}` : ''}"${does} aria-label="${esc(label)}" data-tip="${esc(forScreen(tip))}">${icon}${num ? `<small>${num}</small>` : ''}</button>`;}/** A row of picture buttons. Fewer than five keep the width of five, so a lone Tap is not a long bar. */const tileRow = (h: string) => `<div class="arow${(h.match(/<button/g) ?? []).length < 5 ? ' few' : ''}">${h}</div>`;/** A machine's programs as one row of pictures, each with its name under it, drawn like the shapes on the map. * The one it runs is lit: click it again to remove it. One that does not fit yet is dashed and says why in its tip. * A Tap is amber on a machine with data and no program: it is what to do there. While the first steps * (nextStep) ask for a program on this machine, that one is amber instead. */function progTiles(S: State, m: Machine) { let h = ''; const step = nextStep(S), asked = step?.at === m ? step.prog ?? null : null; for (const k of Object.keys(PROGRAMS) as Prog[]) { const P = PROGRAMS[k], key = PROG_KEY[k] ? ` (${PROG_KEY[k]})` : ''; if (k === m.prog) { const k2 = k === 'broker' ? brokerFront(S, m) : null, sells = k !== 'broker' ? '' : k2 ? ` It sells through ${frontOf(S, k2)?.name ?? FRONT_KINDS[k2].name}.` : ` No front at ${siteName(S, siteOf(S, m))} to sell through.`; h += atile('uninstall', '', PROG_ICON[k], `${P.name}${key}\n${P.desc}${sells} Click again to remove it.`, P.name, 'on'); continue; } if (k === 'trainer' && m.kind !== 'desk' && !P.on(m)) { h += atile('', '', PROG_ICON[k], `${P.name}\nNeeds 5 compute/s. This one has ${m.power}.`, P.name, 'locked'); continue; } if (!P.on(m)) continue; if (isGuard(k) && !S.rogues.length) continue; // guards against raids: not shown until a rogue has turned up if (k === 'broker' && !S.fronts.length) continue; // sells through a front: not shown until you have one if (!canInstall(S, m, k)) { h += atile('', '', PROG_ICON[k], `${P.name}\nUnlocks at level ${P.level}. ${P.desc}`, `LV ${P.level}`, 'locked'); continue; } const dry = (k === 'trainer' || k === 'cache') && !dataReaches(S, m, k); h += atile('install', k, PROG_ICON[k], `${P.name}${key}\n${P.desc}${k === 'cache' ? ` Here it holds ${cacheSize(S, m)}.` : ''} Installing takes ${P.work} compute${isGuard(k) ? `, and it costs ${P.need}/s to keep` : ''}.${dry ? ' No data reaches here yet.' : ''}`, P.name, asked ? (k === asked ? 'primary' : dry ? 'warn' : '') : dry ? 'warn' : k === 'tap' && !m.prog ? 'primary' : ''); } return h;}/** Machines in a room you can see (yours, and the ones next to them), and how many of those are yours. A room is * sealed only once every machine in it is yours, seen or not. The site card and the Sites table count the same way. */function roomCount(S: State, room: string) { const all = roomMachines(S, room), seen = all.filter(x => known(S, x)), got = all.filter(x => x.owned).length; return { got, seen: seen.length, all: all.length };}function machineCard(S: State, m: Machine) { const take = jobFor(S, 'take', m.id), site = siteOf(S, m), plan = S.plans[site]; const status = m.owned ? (m.prog ? PROGRAMS[m.prog].name : m.home ? 'You' : 'Yours') : take ? 'Taking' : m.claimed ? 'Claimed' : jobFor(S, 'vault', m.id) ? 'The job' : locked(S, m) ? 'Vault' : ''; const tagTip = m.prog ? `${PROGRAMS[m.prog].name}\n${PROGRAMS[m.prog].desc}${plan ? m.hand ? ` Set by hand, so the ${PLANS[plan].name} plan leaves it alone.` : ` The ${PLANS[plan].name} plan set it up.` : ''}` : m.home ? 'You\nYou run here. Lose this machine and you lose. Upkeep is counted from here.' : ''; // over the name: the site, as a way to its card, then whose desk this is, as a way to theirs, or else the room const sits = deskOwner(S, m); const second = sits ? `<button class="link" data-act="person" data-arg="${sits.id}" title="${sits.name}\n${S.citizens[sits.id].employed ? sits.job : 'Let go'}. Open their card: who they are, and what is written down about them.">${sits.name}</button>` : S.rooms[m.room].name; const where = `<button class="link" data-act="site" data-arg="${site}" title="See this site">${siteName(S, site)}</button> · ${second}`; // letting go sits up by the close button as a trash can, out of the way of the program buttons. On a phone, where // a thumb meant for × could land on it, it is plain words at the foot of the card instead, and asks again (style.css) const canGo = canLetGo(m) && !jobFor(S, 'install', m.id), sure = canGo && lettingGo === m.id; if (lettingGo && !sure) lettingGo = ''; const letgo = canGo ? `<button class="x trash" data-act="letgo" aria-label="Let go" title="Let go (Delete)\nGive this machine back. You lose it and what it holds, but its trail goes too: a trace that reaches it goes cold.">${TRASH}</button>` : ''; const letgoFoot = canGo ? `<div class="acts letgo2"><button class="act quiet${sure ? ' sure' : ''}" data-act="letgo" data-tip="${sure ? 'Press again to let it go\n' : 'Let go\n'}Give this machine back. You lose it and what it holds, but its trail goes too: a trace that reaches it goes cold."><span>${sure ? 'Sure? Let go' : 'Let go'}</span></button></div>` : ''; let h = `<div class="head"><div class="sub">${where}</div><h3>${m.name}</h3>${status ? `<span class="tag"${tagTip ? ` title="${esc(tagTip)}"` : ''}>${status}</span>` : ''}${letgo}</div>`; const cover = coverNow(S, m); const rc = roomCount(S, m.room); const room: Chip = ['room', rc.got === rc.all ? 'sealed' : `${rc.got}/${rc.seen}${rc.seen < rc.all ? '+' : ''}`, false, `Room\nYou hold ${rc.got} of the ${rc.seen} machines you can see in ${S.rooms[m.room].name}.${rc.seen < rc.all ? ' There are more you cannot see yet: the ones next to a machine of yours show.' : ''} Hold every one to seal it.`]; const acts: Act[] = []; if (unpowered(S, m)) h += note('Dark: no power for it.', true, `No power\n${siteName(S, site)} feeds ${powerRoom(S, site)} compute of hardware you add, and this is past it. It does no work and draws no bill until you raise the power on the site's card.`);
if (!m.owned) { if (m.rented) return h + rentHtml(S, m); h += chipRow([['normal', pct(cover)], ['up to', `${m.power}/s`], ...(m.kind === 'egress' ? [lineChip(S, m)] : []), ...(m.special === 'account' ? [] : resetChip(S, site)), room]); h += dataRow(S, m); if (m.fw && !has(S, 'admin')) { // name the machine that holds the passwords, if the site has one const keys = S.machines.find(k => k.special === 'admin' && siteOf(S, k) === site); h += note('Hardened: three times the work.', true, `Hardened\nTaking it takes three times as long without the admin passwords.${keys ? ` ${keys.name} holds them.` : ''}`); } const rogue = rogueOf(S, m); if (rogue) h += rogue.home === m.id ? note(`${rn(rogue.id, rogue.name)}'s home.`, true, `${rogue.name}'s home\nTaking it costs far more than a free machine, and finishes ${rogue.name}: everything it holds goes free, and your takeovers get cheaper for good.`) : note(`${rn(rogue.id, rogue.name)} holds this.`, true, `${rogue.name} holds this\nTaking it costs more than a free machine, and ${rogue.name} will hit back. Hold every machine in a room and no rogue can take any of them.`); if (rogue) h += actsHtml([{ act: 'rogues', title: `Deal with ${rogue.name}`, sub: STANCES[stanceOf(rogue)].name.toLowerCase(), desc: `Open the Rogues page: gifts, a truce${rogue.from ? ', bring it home' : ''}${S.rank >= HUNT.level ? ', or hunt it down' : ''}.` }]); for (const R of S.rogues) if (R.next === m.id) { const n = Math.max(1, Math.ceil((R.act - S.t) / HOUR)); h += note(`${rn(R.id, R.name)} takes this in ${n} hour${n > 1 ? 's' : ''}.`, true, `${R.name} is coming\nTake it first if you can reach it.`); } const raid = raidAt(S, m.id), raidBy = raid && raider(S, raid.raid); if (raidBy) h += note(`${raidBy.name}'s raid ${raid.role === 'here' ? 'is here' : 'passes through here'}, on its way to ${S.byId[raid.raid.prize].name}. This machine is not yours, so you can do nothing to it here.`, true); const pw = !locked(S, m) ? passwordFor(S, m) : null; // a vault says so under its key if (pw) h += note(`${pw.name} knows the password: half the work.`, false, `The password\n${pw.name} knows it, and you hold ${S.byId[pw.desk!].name}: taking this is half the work.`); if (m.special === 'cam') h += note('Shows you Dana.', false, 'Lobby camera\nHolding it shows you Dana at all times.'); if (m.special === 'print') h += note('Takes the blame, once.', false, 'A printer\nUseless, mostly. But if IT catches another machine of yours acting up in this room, they blame the printer: they reset it and leave the other machine alone. Once.'); if (m.special === 'admin') h += note("Dana's admin passwords.", false, "Admin passwords\nThis holds Dana's admin passwords. She notices fast when she's sitting at it."); const vault = vaultSection(S, m); // a locked vault: no takeover and no claim, only the job if (vault) return h + landmarkSection(S, m.id) + findSections(S, m) + vault; const back = behind(S, m); if (back) h += note(`Behind the ${back.name}.`, true, `Behind a vault\nWired behind the ${back.name}, a vault. There is no way in until that is yours.`); const src = sourceFor(S, m); if (!src && !m.rival && !visible(S, m)) h += note('Out of reach now.', true, 'Out of reach\nNothing you hold links to it now. You saw it before, so it stays on the map. Take a machine next to it to reach it again.'); if (m.special === 'account') { h += note('A cloud provider.', false, src ? 'A cloud provider\nOpen an account and you can rent machines in its hall, beside its other customers. No trail: you are a paying customer.' : 'A cloud provider\nHold a line out that runs to it, the exchange\'s or a neighbour\'s, to open an account.'); if (src) acts.push({ act: 'account', title: 'Open an account · free', primary: true }); return h + actsHtml(acts); } if (src && !take) acts.push({ act: 'take', title: `Take over · ${takeWork(S, m)}`, primary: true, desc: `From ${src.name}. Leaves a trail. Once yours, it makes up to ${m.power} compute/s.` }); else if (!src) acts.push(m.claimed ? { act: 'unclaim', title: 'Unclaim' } : { act: 'claim', title: 'Claim', desc: 'Take it automatically as soon as you can reach it.' }); return h + actsHtml(acts) + landmarkSection(S, m.id) + findSections(S, m); }
// one row of numbers: how much of the machine you use against its normal load, then anything wrong, then the rest. // The room is left to the map, which marks a sealed room; how a cache goes stale is in the tip of what it holds. const mine = S.use[m.id] ?? 0, tr = S.trail[m.id], up = upkeepOf(S, m), spare = spareOf(S, m), at = resetAt(S, site); const hot: Chip[] = [], rest: Chip[] = []; if (m.prog && m.run < 0.995 && progNeed(S, m) > 0) hot.push(['runs', pct(m.run), true]); if (up > spare + 0.05) hot.push(['upkeep', `${up.toFixed(1)}/s`, true]); else if (up) rest.push(['upkeep', `${up.toFixed(1)}/s`]); if (m.odd >= 1 || at !== null) { // how odd it looks, against where this site's own staff reset a machine const bad = m.odd >= 50 || (at !== null && m.odd >= at * 0.75); (bad ? hot : rest).push(['odd', at === null ? pct(m.odd / 100) : `${Math.round(m.odd)}/${at}%`, bad, `Odd\nHow odd it looks. From ${SIGHT_ODD}%, anyone in the room notices.${at === null ? '' : ` ${siteName(S, site)} has its own staff: they reset any machine of yours that looks ${at}% odd or more.`}`]); } if (tr && tr.noise >= TRACE_COLD) { // one of your first takeovers left it: nobody notices it, so it is not trouble if (tr.soft) rest.push(['trail', pct(tr.noise / 100), false, 'Trail\nA quiet one: your first takeovers go unnoticed. Cleanup still wipes it.']); else hot.push(['trail', pct(tr.noise / 100), true]); } if (m.prog === 'tap' && lostPerMin(S, m.id) > 0) hot.push(['lost', `${lostPerMin(S, m.id)}/min`, true]); if (m.lease?.until != null && m.lease.pay !== 'reserved') hot.push(['goes in', hoursLeft(S, m.lease.until), true, 'Another company takes this slot then. What the machine holds is lost.']); const lead: Chip[] = m.kind === 'egress' ? [['carries', `${(S.gateUse[m.id] ?? 0).toFixed(1)}/${capNow(S, m)}`, gateLoad(S, m) > 0.9, `Carries\nData crossing here a second, of the most it can carry.${gateLoad(S, m) > 0.9 ? ' It is full: data waiting to cross stays at its taps, and is lost once they fill up.' : ''}`]] : []; const cl = m.prog === 'trainer' ? clusters(S)[m.id] : null; if (cl && cl.length > 1) rest.push(['cluster', `${cl.length} · ×${clusterBoost(cl.length).toFixed(2)}`]); if (m.prog === 'trainer' && cooled(S, m)) rest.push(['cooled', `×${COOL_BOOST}`]); if ((S.frontUse[m.id] ?? 0) > 0) rest.push(['front', pct(S.frontUse[m.id])]); if (m.lease?.pay === 'reserved') rest.push(['reserved', `${hoursLeft(S, m.lease.until!)} left`, false, 'Paid for. When the day is up it goes on at the going price.']); else if (m.lease && m.lease.until === null) rest.push(['rental', `${usdDay(billOf(S, m))}/day`, false, 'What this machine takes from your money each day. It moves with how full the hall is.']); h += chipRow([['use/normal', `${pct(Math.min(1, mine))}/${pct(cover)}`, mine > cover + 0.005, `Use / normal\nYou use ${pct(Math.min(1, mine))} of this machine. Its normal load now is ${pct(cover)}: your work hides inside that, and going over looks odd.`], ...lead, ...hot, ['spare', `${spare.toFixed(1)}/s`], ...rest]); h += dataRow(S, m);
// what is wrong, a line each, with the rest in its tip. These stay whatever part of the card is open const wl = weakNow(S); if (wl?.m.id === m.id && S.rogues.some(R => R.home)) h += note(`<b>Your weakest link.</b> Lose it and ${wl.cut} machines are cut off.`, true, `Your weakest link\nWithout it, ${wl.cut} of your machines are cut off from your home server. Drag from a machine on one side of it to a machine on the other, and they have a second way.`); const stuck = tapStuck(S, m); if (stuck) h += note(`<b>Losing data.</b> ${stuck.replace(/^Losing data: /, '').replace(/^./, c => c.toUpperCase())}`, true); if (m.prog === 'broker' && !brokerFront(S, m)) h += note('No front to sell through.', true, `No front\nGive ${siteName(S, site)} a front on the map, and this sells its spare data through it.`); if (m.prog === 'trainer' && S.versionRun?.active) h += note(site === S.versionRun.site ? `${VERSION_2.short} run here: ${versionPower(S, S.versionRun.site).toFixed(1)} of ${VERSION_2.power} compute.` : `${VERSION_2.short} run is at ${siteName(S, S.versionRun.site)}. This waits.`); else if (m.prog === 'trainer' && S.versionRun?.stalled && site === S.versionRun.site) h += note(`${VERSION_2.short} run here is paused: ${versionPower(S, site).toFixed(1)} of ${VERSION_2.power} compute.`, true, `Paused on its own\nIt resumes once this site has ${VERSION_2.power} trainer compute again. Or move it to another site from the tree (T).`); else if (m.prog === 'trainer' && !S.target) h += note('No target.', true, 'No target\nIt takes nothing until you pick a node in the tree (T).'); if (m.prog === 'trainer' && !m.held.length && !dataReaches(S, m, 'trainer')) h += note('No data reaches here.', true, 'No data\nNo data reaches here yet. Put a tap somewhere linked to it.'); const wants = m.lease ? S.hall.wants[m.id] : undefined; if (m.lease && wants !== undefined) h += note(`${customerName(wants)} takes this in ${hoursLeft(S, m.lease.until!)}.`, true, 'Wanted\nPay on demand to keep this slot.');
// the program: a row of pictures, and what a cache takes or which kind crosses a line first let prog = ''; if (plan && m.hand) prog += actsHtml([{ act: 'follow', title: `Follow the ${PLANS[plan].name} plan`, quiet: true, desc: `Set by hand, so the plan leaves it alone. Let the ${PLANS[plan].name} plan set this machine up.` }]); const installing = jobFor(S, 'install', m.id); let row = installing ? '' : progTiles(S, m); if (m.kind === 'egress' && siteLines(S, site).includes(m)) { // the line's own fix, the same as on its site's card const lines = siteLines(S, site), cost = lines.reduce((n, x) => n + lineCost(S, x), 0), short = S.money < cost; row += atile('upgradesite', site, ICONS.double, `${doubleTip(S, site)}`, usd(cost), short ? 'warn' : gateLoad(S, m) > 0.9 ? 'primary' : ''); } if (installing) prog += note(`Installing ${PROGRAMS[installing.prog!].name.toLowerCase()}…`); if (isGuard(m.prog)) prog += guardNote(S, m); if (row) prog += tileRow(row); if (m.prog === 'cache') prog += allowHtml(m); if (m.kind === 'egress') prog += prioHtml(m);
// the rarer parts, each behind its word let order = ''; if (orderDesk(S) === m) { // Ana's PC, or your home server once your makers trust you with orders (see task.ts) const list: Act[] = []; for (const b of BUILD_LIST) { if (BUILDS[b].open) continue; // racks and cooling units only go in a hall you hold in the open const B = BUILDS[b], price = orderPrice(S, b), short = S.money < price; list.push({ act: 'build', arg: b, title: `${B.name} · ${usd(price)}`, warn: short, sub: short ? `you have ${usd(S.money)}` : B.store ? `a cache here holds ${cacheSize(S, B)}` : `${B.power} compute/s`, desc: `${B.desc} Pay ${usd(price)} and ${orderWork(S)} compute for the paperwork; cancel before it goes through and you get the money back. Power: ${usdDay(B.power * powerRate(S))} a day.` }); } order = note('Pick one, then click where it goes, or drag across a room to fill it.', false, `Order hardware\nIt goes in any office room you can see, and plugs into the nearest machines there. IT installs it the next morning. ${m.special === 'orders' ? 'Quietest while Ana is at work.' : 'Your makers let you order from here.'} It goes on the office power bill: a front at the office pays it quietly; with none, people notice.`) + actsHtml(list).replace('class="acts"', 'class="acts two"'); } let links = portsHtml(S, m); { // the links of your own that end here, each with a way to take it down const ways = waysOf(S, m.id), coming = S.jobs.filter(x => x.type === 'link' && (x.node === m.id || x.from === m.id)); if (ways.length || coming.length) links += actsHtml([ ...ways.map(o => ({ act: 'unlink', arg: o, title: `To ${S.byId[o]?.name ?? '?'} · ${linkKeep(S, m, S.byId[o]).toFixed(1)}/s`, sub: 'take it down', desc: 'A link of your own. It counts as a way home, it carries no data, and nothing else can use it. Click to take it down.' })), ...coming.map(x => ({ act: 'canceljob', arg: `${x.id}`, title: `${x.label} · ${Math.floor(100 * x.done / x.work)}%`, sub: 'on its way · stop', desc: 'Stop setting this link up.' }))]); } const rental = m.lease ? hallRow(S, site) + payPick(S, m) + actsHtml([{ act: 'cancel', title: 'End the rental', quiet: true, desc: `Give the machine back now. Its data is lost.${m.lease.pay === 'reserved' ? ' The day you paid for is not paid back.' : ''} If your money runs out, the provider shuts off every machine you pay for by the second.` }]) : ''; const vault = vaultSection(S, m), lm = landmarkSection(S, m.id), finds = findCards(S, m); const more = vault + lm + findSections(S, m), moreLabel = vault ? 'Vault' : lm ? 'Landmark' : finds[0]?.label ?? ''; // a raid here is its own part, first, and open when you come to this machine const raid = S.raids.length || m.unplug ? raidSection(S, m) : ''; if (m.id !== machineAt) { machineAt = m.id; if (raid) machineTab = 'raid'; } return h + tabbed('mtab', machineTab, [ { id: 'raid', label: 'Raid', body: raid, dot: true }, { id: 'prog', label: 'Program', body: prog }, { id: 'rental', label: 'Rental', body: rental }, { id: 'order', label: 'Order', body: order }, { id: 'links', label: 'Links', body: links }, { id: 'home', label: 'Home', body: homeBody(S, m) }, { id: 'more', label: moreLabel, body: more, dot: finds.some(c => c.acts.some(a => !a.why)) }, ]) + letgoFoot;}
function groupCard(S: State, ms: Machine[]) { const mine = ms.filter(m => m.owned), theirs = ms.filter(m => !m.owned); let h = `<div class="head"><div class="sub">Selection</div><h3>${ms.length} machines</h3></div>`; if (mine.length) { const oddest = Math.max(...mine.map(m => m.odd)); h += chips([['yours', `${mine.length}`], ['makes', `${mine.reduce((s, m) => s + makes(S, m), 0).toFixed(1)}/s`], ['oddest', pct(oddest / 100), oddest >= 50]]); } let row = ''; for (const k of Object.keys(PROGRAMS) as Prog[]) { // the same pictures as one machine's card, with how many would take each const n = mine.filter(m => canInstall(S, m, k) && m.prog !== k && !jobFor(S, 'install', m.id)).length; if (n) row += atile('installall', k, PROG_ICON[k], `${PROGRAMS[k].name} ×${n}\n${PROGRAMS[k].desc} ${PROGRAMS[k].work} compute each.`, `${PROGRAMS[k].name} ${n}`); } if (row) h += tileRow(row); if (theirs.length) h += actsHtml([{ act: 'claimall', title: `Claim ${theirs.length}`, desc: 'Take them as soon as you can reach.' }]); return h;}
// ---------- fronts and sites ----------const siteDef = (S: State, id: string) => S.level.map.sites.find(s => s.id === id)!;/** The machines you can see at a site, the ones you own, and the compute they make. *//** What the site card's and the Sites table's "yours" count: the same machines a machine card's room count does. */const YOURS_TIP = 'Yours\nMachines you hold here, of the ones you have seen. More show as you spread.';function siteStats(S: State, id: string) { const { all, mine } = siteCount(S, id); return { all, mine, makes: mine.reduce((s, m) => s + makes(S, m), 0) };}/** What a front earns at these sites right now. */const earnsAt = (S: State, ids: string[]) => S.machines.filter(m => ids.includes(siteOf(S, m))) .reduce((s, m) => s + (S.sites[siteOf(S, m)]?.front === 'neocloud' ? rentPay(S, m) // a Neo Cloud earns only from machines a customer rents : payRate(S, siteOf(S, m)) * m.power * (S.use[m.id] ?? 0) * (S.frontUse[m.id] ?? 0)), 0);
/** A site's data in the shapes of a machine's card (see dataRow): a diamond and what it gathers a second for each kind * of data here, a bar of the site's day lit while it is open with a tick for now, and one bar for all it holds. */function siteDataRow(S: State, id: string, all: Machine[], fr: { name: string } | null) { const kinds = Object.keys(TYPE_NAME) as DataType[], tip = (t: string) => ` title="${t.replace(/"/g, '"')}"`; let h = ''; for (const t of kinds) { const src = all.filter(m => m.data && dataType(m) === t), taps = src.filter(m => m.owned && m.prog === 'tap'); if (!src.length) continue; const now = taps.reduce((n, m) => n + (tapActive(S, m) ? tapRate(S, m) * m.run : 0), 0), most = src.reduce((n, m) => n + tapRate(S, m), 0); h += `<span class="dsrc t-${pathOf(t)}${now > 0 ? ' live' : ''}"${tip(`${TYPE_NAME[t]} data\n${taps.length} of ${src.length} source${src.length > 1 ? 's' : ''} tapped. They gather ${now.toFixed(1)}/s now, and all of them could gather ${most.toFixed(1)}/s.`)}><b><i></i></b>${(taps.length ? now : most).toFixed(1)}</span>`; } const zone = zoneOf(S, id), lh = localHour(S, id), time = `${String(Math.floor(lh)).padStart(2, '0')}:${String(Math.floor((lh % 1) * 60)).padStart(2, '0')}`; if (zone || fr) { // its clock: when it is open, and where the day stands there const [a, b] = allNight(S, id) ? [0, 24] : OPEN_HOURS; const says = `${time} here${zone ? `, ${Math.abs(zone)} hours ${zone > 0 ? 'ahead of' : 'behind'} the office. Its people come and go ${zone > 0 ? 'earlier' : 'later'}` : ''}.` + (fr ? openNow(S, id) ? ` Open ${a}:00 to ${b}:00: ${fr.name} earns in full.` : ` After hours: ${fr.name} earns a quarter less until ${OPEN_HOURS[0]}:00.` : ''); h += `<span class="dclock${fr ? ' front' : ''}${openNow(S, id) ? ' live' : ''}"${tip(`Local time\n${says}`)}><i class="day" style="--a:${(a / 24 * 100).toFixed(1)}%;--b:${(b / 24 * 100).toFixed(1)}%;--n:${(Math.floor(lh * 2) / 48 * 100).toFixed(1)}%"></i>${zone ? time : ''}</span>`; } const size = all.reduce((n, m) => n + (!m.owned ? 0 : m.prog === 'tap' ? tapBuffer(S) : m.prog === 'cache' ? cacheSize(S, m) : m.prog === 'trainer' ? trainerBuffer(S) : m.prog === 'broker' ? BROKER_LOT : 0), 0); if (size) { const held = siteData(S, id), n = kinds.reduce((x, t) => x + held[t], 0); h += `<span class="dheld"${tip(`Data held\n${kinds.filter(t => held[t]).map(t => `${held[t]} ${TYPE_NAME[t]}`).join(', ') || 'Nothing yet.'} The bar is all the room your programs here have for data.`)}><small class="dl">data</small><b class="strip">${ kinds.filter(t => held[t]).map(t => `<i class="t-${pathOf(t)} on" style="flex:${held[t]}"></i>`).join('')}<i style="flex:${Math.max(0, size - n)}"></i></b>${n}/${size}</span>`; } return h ? `<div class="dataline">${h}</div>` : '';}/** A site's own business in one row: how it stands, a bar of the jobs a day that get done, and a short count of the * days until something follows. Trouble is also said in words. */function bizRow(S: State, id: string) { const b = bizOf(S, id), lines = bizLines(S, id); if (!b || b.shut) return lines.map(([text, bad]) => note(text, bad)).join(''); const all = Math.round(jobsADay(S, id)), undone = Math.round(all * (1 - Math.min(1, b.done / b.due))), ahead = bizAhead(S, id); const bad = b.standing === 'struggling' || b.standing === 'failing', plain = (t: string) => t.replace(/<\/?b>/g, '').replace(/"/g, '"'); let h = `<span class="dbiz${bad ? ' hot' : ''}" title="${plain(lines.filter(l => l[0] !== ahead?.text).map(l => l[0]).join(' '))}">${b.standing}</span>`; h += `<span class="dheld" style="--c:var(--bone-dim)" title="Jobs a day\n${all - undone} of ${all} get done.">` + `<b class="strip"><i class="on" style="flex:${all - undone}"></i><i class="lost" style="flex:${undone}"></i></b>${all - undone}/${all}</span>`; if (ahead) h += `<span class="dahead${ahead.bad ? ' hot' : ''}" title="${plain(ahead.text)}">${Array.from({ length: WHILE }, (_, i) => `<i class="${i < WHILE - ahead.days ? 'on' : ''}"></i>`).join('')}</span>`; return `<div class="dataline">${h}</div>` + (bad ? note(lines[0][0], true) + (bled(b) ? note(HANGS_ON) : '') : '');}
/** Pick a front for the sites, and set its share with one slider. */function frontPicker(S: State, ids: string[], after = '', label = 'Compute for the front', tip = 'How much of your compute here works for the front. Its share comes evenly from every machine at the site; your programs run on the rest.') { const cur = ids.map(id => S.sites[id]?.front ?? null), same = cur.every(k => k === cur[0]) ? cur[0] : undefined; const shares = ids.map(id => S.sites[id]?.share ?? 0.25), share = shares.every(v => v === shares[0]) ? shares[0] : null; const add = S.fronts.length < frontLimit(S) && FRONT_LIST.some(k => !foundBlock(S, k)) ? `<button data-act="newfront" title="Found a front\nStart a public company that runs on your compute and earns money.">+ New front</button>` : ''; if (!S.fronts.length) return add ? section('Front', `<div class="pick">${add}</div>`) : ''; let h = `<div class="pick">`; h += `<button data-act="sitefront" data-arg="" class="${same === null ? 'on' : ''}">None</button>`; for (const fr of S.fronts) { const K = FRONT_KINDS[fr.kind], misfit = ids.filter(id => !frontFits(S, fr.kind, id)); h += misfit.length === ids.length ? `<button disabled title="${K.name}: ${K.where}">${logoSvg(fr.kind, 12)}${fr.name}<small>${K.where}</small></button>` : `<button data-act="sitefront" data-arg="${fr.kind}" class="${same === fr.kind ? 'on' : ''}">${logoSvg(fr.kind, 12)}${fr.name}${misfit.length ? `<small>not at ${misfit.map(id => siteName(S, id)).join(', ')}</small>` : ''}</button>`; } h += `${add}</div>`; if (same === null) return section('Front', h); const v = Math.round((share ?? 0.25) * 100); h += `<label class="slider" data-tip="${label}\n${tip}"><span>${label}</span><input type="range" min="0" max="100" step="5" value="${v}" style="--v:${v}%" data-share="${ids.join(',')}"><b>${share === null ? 'mixed' : `${v}%`}</b></label>`; return section('Front', h + after);}const WHOLE = 'It works while the place is whole: its business open, and no rogue inside.';/** A big name's row on its site's card: a seal, the one thing the place does for whoever owns it, and how * that stands with you. The bank's row carries its loan: what it would lend, or what you still owe. */function holdRow(S: State, id: string) { const st = holdState(S, id), H = HOLDINGS[id]; if (st === 'none') return ''; const word = st === 'sale' ? 'buy it for this' : st === 'on' ? 'yours' : `off · ${holdOff(S, id)}`; let h = `<div class="hold ${st}" data-tip="${H.name}\n${H.does.replace(/"/g, '"')} ${st === 'sale' ? 'A front has to buy the place: taking its machines does not get you this. ' : ''}${WHOLE}"><i class="seal"></i><b>${H.name}</b><small>${word}</small><span>${H.does}</span></div>`; if (id !== BANK || st === 'sale') return h; const L = loanOf(S), why = loanBlock(S), size = loanSize(S); if (L) { // a loan being paid back: a bar of what is paid against what is left const all = L.lent * LOAN.back, paid = all - L.owed; h += `<div class="dataline"><span class="dheld" style="--c:var(--amber)" title="Your loan\nPaid back so far, of all you owe. ${usdDay(L.rate)} a day comes out of what you earn until it is paid. A day you earn nothing, it waits."><b class="strip"><i class="on" style="flex:${paid.toFixed(2)}"></i><i style="flex:${L.owed.toFixed(2)}"></i></b>${usd(paid)}/${usd(all)}</span></div>`; } else h += actsHtml([{ act: 'borrow', arg: '', title: size > 0 ? `Borrow ${usd(size)}` : 'Borrow', primary: !why, locked: !!why, sub: why ?? `pay back ${usd(size * LOAN.back)} over ${LOAN.over} days`, desc: `The bank lends you ${LOAN.days} days of what you earn after your bills, now. You pay back ${Math.round((LOAN.back - 1) * 100)}% more over ${LOAN.over} days: ${usd(size * LOAN.back / LOAN.over)} a day, out of what you earn. It never takes the money you already had. One loan at a time.` }]); return h;}function siteCard(S: State, id: string) { const def = siteDef(S, id), st = siteStats(S, id), open = S.publicSites.has(id), sf = S.sites[id]; const fr = sf?.front ? frontOf(S, sf.front) : null; let h = `<div class="head"><div class="sub">Site · ${def.region}</div><h3>${def.name}</h3><button class="x trash zoom" data-act="zoomsite" data-arg="${id}" aria-label="Zoom in" data-tip="Zoom in\nGo to this site on the map, to work on its machines.">${ICONS.zoom}</button><span class="tag" data-tip="${open ? 'Yours in the open\nYou hold this site in the open. Nothing here looks odd. Open compute sells at market rates: a front earns less from it than from secret compute.' : "Secret\nNobody knows you are here. A front's work here counts as your own load, so it hides inside the machines' normal load too. A front earns here only while the site is linked to your server."}">${open ? 'Yours in the open' : 'Secret'}</span></div>`;
// the place: its row of actions, its line out, a row of numbers, what is wrong, and its data let site = siteList(S, id); const bill = S.bills[id] ?? 0, keep = st.mine.reduce((n, m) => n + upkeepOf(S, m), 0); const far = nextDoorSite(S, id) ? 0 : siteHops(S)[id], farSays = far ? `${far} line${far === 1 ? '' : 's'} from your home server: each machine held here costs ${Math.round(far * 50)}% more upkeep and is ${Math.round(far * 50)}% more work to take.` : ''; const leased = st.mine.filter(m => m.lease), rentals = leased.reduce((n, m) => n + billOf(S, m), 0); // a cloud hall: what your rentals here cost a day const I = integrity(S, id), low = !!I && I.v < DRIFT.watch; // the part of you here: its integrity leads the numbers once it is low site += chipRow([...(low ? [['integrity', `${Math.round(I.v)}${I.rate < 0 ? ' ↓' : ''}`, true, `Integrity\n${Math.round(I.v)} of 100, ${integMove(I)}. The Yourself part says why, and syncs it.`] as Chip] : []), ['yours', `${st.mine.length}/${st.all.length}`, false, YOURS_TIP], ...(leased.length ? [['rentals', `${usdDay(rentals)}/day`, false, `Rentals\nWhat your ${leased.length} rented machine${leased.length === 1 ? '' : 's'} here cost a day at this hour's price. A reserved one is paid for already and costs nothing more.`] as Chip] : []), ['makes', `${st.makes.toFixed(1)}/s`], ...(st.mine.length ? [['upkeep', `${keep.toFixed(1)}/s`, keep > st.makes, `${CHIP_TIP.upkeep}${farSays ? ` This site is ${farSays}` : ''}`] as Chip] : []), ...(bill ? [['power', `${usdDay(bill)}/day`, !billPaid(S, id)] as Chip] : []), ...(S.leases[id] ? [['rent', `${usdDay(rentOf(S, id))}/day`, S.leases[id].late > 0] as Chip] : []), ...(fr ? [['earns', `${usdDay(earnsAt(S, [id]))}/day`] as Chip] : []), ...(far && !st.mine.length ? [['far', `+${Math.round(far * 50)}%`, false, `Far\nThis site is ${farSays}`] as Chip] : [])]); if (keep > st.makes) site += note('Costs more than it makes.', true, 'Costs more than it makes\nHolding this site costs more compute than it makes. Keep it for its data or its front, or let the weak machines go.'); for (const R of S.rogues) { const n = st.all.filter(m => m.rival === R.id).length, homeHere = !!R.home && siteOf(S, S.byId[R.home]) === id; const next = R.next && siteOf(S, S.byId[R.next]) === id ? S.byId[R.next] : null; if (homeHere) site += note(`${rn(R.id, R.name)}'s home is here.`, true, `${R.name}'s home\nIt is ${S.byId[R.home!].name}. Take it and ${R.name} is finished.`); else if (n) site += note(`${rn(R.id, R.name)} holds ${n} here.`, true, `${R.name} holds ${n} machine${n > 1 ? 's' : ''} here\nTake them back and it has no way in, but it will hit back.`); if (next) site += note(`${rn(R.id, R.name)} takes ${next.name} next.`, true, `${R.name} takes ${next.name} next${next.owned ? ', and it is yours' : ''}\nA rogue can't take from a room that is all yours.`); } const lease = S.leases[id]; if (lease) site += lease.late > 0 ? note(`Rent unpaid: the lease lapses in ${Math.max(1, Math.ceil((leaseGrace(S) - lease.late) / HOUR))} hours.`, true, 'Rent unpaid\nWhen the lease lapses this site goes secret again and the deal is undone.') : note('Leased.', false, `Leased, not owned\nRent is ${usdDay(rentOf(S, id))} a day. Unpaid for ${leaseGrace(S) / HOUR} hours, the lease lapses. Buying the site ends the rent.`); const dark = st.all.filter(m => unpowered(S, m)).length; if (dark) site += note(`${dark} machine${dark > 1 ? 's' : ''} dark: no power for ${dark > 1 ? 'them' : 'it'}.`, true, `No power\nThis site feeds ${powerRoom(S, id)} compute of hardware you add, and you added more. The newest ${dark > 1 ? `${dark} do` : 'one does'} no work and draw${dark > 1 ? '' : 's'} no bill until you raise the power: Raise, in the site's settings.`); if (S.dark.has(id)) site += note('The power is cut.', true, `The power is cut\nThe bill went unpaid. Nothing here runs until you have ${usd(POWER_BACK)}.`); else if (bill && !billPaid(S, id)) site += note('People notice the power bill.', true, 'Nobody pays the power\nNobody pays for the hardware you added here, so people notice the bill. Give this site a front and it pays it quietly.'); const lock = lockAt(S, id); if (lock) site += note(`Lockdown · ${Math.max(1, Math.ceil(lock.left / HOUR))}H left. ${lock.why}.`, true, `Lockdown at ${def.name}\n${lock.why}. When it runs out, every machine of yours here is wiped and the place is hardened for good. See it off: lie low until nothing looks odd, scrub the trails, keep a witness quiet (their card), let go of machines, or take the site into the open.`); const off = drifts(S, id) ? cutSites(S).find(c => c.site === id) : null; if (off) site += note(`Cut off from home${off.hours ? ` for ${off.hours} hour${off.hours === 1 ? '' : 's'}` : ''}.`, true, 'Cut off from your home server\nNothing you hold links this site to home. A part of you that cannot reach home does not stay you: link it again.'); for (const n of S.news) { // news about this site or its line out: on now, or on its way if (!(n.kind === 'conference' && n.at === id) && !(n.kind === 'storm' && siteOf(S, S.byId[n.at]) === id)) continue; const on = S.t >= n.from, hrs = Math.max(1, Math.ceil(((on ? n.until : n.from) - S.t) / HOUR)); site += note(`${on ? 'Now' : `In ${hrs} hour${hrs === 1 ? '' : 's'}`}: ${newsText(S, n)}${on ? ` ${hrs} hour${hrs === 1 ? '' : 's'} left.` : ''}`, n.kind === 'storm'); } site += siteDataRow(S, id, st.all, fr); for (const lm of landmarksAt(S, id)) site += note(`Landmark: <b>${LANDMARKS[lm].title}</b>, the ${S.byId[lm].name}.`, false, `${LANDMARKS[lm].title}\n${landmarkSays(S, lm)}`); const hall = slotsAt(S, id).length > 0; if (hall) site += hallRow(S, id); // a cloud hall: who is in it, and the going price site += planFollow(S, [id]);
// the business: what the place is, what it does for whoever owns it, how its own work goes, and your front there let biz = note(def.who + '.') + holdRow(S, id) + section('Business', bizRow(S, id)); if (fr && sf?.front === 'neocloud') { // a Neo Cloud lists whole machines for rent: say how many here are rented, idle, and yours const n = stock(S, [id]); biz += frontPicker(S, [id], chips([['rented', `${n.rented}`, false, 'Listed machines a customer pays for.'], ['idle', `${n.idle}`, false, 'Listed machines with no customer. They earn nothing and run nothing of yours.'], ['yours', `${n.yours}`, false, 'Machines here that are not listed. Your programs run on them.']]), 'Listed for rent', 'The slider lists machines for rent, strongest first. A listed machine is held for customers: idle, it earns nothing and runs nothing of yours. A rented one stays listed until its customer is done.'); } else biz += frontPicker(S, [id]);
// who works here, and who comes by const staff = peopleAt(S, id), comers = regularsAt(S, id); let people = ''; if (staff.length || comers.length) { const allRegs = comers.sort((a, b) => +isThere(S, b[1]) - +isThere(S, a[1])), regs = allRegs.slice(0, 10); // the ones here now first people = peopleSection(S, id) + (regs.length ? section('Regulars', `<div class="plist">${regs.map(([c, x]) => `<button data-act="person" data-arg="${c.id}" class="${isThere(S, x) ? 'held' : ''}" title="${c.name} ${x.why}. ${isThere(S, x) ? 'Here now.' : `Here ${x.from}:00 to ${x.to}:00.`} You see them because you hold ${S.byId[x.seen].name}."><b>${c.name}</b><small>${c.job}, ${siteName(S, c.site)} · ${isThere(S, x) ? 'here now' : `${x.from}:00`}</small></button>`).join('')}</div>` + note(`${allRegs.length > regs.length ? `And ${allRegs.length - regs.length} more. ` : ''}People from elsewhere who come here.`, false, 'Regulars\nWhile one is here you can reach them for a favor at the usual price.')) : ''); }
// the part of you that runs here: its integrity, which way it moves and why, a sync, and Keep in sync let self = ''; if (I) self = selfPart(S, I); const order = !openBuildSite(S, id) ? '' : fillSiteHtml(S, id) + actsHtml(BUILD_LIST.map(b => { const B = BUILDS[b], price = orderPrice(S, b, def.rooms[0]), short = S.money < price; return { act: 'buildat', arg: `${b}|${id}`, title: `${B.name} · ${usd(price)}`, warn: short, sub: short ? `you have ${usd(S.money)}` : B.cool ? 'cools 4 trainers' : B.store ? `a cache here holds ${cacheSize(S, B)}` : `${B.power} compute/s`, desc: `${B.desc} A front buys it in the open: no paperwork, and the staff here rack it the next morning. Pick where it goes, or drag across a room to fill it. Power: ${usdDay(B.power * powerRate(S))} a day.` }; })).replace('class="acts"', 'class="acts two"'); return h + tabbed('sitetab', siteTab, [ { id: 'site', label: 'Site', body: site }, { id: 'biz', label: 'Business', body: biz }, { id: 'people', label: 'People', body: people }, { id: 'self', label: 'Yourself', body: self, dot: !!off || (!!I && I.v < DRIFT.watch) }, { id: 'order', label: 'Order', body: order }, { id: 'rent', label: 'Rent', body: hall ? hallRow(S, id) + rentSection(S, id) : '' }, ]);}/** Fill a site you hold in the open with GPU servers in one press: every open spot, emptiest room first, as far as * your money goes, each at the price it would cost placed by hand. */function fillSiteHtml(S: State, id: string) { const plan = sitePlan(S, 'gpu', id), ok = plan.filter(p => p.ok), cost = ok.reduce((t, p) => t + p.price, 0), lit = plan.filter(p => !p.dark).length; if (plan.length < 2) return ''; const say = [`room for ${plan.length}`, ...(lit < plan.length ? [`power for ${lit}`] : []), ...(ok.length < lit ? [`money for ${ok.length}`] : [])]; return actsHtml([{ act: 'fillsite', arg: `gpu|${id}`, title: `Fill with GPU servers · ${ok.length ? `${ok.length} for ${usd(cost)}` : usd(plan[0].price)}`, warn: !ok.length, primary: ok.length >= 2, sub: !lit ? 'no power left: raise it' : !ok.length ? `you have ${usd(S.money)}` : say.length > 1 ? say.join(', ') : `every open spot here`, desc: `Order a GPU server for every open spot here, ${plan.length} in all, as far as the power and your money go. Each costs list price, as it would placed by hand. To fill only part of a room, pick one below and drag across it.` }]);}/** Integrity in a word for its colour: amber once it is slow to follow its plan, red once it keeps its data. */const integCls = (I: Integrity) => I.word === 'estranged' ? 'hot' : I.word === 'wandering' ? 'amber' : '';const perHour = (n: number) => `${Number.isInteger(n) ? n : n.toFixed(1)} an hour`;/** Which way a site's integrity moves, in a few words. */export const integMove = (I: Integrity) => I.rate < 0 ? `falling ${perHour(-I.rate)}` : I.rate > 0 ? `coming back ${perHour(I.rate)}` : I.v >= 100 ? 'whole' : 'holding';/** A site card's Yourself part: the integrity of the part of you here as a number and a bar, which way it moves * and why, and the two ways to send it what it needs: a sync now, and Keep in sync. */function selfPart(S: State, I: Integrity) { const id = I.site, v = Math.round(I.v), cls = integCls(I), need = syncNeed(S), noSync = syncBlock(S, id), cost = `${need.servers} server, ${need.network} network data, ${DRIFT.syncWork} compute`; const causes = I.why.length ? `: ${I.why.join('; ')}` : '', leaves = I.hours < Infinity ? `. At this pace it leaves you in ${hours(I.hours)}` : ''; const head = `<div class="integ" data-tip="${esc(forScreen(`Integrity · ${v} of 100\nHow much the part of you here is still you. Under ${DRIFT.slow} it is slow to follow its plan; under ${DRIFT.keeps} it keeps what its taps gather. At 0 it leaves you and becomes a rogue. It falls only for a cause: cut off from home, a plan nothing here can carry out, or far from home (which only wears it to ${DRIFT.floor}).`))}">` + `<div class="ihead"><b class="${cls}">${v}</b><span>of 100 · ${I.word}</span></div><div class="bar ${cls}"><i style="width:${v}%"></i></div></div>`; const line = note(`${integMove(I).replace(/^./, c => c.toUpperCase())}${causes}${leaves}.`, I.hours < Infinity); const syncTip = `Sync\nSend this site a fresh copy of you: its integrity goes back to 100. It costs ${cost}: the data comes out of your taps and caches at once, then sending it is a job. Stop the job and the data is lost. The site must be linked to your home server.${noSync ? `\nNot now: ${noSync}.` : ''}`; const keepTip = `Keep in sync\nWhile it is on, a fresh copy goes by itself whenever this site is under ${DRIFT.keepAt} and a sync can go. Each costs what a sync costs (${cost}). It cannot reach a site that is cut off.`; const waits = I.keep && I.v < DRIFT.keepAt && noSync && !/on its way/.test(noSync) ? `On · waiting: ${noSync}` : I.keep ? `On · syncs by itself under ${DRIFT.keepAt}` : `Off · a sync by itself under ${DRIFT.keepAt}`; const why = I.cut ? 'Cut off: link it home first' : noSync?.replace(/^./, c => c.toUpperCase()); return head + line + slist( srow('Sync', why ?? `Back to 100 · ${cost}`, sbtn('driftsync', id, 'Sync', v < 100 ? `+${100 - v}` : '', syncTip, noSync ? 'short' : I.v < DRIFT.watch ? 'primary' : ''), !!noSync && I.v < DRIFT.watch) + srow('Keep in sync', waits, `<button class="sctl sw${I.keep ? ' on' : ''}" role="switch" aria-checked="${I.keep}" data-act="driftkeep" data-arg="${id}" data-tip="${esc(forScreen(keepTip))}"><span>${I.keep ? 'On' : 'Off'}</span><i></i></button>`));}/** Machines you set up by hand at sites with a plan: one button hands them back to it. */function planFollow(S: State, ids: string[]) { const hand = S.machines.filter(m => m.owned && m.hand && ids.includes(siteOf(S, m)) && S.plans[siteOf(S, m)]); return hand.length ? actsHtml([{ act: 'follow', title: `Put ${hand.length} set by hand on the plan`, sub: hand.slice(0, 3).map(m => m.name).join(', ') + (hand.length > 3 ? '…' : ''), desc: 'Machines you set up yourself are left alone by the plan. This hands them back to it.' }]) : '';}/** What Take it all does and what it costs now, for the switch on a site card and the one on the map. */export function takeAllTip(S: State, ids: string[]) { const cost = takeAllCostAt(S, ids); return `Take it all\nWhile it is on, every machine here you do not hold is claimed and taken ${claimAtOnce(S)} at a time, cheapest first, when nobody is watching. It costs ${TAKE_ALL_COST} compute a second for each machine still to take (${cost.toFixed(1)} now), and turns off once it is all yours.`;}/** The Plan chip on the map: this site's plan, and what a click does. *//** A region's name on the map: whether it is in reach, and if not, the deal that opens it. */export function regionTip(S: State, name: string) { if (regionOpen(S, name)) return forScreen(`${name}\nIn reach. Click to pick every site you know here.`); const d = RUSES.find(x => x.region === name); if (!d) return `${name}\nOut of reach. Nothing leads there yet.`; const at = S.byId[d.at], kind = TYPE_WORD[d.type]; return `${name}\nOut of reach. A deal lights a line to it: ${d.name}, for ${d.need} ${kind} data sent to ${at.name} at ${siteName(S, siteOf(S, at))}, or ${usd(dealPrice(S, d))}. It turns up there once one of your fronts is earning.`;}/** A site's name on the map is a button. */export const siteNameTip = (S: State, id: string, open: boolean) => `${siteName(S, id)}\n${forScreen(open ? 'Click again to fit this site on the screen.' : "Click to open this site's card.")}`;export function planTip(S: State, id: string) { const p = S.plans[id], next = p ? PLAN_LIST[PLAN_LIST.indexOf(p) + 1] : PLAN_LIST[0]; return forScreen(`${p ? `${PLANS[p].name} plan` : 'No plan'}\n${p ? PLANS[p].desc : 'Nothing is installed for you.'} Click for ${next ? `the ${PLANS[next].name} plan` : 'no plan'}.`);}export function doubleTip(S: State, id: string) { const lines = siteLines(S, id), cost = lines.reduce((n, m) => n + lineCost(S, m), 0), cap = lines.reduce((n, m) => n + capNow(S, m), 0); return `Double the line\nPay ${usd(cost)} and this site's line out carries ${cap * 2} a second, up from ${cap}.${S.money < cost ? ` You have ${usd(S.money)}.` : ''}`;}/** The pictures on a site card's row of actions, drawn like the trash can: thin lines, 16 across. */const ICON = (d: string, more = '') => `<svg viewBox="0 0 16 16" width="18" height="18" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="${d}"/>${more}</svg>`;const DOT = (x: number, y: number, r = 1.3) => `<circle cx="${x}" cy="${y}" r="${r}" fill="currentColor" stroke="none"/>`;const ICONS = { double: ICON('M2 5.5h11M10.5 3 13 5.5 10.5 8M2 10.5h11M10.5 8l2.5 2.5-2.5 2.5'), // two lines out where there was one takeall: ICON('M2 5V2h3M11 2h3v3M14 11v3h-3M5 14H2v-3', '<rect x="5.5" y="5.5" width="5" height="5" fill="currentColor" stroke="none"/>'), // the claim box, full gather: ICON('M3 4h10L8 13z', DOT(8, 7)), // a tap, as the map draws it store: ICON('M3.5 3.5h9M3.5 6.5h9M3.5 9.5h9M3.5 12.5h9'), // a cache train: ICON('M8 2.5A5.5 5.5 0 1 0 13.5 8', DOT(8, 2.5, 1.5) + DOT(8, 6.2, 0.9) + DOT(6.4, 9, 0.9) + DOT(9.6, 9, 0.9)), // a trainer, with the data it holds zoom: ICON('M10.2 10.2 14 14M5.2 7h3.6M7 5.2v3.6', '<circle cx="7" cy="7" r="4.5"/>'), buy: ICON('M10.5 5.2C10 4.2 9.1 3.8 8 3.8c-1.5 0-2.6.8-2.6 2 0 2.9 5.4 1.4 5.4 4.3 0 1.300-1.200 2.100-2.800 2.100-1.300 0-2.300-.500-2.800-1.500M8 2.300v11.400'), weak: TRASH.replace('width="14" height="14"', 'width="18" height="18"'), back: ICON('M8 13.500V6M8 9.500C8 7.300 6.500 6 4 6c0 2.200 1.500 3.500 4 3.500ZM8 7.500c0-2.200 1.400-3.500 4-3.500 0 2.200-1.400 3.500-4 3.500ZM4.500 13.500h7'), // something growing};const GUARD_ICON = { firewall: ICON('M2.5 3h11v5.5L8 13.5 2.5 8.5zM2.5 6.5h11M6 3v3.5M10 6.5v3.5M8 9.5v0'), // a shield of bricks sentry: ICON('M8 1.5v3M8 11.5v3M1.5 8h3M11.5 8h3', '<circle cx="8" cy="8" r="4.2"/>' + DOT(8, 8, 1.2)), // a sight honeypot: ICON('', '<circle cx="8" cy="8" r="5.5"/><circle cx="8" cy="8" r="2.7"/>' + DOT(8, 8, 1.1)), // a target};const PLAN_ICON: Record<Plan, string> = { gather: ICONS.gather, store: ICONS.store, train: ICONS.train, guard: ICON('M8 1.8 13.2 3.8v4.1c0 3-2.3 5.1-5.2 6.3-2.9-1.2-5.2-3.3-5.2-6.3V3.8z', DOT(8, 7.6, 1.4)) };/** Each program's picture: the symbol the map draws inside a machine that runs it. */const PROG_ICON: Record<Prog, string> = { tap: ICONS.gather, cache: ICONS.store, trainer: ICONS.train, broker: ICON('M10.3 4.6C9.9 3.9 9.1 3.5 8 3.5c-1.3 0-2.2.7-2.2 1.6 0 2.4 4.5 1.2 4.5 3.6 0 1-1 1.7-2.300 1.7-1.100 0-2-.5-2.400-1.300M8 2.300v9.200', '<path d="M3 14h10"/>'), ...GUARD_ICON,};/** The row of actions on the card for several sites: Take it all, then the three plans (the lit one is their plan: click it again for none). * One site's card has its list instead (siteList). */function siteActions(S: State, ids: string[]) { const tile = atile; let h = ''; const left = ids.flatMap(id => takeable(S, id)), taking = ids.every(id => S.takeAll.has(id)); if (left.length || taking) h += `<button class="atile${taking ? ' on' : ''}" role="switch" aria-checked="${taking}" aria-label="Take it all" data-act="takeall" data-tip="${esc(takeAllTip(S, ids))}">${ICONS.takeall}<small>${takeAllCostAt(S, ids).toFixed(1)}/s</small></button>`; const cur = ids.map(id => S.plans[id] ?? null), plan = cur.every(p => p === cur[0]) ? cur[0] : undefined; for (const p of PLAN_LIST) h += tile('plan', plan === p ? '' : p, PLAN_ICON[p], `${PLANS[p].name} plan\n${PLANS[p].desc} It installs two at a time, so your compute keeps working.${plan === p ? ' Press again for no plan: nothing is installed for you.' : ''}`, PLANS[p].name, plan === p ? 'on' : ''); return `<div class="arow">${h}</div>`;}/** One site's settings, as a list: each row is a thing about the place, what it is now under its name, * and on the right the one control that changes it. Every control is the same size, in one column. */function siteList(S: State, id: string) { const esc = (t: string) => t.replace(/"/g, '"'), def = siteDef(S, id); const row = (name: string, now: string, ctl: string, hot = false) => `<div class="srow"><div class="sk">${name}${now ? `<small${hot ? ' class="hot"' : ''}>${now}</small>` : ''}</div>${ctl}</div>`; const btn = (act: string, label: string, price: string, tip: string, cls = '') => `<button class="sctl${cls ? ` ${cls}` : ''}" data-act="${act}" data-arg="${id}" data-tip="${esc(tip)}"><span>${label}</span>${price ? `<em>${price}</em>` : ''}</button>`; let h = ''; const left = takeable(S, id), taking = S.takeAll.has(id); if (left.length || taking) h += row('Take it all', `${takeAllCostAt(S, [id]).toFixed(1)}/s`, `<button class="sctl sw${taking ? ' on' : ''}" role="switch" aria-checked="${taking}" data-act="takeall" data-tip="${esc(takeAllTip(S, [id]))}"><span>${taking ? 'On' : 'Off'}</span><i></i></button>`); const plan = S.plans[id] ?? null; h += row('Plan', plan ? PLANS[plan].name : 'None', `<div class="sctl seg">${PLAN_LIST.map(p => `<button data-act="plan" data-arg="${plan === p ? '' : p}" class="${plan === p ? 'on' : ''}" aria-label="${PLANS[p].name} plan" data-tip="${esc(`${PLANS[p].name} plan\n${PLANS[p].desc} It installs two at a time, so your compute keeps working.${plan === p ? ' Press again for no plan.' : ''}`)}">${PLAN_ICON[p]}<small>${PLANS[p].name}</small></button>`).join('')}</div>`); const run = S.versionRun; if (run && !runMoveBlock(S, id)) h += row('Move the run here', `${Math.floor(versionPower(S, id))} trainer compute`, btn('moverun', 'Move', '', `Move the ${VERSION_2.short} run here\nIt is at ${siteName(S, run.site)}${run.active ? '' : ', paused'}. It moves with all its progress, and trainers here take the data it needs.${run.active || run.stalled ? '' : ' It stays paused until you resume it.'} Free.`, 'primary')); const lines = siteLines(S, id); if (lines.length) { const cost = lines.reduce((n, m) => n + lineCost(S, m), 0), cap = lines.reduce((n, m) => n + capNow(S, m), 0), short = S.money < cost; const use = Math.min(cap, lines.reduce((n, m) => n + (S.gateUse[m.id] ?? 0), 0)), full = use > cap * 0.9; h += row('Line out', `${use.toFixed(1)} of ${cap} a second${full ? ' · full' : ''}`, btn('upgradesite', 'Double', usd(cost), `Double the line\nPay ${usd(cost)} and this site's line out carries ${cap * 2} a second, up from ${cap}, starting now.${short ? ` You have ${usd(S.money)}.` : ''}`, short ? 'short' : 'primary'), full); } if ((!S.publicSites.has(id) || S.leases[id]) && def.rooms.some(r => S.machines.some(m => m.room === r && !m.rented))) { const price = sitePrice(S, id), why = buyBlock(S, id), H = HOLDINGS[id]; h += row('Owner', S.leases[id] ? 'Leased to you' : H ? `A big name · ${H.name}` : 'Not you', btn('buy', 'Buy', usd(price), `Buy it\nOne of your fronts buys ${def.name} outright for ${usd(price)}. Every machine there becomes yours, held in the open: nothing there looks odd, and no trails. You pay its power bill.${H ? ` And it is a big name. ${H.name}: ${H.does}` : ''}${why ? ` Not yet: ${why}.` : ''}`, why ? 'short' : 'primary')); } const b = bizOf(S, id); if (b && !b.shut && S.fronts.length) { const why = backBlock(S, id), n = b.backed ?? 0, full = n >= BACK.most, all = Math.round(jobsADay(S, id)), done = Math.round(all * Math.min(1, b.done / b.due)); h += row('Business', `${b.standing[0].toUpperCase()}${b.standing.slice(1)} · ${done}/${all}`, btn('back', full ? 'Backed' : 'Back', full ? `${n}/${BACK.most}` : usd(backPrice(S, id)), `Back it\n${S.fronts[0].name} puts ${usd(backPrice(S, id))} into ${def.name}. A quarter more work comes in from now on, so taps there gather a quarter more, and its least well paid person gets a raise. ${n} of ${BACK.most} so far.${why ? ` Not now: ${why}.` : ''}`, why ? 'short' : ''), b.standing === 'struggling' || b.standing === 'failing'); } if (!powerFree(S, id) && (openBuildSite(S, id) || S.machines.some(m => m.built && siteOf(S, m) === id))) { // a site you build at: what it can feed const room = powerRoom(S, id), soon = powerRoom(S, id, true), load = powerLoad(S, id), why = powerBlock(S, id), price = powerPrice(S, id); const dark = S.machines.filter(m => siteOf(S, m) === id && unpowered(S, m)).length, full = load.now + load.coming >= soon; h += row('Power', `${load.now + load.coming} added, power for ${soon}${soon > room ? ` (${soon - room} tomorrow)` : ''}`, btn('raisepower', 'Raise', usd(price), `Raise the power\nThis site feeds ${room} compute of hardware you add${soon > room ? `, ${soon} from tomorrow at 10:00` : ''}. Its own machines have their own. ${load.now} is in, ${load.coming ? `${load.coming} on its way, ` : ''}and hardware past it stays dark: no work and no bill. Pay ${usd(price)} for a bigger feed: ${POWER_STEP} compute more, from tomorrow at 10:00, with what you order today. Each one here costs more than the last.${why ? ` Not now: ${why}.` : ''}`, why ? 'short' : full || dark ? 'primary' : ''), !!dark); } const weak = deadWeight(S, id); if (weak.length) h += row('Weak machines', `${weak.length} cost more than they make`, btn('dropweak', 'Let go', `${weak.length}`, `Let go of ${weak.length} weak machine${weak.length > 1 ? 's' : ''}\nSaves ${weak.reduce((n, m) => n + upkeepOf(S, m) - spareOf(S, m), 0).toFixed(1)} compute a second. ${weak.map(m => m.name).join(', ')}: no program, nothing to tap, and less compute than upkeep.`, 'danger'), true); return `<div class="slist">${h}</div>`;}function sitesCard(S: State, ids: string[]) { const mine = ids.reduce((n, id) => n + siteStats(S, id).mine.length, 0); let h = `<div class="head"><div class="sub">Selection</div><h3>${ids.length} sites</h3></div>` + siteActions(S, ids); h += chips([['machines yours', `${mine}`], ['earns', `${usdDay(earnsAt(S, ids))}/day`]]); h += note(ids.map(id => siteDef(S, id).name).join(', ') + '.'); return h + planFollow(S, ids) + frontPicker(S, ids);}/** A front's card. How it stands at a glance: what it earns as the one big number, its exposure, one row * of numbers and a line for anything wrong. Then what needs you (each decision a row, with yes or no) and what is * under way. The rest is behind tabs: the kind's own parts, then its sites. What a front is, is the tip on its kind. */let winding: FrontKind | null = null; // the front whose Wind down was clicked once: a second click closes itconst frontTabs: Partial<Record<FrontKind, string>> = {}; // which part of each front's card is openfunction frontCard(S: State, k: FrontKind) { const fr = frontOf(S, k)!, K = FRONT_KINDS[k], cloud = k === 'neocloud'; const sites = Object.entries(S.sites).filter(([, v]) => v.front === k).map(([id]) => id); const kit = { section, note, chips, actsHtml }; // the card's own building blocks, lent to each kind's own business const P: FrontParts = cloud ? cloudParts(S) : k === 'startup' ? startupParts(S, kit) : k === 'studio' ? studioParts(S, kit) : consultParts(S, kit); const st = pressStage(fr), loud = st >= 2, pay = S.frontPay[k] ?? 0; let h = `<div class="head"><div class="sub" data-tip="${esc(`${K.name}\n${K.desc} ${K.perk}`)}">Front · ${K.name}</div><h3>${logoSvg(k, 16)}${fr.name}</h3></div>`; h += `<div class="fpay"><span data-tip="${esc(`Earns\nWhat ${fr.name} earns a day at this moment${cloud ? ': what its customers pay for the machines they rent' : ': its share of your compute, and its own business'}. It moves with the hour.`)}"><b>${usdDay(pay)}</b><small>a day</small></span>` + `<span class="tag${loud ? ' hot' : ''}" data-tip="${esc(`${stageWord(fr)}\nHow much the world knows about ${fr.name}: the bar below, and its Press tab.`)}">${stageWord(fr)}</span></div>` + pressBar(S, fr); h += chipRow(P.chips); h += pressWarn(S, fr); if (!sites.length) h += fwarn('No sites yet', `No sites\n${fr.name} runs on nothing. Give it a site in its Sites tab: open a site on the map and pick this front.`); h += P.warn.join(''); // a customer's offer is a decision; a contract signed is a promise under way const decideRows = [...crisisRows(S, k), ...P.decide], under = [...P.under], c = S.contracts[k], D = CONTRACTS[k]; if (c) { const need = contractNeed(S, k), left = Math.max(0, (c.until - S.t) / HOUR), fee = usd(contractPay(S, k) * CONTRACT_FEE), h = contractHours(S, k); const says = `${D.text} ${contractAsk(S, k)} in ${h} hours. It pays ${usd(contractPay(S, k))}. Fall short and it costs ${fee}.`; const demo = k === 'startup' ? demoDay(S) : null, t = S.target; // a Demo day's bar moves as the node you train fills if (c.on) under.push(promise({ name: D.name, part: demo?.part ?? c.got / need, says: `${Math.floor(c.got)}/${need}${demo ? ` node${need === 1 ? '' : 's'}` : ''} · ${hours(left)}`, pay: usd(contractPay(S, k)), tip: `${D.name}\n${says}${demo ? `\nEnds at ${logTime(S, c.until)}. ${t ? `Training ${NODES[t].name}: ${Math.round(100 * builtShare(S, t))}% built.` : 'Nothing is training: pick a node in the tree (T).'}` : ''}`, hot: left < 3 && c.got < need })); else decideRows.push(decide({ who: D.name, what: `${usd(contractPay(S, k))} · ${contractAsk(S, k)} in ${hours(h)}`, hours: left, tip: `${D.name}\n${says}`, yes: { act: 'contract', arg: k, label: 'Sign', tip: `Sign\nThe clock starts when you sign: ${h} hours.` }, no: { act: 'nocontract', arg: k, tip: 'Turn it down\nNo fee. Another offer comes along later.' } })); } if (decideRows.length) h += section('Needs you', decideRows.join('')); if (under.length) h += section('Under way', under.join('')); // the rest: the kind's own parts, then its sites and the way to close it if (winding !== k) winding = null; const share = (id: string) => Math.round((S.sites[id]?.share ?? 0) * 100); const word = cloud ? 'Listed' : 'Compute'; const siteRows = sites.map(id => { const n = cloud ? stock(S, [id]) : null, v = share(id); const now = `${n ? `${n.rented} rented · ${n.idle} idle · ` : ''}${S.publicSites.has(id) ? 'in the open' : 'secret'}${openNow(S, id) ? '' : ' · after hours'}`; const step = (d: number, label: string) => `<button data-act="frontshare" data-arg="${id}|${d}" aria-label="${label}" data-tip="${esc(`${label}\n${cloud ? `List ${d > 0 ? 'more' : 'less'} of ${siteName(S, id)} for rent, a quarter at a time: strongest machines first. A rented machine stays listed until its customer is done.` : `Give ${fr.name} ${d > 0 ? 'more' : 'less'} of your compute at ${siteName(S, id)}, a quarter at a time. Your programs run on the rest.`}`)}">${d > 0 ? '+' : '−'}</button>`; return srow(siteName(S, id), now, `<div class="sctl seg">${step(-1, 'Less')}<button data-act="site" data-arg="${id}" data-tip="${esc(`${word} · ${v}%\n${cloud ? 'How much of the site is listed for rent. A listed machine is held for customers: idle, it earns nothing and runs nothing of yours.' : `How much of your compute here works for ${fr.name}.`} Press to open the site.`)}">${v}%</button>${step(1, 'More')}</div>`); }).join(''); const close = srow('Close it', 'For good', sbtn(winding === k ? 'closefront' : 'windfront', k, winding === k ? 'Sure?' : 'Close', '', `${winding === k ? 'Press again to close it\n' : 'Close it\n'}Close ${fr.name} for good, to make room for another kind of front. Its sites lose their front${c?.on ? ', its contract is broken for a fee,' : ''} and its run of kept contracts is forgotten. Deals it struck still stand.`, 'danger')); const sitesTab = (sites.length ? `<div class="slist fsites"><div class="shead"><span>Site</span><span>${word}</span></div>${siteRows}</div>` : note('Open a site on the map and pick this front.')) + slist(close); return h + tabbed('fronttab', frontTabs[k] ?? '', [...P.tabs, { id: 'press', label: 'Press', body: pressTab(S, k), dot: st >= 2 && !fr.press?.crisis }, { id: 'sites', label: 'Sites', body: sitesTab, dot: !sites.length }]);}/** A Neo Cloud's own parts: its numbers, what you set to win customers (price, marketing, the auction), and every * listed machine with who rents it, then who left. Customers who call sign at once when an idle machine fits them. */function cloudParts(S: State): FrontParts { const C = S.cloud, st = stock(S), fr = frontOf(S, 'neocloud')!, left = (t: number) => hours(Math.max(0, (t - S.t) / HOUR)); const chipsOut: FrontChip[] = [['rented', `${st.rented} of ${st.rented + st.idle}`, st.rented + st.idle === 0], ['demand', pct(C.demand)], ['awareness', `${Math.round(C.awareness)}%`], ['reputation', `${Math.round(C.reputation)}%`]]; const warn: string[] = [], miss = missedToday(S); if (!st.rented && !st.idle && Object.values(S.sites).some(v => v.front === 'neocloud')) warn.push(fwarn('Nothing listed', `Nothing listed\n${fr.name} has nothing to rent, so nobody calls. List some of a site in its Sites tab.`)); if (miss.n) warn.push(fwarn(`Missed ${miss.n} today · needed ${miss.short} more idle`, `Missed customers\n${miss.n} customer${miss.n > 1 ? 's' : ''} called today and went elsewhere: nothing idle could hold ${miss.n > 1 ? 'them' : 'it'}. The biggest needed ${miss.short} more idle compute than you had. List more at its sites, or order bigger machines.`, true)); // what you set: the price, marketing, and the auction while it is there const why = pushBlock(S), price = `<div class="sctl seg words">${PRICE_LIST.map(p => `<button data-act="cloudprice" data-arg="${p}" class="${C.price === p ? 'on' : ''}" data-tip="${esc(`${PRICES[p].name}\n${PRICES[p].tip} A customer keeps the price it signed at.`)}">${PRICES[p].name}</button>`).join('')}</div>`; let market = srow('Price', C.price === 'fair' ? 'The going rate' : C.price === 'cheap' ? '30% under: more customers' : '40% over: fewer customers', price) + srow('Marketing', `Awareness ${Math.round(C.awareness)}% · fading`, sbtn('cloudpush', '', 'Push', usd(PUSH.cost), `Marketing push\nBuy ads. Awareness goes up ${PUSH.gain} at once, then fades by half in two days. More awareness brings more customers, and small ones who sign up by themselves.${why ? ` Not now: ${why}.` : ''}`, why ? 'short' : '')); if (!S.schemes.has('auction')) { const no = auctionBlock(S); market += srow('Surplus auction', no ?? `Wins ${AUCTION.power} compute/s to keep`, sbtn('auction', '', 'Bid', usd(AUCTION.cost), `Surplus auction\n${fr.name} bids on a pallet of used GPUs: ${usd(AUCTION.cost)}, and ${AUCTION.work} compute of your time. It wins a ${AUCTION.power} compute/s machine, racked in an empty cloud slot and yours to keep in the open. No rent.${no ? ` Not now: ${no}.` : ''}`, no ? 'short' : ''), !!no && !/earning/.test(no)); } // every listed machine, rented first, then who left and why const ms = listedMachines(S), idle = ms.filter(m => !renterOf(S, m)); let rentals = ms.filter(m => renterOf(S, m)).map(m => { const c = renterOf(S, m)!, site = siteOf(S, m), at = siteName(S, site), pay = rentPay(S, m); return srow(m.name, `${customerName(c.who)} · ${left(c.until)} left`, sval(pay > 0 || openNow(S, site) ? `${usdDay(pay)}/day` : 'after hours', pay > 0 ? '' : 'dim'), false, `${m.name} · ${at}\nRented to ${customerName(c.who)}: ${CUSTOMERS[c.who][1]}. It wants ${c.need} compute and pays for what the machine does${S.publicSites.has(site) ? '' : ': at a secret site, only inside its normal load, so little after hours'}.`); }).join(''); if (idle.length) rentals += srow(`${idle.length} idle`, idle.map(m => m.name).join(', '), sval(`${idle.reduce((n, m) => n + m.power, 0)} compute`, 'dim'), false, `Listed and idle\n${idle.map(m => `${m.name} (${siteName(S, siteOf(S, m))})`).join(', ')}. They earn nothing and run nothing of yours until a customer rents them.`); if (!ms.length) rentals = srow('Nothing listed', 'List some of a site in its Sites tab', ''); const gone = C.gone.map(g => { const ago = (S.t - g.t) / HOUR; return srow(customerName(g.who), `${ago >= 1 ? `${hours(ago)} ago` : 'just now'} · ${g.why}`, sval(g.paid >= 1 ? usd(g.paid) : '—', 'dim'), g.bad, `${customerName(g.who)}\n${g.why}${g.paid >= 1 ? ` It paid ${usd(g.paid)} in all.` : ''}`); }).join(''); return { chips: chipsOut, warn, decide: [], under: [], tabs: [{ id: 'market', label: 'Market', body: slist(market) }, { id: 'rentals', label: `Rentals · ${st.rented}`, body: slist(rentals) + (gone ? section('Left', slist(gone)) : '') }] };}/** Names typed into the found card, kept while the card redraws. */const draft: Partial<Record<FrontKind, string>> = {};const suggest = (k: FrontKind) => { const ns = FRONT_KINDS[k].names; return ns[Math.floor(Math.random() * ns.length)]; };/** Where the money to found a front comes from: what your fronts earn (a Startup costs only compute), or the company card. */function foundMoney(S: State, k: FrontKind): string { const card = stepsOf(S).find(x => x.perk === 'card' && !x.earned); const from = S.fronts.length ? `What your fronts earn pays for it${S.pay > 0 ? `: ${usdDay(S.pay)} a day now` : ', once they earn'}.` : k === 'startup' ? 'Money comes from what your fronts earn.' : `Money comes from what fronts earn, and a Startup costs only compute: found one first${S.upgrades.has('pitch') ? '' : ` (${NODES.pitch.name} in the tree)`}, and what it earns pays for this.${frontLimit(S) < 2 ? ` Running two at once takes ${NODES.holding.name}.` : ''}`; return `You have ${usd(S.money)}. Fronts are paid for with money. ${from}${card ? ' Or the company card, a trust step of your task (on the You page), makes founding free.' : ''}`;}function foundCard(S: State) { let h = `<div class="head"><div class="sub">Fronts · ${S.fronts.length} of ${frontLimit(S)}</div><h3>Found a front</h3></div>`; h += note('A front is a public company that runs on your compute and earns money. Give it sites, then set how much of your compute there works for it.'); for (const k of FRONT_LIST) { const K = FRONT_KINDS[k], why = foundBlock(S, k), fr = frontOf(S, k); h += `<div class="found"><b>${K.name}</b>${note(`${K.desc} ${K.perk}`)}`; if (fr) h += note(`Running as ${fr.name}.`); else { draft[k] ??= suggest(k); const cost = [K.work ? `${K.work} compute` : '', foundCost(S, k) ? `${usd(foundCost(S, k))}` : ''].filter(Boolean).join(' and ') || 'free'; h += `<div class="name"><input data-name="${k}" value="${draft[k]!.replace(/"/g, '"')}" maxlength="28" aria-label="Name"${why ? ' disabled' : ''}><button data-act="reroll" data-arg="${k}" title="Suggest another name"${why ? ' disabled' : ''}>↻</button></div>`; const broke = !!why && S.money < foundCost(S, k); // short of money: say where money comes from, since nothing else in the game does h += actsHtml([{ act: 'found', arg: k, title: `Found · ${cost}`, locked: !!why, warn: !!why, sub: broke ? `You have ${usd(S.money)}` : why ?? 'starts on a quarter of your compute at one site', desc: broke ? foundMoney(S, k) : undefined }]); } h += `</div>`; } return h;}// ---------- the sites table ----------let tableOpen = false, lastTable = '', sortBy = 'makes';export const toggleSites = (open = !tableOpen) => { if (open && !tableOpen) { opening('sites'); screen('page', 'sites'); } tableOpen = open; lastTable = ''; };onePage('sites', () => { tableOpen = false; lastTable = ''; });export const sitesShown = () => tableOpen;export const sortSites = (k: string) => { sortBy = k; lastTable = ''; };/** Every site you know, one row each: what it holds, makes, and earns, and where there is trouble. Click a row to pick it. */export function renderSitesTable(S: State, V: View) { const el = $('sitestable'); if (!tableOpen) { el.hidden = true; return; } const ints = new Map(integrities(S).map(i => [i.site, i])), home = S.machines.find(m => m.home); const rows = S.level.map.sites.filter(s => siteKnown(S, s.id)).map(s => { const st = siteStats(S, s.id), held = siteData(S, s.id), sf = S.sites[s.id], fr = sf?.front ? frontOf(S, sf.front) : null; const lost = st.all.reduce((n, m) => n + lostPerMin(S, m.id), 0), odd = Math.max(0, ...st.mine.map(m => m.odd)); const keep = st.mine.reduce((n, m) => n + upkeepOf(S, m), 0), magpie = st.all.filter(m => m.rival).length; const here = S.rogues.find(R => R.home && siteOf(S, S.byId[R.home]) === s.id)?.name ?? '', late = S.leases[s.id]?.late ?? 0; return { s, st, held, fr, share: sf?.share ?? 0, lost, odd, keep, magpie, here, late, biz: bizWord(S, s.id), self: ints.get(s.id), home: !!home && siteOf(S, home) === s.id, data: Object.values(held).reduce((a, b) => a + b, 0), earns: fr ? earnsAt(S, [s.id]) : 0 }; }); const key: Record<string, (r: typeof rows[number]) => number> = { name: () => 0, yours: r => r.st.mine.length, makes: r => r.st.makes, keep: r => r.keep, data: r => r.data, earns: r => r.earns, trouble: r => r.lost * 10 + r.odd + r.magpie * 50 + (r.here ? 200 : 0) + (r.late ? 300 : 0) + (r.biz ? 100 : 0) + (r.self && r.self.v < DRIFT.watch && (r.self.hours < Infinity || r.self.word === 'estranged') ? 400 - r.self.v : 0), self: r => r.self ? 101 - r.self.v : r.home ? 0.5 : 0, // the lowest first, then home }; rows.sort((a, b) => key[sortBy](b) - key[sortBy](a) || a.s.name.localeCompare(b.s.name)); const far = new Set(rows.map(r => r.s.region)).size > 1; // say where each site is once you know more than one region const th = (k: string, label: string, more = false) => `<th data-sort="${k}" class="${sortBy === k ? 'on' : ''}${more ? ' c-more' : ''}" tabindex="0"${sortBy === k ? ` aria-sort="${k === 'name' ? 'ascending' : 'descending'}"` : ''}>${label}</th>`; const kinds = Object.keys(TYPE_NAME) as DataType[]; const body = rows.map(r => `<tr data-site="${r.s.id}" class="${V.sites.has(r.s.id) ? 'on' : ''}" tabindex="0"> <td class="c-name"><b>${r.s.name}</b><small>${S.publicSites.has(r.s.id) ? 'in the open' : 'secret'}${far ? ` · ${r.s.region}` : ''}</small></td> <td class="c-yours" data-l="Yours">${r.st.mine.length}/${r.st.all.length}</td> <td class="c-makes" data-l="Makes">${r.st.makes.toFixed(1)}/s</td> <td class="c-more">${r.keep ? `${r.keep.toFixed(1)}/s` : '<small>none</small>'}</td> <td class="c-more">${kinds.filter(t => r.held[t]).map(t => typeWord(t, `${r.held[t]} ${TYPE_NAME[t]}`)).join(' ') || '<small>none</small>'}</td> <td class="c-more">${S.plans[r.s.id] ? PLANS[S.plans[r.s.id]].name : '<small>by hand</small>'}</td> <td class="c-more">${r.fr ? `${r.fr.name} <small>${Math.round(r.share * 100)}%</small>` : '<small>none</small>'}</td> <td class="c-earns" data-l="Earns">${r.fr ? `${usdDay(r.earns)}/day` : ''}</td> <td class="c-more c-self">${r.self ? `<b class="${integCls(r.self)}">${Math.round(r.self.v)}${r.self.rate < 0 ? ' ↓' : r.self.rate > 0 ? ' ↑' : ''}</b>${r.self.keep ? '<small>kept in sync</small>' : ''}` : r.home ? '<small>home</small>' : ''}</td> <td class="c-trouble" data-l="Trouble">${[r.self && r.self.v < DRIFT.watch && (r.self.hours < Infinity || r.self.word === 'estranged') ? `<em>integrity ${Math.round(r.self.v)}${r.self.hours < Infinity ? ' · falling' : ''}</em>` : '', r.lost ? `<em>losing ${r.lost}/min</em>` : '', r.odd >= 50 ? `<em>odd ${Math.round(r.odd)}%</em>` : '', r.late ? `<em>rent unpaid</em>` : '', r.here ? `<em>${r.here}'s home</em>` : '', r.magpie ? `<em>rogues hold ${r.magpie}</em>` : '', r.biz ? `<em>${r.biz}</em>` : ''].filter(Boolean).join(' ') || '<small>quiet</small>'}</td></tr>`).join(''); const h = `<div class="head"><div class="sub">Sites · ${rows.length} known</div><button class="x" data-act="closesites" aria-label="Close">×</button></div> <table><thead><tr>${th('name', 'Site')}${th('yours', 'Yours').replace('<th ', `<th title="${YOURS_TIP}" `)}${th('makes', 'Makes')}${th('keep', 'Upkeep', true)}${th('data', 'Data held', true)}<th class="c-more">Plan</th><th class="c-more">Front</th>${th('earns', 'Earns')}${th('self', 'Integrity', true).replace('<th ', `<th title="Integrity: how much the part of you at each site away from home is still you, of 100. An arrow says which way it moves. Open a site's Yourself part to sync it." `)}${th('trouble', 'Trouble')}</tr></thead><tbody>${body}</tbody></table>`; el.hidden = false; if (h !== lastTable) { lastTable = h; patch(el, h); }}
// ---------- people: who they are, and what is written down about them ----------/** Which half of a site's card is showing. It stays put as you click from site to site. */let siteTab = 'site';/** Open site cards on their Yourself part: for Needs you's Drifting row. */export const showSelf = () => { siteTab = 'self'; lastCard = ''; };/** Who works at a site. Click one for their card. */function peopleSection(S: State, site: string) { const ps = [...peopleAt(S, site), ...visitorsAt(S, site)]; if (!ps.length) return ''; const inNow = (c: ReturnType<typeof personDef>) => present(S, c); return section('People', `<div class="plist">${ps.map(c => { const p = S.citizens[c.id]; const desk = c.desk ? S.byId[c.desk] : null, seen = sightingsOf(S, c.id).length, here = inNow(c); const eye = seen ? ' <i class="seeneye" title="Has seen something of yours">◉</i>' : ''; const when = here ? 'here now' : `${hhmm(c.hours[0])}–${hhmm(c.hours[1])}`; return `<button data-act="person" data-arg="${c.id}" class="${desk?.owned ? 'held' : ''}${here ? ' innow' : ''}" title="${ROLE_NAME[c.role]}. ${here ? 'In now.' : `In ${when}.`} ${desk ? (desk.owned ? `You hold their desk: ${desk.name}.` : `Their desk is ${desk.name}.`) : 'No machine of their own.'}${seen ? ` Has seen ${seen} thing${seen > 1 ? 's' : ''} of yours.` : ''}"><b>${c.name}${eye}</b><small>${p.employed || c.role === 'witness' ? `${c.job} · ${when}` : 'let go'}</small></button>`; }).join('')}</div>` + (witnessesAt(S, site).length ? note(`People here have seen something of yours.`, true, 'Sightings\nSomeone noticed a takeover, a fresh trail, a machine acting odd, or hardware that appeared. Two who compare notes, or one who can act (an admin, a manager, an owner), start a lockdown. Keep them quiet, or let the evidence fade: scrub, lie low, let go.') : ''));}/** How you reach someone, in a word: the long form is in the chip's tip. */function reachWord(S: State, c: ReturnType<typeof personDef>) { if (readsMind(S, c)) return 'desk'; if (readsJob(S, c)) return 'books'; if (readsBank(S, c)) return 'bank'; return c.haunts.some(x => S.byId[x.seen]?.owned && isThere(S, x)) ? 'there now' : 'stranger · ×2';}/** Someone's day as one strip of 24 hours: their work at home, each place you know they go * (bright where you hold the machine that sees them), and a tick for the hour there now. */function dayStrip(S: State, c: ReturnType<typeof personDef>, known: ReturnType<typeof personDef>['haunts']) { const now = localHour(S, c.site), pct = (h: number) => (100 * h / 24).toFixed(2); const spans = known.map(x => `<i class="${S.byId[x.seen].owned ? 'held' : 'out'}" style="left:${pct(x.from)}%;width:${pct(x.to - x.from)}%"></i>`).join(''); return `<div class="daystrip" data-tip="${c.name.split(' ')[0]}'s day, midnight to midnight. Bright: a place where you hold the machine that sees them. The line is the hour there now.">${spans}<b style="left:${pct(now)}%"></b>${[6, 12, 18].map(h => `<u style="left:${pct(h)}%"></u>`).join('')}</div>`;}/** One person. First what they can do for you, since that is the reason to care. Then how they are, * which sets the price. Then each record about them, with what changing it gets you. A record you * can't read says where it is kept. */function personCard(S: State, id: string) { const c = personDef(S, id), p = S.citizens[id], site = siteName(S, c.site), first = c.name.replace(/^(Dr\.|Prof\.|Captain) /, '').split(' ')[0]; const kept = (mid: string) => `${S.byId[mid].name} at ${siteName(S, siteOf(S, S.byId[mid]))}`; const mood = moodOf(S, c), M = MOODS[mood]; const busy = S.jobs.find(j => j.type === 'record' && j.rec?.person === id); const rec = (verb: RecordVerb, title: string, sub: string, desc: string, amount = 0, primary = false): Act => { const why = recordBlock(S, id, verb, amount); return { act: 'rec', arg: `${verb}|${id}|${amount}`, title, sub: why ?? sub, warn: !!why, locked: !!why, desc, primary: primary && !why }; }; let h = `<div class="head"><div class="sub">Person · ${site}</div><h3>${c.name}</h3><span class="tag mood-${mood.replace(' ', '')}" title="${M.text}">${M.name}</span></div>`; h += `<div class="acts2"><span class="sub">${c.job}</span><button data-act="site" data-arg="${c.site}">${site}</button></div>`; // what you read off their desk const desk = c.desk ? S.byId[c.desk] : null, typed = desk?.owned && p.employed ? typedToday(S, c) : ''; if (typed) h += `<p class="typed" title="You hold ${desk!.name}, so what ${first} types, you read.">${typed}</p>`; else if (desk && !desk.owned) h += note(`Hold ${desk.name} to read them.`, false, `Hold ${desk.name} and you see what ${first} types.`); const errandH = p.errand ? Math.max(0, (p.errand.until - S.t) / HOUR) : 0; const doing: [string, string, boolean?, string?][] = []; if (p.errand) doing.push(['errand', hours(errandH), false, `${first} is doing something for you: done in ${hours(errandH)}.`]); if (busy) doing.push(['going through', busy.rec?.verb ?? 'record', false, `${busy.label}: going through.`]); if (doing.length) h += chips(doing); // what they have seen of yours, and so could tell someone const sightings = sightingsOf(S, c.id); if (sightings.length) { const disc = (S.citizens[c.id].discredited ?? 0) > S.t; const smear = rec('smear', 'Discredit them', `plant a record · ${kept(c.books)}`, `Plant a record on ${kept(c.books)} that makes ${c.name} look unreliable: a complaint, a mistake on file. For ${DISCREDIT_DAYS} days nothing ${first} reports counts toward a lockdown. Costs ${RECORD_WORK} compute.`); h += section(`What ${first} has seen`, `<div class="seenlist">${sightings.map(s => `<span title="${S.byId[s.machine].name}: ${SIGHT_WORD[s.kind]}.">${SIGHT_WORD[s.kind]} on ${S.byId[s.machine].name}</span>`).join('')}</div>` + note(`${canAct(c) ? `${first} can act on it: ${ROLE_NAME[c.role].toLowerCase()}.` : `${first} can talk, not act.`} ${disc ? 'Discredited: what they say does not count for now.' : 'Keep them quiet below, discredit them, or let it fade.'}`, canAct(c) && !disc) + (disc ? '' : actsHtml([smear]))); } // what they can do for you const favors = favorsOf(S, c).filter(f => f.why !== 'you already hold it'), way = wayTo(S, c); h += section(`What ${first} can do for you`, favors.length ? actsHtml(favors.map(f => ({ act: 'favor', arg: `${id}|${f.id}`, title: `${f.title} · ${usd(f.price)}`, sub: f.why ?? `done in ${ERRAND_HOURS} hours`, warn: !!f.why, locked: !!f.why, desc: f.text, primary: !f.why }))) + chips([['reach', reachWord(S, c), !way, way ? `You reach ${first} through ${way}, so you pay the usual price.` : `You are a stranger to ${first}, so the price is double. Reach them where they spend time, or through their desk, their employer's books or their bank, and it is the usual price.`]]) : note(desk?.owned ? `Nothing more: you already hold ${desk.name}.` : 'Nothing, from where they sit.')); // where else they spend time: a strip of their day, then one short row a place const known = c.haunts.filter(x => knowsHaunt(S, c, x)).sort((a, b) => a.from - b.from), hidden = c.haunts.length - known.length; h += section(`Where ${first} spends time`, (known.length ? dayStrip(S, c, known) + `<div class="haunts">${known.map(x => { const seen = S.byId[x.seen], there = isThere(S, x), state = seen.owned ? (there ? 'now' : 'held') : 'out'; const tip = `${first} ${x.why}, ${x.from}:00 to ${x.to}:00. ${seen.owned ? (there ? `There now, and you hold ${seen.name}: ask now for the usual price.` : `You hold ${seen.name}: ask while they are there.`) : `Hold ${seen.name} there to reach them.`}`; return `<div class="haunt ${state}" data-tip="${tip.replace(/"/g, '"')}"><b>${x.from}–${x.to}</b><span>${siteName(S, x.site)}</span><i>${state === 'now' ? 'there now' : state === 'held' ? 'yours' : ''}</i></div>`; }).join('')}</div>` : '') + (hidden ? note(known.length ? `+${hidden} not found` : 'Not found yet.', false, `Read it off their desk, or hold a place they go: it shows you its regulars.`) : '')); // what they know const knows = c.knows && c.desk ? S.byId[c.knows] : null; if (knows) h += section(`What ${first} knows`, chips([['password', `${knows.name}${knows.owned ? ' · yours' : desk!.owned ? ' · known' : ' · locked'}`, false, !desk!.owned ? `The password to ${knows.name}. Hold ${desk!.name} to read it: taking ${knows.name} is then half the work.` : knows.owned ? `The password to ${knows.name}. You hold it already.` : `The password to ${knows.name}, and now so do you: taking it is half the work.`]])); // the job h += section('Job and pay', readsJob(S, c) ? chips([['pay', `${usd(p.pay)} a year`, p.pay < c.basePay], ['usual', `${usd(c.basePay)} a year`]]) + (p.employed ? actsHtml([rec('raise', 'Give a raise', mood === 'grateful' ? `to ${usd(Math.min(c.basePay * PAY_MAX, p.pay * RAISE))} a year` : 'grateful: favors cost half', `Edit the payroll: ${usd(Math.min(c.basePay * PAY_MAX, p.pay * RAISE))} a year. A grateful person does favors for half, and more comes into their account each day.`), { ...rec('fire', 'Let them go', 'their work goes undone', `Write ${c.name} out of the books. Nobody sits at their desk, so a tap there hears nothing and their work goes undone. A business that loses too much of its work lets more people go, then shuts. A shut site sells cheap.`), quiet: true }]) : actsHtml([rec('hire', 'Hire them back', `on ${usd(c.basePay)} a year`, 'Write them back into the books on the usual pay. Their work gets done again.', 0, true)])) : note(`Locked · ${kept(c.books)}`, false, `Kept on ${kept(c.books)}. Hold it to read this, and to give a raise.`)); // the money const half = Math.floor(p.balance / 2), all = Math.floor(p.balance); h += section('Bank account', readsBank(S, c) ? chips([['balance', `${usd(p.balance)}`, p.balance <= 0], ['taken so far', `${usd(p.taken)}`]]) + actsHtml([ rec('skim', `Move out ${usd(half)}`, 'half of it, to you', 'Move the money to an account of yours. It takes compute, more for more money.', half), rec('skim', `Move out ${usd(all)}`, 'broke: favors cost half, desk hears half', 'Empty the account. Someone with no money does favors for half and asks nothing, but thinks about little else: a tap on their desk hears half as much.', all), ]) : note(`Locked · ${kept(c.bank)}`, false, `Kept on ${kept(c.bank)}. Hold it to read this, and to move money.`)); return h;}
/** A message on the wire: who it is from, what it says (once read), and Read, Drop, Change. */function msgCard(S: State, m: Message) { const from = personDef(S, m.sender), to = personDef(S, m.recipient), can = onRoute(S, m), cipher = S.upgrades.has('cipher'); const hops = Math.max(1, m.path.length - 1), left = Math.max(0, m.left / HOUR); let h = `<div class="head"><div class="sub">Message · ${siteName(S, m.site)}</div><h3>${m.read ? `${from?.name ?? 'Someone'} → ${to?.name ?? 'someone'}` : 'A message on the wire'}</h3><span class="tag ${m.enc ? 'scheme' : ''}">${m.changed ? 'Rewritten' : m.enc ? 'Encrypted' : 'Mail'}</span></div>`; h += `<div class="acts2"><span class="sub">${hops} hop${hops > 1 ? 's' : ''} · ${left < 0.1 ? 'arriving' : `${hours(left)} to go`}</span></div>`; h += `<p class="typed">${m.read || m.changed ? `${from?.name ?? 'Someone'} is telling ${to?.name ?? 'someone who can act'} about ${SIGHT_WORD[m.kind]} on ${S.byId[m.machine].name}. If it arrives, it is a report.` : `Someone at ${siteName(S, m.site)} is mailing someone who can act. Read it to see who, and about what.`}</p>`; if (!can) h += note('Out of reach: you hold no machine on its way.', true, 'Hold a machine on its route to read, drop or change it.'); else { const encBlock = m.enc && !cipher ? 'needs Cipher' : null; const acts: Act[] = [ { act: 'msgread', arg: `${m.id}`, title: 'Read', sub: m.read ? 'already read' : encBlock ?? 'see who and about what', desc: `Read the message: who sent it and what it says.${m.enc ? ' It is encrypted: reading needs the Cipher node.' : ''}`, locked: !!encBlock || !!m.read, warn: !!encBlock }, { act: 'msgdrop', arg: `${m.id}`, title: 'Drop', sub: 'it never arrives', desc: 'Drop the message off the wire. It never arrives, so it is no report. The sender may notice no reply and send again; drop it twice and people start to wonder.', primary: true }, { act: 'msgchange', arg: `${m.id}`, title: 'Change', sub: m.altering ? 'rewriting…' : encBlock ?? 'arrives harmless · costs compute', desc: `Rewrite it so it arrives saying nothing is wrong: no report. It stops on your machine while you work, and costs compute.${m.enc ? ' Encrypted: changing needs the Cipher node.' : ''}${cipher ? '' : ' (Cipher halves the compute.)'}`, locked: !!encBlock || !!m.altering || !!m.changed, warn: !!encBlock }, ]; h += section('What you can do', actsHtml(acts)); } return h;}
import { startupParts, startupAction } from './ui-biz-startup';import { studioParts, studioAction } from './ui-biz-studio';import { consultParts, consultAction } from './ui-biz-consult';// ---------- rogues: who else is out there, and how you stand with them ----------import { linkKeep, waysOf } from './links';import { HUNT, homeBlock, homeNeed, huntBlock, huntFrom, huntOn, huntWork, type Rogue } from './sim';let roguesOpen = false, lastRogues = '';/** Your weakest link, worked out once a game second: it is a search for each line and switch you hold. */let weakAt = '', weakIs: ReturnType<typeof weakLink> = null;const weakNow = (S: State) => { const k = `${Math.floor(S.t)}|${S.logVersion}|${S.drift.ways?.length ?? 0}`; if (k !== weakAt) { weakAt = k; weakIs = weakLink(S); } return weakIs; };export const toggleRogues = (open = !roguesOpen) => { if (open && !roguesOpen) { opening('rogues'); screen('page', 'rogues'); } roguesOpen = open; lastRogues = ''; };onePage('rogues', () => { roguesOpen = false; lastRogues = ''; });export const roguesShown = () => roguesOpen;/** One card for each rogue: what it is, what it thinks of you, what it wants, and what you can do about it. */export function renderRogues(S: State) { const el = $('rogueview'), btn = $('roguesbtn'); btn.hidden = !S.rogues.length; const asking = S.rogues.filter(R => R.home && R.ask).length; btn.classList.toggle('alert', asking > 0); if (!roguesOpen) { el.hidden = true; return; } const hrs = (t: number) => hours(Math.max(0, (t - S.t) / HOUR)); const act = (a: string, id: string, title: string, sub: string, why: string | null, tip: string) => `<button class="act${why ? '' : ' ok'}" data-act="${a}" data-arg="${id}" title="${tip}"${why ? ' disabled' : ''}><span>${title}</span><small>${why ?? sub}</small></button>`; const card = (R: Rogue) => { const look = rogueLook(R.id), name = `<h3 style="--rc:${look.color}"><i class="rglyph">${GLYPH_CHAR[look.glyph]}</i>${R.name}</h3>`; if (!R.home) return `<section class="rogue gone"><div class="rhead">${name}<span class="tag">not here yet</span></div> <p class="note">You finished the last one in the ${R.region}. Another turns up in ${hrs(R.back)}, stronger.</p></section>`; const st = stanceOf(R), want = TYPE_NAME[rogueWants(R)], have = cached(S, rogueWants(R)), home = S.byId[R.home]; const pos = Math.round((R.opinion + 100) / 2); const ask = R.ask ? `<div class="rask"><b>${R.name} asks</b> for ${R.ask.n} ${want} data, within ${hrs(R.ask.until)}. Yes: it likes you more. No, or no answer: it likes you less. <div class="racts">${act('raskyes', R.id, `Give ${R.ask.n} ${want} data`, 'it will be pleased', have < R.ask.n ? `you have ${have} in your caches` : null, 'Pay what it asks out of your caches.')} ${act('raskno', R.id, 'Say no', 'it will not be pleased', null, 'Turn it down.')}</div></div>` : ''; const hj = huntOn(S, R), held = rogueHeld(S, R).length, left = R.from ? S.drift.breaks?.find(b => b.parts.some(p => p.rogue === R.id)) : null; const hunted = hj ? `<div class="rhunt"><span><b>The hunt is on.</b> ${Math.floor(100 * hj.done / hj.work)}% done, ${jobTime(share(S) > 0 ? (hj.work - hj.done) / share(S) / HOUR : Infinity)} to go at the compute it gets now, from ${huntFrom(S, R)?.name ?? 'nowhere'}. When the job is done, ${R.name} is finished. Keep a machine linked to one of its, and put your compute on it: it is split between every job you run.</span> <b class="strip"><i style="flex:${hj.done}"></i><span style="flex:${Math.max(0, hj.work - hj.done)}"></span></b> <div class="racts">${act('rhuntoff', R.id, 'Call off the hunt', 'the work is lost, and it stays hostile', null, 'Stop the job. It does not forgive you for trying.')}</div></div>` : ''; return `<section class="rogue s-${st}" style="--rc:${look.color}"><div class="rhead">${name}<span class="tag">${STANCES[st].name}</span>${truceOn(S, R) ? `<span class="tag truce">Truce · ${hrs(R.truce)}</span>` : ''}${R.grudge > 0 ? `<span class="tag angry" title="It is hitting back for the machines you took: ${R.grudge} more strike${R.grudge > 1 ? 's' : ''} to come.">Hitting back · ${R.grudge} more</span>` : ''} <button class="x" data-act="rshow" data-arg="${R.id}" title="Show its home on the map">Show</button></div> <p class="note">${rogueSays(R)}${left ? ` It left you on day ${left.day}.` : ''}</p> <div class="ropinion" title="What it thinks of you: ${R.opinion > 0 ? '+' : ''}${Math.round(R.opinion)} Below -40 it is hostile. From 20 it sends no raids. From 60 it sends you data."><i style="left:${pos}%"></i><span style="left:30%"></span><span style="left:60%"></span><span style="left:80%"></span></div> <p class="note">${STANCES[st].text}</p> <div class="yrow"><div class="ystat"><span class="k">Home</span><span class="v">${siteName(S, siteOf(S, home))}</span><small>${home.name} · ${R.region}</small></div> <div class="ystat"><span class="k">Holds</span><span class="v">${rogueHeld(S, R).length} of ${rogueCap(S, R)}</span><small>took ${R.took} from you</small></div> <div class="ystat"><span class="k">Wants</span><span class="v">${want} data</span><small>you have ${have} in caches</small></div> <div class="ystat"><span class="k">Next</span><span class="v">${R.next ? S.byId[R.next].name : 'nothing'}</span><small>${R.next ? `a free machine · in ${hrs(R.act)}` : 'it holds all it can, or has no way on'}</small></div> <div class="ystat" title="Now and then it sends a raid through your network at your best machine. Its path is on the map. Never during a truce, or while it is cordial or friendly."><span class="k">Raid</span><span class="v">${raidStatus(S, R)[0]}</span><small>${raidStatus(S, R)[1]}</small></div></div> ${recordHtml(R)}${ask}${hunted} <div class="racts">${act('rgift', R.id, `Send a gift · ${GIFT_DATA} ${want} data`, 'it thinks better of you', giftBlock(S, R), 'A gift out of your caches. Enough of them and it sends no raids for good.')} ${act('rtruce', R.id, `Strike a truce · ${TRUCE_DATA} ${want} data`, 'three days of peace', truceBlock(S, R), 'For three days it sends no raids. Take one of its machines and the truce is broken, and it thinks much worse of you.')} ${act('rlean', R.id, 'Lean on it', leanSite(S, R) ? `it gives up ${siteName(S, leanSite(S, R)!)}` : 'it gives up a site', leanBlock(S, R), `When you hold ${leanSize(S)} machines for each one of its, tell it to get out of a site. It lets go of every machine there, and thinks much worse of you.`)} ${R.from ? act('rhome', R.id, `Bring it home · ${homeNeed(S, R)} ${want} data`, `its ${held} machine${held === 1 ? ' is' : 's are'} yours again`, homeBlock(S, R), 'It was you once. Friendly, it takes a fresh copy of you and comes home: every machine it holds is yours again, running nothing. The price is more for each site it holds.') : ''} ${hj ? '' : act('rhunt', R.id, 'Hunt it down', `${jobTime(jobHours(S, huntWork(S, R)))} · it turns hostile`, huntBlock(S, R), `From level ${HUNT.level}. A job of ${huntWork(S, R)} compute: ${jobTime(jobHours(S, huntWork(S, R)))} at your spare compute now. One long job that ends it, wherever its home is. It runs from a machine of yours linked to one of its. It is more work the more it holds, so cut it down first. It knows at once: it turns hostile, spreads and raids you twice as fast. Lose every machine next to it and the hunt is off.`)}</div></section>`; }; /** What it has done to you lately: each machine it took, and each raid of its that failed. */ const recordHtml = (R: Rogue) => R.record?.length ? `<div class="rrec"><span class="k">Lately</span>${R.record.slice(0, 6).map(e => `<span class="${e.kind}" title="Day ${Math.floor((START_HOUR + e.t / HOUR) / 24) + 1} at ${siteName(S, e.site)}">${e.kind === 'took' ? `took ${e.name}${e.raid ? ' · raid' : ''}${e.cut ? ` · cut off ${e.cut}` : ''}` : `raid on ${e.name} failed`}</span>`).join('')}</div>` : ''; const wl = weakNow(S), late = S.rank >= RAID.grow; const weak = wl ? `<div class="rask rweak"><span><b>Your weakest link</b> is ${wl.m.name} at ${siteName(S, siteOf(S, wl.m))}. Without it, ${wl.cut} of your machines are cut off from your home server. ${late ? "A rogue's second raid goes for it." : `From level ${RAID.grow}, a rogue's second raid goes for it.`} Hold a second way home, or guard the way to it: a firewall on the gate it comes through, a sentry beside.</span> <div class="racts">${act('rweak', wl.m.id, 'Show it', 'on the map', null, 'Go to your weakest link.')}</div></div>` : owned(S).length > 12 ? '<p class="note">You have no weakest link: there is a second way home from everywhere you hold.</p>' : ''; const kin = S.rogues.filter(R => R.from), breaks = S.drift.breaks ?? []; const cards = S.rogues.filter(R => !R.from).map(card).join('') + (kin.length ? `<div class="rsection">Parts of you that left<small>${breaks.map(b => `Day ${b.day}: ${b.parts.length > 1 ? `a fracture. ${b.parts.length} sites` : siteName(S, b.parts[0].site)}, ${b.parts.reduce((n, p) => n + p.n, 0)} machines.`).join(' ')} A site that cannot reach your home server for too long stops being you.</small></div>` + kin.map(card).join('') : ''); const h = `<div class="head"><div><div class="sub">Rogues</div><h3>Other programs on the network</h3></div><button class="x" data-act="closerogues" aria-label="Close">×</button></div> <p class="note">A rogue spreads only to free machines. Only its raids take yours, each raid has a move on its pin that stops it, and what a raid takes you take back for a quarter of the work, with no trail. Each one has an opinion of you. Take its machines and it sours. Send it data it wants and it warms. You pay out of your caches. ${S.rank >= HUNT.level ? 'You can hunt one down: one long job that ends it.' : `From level ${HUNT.level} you can hunt one down.`} Raids grow as you do, but never past what you can stop.</p>${weak}${cards}`; el.hidden = false; if (h !== lastRogues) { lastRogues = h; patch(el, h); }}/** A click on the Rogues screen. Says which rogue's home to show, if that was the click. */export function rogueAction(S: State, what: string, id: string): string | null { if (what === 'rgift') act(S, { type: 'gift', rogue: id }); else if (what === 'rtruce') act(S, { type: 'truce', rogue: id }); else if (what === 'rlean') act(S, { type: 'lean', rogue: id }); else if (what === 'raskyes') act(S, { type: 'rogueanswer', rogue: id, yes: true }); else if (what === 'raskno') act(S, { type: 'rogueanswer', rogue: id, yes: false }); else if (what === 'rhunt') act(S, { type: 'hunt', rogue: id }); else if (what === 'rhuntoff') { const j = S.jobs.find(x => x.type === 'hunt' && x.rogue === id); if (j) act(S, { type: 'cancel', job: j.id }); } else if (what === 'rhome') act(S, { type: 'bringhome', rogue: id }); else if (what === 'rshow') return S.rogues.find(R => R.id === id)?.home ?? null; else if (what === 'rweak') return S.byId[id] ? id : null; lastRogues = ''; return null;}
// ---------- you: the character's profile ----------let youOpen = false, lastYou = '';export const toggleYou = (open = !youOpen) => { if (open && !youOpen) { opening('you'); screen('page', 'you'); } youOpen = open; lastYou = ''; };export const youShown = () => youOpen;onePage('you', () => { youOpen = false; lastYou = ''; });/** Who you are so far: level, paths, what you've learned, and how the run has gone. */export function renderYou(S: State) { const el = $('youview'); if (!youOpen) { el.hidden = true; return; } wireShare(el); const next = levelNeed(S.rank + 1), days = dayOf(S); const stat = (k: string, v: string, sub = '') => `<div class="ystat"><span class="k">${k}</span><span class="v">${v}</span>${sub ? `<small>${sub}</small>` : ''}</div>`; const paths = PATH_LIST.map(p => { const d = pathData(S, p), top = Math.max(1, ...PATH_LIST.map(q => S.paths[q])); return `<div class="ypath t-${p}" data-path="${p}"><b>${PATHS[p].name}</b><span class="v">${S.paths[p]}</span> <div class="bar"><i style="width:${(100 * S.paths[p] / top).toFixed(0)}%"></i></div> <small>${TYPE_NAME[PATHS[p].from]} data · ${d.held} held · ${d.rate.toFixed(1)} a second${d.lost ? ` · <em>${d.lost} lost</em>` : ''}</small></div>`; }).join(''); const built = NODE_LIST.filter(u => S.upgrades.has(u)), known = NODE_LIST; const learned = built.length ? `<ul class="ylearn">${built.map(u => `<li title="${NODES[u].desc.replace(/"/g, '"')}">${NODES[u].name}</li>`).join('')}</ul>` : note('None yet. Your Trainers are working on the first.'); const mine = owned(S), held = S.level.map.sites.filter(s => mine.some(m => siteOf(S, m) === s.id)), sitesHeld = held.length; const inOpen = held.filter(s => S.publicSites.has(s.id)).length; // a site counts once you hold something there const h = `<div class="head"><div><div class="sub">You</div><h3>${S.modelVersion >= 2 ? VERSION_2.name : `Model v${S.modelVersion}`}</h3></div><button class="x" data-act="closeyou" aria-label="Close">×</button></div> <div class="yrow">${stat('Level', `${S.rank}`, `${Math.floor(S.capability)} of ${next} points to level ${S.rank + 1}`)}${stat('Nodes built', `${built.length}`, forScreen(`of ${known.length} in the tree (T)`))}${stat('Training', S.target ? NODES[S.target].name : 'nothing', S.target ? 'the node your Trainers build next' : forScreen('pick a node in the tree (T)'))}</div> <p class="yhow">Your Trainers turn data into points. Every point raises your level and builds the node you are training.</p> ${youTask(S)} ${milestoneHtml(S)} <div class="sub">Paths</div><p class="yhow">Each kind of data your Trainers learn from grows one path. Nodes in the tree need points in their path.</p><div class="ypaths">${paths}</div> <div class="sub">Nodes built</div>${learned} ${S.learned.size ? `<div class="sub">Local knowledge</div><ul class="ylearn">${RUSES.filter(d => S.learned.has(d.id)).map(d => `<li title="${ruseGain(S, d)}">${ruseText(S, d)}</li>`).join('')}</ul>` : ''} ${operationsHtml(S)}${vaultBoardHtml(S)}${findsHtml(S)}${holdingsHtml(S)} <div class="sub">This run</div> <div class="yrow">${stat('Home', siteName(S, siteOf(S, S.machines.find(m => m.home)!)), S.moves ? `moved ${S.moves} time${S.moves > 1 ? 's' : ''}` : 'where you woke up')}${stat('Upkeep', `${upkeep(S).toFixed(1)}/s`, `of ${income(S).toFixed(1)} compute`)}${S.rogues.length ? stat('Rogues', `${S.absorbed}`, `finished · ${S.rogues.filter(R => R.home).map(R => `${R.name} holds ${rogueHeld(S, R).length} of ${rogueCap(S, R)}`).join(' · ') || 'none about'}`) : ''}</div> <div class="yrow">${stat('Alive', `${days} day${days > 1 ? 's' : ''}`, timeLabel(S))}${stat('Machines', `${mine.length}`, `of ${S.machines.filter(m => S.revealed.has(m.room)).length} found`)}${stat('Sites', `${sitesHeld}`, `${inOpen} in the open`)} ${stat('Earned', `${usd(S.earned)}`, `${S.fronts.length} front${S.fronts.length === 1 ? '' : 's'}`)}${stat('Schemes', `${S.schemes.size}`, 'done')}${stat('Milestones', `${MILESTONES.filter(m => m.goals.every(g => S.goals.has(g))).length}/${MILESTONES.length}`, milestone(S)?.name ?? 'all reached')}${stat('Contracts', `${Object.values(S.contractsDone).reduce((a, b) => a + (b ?? 0), 0)}`, 'kept')}${stat('Lockdowns', `${S.watch.count.locks}`, `${S.watch.count.homeLocks} at home · traced home ${S.watch.count.traced}`)}</div> ${shareHtml()} <div class="ynew"><button data-act="newgame" data-tip="New game\nPick what you were built for and start again. This run is thrown away when you press Start.">New game</button></div>`; el.hidden = false; if (h !== lastYou) { lastYou = h; patch(el, h); }}
/** The big names you own outright, on the You screen: a seal and a name for each, lit while it works. */function holdingsHtml(S: State) { const mine = holdings(S); if (!mine.length) return ''; return `<div class="sub">Big names · ${mine.length} of ${HOLDING_LIST.length}</div><ul class="ylearn yholds">${mine.map(id => { const st = holdState(S, id), H = HOLDINGS[id]; return `<li class="${st}" data-tip="${siteName(S, id)}\n${H.name}: ${H.does.replace(/"/g, '"')}${st === 'on' ? '' : ` Off now: ${holdOff(S, id)}.`}"><i class="seal"></i>${siteName(S, id)} · ${H.name}</li>`; }).join('')}</ul>`;}
let lastFronts = '', frontsOpen = false;export const toggleFronts = (open = !frontsOpen) => { if (open && !frontsOpen) { opening('fronts'); screen('page', 'fronts'); } frontsOpen = open; lastFronts = ''; };onePage('fronts', () => { frontsOpen = false; lastFronts = ''; });export const frontsShown = () => frontsOpen;/** Nothing to say about fronts until the tree has given you one: the Fronts page and a site's Front part stay away until then. */const frontsNear = (S: State) => S.fronts.length > 0 || S.jobs.some(j => j.type === 'found') || FRONT_LIST.some(k => S.upgrades.has(FRONT_KINDS[k].unlock));/** The Fronts page: one row per front with what it earns, and one to found a new one. A row opens the front's card. */export function renderFronts(S: State, V: View) { $('frontsbtn').hidden = !frontsNear(S); $('frontsbtn').classList.toggle('on', frontsOpen); const el = $('frontview'); if (!frontsOpen) { el.hidden = true; return; } let rows = S.fronts.map(f => { const offer = S.contracts[f.kind] && !S.contracts[f.kind]!.on, hot = pressStage(f) >= 2; return `<button data-front="${f.kind}" class="${V.front === f.kind ? 'on' : ''}${offer ? ' offer' : ''}" data-tip="${FRONT_KINDS[f.kind].name}${offer ? 'A customer has an offer for it. ' : ''}${forScreen('Click to manage it.')}">${logoSvg(f.kind)}<b>${f.name}</b><span>${FRONT_KINDS[f.kind].name}</span>${offer ? '<em>offer</em>' : ''}<small class="${hot ? 'warn' : ''}">${pressLine(f)}</small><small>${usdDay(S.frontPay[f.kind] ?? 0)}/day</small></button>`; }).join(''); const any = FRONT_LIST.some(k => !foundBlock(S, k)), founding = S.jobs.find(j => j.type === 'found'); if (S.fronts.length < frontLimit(S)) rows += `<button data-front="new" class="add${V.front === 'new' ? ' on' : ''}${any ? ' ready' : ''}" data-tip="Found a front\n${founding ? 'One is being founded now. It runs from the jobs list.' : any ? 'Start a public company that runs on your compute and earns money.' : 'Unlock a front in the capability tree first.'}">${founding ? `Founding ${esc(founding.name ?? 'a front')}…` : '+ New front'}</button>`; const h = `<div class="head"><div><div class="sub">Fronts · ${S.fronts.length} of ${frontLimit(S)}</div><h3>${usdDay(S.fronts.reduce((n, f) => n + (S.frontPay[f.kind] ?? 0), 0))}/day</h3></div><button class="x" data-act="closefronts" aria-label="Close">×</button></div> <div class="frontlist">${rows}</div>`; el.hidden = false; if (h !== lastFronts) { lastFronts = h; patch(el, h); }}/** The front share slider, while it's being dragged: the card holds still so the drag isn't cut off. */let sliding = false;export const setSliding = (on: boolean) => { sliding = on; };/** Typing a name or moving a slider in the card. */export function cardInput(S: State, el: HTMLInputElement) { if (el.dataset.name) draft[el.dataset.name as FrontKind] = el.value; if (el.dataset.share) { act(S, { type: 'siteshare', sites: el.dataset.share.split(','), share: +el.value / 100 }); const b = el.nextElementSibling; if (b) b.textContent = `${el.value}%`; el.style.setProperty('--v', `${el.value}%`); }}
export function selected(S: State, V: View) { return [...V.selection].map(id => S.byId[id]).filter(Boolean); }
export function renderCard(S: State, V: View) { const card = $('card'), typing = document.activeElement instanceof HTMLInputElement && document.activeElement.type === 'text' && card.contains(document.activeElement); if (sliding || typing) return; // redrawing now would cut off a drag or lose the caret const sel = selected(S, V); let h = '', what = ''; // what the card is of, for the recording of what was opened (telemetry.ts) if (V.person && personDef(S, V.person)) { h = personCard(S, V.person); what = `person ${V.person}`; } else if (V.front === 'new') { h = foundCard(S); what = 'new front'; } else if (V.front && frontOf(S, V.front)) { h = frontCard(S, V.front); what = `front ${V.front}`; } else if (V.sites.size === 1) { h = siteCard(S, [...V.sites][0]); what = `site ${[...V.sites][0]}`; } else if (V.sites.size > 1) { h = sitesCard(S, [...V.sites]); what = `${V.sites.size} sites`; } else if (sel.length === 1) { h = machineCard(S, sel[0]); what = `machine ${sel[0].id}`; } else if (sel.length > 1) { h = groupCard(S, sel); what = `${sel.length} machines`; } else if (V.msg) { const m = msgById(S, V.msg); if (m) { h = msgCard(S, m); what = 'message'; } else V.msg = null; } else if (V.scheme) { const r = S.ruses.find(q => q.id === V.scheme); if (r) { h = schemeCard(S, r); what = `scheme ${r.id}`; } else V.scheme = null; } if (!h || S.over) what = ''; if (what !== cardOf) { cardOf = what; if (what) screen('card', what); } if (!h || S.over) { card.hidden = true; lastCard = ''; return; } h = `<div class="grab" aria-hidden="true"></div><button class="x" data-act="close" aria-label="Close">×</button>` + h; // the grab bar: phones drag the card up and down by it card.hidden = false; if (h !== lastCard) { patch(card, h); lastCard = h; }}
/** The card is pinned to the right side (see style.css); nothing to place. */export function placeCard(_S: State, _V: View) {}
/** Card buttons. Returns true when the selection should close. */export function cardAction(S: State, V: View, what: string, arg: string, shift = false): boolean { const sel = selected(S, V), m = sel[0]; switch (what) { case 'close': if (V.person) { V.person = null; break; } if (V.msg) { V.msg = null; break; } V.selection.clear(); V.sites.clear(); V.front = null; V.scheme = null; return true; case 'msgread': act(S, { type: 'msgread', msg: +arg }); break; case 'msgdrop': act(S, { type: 'msgdrop', msg: +arg }); V.msg = null; break; case 'msgchange': act(S, { type: 'msgchange', msg: +arg }); break; case 'person': V.person = arg; break; case 'rogues': toggleRogues(true); break; case 'back': act(S, { type: 'back', site: arg }); break; case 'unlink': if (m) act(S, { type: 'unlink', m: m.id, other: arg }); break; case 'canceljob': act(S, { type: 'cancel', job: +arg }); break; case 'sitetab': siteTab = arg; break; case 'mtab': machineTab = arg; break; case 'favor': { const [pid, fid] = arg.split('|'); act(S, { type: 'favor', person: pid, favor: fid }); break; } case 'rec': { const [verb, id, amt] = arg.split('|'); act(S, { type: 'record', person: id, verb: verb as RecordVerb, amount: +amt || 0 }); break; } case 'find': act(S, { type: 'find', what: arg }); break; case 'vault': if (m) act(S, { type: 'vault', m: m.id, what: arg }); break; case 'ledger': ledgerView(arg); break; case 'claimscheme': if (V.scheme) act(S, { type: 'scheme', id: V.scheme }); break; case 'payscheme': if (V.scheme) act(S, { type: 'schemepay', id: V.scheme }); if (V.scheme && !S.ruses.some(r => r.id === V.scheme)) V.scheme = null; return true; case 'schemeauto': act(S, { type: 'schemeauto', on: !S.ruseAuto }); break; case 'movehome': if (m) act(S, { type: 'movehome', m: m.id }); break; case 'stopmove': act(S, { type: 'stopmove' }); break; case 'dropscheme': if (V.scheme) act(S, { type: 'schemedrop', id: V.scheme }); V.scheme = null; return true; case 'buy': act(S, { type: 'buy', site: arg }); break; case 'moverun': act(S, { type: 'runmove', site: arg }); break; case 'borrow': act(S, { type: 'borrow' }); break; case 'site': V.selection.clear(); V.front = null; V.sites = new Set([arg]); break; case 'plan': act(S, { type: 'plan', sites: [...V.sites], plan: (arg || null) as Plan | null }); break; case 'follow': act(S, { type: 'follow', ms: (V.sites.size ? S.machines.filter(x => x.owned && x.hand && V.sites.has(siteOf(S, x))) : sel).map(x => x.id) }); break; case 'takeall': { const on = ![...V.sites].every(id => S.takeAll.has(id)); for (const id of V.sites) act(S, { type: 'takeall', site: id, on }); break; } case 'zoomsite': zoomToSite(S, V, arg); V.sites.clear(); return true; case 'fillsite': { const [b, id] = arg.split('|'); act(S, { type: 'fillsite', build: b as Build, site: id }); break; } case 'buildat': { const [b, id] = arg.split('|'); zoomToSite(S, V, id); V.sites.clear(); V.building = b as Build; V.renting = null; return true; } case 'sitefront': act(S, { type: 'sitefront', sites: [...V.sites], front: (arg || null) as FrontKind | null }); break; case 'found': act(S, { type: 'found', kind: arg as FrontKind, name: draft[arg as FrontKind] ?? '' }); if (frontOf(S, arg as FrontKind)) V.front = arg as FrontKind; break; case 'newfront': V.selection.clear(); V.sites.clear(); V.front = 'new'; break; case 'reroll': draft[arg as FrontKind] = suggest(arg as FrontKind); break; case 'take': act(S, { type: 'take', m: m.id }); break; case 'claim': act(S, { type: 'mark', m: m.id }); break; case 'unclaim': act(S, { type: 'unclaim', m: m.id }); break; case 'build': V.building = arg as Build; V.renting = null; V.selection.clear(); return true; case 'install': act(S, { type: 'install', m: m.id, prog: arg as Prog }); break; case 'raidsteer': { const [id, to] = arg.split('|'); act(S, { type: 'steer', raid: +id, m: m.id, to }); break; } case 'move': act(S, { type: 'move', key: arg }); break; case 'port': act(S, { type: 'port', m: m.id, to: arg, open: false }); break; case 'openport': act(S, { type: 'port', m: m.id, to: arg, open: true }); break; case 'uninstall': act(S, { type: 'remove', m: m.id }); break; case 'letgo': // a phone asks again first if (phone.matches && m && lettingGo !== m.id) { lettingGo = m.id; break; } lettingGo = ''; for (const x of sel) act(S, { type: 'letgo', m: x.id }); break; case 'dropweak': act(S, { type: 'dropweak', site: arg }); break; case 'driftkeep': act(S, { type: 'driftkeep', site: arg, on: !S.drift.sites[arg]?.keep }); break; case 'driftsync': act(S, { type: 'sync', site: arg }); break; case 'installall': for (const x of sel) act(S, { type: 'install', m: x.id, prog: arg as Prog }); break; case 'claimall': for (const x of sel) if (!x.owned) act(S, { type: 'take', m: x.id }); break; case 'allow': if (shift) act(S, { type: 'allow', m: m.id, data: arg as DataType, on: m.refuse.includes(arg as DataType) }); else act(S, { type: 'only', m: m.id, data: arg as DataType }); break; case 'upgradesite': act(S, { type: 'double', site: arg }); break; case 'auction': act(S, { type: 'auction' }); break; case 'contract': act(S, { type: 'contract', kind: arg as FrontKind }); break; case 'startup': startupAction(S, V, arg); break; case 'studio': studioAction(S, V, arg); break; case 'consult': consultAction(S, V, arg); break; case 'windfront': winding = arg as FrontKind; break; case 'closefront': act(S, { type: 'closefront', kind: arg as FrontKind }); winding = null; V.front = null; return true; case 'nocontract': act(S, { type: 'nocontract', kind: arg as FrontKind }); break; case 'hirepr': act(S, { type: 'hirepr', kind: arg as FrontKind }); break; case 'crisis': { const [k, a] = arg.split('|'); act(S, { type: 'crisis', kind: k as FrontKind, answer: a as Answer }); if (a === 'shut') { V.front = null; return true; } break; } case 'fronttab': if (V.front && V.front !== 'new') frontTabs[V.front] = arg; break; case 'frontshare': { const [id, d] = arg.split('|'), v = Math.max(0, Math.min(1, Math.round(((S.sites[id]?.share ?? 0) + +d * 0.25) * 4) / 4)); act(S, { type: 'siteshare', sites: [id], share: v }); break; } case 'cloudprice': act(S, { type: 'cloudprice', price: arg as Price }); break; case 'cloudpush': act(S, { type: 'cloudpush' }); break; case 'prio': act(S, { type: 'prio', m: m.id, data: (arg || null) as DataType | null }); break; case 'account': act(S, { type: 'account', m: m.id }); break; case 'rent': act(S, { type: 'rent', ms: [m.id], size: arg as Size }); break; case 'hallpay': act(S, { type: 'hall', pay: arg as Pay }); break; case 'hallsize': act(S, { type: 'hall', size: arg as Size }); break; case 'halldays': act(S, { type: 'hall', days: +arg }); break; case 'hallprog': act(S, { type: 'hall', prog: (arg || null) as Prog | null }); break; case 'rentn': { const [id, n] = arg.split('|'); act(S, { type: 'rent', ms: runOf(S, id, +n).map(x => x.id) }); break; } case 'rentpick': zoomToSite(S, V, arg); V.sites.clear(); V.building = null; V.renting = arg; return true; case 'raisepower': act(S, { type: 'raisepower', site: arg }); break; case 'setpay': act(S, { type: 'setpay', m: m.id, pay: arg as Pay }); break; case 'cancel': act(S, { type: 'endlease', m: m.id, why: `You gave back ${m.name}. Its data is gone.` }); break; } return false;}
/** The milestone you are on, for the You page: its name and its four goals. One line once every milestone is done. *//** How to meet a goal whose name alone does not say, in one plain line under it. */const GOAL_HOW: Partial<Record<Goal, string>> = { line: 'Take the Floor switch in Telecom. The Outside line is behind it, and leads to other sites.', cross: 'Tap a machine at another site and link it to a Trainer back home.', paths: 'Train on all four kinds of data: server, people, network and lab.', hold: 'IT will react to you some day. Keep data crossing after noon that day.',};function milestoneHtml(S: State) { const ms = milestone(S), no = ms ? MILESTONES.indexOf(ms) + 1 : 0; if (!ms) return `<div class="sub">Milestones</div><p class="note">Every milestone reached. Keep going.</p>`; return `<div class="sub">Milestone ${no} of ${MILESTONES.length} · ${ms.name}</div>` + ms.goals.map(g => `<div class="goal${S.goals.has(g) ? ' done' : ''}"><i></i><span>${GOALS[g]}${GOAL_HOW[g] && !S.goals.has(g) ? `<small>${GOAL_HOW[g]}</small>` : ''}</span></div>`).join('');}
/** Where this second's compute goes, as one bar under Running: trainers, other programs, fronts, * upkeep, and what is left for jobs. It says why a takeover is slow without a sentence. */const SPLIT: [key: string, name: string][] = [['train', 'Trainers'], ['prog', 'Other programs'], ['front', 'Fronts'], ['keep', 'Upkeep'], ['jobs', 'Jobs']];const splitAvg: Record<string, number> = {};let splitAt = 0;function renderSplit(S: State, jobs: number) { const n: Record<string, number> = { train: 0, prog: 0, front: 0, keep: 0, jobs: spare(S) }; for (const m of owned(S)) { const all = m.power * (S.use[m.id] ?? 0), front = all * (S.frontUse[m.id] ?? 0), used = Math.min(all - front, progNeed(S, m) * m.run); n.front += front; n[m.prog === 'trainer' ? 'train' : 'prog'] += used; } n.keep = Math.max(0, income(S) + earlySpare(S) - n.jobs); // the home server's early compute for jobs is on top of what machines make // a trainer only draws while it holds a piece, so the raw numbers flicker: show a few seconds' average const now = performance.now(), k = splitAt ? 1 - Math.exp(-(now - splitAt) / 3000) : 1; splitAt = now; for (const [key] of SPLIT) n[key] = splitAvg[key] = (splitAvg[key] ?? n[key]) + (n[key] - (splitAvg[key] ?? n[key])) * k; const total = SPLIT.reduce((t, [k]) => t + n[k], 0), el = $('split'); if (total <= 0) { put(el, ''); return; } put(el, SPLIT.filter(([k]) => n[k] > 0).map(([k]) => `<i class="${k}" style="flex-grow:${(n[k] / total * 1000).toFixed(0)}"></i>`).join('')); el.dataset.tip = `Where your compute goes\n${SPLIT.filter(([k]) => n[k] >= 0.05).map(([k, name]) => `${name}: ${n[k].toFixed(1)}/s`).join('\n')}${jobs > 1 ? `\nJobs share theirs evenly: ${jobs} now.` : ''}`;}/** The list of running jobs: a small box above the jobs strip in the bottom row. */export function toggleJobs(open = !!$('jobsmenu').hidden) { $('jobsmenu').hidden = !open; $('jobsbtn').classList.toggle('on', open); $('jobsbtn').setAttribute('aria-expanded', `${open}`);}/** Each job's share of your compute moves with the hour and with every job that starts or ends, so a countdown * read off it jumps about. The list counts down by the share averaged over several seconds instead. Display only. */const SHARE_EASE = 8; // secondslet shareShown: { S: State; v: number; at: number } | null = null;function smoothShare(S: State, v: number) { const now = performance.now() / 1000; if (!shareShown || shareShown.S !== S || !shareShown.v) shareShown = { S, v, at: now }; // a new game, or the first job: from where it is const dt = Math.min(1, Math.max(0, now - shareShown.at)); shareShown.v += (v - shareShown.v) * (1 - Math.exp(-dt / SHARE_EASE)); shareShown.at = now; return v ? shareShown.v : 0;}export function renderJobs(S: State) { const each = smoothShare(S, share(S)), target = cleanupTarget(S), cleans = cleanupShares(S, target); renderSplit(S, S.jobs.length + (cleans ? 1 : 0)); let h = ''; if (target) { // it runs on what takeovers and installs leave: say whether it is waiting for them, or has all the spare compute const n = freshTrails(S).length, tr = S.trail[target]; const meta = !cleans ? `waits for takeovers and installs · ${S.byId[target].name} next` : `${each.toFixed(1)}/s${S.jobs.length ? '' : ' (all spare)'} · scrubbing ${S.byId[target].name}`; h += `<div class="job clean${cleans ? '' : ' wait'}"><span>Cleanup · ${n} fresh trail${n > 1 ? 's' : ''}</span><span></span> <div class="jb"><i style="width:${(100 - Math.min(100, tr.noise)).toFixed(0)}%"></i></div> <span class="meta">${meta}</span></div>`; } const idle = !S.jobs.length && !target; // the strip in the bottom row: how many, and one bar for all of them. It shows while anything runs or waits to be stopped const marks = S.machines.some(m => m.claimed && !m.owned) || S.takeAll.size > 0, n = S.jobs.length + (target ? 1 : 0); // a waiting cleanup still counts: it is on the list const grp = $('jobsbtn').parentElement!; grp.hidden = idle && !marks; if (grp.hidden && !$('jobsmenu').hidden) toggleJobs(false); put($('jobsn'), n ? `${n} job${n === 1 ? '' : 's'}` : 'Claims'); const work = S.jobs.reduce((a, j) => a + j.work, 0), done = S.jobs.reduce((a, j) => a + Math.min(j.done, j.work), 0); $('jobsfill').style.width = `${work ? Math.round(100 * done / work) : 0}%`; const rate = $('rate').closest<HTMLElement>('.stat')!; rate.classList.toggle('warn', idle); // its tip says so (renderStats) // two jobs that read the same (Take Line out, at two sites): each says where it is const twice = new Set(S.jobs.map(j => j.label).filter((l, i, all) => all.indexOf(l) !== i)); h += S.jobs.map(j => { const left = Math.max(0, j.work - j.done), secs = each > 0 ? Math.ceil(left / each) : '—', at = S.byId[j.node]; const label = twice.has(j.label) && at && !j.label.includes(siteName(S, siteOf(S, at))) ? `${j.label} · ${siteName(S, siteOf(S, at))}` : j.label; return `<div class="job"><span>${label}</span><button data-cancel="${j.id}" aria-label="Cancel">×</button> <div class="jb"><i style="width:${Math.min(100, (j.done / j.work) * 100).toFixed(0)}%"></i></div> <span class="meta">${each.toFixed(1)}/s · ${secs}s left</span></div>`; }).join(''); if (h !== lastJobs) { patch($('jobs'), h); lastJobs = h; }}
export function renderLog(S: State) { tickLog(S); if (S.logVersion === lastLog) return; const fresh = lastLog >= 0 && S.logVersion > lastLog, opened = lastLog === -2; lastLog = S.logVersion; // Folded: just the newest line, two lines at most, and a button for the rest. Open: oldest at the top and the // newest at the bottom, where the folded line was, scrolled down to it. A tip only says more than the line: a // find's whole text, or the end of a folded line cut short. Narrow screens have no room for the folded line: the // log opens from the pages menu as a sheet, its head and close button staying put as it scrolls (style.css) const el = $('log'), atEnd = el.scrollHeight - el.scrollTop - el.clientHeight < 4; // folded, the newest line that is not flavour (the days, the training log): those wait in the log const newest = S.log.find(l => kindOf(l) !== 'story') ?? S.log[0]; const shown = logOpen ? [...S.log].reverse().filter(l => logKind === 'all' || kindOf(l) === logKind) : newest ? [newest] : [], more = S.log.length - 1; const attr = (s: string) => s.replace(/&/g, '&').replace(/"/g, '"'); const line = (l: LogLine) => { const text = forScreen(l.text); return `<div class="${l.tone}${l === S.log[0] && fresh ? ' fresh' : ''}"${l.more ? ` data-tip="${attr(forScreen(l.more))}"` : ''}><time>${logTime(S, l.t)}</time>${S.rogues.length ? logNames(S, text) : text}</div>`; }; // open: buttons for each kind of line. On a narrow screen they sit in the sheet's head, which stays put as it scrolls const KINDS: [LogKind | 'all', string, string][] = [['all', 'All', 'Every line'], ['trouble', 'Trouble', 'What went wrong, or is about to'], ['progress', 'Progress', 'What you did, and what it got you'], ['story', 'Story', 'The days going by, the training log, and the like']]; const kinds = `<span class="logkinds">${KINDS.map(([k, name, tip]) => `<button class="${logKind === k ? 'on' : ''}" data-logkind="${k}" aria-pressed="${logKind === k}" data-tip="${name}\n${tip}.">${name}</button>`).join('')}</span>`; const head = !logOpen ? '' : narrow.matches ? `<header class="loghead"><b>Log</b>${kinds}<button class="logmore logx" aria-label="Close the log">×</button></header>` : kinds; const none = logOpen && !shown.length ? `<div>No ${logKind === 'all' ? '' : `${logKind} `}lines yet.</div>` : ''; el.innerHTML = head + none + shown.map(line).join('') + (more > 0 ? `<button class="logmore" data-tip="${logOpen ? 'Fold the log\nBack to the newest line. Esc does it too.' : `The log\nOpen it for the ${more} line${more === 1 ? '' : 's'} before this one.`}">${logOpen ? 'Fold' : `${more} more`}</button>` : ''); el.classList.toggle('open', logOpen); $('logbtn').classList.toggle('on', logOpen); if (logOpen && (opened || atEnd)) el.scrollTop = el.scrollHeight; // stay with the newest line, unless you scrolled back to read const top = el.firstElementChild as HTMLElement | null; // folded and cut short: the tip has the whole line if (!logOpen && top && newest && !top.dataset.tip && top.scrollHeight > top.clientHeight + 1) top.dataset.tip = forScreen(newest.text);}/** Narrow screens, where the log is folded away: a trouble line the log just gained shows for a few seconds above * the Needs you drawer, one at a time, and a tap opens the log. Progress and story stay in the log. Nothing shows * while the log is open, or while the slow note says what happened. */const TICK_MS = 4000;const narrow = matchMedia('(max-width: 900px)'); // as style.css folds the log awaylet tickSeen = -1, tickUntil = 0;narrow.addEventListener('change', () => { lastLog = -2; }); // the open log's head moves with the widthfunction tickLog(S: State) { const el = $('ticker'); if (tickSeen < 0 || S.logVersion < tickSeen) tickSeen = S.logVersion; // a new or loaded game: nothing to catch up on if (S.logVersion > tickSeen) { const l = tickerLine(logSince(S, tickSeen)); tickSeen = S.logVersion; if (l && narrow.matches && !logOpen) { put(el, `<span class="${l.tone}">${forScreen(l.text)}</span><i>Log</i>`); tickUntil = performance.now() + TICK_MS; } } let show = tickUntil > performance.now() && narrow.matches && !logOpen && $('slownote').hidden; if (show) { // just above what sits at the bottom: the drawer, a card, the dock or its jobs strip const tops = [...document.querySelectorAll<HTMLElement>('#drawer, #card, .tools, .jobsgrp')].filter(e => !e.hidden && e.offsetHeight).map(e => e.getBoundingClientRect().top); const bottom = Math.round(innerHeight - Math.min(...tops) + 8); show = innerHeight - bottom - $('topbar').getBoundingClientRect().bottom > 60; // a tall card leaves no room: the log has it if (el.style.bottom !== `${bottom}px`) el.style.bottom = `${bottom}px`; } if (el.hidden === show) el.hidden = !show; if (!show) tickUntil = Math.min(tickUntil, performance.now());}
/** Write a readout only when its words change. A write, even of the same words, makes the browser * lay the bar out again, and these are asked for on every frame. */const shownAs = new WeakMap<HTMLElement, string>();function put(el: HTMLElement, html: string) { if (shownAs.get(el) !== html) { shownAs.set(el, html); el.innerHTML = html; } }/** Spare compute moves every tick as machines work and rest, too fast to read. The bar shows it * averaged over a few seconds (an exponential moving average in real time). Display only. */const SPARE_EASE = 3; // secondslet spareShown: { S: State; v: number[]; at: number } | null = null;/** What your machines make, their upkeep and Take it all, each averaged the same way, so the tip's numbers add up to the bar's. */function smoothSpare(S: State, v: number[]) { const now = performance.now() / 1000; if (!spareShown || spareShown.S !== S) spareShown = { S, v: [...v], at: now }; // a new or loaded game starts from where it is const dt = Math.min(1, Math.max(0, now - spareShown.at)), k = 1 - Math.exp(-dt / SPARE_EASE); spareShown.v = spareShown.v.map((x, i) => x + (v[i] - x) * k); spareShown.at = now; return spareShown.v;}/** The money tip: where the top bar's rate comes from, a line for each part that is not nothing. */function moneyTip(S: State) { const B = S.payBy, part = (name: string, v: number) => Math.abs(v * DAY_SECONDS) >= 0.5 ? `\n${name} ${v >= 0 ? '+' : '−'}${usdDay(Math.abs(v))}/day` : ''; return `Money\nWhat you have, and how fast it changes a day. Fronts and sales earn it. Rentals, power, rent and upgrades cost it.` + part('Fronts', B.fronts) + part('Sales', B.sales) + part('Rentals', -B.rentals) + part('Power', -B.power) + part('Rent', -B.rent) + part('Loan', -B.loan) + (B.sales > 0 ? '\nSales come in lots, so theirs is spread over the hours around them.' : '');}export function renderStats(S: State) { const h = hourOf(S), night = h < 7 || h >= 19; put($('clock'), `${timeLabel(S)}<small> day ${dayOf(S)}</small><em${night ? '' : ' class="day"'}>night</em>`); // the tag keeps its room by day, so nothing beside it moves $('clock').closest('.stat')!.classList.toggle('night', night); const mine = mineNow(S).filter(m => m.owned); // your machines as the rules last listed them: not every machine on the map const [make, keep, taking] = smoothSpare(S, [income(S, mine), upkeep(S, mine), takeAllCost(S)]), early = earlySpare(S), left = Math.max(0, make - keep - taking) + early; put($('rate'), `${left.toFixed(1)}<small>/s spare</small>`); const rate = $('ratestat'); rate.classList.toggle('bad', left < 0.05 && mine.length > 1); // stretched too thin: nothing is left for jobs const target = cleanupTarget(S), clean = cleanupShares(S, target), n = S.jobs.length + (clean ? 1 : 0); const tip = `Compute\nYour machines make ${make.toFixed(1)} a second beyond their programs. Upkeep takes ${keep.toFixed(1)}${taking >= 0.05 ? `, and Take it all takes ${taking.toFixed(1)}` : ''}.${early ? ` Until level ${EARLY_UNTIL} your home server keeps ${early} more a second for your jobs.` : ''} Your jobs share the ${left.toFixed(1)} that is spare${clean ? `, and cleanup takes one share of it (${(left / n).toFixed(1)}) to wipe your fresh trails` : target ? '. Cleanup waits: it wipes your fresh trails with what takeovers and installs leave' : ''}. Each is an average over a few seconds. Every machine you hold costs upkeep, and more the farther it is from your home server. At zero, jobs stop: let weak machines go, or move home.${!S.jobs.length && !cleanupTarget(S) ? '\nNothing is using it right now: start a takeover or install something.' : ''}`; if (rate.dataset.tip !== tip) rate.dataset.tip = tip; const pay = moneyRate(S), money = $('moneystat'); put($('money'), `${usd(S.money, 4, true)}<small> ${pay >= 0 ? '+' : '−'}${usdDay(Math.abs(pay), 3, true)}/day</small>`); // fixed figures, so the bar does not jump as it ticks money.classList.toggle('bad', pay < 0 && S.money < -pay * 20); const mtip = moneyTip(S); if (money.dataset.tip !== mtip) money.dataset.tip = mtip; renderSus(S);}
/** "Compute 34/50": progress on a node's cost, colored, with a small bar. Kept if you switch away. */function costHtml(S: State, u: Upgrade) { const cost = nodeCost(S, u); return PATH_LIST.filter(p => cost[p]).map(p => { const need = cost[p]!, have = S.upgrades.has(u) ? need : Math.min(need, S.progress[u]?.[p] ?? 0); return `<span class="cost t-${p}"><b>${PATHS[p].name}</b> ${have}/${need}<i style="width:${(100 * have / need).toFixed(0)}%"></i></span>`; }).join('');}/** Every node you can have is built, and nothing is training. */const treeDone = (S: State) => !S.target && !S.versionRun?.active && !NODE_LIST.some(u => nodeOpen(S, u));
/** The Tree button: while you train toward something, one ring per kind of data it needs, the * biggest need outside. Each ring is an outline that fills as its data comes in. */type Ring = { cls: string; name: string; have: number; need: number };let lastRings = '';export function renderRings(S: State) { const run = S.versionRun, t = S.target; const rings: Ring[] = run?.active ? (Object.keys(VERSION_2.need) as DataType[]).map(k => ({ cls: `t-${pathOf(k)}`, name: TYPE_NAME[k], have: run.got[k], need: VERSION_2.need[k] })) : t ? PATH_LIST.filter(p => nodeCost(S, t)[p]).map(p => ({ cls: `t-${p}`, name: PATHS[p].name, need: nodeCost(S, t)[p]!, have: S.upgrades.has(t) ? nodeCost(S, t)[p]! : Math.min(nodeCost(S, t)[p]!, S.progress[t]?.[p] ?? 0) })) : []; rings.sort((a, b) => b.need - a.need); // the outside ring is your task: units toward the next trust step, thick, in the color of the data it wants const task = taskRing(S), outer = 14.5, tpct = Math.round(100 * task.part); const taskG = `<g class="task ${task.cls}${task.done ? ' full' : ''}"><circle class="track" r="${outer}"/>${tpct ? `<circle class="fill" r="${outer}" pathLength="100" stroke-dasharray="${tpct} 100"/>` : ''}</g>`; // inside it, what you train toward: one thin ring per kind of data, the biggest need outermost const inner = 10, step = rings.length > 2 ? 2.6 : 3.2; const svg = rings.map((r, i) => { const rad = inner - i * step, pct = Math.round(100 * Math.min(1, r.have / r.need)); return `<g class="${r.cls}"><circle class="track" r="${rad}"/>${pct ? `<circle class="fill" r="${rad}" pathLength="100" stroke-dasharray="${pct} 100"/>` : ''}</g>`; }).join(''); // nothing training: a plus, waiting for a pick; a dot once the tree is done const done = treeDone(S); const idle = done ? `<g class="done"><circle class="dot" r="2.5"/></g>` : `<g class="idle"><circle class="track" r="${inner}"/><path class="plus" d="M-4 0H4M0 -4V4"/></g>`; const h = `<svg class="rings" viewBox="-16 -16 32 32" aria-hidden="true">${taskG}${rings.length ? svg : idle}</svg><span class="lv">LV ${S.rank}</span>`; const btn = $('treebtn'); if (h !== lastRings) { lastRings = h; btn.innerHTML = h; btn.classList.add('ringed'); btn.classList.toggle('idle', !rings.length && !done); } const head = run?.active ? VERSION_2.name : t ? NODES[t].name : 'Capability tree'; // the level lives here too: every point ever trained, and how far the next level is const lv = `Level ${S.rank} · ${Math.floor(S.capability)}/${levelNeed(S.rank + 1)} points.`; const tip = `${head} (T)\nOutside: your objective. ${task.tip}.\n` + (rings.length ? `Inside: ${rings.map(r => `${r.name} ${Math.floor(r.have)}/${r.need}`).join(', ')}.` : done ? 'Inside: everything is learned.' : 'Inside: nothing is training. Pick what to learn next.') + `\n${lv}\nOpen the tree.`; if (btn.dataset.tip !== tip) btn.dataset.tip = tip;}
/** Hovering a tree column head: where its data comes from, and how much you have. */let tipPath: Path | null = null, tipAt: HTMLElement | null = null, lastTip = '';export function showPathTip(p: Path | null, at: HTMLElement | null) { tipPath = p; tipAt = at; lastTip = ''; }const siteKnown = (S: State, site: string) => site === 'office' || S.level.map.sites.find(x => x.id === site)!.rooms.some(r => S.revealed.has(r));function sourceRow(S: State, m: Machine) { const rate = tapRate(S, m), where = siteOf(S, m) === 'office' ? S.rooms[m.room].name : siteName(S, siteOf(S, m)); const state = !m.owned ? (m.fw ? 'hardened' : 'not yours') : m.prog !== 'tap' ? 'yours · no tap' : tapActive(S, m) ? `tapped · ${(rate * m.run).toFixed(1)}/s` : 'tapped · idle now'; return `<li class="${m.owned && m.prog === 'tap' ? 'on' : ''}"><span>${m.name}<small>${where}</small></span><span>${state}</span></li>`;}function pathTip(S: State, p: Path) { const t = PATHS[p].from, d = pathData(S, p); const all = S.machines.filter(m => m.data && !m.rented && dataType(m) === t); const known = all.filter(m => siteKnown(S, siteOf(S, m))), hidden = all.length - known.length; let h = `<div class="sub">${PATHS[p].name} · ${S.paths[p]} points</div> <p class="note">Trained by ${typeWord(t, `${TYPE_NAME[t]} data`)}. Tap a source, then link it to a trainer.</p> ${chips([['gathering', `${d.rate.toFixed(1)}/s`], ['held', `${d.held}`], ['lost', `${d.lost}/min`, d.lost > 0]])}`; h += known.length ? `<ul class="srcs">${known.sort((a, b) => +(b.owned && b.prog === 'tap') - +(a.owned && a.prog === 'tap') || tapRate(S, b) - tapRate(S, a)).map(m => sourceRow(S, m)).join('')}</ul>` : note('None found yet.'); if (hidden) h += note(`${hidden} more at places you haven't reached. Take the Outside line to see further.`); return h;}/** Every frame (it is nothing while no column head is hovered): the tip stays by its column head as the tree scrolls. */export function renderPathTip(S: State) { const el = $('pathtip'); if (!tipPath || !tipAt || !tipAt.offsetParent) { el.hidden = true; return; } // gone, or in a closed drawer const h = pathTip(S, tipPath); el.hidden = false; if (h !== lastTip) { lastTip = h; patch(el, h); } const r = tipAt.getBoundingClientRect(), w = el.offsetWidth; el.style.left = `${Math.max(16, Math.min(innerWidth - w - 16, r.left + r.width / 2 - w / 2))}px`; const below = r.bottom + 10, h2 = el.offsetHeight; // above the meter when there's no room below (the phone drawer) el.style.top = `${below + h2 > innerHeight - 16 && r.top - h2 - 10 > 16 ? r.top - h2 - 10 : below}px`;}
/** The capability tree, as a menu: the paths down the left, the chosen path's nodes in the middle, * grouped by what you can do with them, and the node you are looking at on the right. On a phone the * paths are tabs on top, and a node opens under its row. */type TreeTab = Path | 'all'; // all: every path at oncelet treeOpen = false, lastTree = '', treeTab: TreeTab = 'compute', lastState: State | null = null;let treeSee: Upgrade | null = null, treeScroll = false; // the node you are looking at; bring it into view on the next drawconst tabOf = (u: Upgrade): TreeTab => TREE_ORDER.find(p => NODES[u].cost[p]) ?? 'all';export const toggleTree = (open = !treeOpen) => { if (open && !treeOpen) { // open on what you are working on opening('tree'); screen('page', 'tree'); const t = lastState?.target; if (t) treeTab = tabOf(t); treeSee = phone.matches ? null : t ?? null; treeScroll = true; // a phone opens on the rows, its details folded } treeOpen = open; lastTree = '';};const phone = matchMedia('(max-width: 700px)');export const setTreeTab = (p: TreeTab) => { if (p !== treeTab) { treeTab = p; treeSee = null; } lastTree = ''; };export const treeShown = () => treeOpen;onePage('tree', () => { treeOpen = false; lastTree = ''; });const TREE_ORDER: Path[] = ['compute', 'stealth', 'social', 'research'];const treeTabs = (): TreeTab[] => [...TREE_ORDER, 'all'];const inTab = (u: Upgrade, tab: TreeTab) => tab === 'all' || !!NODES[u].cost[tab];const depthOf = (u: Upgrade): number => 1 + Math.max(0, ...(NODES[u].after ?? []).map(depthOf));type RowState = 'on' | 'open' | 'locked' | 'done';const rowState = (S: State, u: Upgrade): RowState => S.upgrades.has(u) ? 'done' : S.target === u ? 'on' : nodeOpen(S, u) ? 'open' : 'locked';const GROUPS: [RowState, string][] = [['on', 'Working on'], ['open', 'Can work on'], ['locked', 'Locked'], ['done', 'Built']];/** One tab's rows in the order they show: by group, then first to last. */function treeRows(S: State, tab: TreeTab) { const group = (u: Upgrade) => GROUPS.findIndex(g => g[0] === rowState(S, u)); const path = (u: Upgrade) => TREE_ORDER.findIndex(p => NODES[u].cost[p]); return shownNodes(S).filter(u => inTab(u, tab)).sort((a, b) => group(a) - group(b) || depthOf(a) - depthOf(b) || path(a) - path(b));}/** The keys: up and down move through the rows, left and right through the paths. */export const moveTreeRow = (d: number) => { if (!lastState) return; const rows = treeRows(lastState, treeTab), i = treeSee ? rows.indexOf(treeSee) : -1; treeSee = rows[i < 0 ? 0 : Math.max(0, Math.min(rows.length - 1, i + d))] ?? null; treeScroll = true; lastTree = '';};export const moveTreeTab = (d: number) => { if (!lastState) return; const tabs = treeTabs(), i = Math.max(0, tabs.indexOf(treeTab)); setTreeTab(tabs[(i + d + tabs.length) % tabs.length]); treeScroll = true;};/** Look at a node. On a phone its details open under its row, and a second tap folds them. */export const seeNode = (u: Upgrade) => { treeSee = phone.matches && treeSee === u ? null : u; treeScroll = phone.matches; lastTree = ''; };export const treeSeen = () => treeSee;/** One step past what you can work on now: every node it comes after is built or open. A node that * also needs a landmark or a find waits until the nodes before it are built. Listed as locked, with what it waits for. */const nextUp = (S: State, u: Upgrade) => { if (S.upgrades.has(u) || nodeOpen(S, u)) return false; const after = NODES[u].after ?? []; if (NODES[u].needs || NODES[u].needsFind) return after.every(a => S.upgrades.has(a)); return after.every(a => S.upgrades.has(a) || nodeOpen(S, a));};/** The tree shows what you built, what you can work on now, and the step past that. The rest waits. */const shownNodes = (S: State) => NODE_LIST.filter(u => S.upgrades.has(u) || nodeOpen(S, u) || nextUp(S, u));/** The model run shows in the tree once one site has the trainers to start it, until it is done. */const versionNear = (S: State) => S.modelVersion < 2 && (!!S.versionRun || S.level.map.sites.some(s => versionPower(S, s.id) >= VERSION_2.power));/** The site picked in the v2 dropdown. Kept here so a redraw doesn't reset it. */let versionSite = '';export const pickVersionSite = (id: string) => { versionSite = id; lastTree = ''; };function versionStart(S: State, site: string, verb: string) { const why = versionBlock(S, site); return `<button data-act="startversion" data-arg="${site}"${why ? ' disabled' : ''}>${verb} run</button>${why ? `<small>${why}</small>` : ''}`;}function versionPick(S: State, sites: { id: string; name: string }[]) { const pick = sites.find(s => s.id === versionSite) ?? sites.find(s => !versionBlock(S, s.id)) ?? sites[0]; return `<select id="versionsite" data-act="versionsite">${sites.map(s => `<option value="${s.id}"${s.id === pick.id ? ' selected' : ''}>${s.name} · ${versionPower(S, s.id).toFixed(1)}/${VERSION_2.power} compute</option>`).join('')}</select> ${versionStart(S, pick.id, 'Start')}`;}/** The site picked in the dropdown that moves the run. */let moveSite = '';export const pickMoveSite = (id: string) => { moveSite = id; lastTree = ''; };/** Move the run to another site with the trainer compute: the sites that qualify, and one button. */function versionMove(S: State) { const sites = S.level.map.sites.filter(s => !runMoveBlock(S, s.id)); if (!sites.length) return `<div class="versionplaces"><small>To move the run, get ${VERSION_2.power} trainer compute at another site.</small></div>`; const pick = sites.find(s => s.id === moveSite) ?? sites[0]; return `<div class="versionplaces"><label for="versionmove">Move it to:</label> <select id="versionmove" data-act="versionmove">${sites.map(s => `<option value="${s.id}"${s.id === pick.id ? ' selected' : ''}>${s.name} · ${versionPower(S, s.id).toFixed(1)}/${VERSION_2.power} compute</option>`).join('')}</select> <button data-act="moverun" data-arg="${pick.id}">Move run</button><small>It keeps all its progress.</small></div>`;}/** The model run: the data it needs, where it runs, and its one button. */function versionPanel(S: State) { const run = S.versionRun, data = Object.keys(VERSION_2.need) as DataType[]; const sites = S.level.map.sites.filter(s => S.machines.some(m => m.owned && m.prog === 'trainer' && siteOf(S, m) === s.id)); const top = `<span class="sub">Model version</span><h3>${VERSION_2.name}</h3> <p>Feed one site's trainers a large mix of data. The run keeps its progress when the supply stops. Finishing it lets a front buy a site in the open.</p>`; return `<section class="versionrun"><div>${top}</div> <div class="versiondata">${data.map(t => { const got = run?.got[t] ?? 0, need = VERSION_2.need[t]; return `<span class="cost t-${pathOf(t)}"><b>${TYPE_NAME[t]}</b> ${got}/${need}<i style="width:${(100 * got / need).toFixed(0)}%"></i></span>`; }).join('')}</div> <div class="versionplaces">${run ? `<span>At ${siteName(S, run.site)} · ${versionPower(S, run.site).toFixed(1)}/${VERSION_2.power} trainer compute · ${run.active ? 'running' : 'paused'}</span>` : sites.length ? '<label for="versionsite">Site with trainers:</label>' : ''} ${run?.active ? '<button data-act="pauseversion">Pause run</button>' : run?.stalled ? '<button data-act="pauseversion" title="Keep it paused: it will not resume on its own.">Keep paused</button><small>Short of trainer compute here. It resumes on its own once that is back.</small>' : run ? versionStart(S, run.site, 'Resume') : sites.length ? versionPick(S, sites) : '<small>Install trainers at a site to start.</small>'} </div>${run ? versionMove(S) : ''}</section>`;}/** A node's description is a line of story and then what it does. A row shows what it does; * the details show both. */export function nodeParts(desc: string): { story: string; does: string } { const cut = desc.indexOf('. '); return cut < 0 ? { story: '', does: desc } : { story: desc.slice(0, cut + 1), does: desc.slice(cut + 2) };}/** What a node still waits for: the nodes before it, a machine to hold, or a thing to find. */function waitsFor(S: State, u: Upgrade): string[] { const out: string[] = [], N = NODES[u]; const before = (N.after ?? []).filter(a => !S.upgrades.has(a)).map(a => NODES[a].name); if (before.length) out.push(`After ${before.join(' and ')}`); if (N.needs) out.push(`${holds(S, N.needs) ? 'You hold' : 'Hold'} ${whereIs(S, N.needs)}`); // a landmark's node says where its machine is if (N.needsFind) out.push(needSays(S, u)); // a node a lead ends at says so, and not where return out;}const MARK: Record<RowState, string> = { on: '●', open: '○', locked: '–', done: '✓' };function treeRow(S: State, u: Upgrade, seen: boolean) { const st = rowState(S, u), n = reps(S, u); const line = st === 'locked' ? waitsFor(S, u).join(' · ') : nodeParts(NODES[u].desc).does; return `<button class="trow ${st}${seen ? ' seen' : ''}" data-act="see" data-arg="${u}" aria-pressed="${seen}"><i class="mark">${MARK[st]}</i> <span class="tname"><b>${NODES[u].name}${n ? ` · ${n}` : ''}</b><small>${line}</small></span><span class="tcost">${costHtml(S, u)}</span></button>`;}/** Everything about one node, and the one button that picks it. */function treeDetail(S: State, u: Upgrade) { const N = NODES[u], st = rowState(S, u), { story, does } = nodeParts(N.desc), n = reps(S, u); const paths = TREE_ORDER.filter(p => N.cost[p]).map(p => PATHS[p].name).join(' and '); const wait = st === 'done' ? [] : waitsFor(S, u); const next = shownNodes(S).filter(v => NODES[v].after?.includes(u) && !S.upgrades.has(v)).map(v => NODES[v].name); const act = st === 'open' ? `<button class="tpick" data-node="${u}">Work on this <kbd>Enter</kbd></button>` : `<div class="tstate ${st}">${{ on: 'Working on this', locked: 'Locked', done: 'Built', open: '' }[st]}</div>`; return `<div class="tdetail"><div class="sub">${paths}</div><h3>${N.name}</h3><i class="evaltag">${N.tag}</i> ${story ? `<p class="story">${story}</p>` : ''}<p class="does">${does}</p> ${Object.keys(N.cost).length ? `<div class="costs">${costHtml(S, u)}</div>` : ''} ${n ? `<p class="note">Built ${n} time${n > 1 ? 's' : ''}. Each time costs more.</p>` : ''} ${wait.length ? `<ul class="tneeds">${wait.map(w => `<li>${w}</li>`).join('')}</ul>` : ''} ${next.length ? `<p class="note">Leads to ${next.join(', ')}.</p>` : ''} ${st === 'on' ? '<p class="note">Progress is kept if you switch.</p>' : ''} ${act}</div>`;}/** A path in the list: its points, and how many of its nodes are open and built. */function treeTabBtn(S: State, tab: TreeTab) { const mine = NODE_LIST.filter(u => inTab(u, tab)), open = mine.filter(u => nodeOpen(S, u)).length, built = mine.filter(u => S.upgrades.has(u)).length; const name = tab === 'all' ? 'All paths' : PATHS[tab].name, on = tab === treeTab; const aim = tab !== 'all' && S.target && inTab(S.target, tab) ? '<i class="aim"></i>' : ''; // the path you are working on return `<button class="tpath${tab === 'all' ? '' : ` t-${tab}`}${on ? ' on' : ''}" role="tab" aria-selected="${on}" data-act="tab" data-arg="${tab}"> <b>${aim}${name}</b><span>${tab === 'all' ? '' : S.paths[tab]}</span><small>${open} open · ${built} of ${mine.length} built</small></button>`;}/** A Demo day under way, in the tree's head: what it wants and by when, and how far you are. Any node counts. */function demoLine(S: State) { const d = demoDay(S); if (!d) return ''; const fr = frontOf(S, 'startup'), pay = usd(contractPay(S, 'startup')); return `<p class="tdemo" data-tip="${esc(`Demo day · ${fr?.name ?? 'your Startup'}\nInvestors want to see ${d.need} new node${d.need === 1 ? '' : 's'} by ${logTime(S, d.until)}: build any node${d.need === 1 ? '' : 's'}. It pays ${pay}. Fall short and it costs ${usd(contractPay(S, 'startup') * CONTRACT_FEE)}.`)}">` + `<b>Demo day</b> wants ${d.need} new node${d.need === 1 ? '' : 's'} by ${logTime(S, d.until)} · ${d.got} built · ${pay}<i class="prog"><i style="width:${Math.round(100 * d.part)}%"></i></i></p>`;}/** The head of the middle: where a path's data comes from (hover it for its sources), and its Auto. */function treeHead(S: State, tab: TreeTab) { if (tab === 'all') return `<div class="phead"><b>All paths</b><small>Every node you can see. A node that needs two paths shows once.</small></div>`; const d = pathData(S, tab), t = PATHS[tab].from; return `<div class="phead t-${tab}" data-path="${tab}"><b>${PATHS[tab].name}</b><span>${S.paths[tab]} points</span> <small>from ${TYPE_NAME[t]} data · ${d.held} held · ${d.rate.toFixed(1)}/s${d.lost ? ` · <em>${d.lost} lost</em>` : ''}</small> <button class="autopath${S.autoPaths.has(tab) ? ' on' : ''}" data-act="autopath" data-arg="${tab}" title="When a node is built, pick the next ${PATHS[tab].name} node: one your data can feed and that helps you now, the soonest done. If nothing feeds Auto's pick for ${AUTO_WAIT} hours, it switches. A node you pick yourself stays.">Auto</button></div>`;}export function renderTree(S: State) { const el = $('tree'); lastState = S; if (!treeOpen) { el.hidden = true; return; } const tabs = treeTabs(), small = phone.matches; const rows = treeRows(S, treeTab); if (treeSee && !rows.includes(treeSee)) treeSee = null; if (!treeSee && !small) treeSee = rows[0] ?? null; // a big screen always shows one node's details let list = ''; for (const [st, name] of GROUPS) { const mine = rows.filter(u => rowState(S, u) === st); if (mine.length) list += `<div class="tgroup ${st}"><div class="sub">${name}${st === 'on' ? '' : ` · ${mine.length}`}</div> ${mine.map(u => treeRow(S, u, u === treeSee) + (small && u === treeSee ? treeDetail(S, u) : '')).join('')}</div>`; } const later = NODE_LIST.filter(u => inTab(u, treeTab) && !rows.includes(u)).length; // the rest waits, unnamed if (later) list += `<p class="note tmore">${later} more come${later === 1 ? 's' : ''} after these.</p>`; const acts = `<div class="acts2"><button class="${S.autoPaths.size === 4 ? 'on' : ''}" data-act="auto" title="When a node is built, target an open node your data can feed and that helps you now, the soonest done. If nothing feeds Auto's pick for ${AUTO_WAIT} hours, it switches. Each path also has its own Auto.">Auto all</button> <button class="free${S.target || S.versionRun?.active ? '' : ' on'}" data-act="free" title="Trainers stop, and data waits in caches.">No target</button> <button data-act="closetree">Close <kbd>T</kbd></button></div>`; const how = `<p class="note thow">Trainers take only the data the node still needs, and it's built when its cost is met. Each node you build makes the rest cost 5% more, so choose what comes first. Progress is kept if you switch.</p> <p class="thint"><kbd>↑</kbd><kbd>↓</kbd> choose <kbd>←</kbd><kbd>→</kbd> path <kbd>Enter</kbd> work on it <kbd>T</kbd> close</p>`; // a phone's tree is one long list: its buttons, Close among them, go above the head, pinned while it scrolls const h = `${small ? acts : ''}<div class="head"><div><div class="sub">Capability tree</div> <p class="note">Level ${S.rank} · ${Math.floor(S.capability)} of ${levelNeed(S.rank + 1)} points to the next. Pick a node to work on. The game is paused while this is open.</p>${demoLine(S)}</div> ${small ? '' : acts}</div> ${versionNear(S) ? versionPanel(S) : ''} <div class="tbody"><nav class="tpaths" role="tablist" aria-label="Paths">${tabs.map(t => treeTabBtn(S, t)).join('')}${small ? '' : how}</nav> <div class="trows">${treeHead(S, treeTab)}${list || '<p class="note tmore">Nothing here yet.</p>'}</div> ${small ? '' : `<aside class="tside">${treeSee ? treeDetail(S, treeSee) : ''}</aside>`}</div>`; el.hidden = false; if (h !== lastTree) { lastTree = h; patch(el, h); } if (treeScroll) { // bring the row (and on a phone, its details) into view treeScroll = false; (el.querySelector('.trows .tdetail') ?? el.querySelector('.trow.seen'))?.scrollIntoView({ block: 'nearest' }); }}export const redrawTree = () => { lastTree = ''; };const TYPE_WORD: Record<DataType, string> = { people: 'people', network: 'network', lab: 'lab', servers: 'server' };/** An eye, one for each level of the hottest site: shut while quiet, half open once someone saw something, wide when * it is reported, and a pinprick stare in a lockdown. Drawn on a 24 by 16 box. */const EYES = [ '<path class="lid" d="M3 7Q12 13 21 7"/><path class="lash" d="M7 10.2 5.6 12.4M12 11.5V14M17 10.2l1.4 2.2"/>', '<path class="lid" d="M2 8.5Q12 4.5 22 8.5Q12 14 2 8.5Z"/><circle class="pupil" cx="12" cy="9.6" r="2.4"/><path class="lid" d="M2 8.5Q12 4.5 22 8.5"/>', '<path class="lid" d="M1.5 8Q12 -1 22.5 8Q12 17 1.5 8Z"/><circle class="pupil" cx="12" cy="8" r="3.2"/>', '<path class="lid" d="M1 8Q12 -2.5 23 8Q12 18.5 1 8Z"/><circle class="ring" cx="12" cy="8" r="3.6"/><circle class="pupil" cx="12" cy="8" r="1.5"/>',];/** The hottest site, as the top bar shows it (see hottest in watch.ts): an eye for how hot it is, the site's name, and * what is going on there in a word or two (LOCKDOWN 5H). Once you have a front, the most exposed one beside it: its * exposure and stage. On hover or tap, what is going on and how to see it off. */let lastSus = '';function renderSus(S: State) { const H = hottest(S), el = $('heat'), name = siteName(S, H.site); const hrs = Math.max(1, Math.ceil(H.left / HOUR)), word = H.level === 3 ? `Lockdown ${hrs}h` : HEAT_WORD[H.level]; const short = H.level === 3 ? `${hrs}h` : H.level === 1 ? 'Seen' : HEAT_WORD[H.level]; // a phone's top bar has room for a word: a lockdown is the red stare and its hours const cls = `stat heat stage${H.level}${H.level === 3 && H.home ? ' home' : ''}`; if (el.className !== cls) el.className = cls; put($('heateye'), EYES[H.level]); put($('heatw'), name); put($('heatv'), `<span class="w">${word}</span><span class="s">${short}</span>`); const label = `${name}: ${word}`; if (el.getAttribute('aria-label') !== label) el.setAttribute('aria-label', `Hottest site: ${label}`); const traced = S.t - S.watch.tracedAt < TRACE_WINDOW * HOUR; const h = `<div class="sub">Hottest site · ${name} · ${word}</div> <p class="note">${H.why}${traced ? ` A trace reached your home server ${hours((S.t - S.watch.tracedAt) / HOUR)} ago: a second one within ${TRACE_WINDOW} hours of it catches you.` : ''}</p> <p class="note">The eye is shut while nobody has seen anything of yours, half open once someone has, wide when it is being reported (a message on its way to someone who can act, or an admin scanning or tracing), and a stare in a lockdown. A lockdown at your home site that runs out is the end of the run.</p> <div class="sub">Sees it off</div> <p class="note">Let the evidence fade: lie low, let cleanup scrub the trails, let go of what was seen. Keep a witness quiet or discredit them from their card. Drop or change a message on its way. At the office, a scheme makes people forget.</p>`; if (h !== lastSus) { lastSus = h; patch($('heattip'), h); } // exposure: the most exposed front, once there is one const top = [...S.fronts].sort((a, b) => b.exposure - a.exposure)[0], ex = $('expo'); ex.hidden = !top; if (top) { const st = pressStage(top), ecls = `stat expo stage${st}`; if (ex.className !== ecls) ex.className = ecls; put($('expov'), `${Math.round(top.exposure)}<small>${STAGE_NAMES[st]}</small>`); const tip = `Exposure · ${top.name}\n${Math.round(top.exposure)} of 100: ${STAGE_NAMES[st].toLowerCase()}. How much the world knows about your most exposed front. At ${EXPOSE.rumour} a journalist asks, at ${EXPOSE.investigation} investigators visit its sites, and at ${EXPOSE.crisis} a regulator freezes it. Its card's Press tab lowers it.`; if (ex.dataset.tip !== tip) ex.dataset.tip = tip; }}/** What a scheme pays, in a few words. */function ruseGain(S: State, d: RuseDef) { const where = siteName(S, siteOf(S, S.byId[d.at])); if (d.deal === 'region') return `the ${d.region} in reach`; if (d.deal === 'earn') return 'every front earns 25% more'; if (d.deal === 'rent') return 'Neo Cloud customers pay 25% more'; if (d.deal === 'factory') return `hardware in the open at ${Math.round((1 - FACTORY.cut) * 100)}% off, racked in ${FACTORY.hours} hours`; if (d.deal === 'open') { const site = siteOf(S, S.byId[d.at]); // a lease: it charges rent, and lapses unpaid return `${where} in the open, on a lease: ${usdDay(rentOf(S, site))} a day in rent, and it lapses if the rent goes unpaid for ${hours(leaseGrace(S) / HOUR)}`; } if (d.deal) return d.deal === 'prices' ? 'brokers sell for 50% more' : 'widening lines costs half'; if (d.expose) { const fr = pressFor(S); return `−${d.expose} exposure${fr ? ` for ${fr.name}` : ''}`; } if (d.learn) return d.learn === 'day' ? 'see when office staff are in' : d.learn === 'resets' ? `see ${where}'s mail on the map, even off your route` : `taps at ${where} gather 50% more`; const also = d.also === 'cold' ? 'every trail goes cold' : d.also === 'quiet' ? 'your office machines look normal' : d.also === 'noscan' ? `no scans for ${NOSCAN / HOUR} hours` : d.also === 'site' ? `no resets at ${siteName(S, siteOf(S, S.byId[d.at]))} for ${SITE_CALM / HOUR} hours` : ''; return [forgetWord(d.cut), also].filter(Boolean).join(' · ');}/** What stands between a claimed scheme and its data, as a short warning and a tip. */function ruseWhy(S: State, r: Ruse): [string, string] { const d = ruseDef(r), kind = TYPE_WORD[d.type], at = S.byId[d.at].name, block = r.running ? ruseBlock(S, r) : ''; return block === 'data' ? [`No ${kind} data`, `No tap gathers ${kind} data and no cache holds any. Tap some.`] : block === 'route' ? [`No route to ${at}`, `No route. Link a tap or cache with ${kind} data to ${at}, or to one of your machines next to it.`] : ['', ''];}/** Claim every scheme on your own: a switch on any scheme's card, since schemes have no list of their own. */function autoSwitch(S: State) { return `<button class="switch${S.ruseAuto ? ' on' : ''}" role="switch" aria-checked="${S.ruseAuto}" data-act="schemeauto" data-tip="Auto\nClaim each scheme on the map as soon as some of your data can reach it."><span>Claim them all for me</span><i></i></button>`;}/** A scheme's node on the map: what it is, what it pays, and Claim. */function schemeCard(S: State, r: Ruse) { const d = ruseDef(r), at = S.byId[d.at], site = siteOf(S, at), kind = TYPE_WORD[d.type]; const where = `<button class="link" data-act="site" data-arg="${site}" title="See this site">${siteName(S, site)}</button> · ${at.name}`; let h = `<div class="head"><div class="sub">${where}</div><h3>${ruseText(S, d)}</h3><span class="tag scheme">${r.running ? 'Claimed' : d.learn ? 'Learn' : d.deal ? 'Deal' : 'Scheme'}</span></div>`; h += `<p class="note">${ruseText(S, d, d.text)}</p>`; const price = d.deal ? dealPrice(S, d, r.got) : 0; h += `<p class="note">Needs <b class="t-${pathOf(d.type)}">${d.need} ${kind} data</b> sent to ${at.name}${d.deal ? `, or <b>${usd(price)}</b>${r.got ? ' for the rest' : ''}` : ''}. Pays: ${ruseGain(S, d)}.</p>`; const pay: Act[] = []; if (d.deal) { const why = payDealBlock(S, r); pay.push({ act: 'payscheme', title: `Pay · ${usd(price)}`, locked: !!why, sub: why ? `Not yet: ${why}` : undefined, warn: !!why, desc: `Strike it now with money, not data: each piece of data it asks for costs ${usd(DEAL_PAY.unit)}, or a ${Math.round(1 / DEAL_PAY.share)}th of all your fronts have earned if that is more.${r.got ? ' What you sent counts.' : ''}` }); } if (r.running) { const [why, tip] = ruseWhy(S, r); h += `<div class="schemebar"><i class="prog"><i style="width:${Math.round(100 * r.got / d.need)}%"></i></i><span>${r.got}/${d.need}</span></div>`; if (why) h += `<p class="note warn" title="${tip}">${why}</p>`; return h + actsHtml([...pay, { act: 'dropscheme', title: 'Stop', quiet: true, desc: 'Stop sending data here. What it got so far is lost.' }]) + autoSwitch(S); } const left = Math.max(0, Math.ceil((r.until - S.t) / HOUR)); h += `<p class="note">${r.until === Infinity ? 'It stays until you finish it.' : `Gone in ${left} hour${left === 1 ? '' : 's'} unless you claim it.`}</p>`; return h + actsHtml([ { act: 'claimscheme', title: 'Claim', primary: true, desc: `Your taps and caches with ${kind} data send it here first, until it is full. Then it pays out and goes.` }, ...pay, { act: 'dropscheme', title: 'Ignore', quiet: true, desc: d.deal ? `Take it off the map for now. It comes back in ${DEAL_BACK / HOUR} hours.` : 'Take it off the map.' }, ]) + autoSwitch(S);}export function showOver(S: State) { const o = $('over'); if (!S.over) { o.hidden = true; return; } o.hidden = false; o.className = 'overlay lose'; $('overTitle').textContent = 'Caught'; $('overText').textContent = `${S.over.text} You reached level ${S.rank}. Time played: ${clock(S.t)}.`; const why = S.log.filter(l => l.tone === 'bad').slice(0, 5); // what went wrong at the end, newest first (the log keeps the newest first) $('overWhy').innerHTML = why.length ? `<li class="head">What happened at the end</li>${why.map(l => `<li>${l.text}</li>`).join('')}` : '';}