/* --------------------------------------------------------------------- York Property Exchange — browser client. This file draws the game and nothing else. Every rule, price and balance lives on the server; the browser sends intents and renders whatever comes back. Nothing here can be edited in devtools to gain an advantage, because none of it is trusted. --------------------------------------------------------------------- */ const { useState, useEffect, useRef, useMemo, useCallback } = React; /* ---- catalogue (fetched once at boot) ---- */ let CAT = null; let REGIONS = {}, CATEGORIES = {}, ANALYTICS_TIERS = [], BANK_TIERS = [], TACTICS = {}, IMPROVEMENTS = [], NEIGHBOURHOODS = [], LANDMARKS = [], ALL_PROPERTIES = [], PROP_INDEX = new Map(), NEIGHBOURHOOD_INDEX = new Map(), YIELD_SCALE = 12; function adoptCatalogue(c) { CAT = c; REGIONS = c.regions; CATEGORIES = c.categories; ANALYTICS_TIERS = c.analyticsTiers; BANK_TIERS = c.bankTiers; TACTICS = c.tactics; IMPROVEMENTS = c.improvements; NEIGHBOURHOODS = c.neighbourhoods; LANDMARKS = c.landmarks; ALL_PROPERTIES = c.properties; YIELD_SCALE = c.yieldScale; PROP_INDEX = new Map(ALL_PROPERTIES.map((p) => [p.id, p])); NEIGHBOURHOOD_INDEX = new Map(NEIGHBOURHOODS.map((n) => [n.code, n])); } const metaFor = (id) => PROP_INDEX.get(id); /* ---- formatting and small maths ---- */ const clamp = (n, min, max) => Math.min(max, Math.max(min, n)); const fmt = (n) => "£" + Math.round(n || 0).toLocaleString("en-GB"); const fmtPct = (n) => (n >= 0 ? "+" : "") + n.toFixed(1) + "%"; const fmtDate = (t) => new Date(t).toLocaleDateString([], { day: "2-digit", month: "short", year: "2-digit" }); const fmtTime = (t) => new Date(t).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" }); const hashStr = (s) => { let h = 0; for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0; return Math.abs(h); }; const streetViewUrl = (lat, lng) => `https://www.google.com/maps/@?api=1&map_action=pano&viewpoint=${lat},${lng}`; const yieldPctOf = (meta) => meta.dailyYieldPct * YIELD_SCALE; /* The game clock comes from the server so both sides agree on what a "day" is — cooldowns, rent and overheads all key off it. */ let GAME_DAY_MS = 3600000; const dayIndex = (t) => Math.floor(t / GAME_DAY_MS); const HOUR_OF_DAY = () => GAME_DAY_MS / 24; const SECURITY_MAX_LEVEL = 3; const OVERHEAD_ITEMS = [ "gutter clearance", "boiler service", "damp check", "roof tile repair", "buildings insurance", "communal cleaning", "window sealing", "drain survey", "grounds upkeep", "electrical certificate", "pest control visit", "fire alarm test", "chimney sweep", "yard resurfacing", "signage upkeep", ]; /* Mirrors the server's formula exactly so the button can show the price before you press it. The server still recomputes it on the way in. */ function overheadFor(meta, prop, now) { const seed = hashStr(meta.id + "|" + dayIndex(now)); const item = OVERHEAD_ITEMS[seed % OVERHEAD_ITEMS.length]; const share = 0.2 + ((seed >> 5) % 26) / 100; const gross = (yieldPctOf(meta) / 100) * prop.currentPrice; return { item, cost: Math.max(50, Math.round(gross * share)) }; } function categoryCountsFor(game, playerId) { const counts = {}; ALL_PROPERTIES.forEach((m) => { const p = game.properties[m.id]; if (p && p.owner === playerId) counts[m.category] = (counts[m.category] || 0) + 1; }); return counts; } function dailyRentFor(game, meta, prop, now = Date.now()) { const gross = (yieldPctOf(meta) / 100) * prop.currentPrice; if (!prop.owner) return gross; if (prop.rentStrikeUntil && now < prop.rentStrikeUntil) return 0; const counts = categoryCountsFor(game, prop.owner); const synergy = (counts[meta.category] || 0) >= 2 ? 1.1 : 1; const improve = 1 + 0.08 * (prop.improvementLevel || 0); return gross * synergy * improve; } function holdStatus(prop, now) { if (!prop.owner) return null; const held = now - (prop.acquiredAt || 0); if (held < GAME_DAY_MS) { const rm = Math.ceil((GAME_DAY_MS - held) / 60000); return { earning: false, text: `Rent starts in ${rm} min` }; } if ((prop.overheadPaidDay || 0) < dayIndex(now)) return { earning: false, text: "Overheads due today — pay to keep rent flowing" }; return { earning: true, text: "Overheads paid today — rent active" }; } function timeLeft(endsAt) { const ms = Math.max(0, endsAt - Date.now()); const m = Math.floor(ms / 60000); const d = Math.floor(m / 1440), h = Math.floor((m % 1440) / 60), mm = m % 60; if (d > 0) return `${d}d ${h}h`; if (h > 0) return `${h}h ${mm}m`; if (m > 0) return `${mm}m`; return "under a minute"; } const changeFromHistory = (history, price) => { if (!history || history.length < 2) return 0; const old = history[0]; return old ? ((price - old) / old) * 100 : 0; }; const hourChange = (prop) => (prop.hourPrice ? ((prop.currentPrice - prop.hourPrice) / prop.hourPrice) * 100 : 0); /* ---- API ---- */ async function api(path, options = {}) { const res = await fetch(path, { credentials: "same-origin", headers: { "Content-Type": "application/json" }, ...options, body: options.body ? JSON.stringify(options.body) : undefined, }); let data = {}; try { data = await res.json(); } catch {} if (!res.ok) throw new Error(data.error || "Something went wrong."); return data; } const act = (action, payload = {}) => api("/api/action", { method: "POST", body: { action, payload } }); /* A stable per-browser id, so the server can spot one person running two accounts from the same machine. */ function deviceId() { try { let id = localStorage.getItem("ukpx-device"); if (!id) { id = (crypto.randomUUID ? crypto.randomUUID() : String(Math.random()).slice(2)); localStorage.setItem("ukpx-device", id); } document.cookie = `ukpx_device=${id}; Path=/; Max-Age=31536000; SameSite=Lax`; return id; } catch { return "no-storage"; } } /* ---------------------------- visuals ------------------------------ */ function Sparkline({ history, color, width = 96, height = 30, fill = false }) { const h = history.length > 1 ? history : [history[0] || 0, history[0] || 0]; const min = Math.min(...h), max = Math.max(...h); const pts = h.map((v, i) => { const x = (i / (h.length - 1)) * (width - 4) + 2; const y = height - 2 - ((v - min) / (max - min || 1)) * (height - 4); return `${x.toFixed(1)},${y.toFixed(1)}`; }); return ( {fill && } ); } function RegionTag({ region }) { return {REGIONS[region].label}; } function CategoryTag({ category }) { return {CATEGORIES[category].label}; } /* Richer illustrated tile: brick tones, sky gradient, trees, windows, shadow */ function PropertyArt({ meta, height = 150, facade = null }) { const seed = hashStr(meta.id); const pal = facade ? FACADE_PALETTES[facade] : null; const brickSet = ["#B4674D", "#9C5B46", "#C0796041", "#A96A52", "#8E5540"]; const brick = pal ? pal.brick : brickSet[seed % brickSet.length].slice(0, 7); const roof = pal ? pal.roof : ["#3C3B38", "#4A403A", "#33403F"][seed % 3]; const gid = "sky" + seed; const winLit = (i) => ((seed >> i) & 1) === 1; const cat = meta.category; return ( {cat === "residential" && ( {[100, 122, 178, 200].map((x, i) => ( ))} )} {cat === "retail" && ( {[0, 1, 2, 3, 4, 5, 6].map((i) => ( ))} )} {cat === "utility" && ( )} {cat === "recreation" && ( )} {cat === "industry" && ( {[54, 90, 126, 162, 198].map((x) => )} )} ); } /* ---------------------------- Map ------------------------------ */ const OUSE_PATH = "M 150 10 C 175 70, 130 130, 155 190 C 178 250, 140 320, 165 375"; const WALLS = { cx: 188, cy: 220, r: 52 }; /* One pass over the properties gives every district its value, its movement and how much attention it is getting. All three maps read from this, so they always agree with each other and with the market. */ function districtStats(game) { return NEIGHBOURHOODS.map((n) => { const props = ALL_PROPERTIES.filter((m) => m.neighbourhood === n.code); let value = 0, interest = 0, owned = 0, moveSum = 0, moveCount = 0; for (const m of props) { const p = game.properties[m.id]; if (!p) continue; value += p.currentPrice; interest += p.interest || 0; if (p.owner) owned += 1; const ch = hourChange(p); if (Number.isFinite(ch)) { moveSum += ch; moveCount += 1; } } return { ...n, value, interest, owned, count: props.length, move: moveCount ? moveSum / moveCount : 0 }; }); } /* ---- 1. Surveyor's Plan: the default, and the one that answers "where" ---- */ function PlanMap({ stats, active, onPick, onOpen }) { const teeth = []; for (let a = 0; a < 360; a += 9) { const rad = (a * Math.PI) / 180; teeth.push( ); } const grid = []; for (let gx = 20; gx <= 320; gx += 20) grid.push(); for (let gy = 20; gy <= 380; gy += 20) grid.push(); return ( {grid} {teeth} BAR WALLS {stats.map((n) => { const right = n.mapX < 180; const lx = right ? n.mapX + 9 : n.mapX - 9; return ( onPick(n.code)} tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter") onPick(n.code); }}> {active === n.code && } {n.name.toUpperCase()} ); })} {LANDMARKS.map((l) => ( onOpen(l.id)} tabIndex={0}> ))} 0 1 km N CITY OF YORK · TRADING DISTRICTS · SHEET 1 OF 1 · 1:12 500 ); } /* ---- 2. Market Heat: earned with the Broker feed, answers "where now" ---- */ function HeatMap({ stats, active, onPick, onOpen, analyticsLevel }) { const maxValue = Math.max(...stats.map((s) => s.value), 1); const grid = []; for (let gx = 20; gx <= 320; gx += 40) grid.push(); for (let gy = 20; gy <= 380; gy += 40) grid.push(); /* Ranked movers are the Full Terminal's edge — the Broker feed sees the colours, the terminal gets them ordered. */ const movers = [...stats].sort((a, b) => b.move - a.move); const board = analyticsLevel >= 2 ? [...movers.slice(0, 3), ...movers.slice(-2)] : []; return ( {grid} {stats.map((n) => { const up = n.move >= 0; const col = up ? "#4FD98A" : "#F2705C"; const r = 5 + (n.value / maxValue) * 7; const ring = 12 + Math.min(9, n.interest) * 1.9; return ( onPick(n.code)} tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter") onPick(n.code); }}> {n.interest > 0 && } {active === n.code && } {n.name.toUpperCase()} {(up ? "+" : "") + n.move.toFixed(1)}% ); })} {LANDMARKS.map((l) => ( onOpen(l.id)} tabIndex={0}> ))} {board.length > 0 && ( MOVERS · LAST HOUR {board.map((n, i) => ( = 0 ? "#4FD98A" : "#F2705C"}> {(n.move >= 0 ? "▲ " : "▼ ") + n.name + " " + (n.move >= 0 ? "+" : "") + n.move.toFixed(1) + "%"} ))} )} RING = TRADER INTEREST · SIZE = DISTRICT VALUE ); } /* ---- 3. Illuminated Charter: decoration, bought and worn ---- */ function CharterMap({ stats, active, onPick, onOpen }) { const motif = []; for (let i = 18; i < 322; i += 13) { motif.push(); motif.push(); } for (let i = 32; i < 370; i += 13) { motif.push(); motif.push(); } const ripples = []; for (let t = 40; t < 370; t += 26) { ripples.push(); } const glyph = (n) => { const c = REGIONS[n.region].color; if (n.region === "CEN") return ; if (n.region === "OUT" || n.region === "NTH") return ; return ; }; return ( {ripples} {stats.map((n) => ( onPick(n.code)} tabIndex={0} onKeyDown={(e) => { if (e.key === "Enter") onPick(n.code); }}> {active === n.code && } {glyph(n)} {n.name} ))} {LANDMARKS.map((l) => ( onOpen(l.id)} tabIndex={0}> ))} {motif} EBORACVM Y ); } function MapTab({ game, me, onOpen, onEquip, flash }) { const [activeCluster, setActiveCluster] = useState(null); const analyticsLevel = me.analyticsLevel || 0; const stats = useMemo(() => districtStats(game), [game.properties]); const styles = (me.shop && me.shop.maps) || [{ id: "plan", name: "Surveyor's Plan", available: true }]; const chosen = (me.cosmetics && me.cosmetics.map) || "plan"; const style = styles.find((s) => s.id === chosen && s.available) ? chosen : "plan"; const info = activeCluster ? NEIGHBOURHOOD_INDEX.get(activeCluster) : null; const clusterProps = activeCluster ? ALL_PROPERTIES.filter((m) => m.neighbourhood === activeCluster) : []; const activeStat = activeCluster ? stats.find((s) => s.code === activeCluster) : null; const hot = [...stats].filter((s) => s.interest > 0).sort((a, b) => b.interest - a.interest).slice(0, 3); const intro = { plan: "The city as a survey sheet — river, bar walls, the fifteen trading districts and the landmarks. Click a district to see what is in it.", heat: "The same city read as a market: each district sized by what it is worth and coloured by which way it moved in the last hour. The ring around it is how much attention traders are paying.", charter: "York as a scribe would have drawn it. Every district is here, painted rather than plotted — no more informative than the plan, and far better looking.", }[style]; return (

{intro}

{styles.map((s) => ( ))}
{style === "plan" && } {style === "heat" && } {style === "charter" && } {style !== "heat" && (
{Object.entries(REGIONS).map(([code, r]) => (
{r.label}
))}
Landmark (£2m net worth)
)} {style === "heat" ? ( analyticsLevel >= 2 ? hot.length > 0 &&
Interest hotspots: {hot.map((h) => h.name).join(", ")}
:
The Full terminal ranks movers and hotspots on this view.
) : analyticsLevel < 1 ? (
The Broker feed unlocks the Market Heat view — price movement and trader interest, district by district.
) : null}
{activeCluster && info ? (

{info.name}

· {clusterProps.length} properties · {activeStat.owned} owned
{analyticsLevel >= 1 && (
District value
{fmt(activeStat.value)}
Last hour
= 0 ? "var(--gain)" : "var(--loss)" }}>{fmtPct(activeStat.move)}
)} {clusterProps.map((m) => { const p = game.properties[m.id]; const owner = p && p.owner ? game.players[p.owner] : null; return (
onOpen(m.id)}> {m.name}
{owner ? <>owned by : "available"} {fmt(p ? p.currentPrice : 0)}
); })}
) :
Click a district to see what is there.
}
); } /* ---------------------------- shared bits ------------------------------ */ function StreetViewLink({ meta }) { return ( e.stopPropagation()}> View on Google Street View ↗ ); } function ownerFacade(game, prop) { const owner = prop.owner ? game.players[prop.owner] : null; return owner ? owner.facade || null : null; } function PropertyTile({ meta, prop, game, me, history, onOpen, onBuy }) { const change = changeFromHistory(history, prop.currentPrice); const locked = meta.exclusive && me.netWorth < meta.minNetWorth; const rent = dailyRentFor(game, meta, prop); return (
onOpen(meta.id)}>
{meta.name}
{fmt(prop.currentPrice)}
= 0 ? "chg-up" : "chg-down"}>{fmtPct(change)} this session
Daily rent {fmt(rent)} · {yieldPctOf(meta).toFixed(2)}% yield
{prop.inAuction ? In auction : locked ? Needs {fmt(meta.minNetWorth)} net worth : }
); } /* ---------------------------- Detail modal ------------------------------ */ function DetailModal({ meta, prop, game, me, now, history, onClose, onAct }) { const owner = prop.owner ? game.players[prop.owner] : null; const isMine = prop.owner === me.id; const locked = meta.exclusive && me.netWorth < meta.minNetWorth; const hold = isMine ? holdStatus(prop, now) : null; const change = changeFromHistory(history, prop.currentPrice); const rent = dailyRentFor(game, meta, prop, now); const lvl = prop.improvementLevel || 0; const improvement = IMPROVEMENTS[Math.min(lvl, 2)]; const improveCost = Math.round(prop.currentPrice * 0.03 * (lvl + 1)); const cooling = prop.lastImprovedAt && now - prop.lastImprovedAt < 30 * GAME_DAY_MS; const coolDays = cooling ? Math.ceil((30 * GAME_DAY_MS - (now - prop.lastImprovedAt)) / GAME_DAY_MS) : 0; const oh = overheadFor(meta, prop, now); const paidToday = (prop.overheadPaidDay || 0) >= dayIndex(now); const secLvl = prop.securityLevel || 0; const securityCost = Math.round(prop.currentPrice * 0.025 * (secLvl + 1)); const securityCooling = prop.lastSecurityAt && now - prop.lastSecurityAt < 7 * GAME_DAY_MS; const securityCoolDays = securityCooling ? Math.ceil((7 * GAME_DAY_MS - (now - prop.lastSecurityAt)) / GAME_DAY_MS) : 0; const onStrike = prop.rentStrikeUntil > now; const tacticOnCooldown = prop.lastTacticAt && now - prop.lastTacticAt < 2 * GAME_DAY_MS; const rumourCost = Math.round(prop.currentPrice * TACTICS.rumour.costPct); const strikeCost = Math.round(prop.currentPrice * TACTICS.strike.costPct); const linked = owner && (me.linkedTo || []).includes(prop.owner); return (
e.stopPropagation()}>

{meta.name}

{meta.exclusive && Exclusive site}
{fmt(prop.currentPrice)}
= 0 ? "chg-up" : "chg-down"} style={{ marginBottom: 8 }}>{fmtPct(change)} this session
= 0 ? "#2F6B45" : "#B0342A"} width={220} height={48} fill />
Daily rent income: {fmt(rent)} · {yieldPctOf(meta).toFixed(2)}% daily rental yield
{locked ?
Requires {fmt(meta.minNetWorth)} net worth. Yours: {fmt(me.netWorth)}.
: prop.inAuction ? Under auction — see Auctions : !prop.owner ? : isMine ? (
{hold.text}
{onStrike &&
Tenants are withholding rent until {fmtTime(prop.rentStrikeUntil)}.
} {prop.lastTacticAt > 0 && now - prop.lastTacticAt < 7 * GAME_DAY_MS && (
{prop.lastTacticSuccess ? "This property was targeted" : "An attempted tactic against this property failed"} recently {prop.lastTacticAttackerName ? ` — full terminal traces this to ${prop.lastTacticAttackerName}.` : "."}
)}
{lvl >= 3 ? "Fully improved" : improvement.name}
{lvl < 3 && ( <>
{improvement.note}
Cost {fmt(improveCost)} → rent rises about 8% ({fmt(rent)} → {fmt(rent * 1.08)} per day)
Roughly 1 in 10 jobs overrun and deliver no uplift, and the cost is still spent. One improvement per property per month.
)}
{secLvl >= SECURITY_MAX_LEVEL ? "Maximum security" : `Security level ${secLvl}/${SECURITY_MAX_LEVEL}`}
{secLvl < SECURITY_MAX_LEVEL && ( <>
Fences, cameras and a watchful neighbour — lowers the odds and severity of tactics run against this property.
Cost {fmt(securityCost)} → tactic success chance against you drops further
)}
) : (
Owned by · security {prop.securityLevel || 0}/{SECURITY_MAX_LEVEL} {owner && owner.firmName &&
{owner.firmName}
}
{meta.exclusive ?
Landmarks are protected from tactics.
: linked ? (
You can't run tactics against this trader.
) : !me.canInteract ? (
{me.interactionBlock}
) : (
Run a tactic
Costs you either way, and you stay anonymous unless {owner ? owner.name : "the owner"} holds a Full terminal subscription.
{tacticOnCooldown &&
Recently targeted — cooling down.
}
)}
)}

Ownership history

{!prop.history || !prop.history.length ?
No recorded transactions yet.
: [...prop.history].reverse().slice(0, 5).map((h, i) => (
{h.type === "bought" ? "Bought" : h.type === "auction" ? "Won at auction" : "Acquired via trade"} by {h.ownerName} for {fmt(h.price)} — {fmtDate(h.time)}
))}
); } /* ---------------------------- Market ------------------------------ */ function MarketTab({ game, me, histories, onAct, onOpen }) { const [search, setSearch] = useState(""); const [catFilter, setCatFilter] = useState("all"); const [cluster, setCluster] = useState("none"); let rows = ALL_PROPERTIES.filter((m) => game.properties[m.id] && !game.properties[m.id].owner && !game.properties[m.id].inAuction); if (search) rows = rows.filter((m) => m.name.toLowerCase().includes(search.toLowerCase())); if (catFilter !== "all") rows = rows.filter((m) => m.category === catFilter); let groups; if (cluster === "area") { groups = Object.entries(REGIONS).map(([code, r]) => ({ key: code, title: r.label, items: rows.filter((m) => m.region === code) })).filter((g) => g.items.length); } else if (cluster === "movers") { const risers = rows.filter((m) => hourChange(game.properties[m.id]) >= 1).sort((a, b) => hourChange(game.properties[b.id]) - hourChange(game.properties[a.id])); const fallers = rows.filter((m) => hourChange(game.properties[m.id]) <= -1).sort((a, b) => hourChange(game.properties[a.id]) - hourChange(game.properties[b.id])); const steady = rows.filter((m) => Math.abs(hourChange(game.properties[m.id])) < 1); groups = [ { key: "up", title: "Rising fast", items: risers }, { key: "down", title: "Falling", items: fallers }, { key: "flat", title: "Steady", items: steady }, ].filter((g) => g.items.length); } else { groups = [{ key: "all", title: null, items: [...rows].sort((a, b) => game.properties[a.id].currentPrice - game.properties[b.id].currentPrice) }]; } return (

Everything currently available to buy. Properties owned by other traders drop off this list — find those on the Map, in Auctions, or through a Trade.

setSearch(e.target.value)} />
{!rows.length &&
Nothing matches — every property here may already be owned.
} {groups.map((g) => (
{g.title &&
{g.title} ({g.items.length})
}
{g.items.map((meta) => ( onAct("buy", { propertyId: id })} /> ))}
))}
); } /* ---------------------------- Portfolio ------------------------------ */ function PortfolioTab({ game, me, now, histories, onAct, onOpen }) { const [auctionOpen, setAuctionOpen] = useState(null); const [startPrice, setStartPrice] = useState(""); const [duration, setDuration] = useState("3"); const mine = ALL_PROPERTIES.filter((m) => game.properties[m.id] && game.properties[m.id].owner === me.id); const dailyTotal = mine.reduce((s, m) => s + dailyRentFor(game, m, game.properties[m.id], now), 0); return (
Cash
{fmt(me.cash)}
Property value
{fmt(me.portfolioValue)}
Net worth
{fmt(me.netWorth)}
Daily rent potential
{fmt(dailyTotal)}
Income earned
{fmt(me.totalIncome)}
{!mine.length ?
You don't own any properties yet.
: mine.map((meta) => { const p = game.properties[meta.id]; const hold = holdStatus(p, now); const history = histories[meta.id] || []; const change = changeFromHistory(history, p.currentPrice); const oh = overheadFor(meta, p, now); const paidToday = (p.overheadPaidDay || 0) >= dayIndex(now); return (

onOpen(meta.id)}>{meta.name}

{fmt(p.currentPrice)}
= 0 ? "chg-up" : "chg-down"}>{fmtPct(change)} this session
= 0 ? "#2F6B45" : "#B0342A"} width={200} height={44} fill />
Daily rent {fmt(dailyRentFor(game, meta, p, now))} · {yieldPctOf(meta).toFixed(2)}% daily rental yield
{hold.text}
{p.rentStrikeUntil > now &&
Tenants are withholding rent until {fmtTime(p.rentStrikeUntil)}.
}
Improvement {p.improvementLevel || 0}/3 · Security {p.securityLevel || 0}/{SECURITY_MAX_LEVEL}
{p.inAuction ? Under auction : ( <> )}
{auctionOpen === meta.id && (
setStartPrice(e.target.value)} />
)}
); })}
); } /* ---------------------------- Auctions ------------------------------ */ function AuctionsTab({ game, me, onAct }) { const [bids, setBids] = useState({}); const active = game.auctions.filter((a) => a.status === "active").slice().sort((x, y) => x.endsAt - y.endsAt); const closed = game.auctions.filter((a) => a.status !== "active").slice(0, 4); return (

List from Portfolio for 1–14 days, or bid on what other traders have put up. Foreclosures open at half value and close fast. A bid in the last minutes extends the close, so nothing can be sniped.

{!me.canInteract &&
{me.interactionBlock}
} {!active.length ?
No auctions running right now.
: active.map((a) => { const meta = metaFor(a.propertyId); const isMine = a.seller === me.id; const bidder = a.currentBidder ? game.players[a.currentBidder] : null; const linked = (me.linkedTo || []).includes(a.seller); const val = bids[a.id] ?? a.currentBid + Math.max(1000, Math.round(a.currentBid * 0.02)); return (

{meta.name} {a.foreclosure && Foreclosure}

{a.foreclosure ? <>seized from {isMine ? "you" : } · opened at half value · ends in {timeLeft(a.endsAt)} : <>listed by {isMine ? "you" : } · ends in {timeLeft(a.endsAt)}}
Current bid
{fmt(a.currentBid)}
{bidder ? `by ${bidder.name}` : "no bids yet"}
{!isMine && !linked && me.canInteract && (
setBids({ ...bids, [a.id]: e.target.value })} />
)} {linked &&
You can't bid on this lot.
}
); })} {closed.length > 0 && ( <>
Recently closed
{closed.map((a) => { const bidder = a.currentBidder ? game.players[a.currentBidder] : null; return
{metaFor(a.propertyId).name} — {bidder ? `sold to ${bidder.name} for ${fmt(a.currentBid)}` : "no winning bid"}
; })} )}
); } /* ---------------------------- Bank ------------------------------ */ function BankTab({ me, now, onAct }) { const [depositField, setDepositField] = useState(""); const [withdrawField, setWithdrawField] = useState(""); const [borrowField, setBorrowField] = useState(""); const [repayField, setRepayField] = useState(""); const level = me.bankLevel || 0; const tier = BANK_TIERS[Math.min(level, BANK_TIERS.length - 1)]; const nextTier = BANK_TIERS[level + 1]; const inArrears = me.loan > 0 && me.arrearsSince > 0; const graceLeft = inArrears ? Math.max(0, tier.graceDays * GAME_DAY_MS - (now - me.arrearsSince)) : 0; const underWater = me.netWorth < 0; const negativeLeft = underWater && me.negativeSince ? Math.max(0, tier.negativeDays * GAME_DAY_MS - (now - me.negativeSince)) : 0; const mins = (ms) => `${Math.ceil(ms / 60000)} min`; return (

The exchange's bank turns idle cash into a small, safe yield — and lends against your portfolio when you want to move faster than your cash allows. Interest on both sides settles once a game day, alongside the rents.

{(inArrears || underWater) && (

The bank wants a word

{inArrears &&
You missed interest on your loan. {tier.graceDays > 0 && graceLeft > 0 ? `About ${mins(graceLeft)} of grace before the bank seizes a property.` : "Your least valuable property is seized at the next settlement."}
} {underWater &&
Your net worth is below zero at {fmt(me.netWorth)}. {tier.negativeDays > 0 && negativeLeft > 0 ? `You can trade under water for about ${mins(negativeLeft)} more.` : "Trading under water triggers a foreclosure at the next settlement."}
}
)}

{tier.name}

Banking tier {level} of {BANK_TIERS.length - 1}
{tier.desc}
{nextTier ? ( <>
{nextTier.name} — {nextTier.desc}
Deposits {(nextTier.depositRate * 100).toFixed(2)}%/day · {nextTier.loanRate ? `loans ${(nextTier.loanRate * 100).toFixed(2)}%/day` : "no lending"} · {" "}{nextTier.graceDays ? `${nextTier.graceDays} day grace` : "no grace on arrears"}
) :
You hold the highest tier the bank offers.
}

Deposit account

{level < 1 ?
Locked — open a deposit account above to start earning on idle cash.
: ( <>
On deposit
{fmt(me.deposit)}
Rate
{(tier.depositRate * 100).toFixed(2)}%/day
Earns next settlement
{fmt(me.deposit * tier.depositRate)}
Cash to hand
{fmt(me.cash)}
setDepositField(e.target.value)} placeholder="0" />
setWithdrawField(e.target.value)} placeholder="0" />
Deposits are safe from tactics, but they're also the first thing the bank takes if you can't service a loan.
)}

Credit line

{level < 2 ?
Locked — reach the credit line tier to borrow against your portfolio.
: ( <>
Outstanding
{fmt(me.loan)}
Rate
{(tier.loanRate * 100).toFixed(2)}%/day
Interest next settlement
{fmt(me.loan * tier.loanRate)}
Still available
{fmt(me.borrowCapacity)}
setBorrowField(e.target.value)} placeholder="0" />
setRepayField(e.target.value)} placeholder="0" />
You can borrow up to your net worth, so the most you can ever be is twice-geared.
)}

What happens if you default

Each settlement the bank takes its interest from your cash, then from your deposits. If neither covers it, the shortfall is added to your loan and you fall into arrears. Once grace runs out the bank seizes your least valuable property and lists it as a one-hour foreclosure auction at half its market value. Every trader sees the alert. Whatever it fetches goes straight against your debt; if nobody bids, the bank repossesses it, writes the debt down by the opening price, and the property returns to the open market.
); } /* ---------------------------- Tactics ------------------------------ */ function TacticsTab({ game, me, onAct }) { const linked = new Set(me.linkedTo || []); const others = Object.values(game.players).filter((p) => p.id !== me.id && !linked.has(p.id)); const [search, setSearch] = useState(""); const [toId, setToId] = useState(others[0] ? others[0].id : ""); const filtered = others.filter((p) => p.name.toLowerCase().includes(search.toLowerCase())); const targets = toId ? ALL_PROPERTIES.filter((m) => game.properties[m.id] && game.properties[m.id].owner === Number(toId) && !m.exclusive) : []; const now = Date.now(); const myTactics = game.tactics.filter((t) => t.mine).slice(0, 12); const againstMe = game.tactics.filter((t) => !t.mine).slice(0, 12); return (

Pay to run a covert tactic against another trader's owned property — rumours dent its value, a rent strike stops the tenant paying for a while. Every attempt costs you whether it lands or not, landmarks can't be targeted, and owners can defend with Security. Attackers stay anonymous unless the target holds a Full terminal subscription.

{!me.canInteract &&
{me.interactionBlock}
} {!others.length ?
No other traders are available to you yet.
: (

Choose a target

setSearch(e.target.value)} />
{!targets.length ?
This trader owns no eligible property.
: targets.map((meta) => { const prop = game.properties[meta.id]; const onCooldown = prop.lastTacticAt && now - prop.lastTacticAt < 2 * GAME_DAY_MS; const rumourCost = Math.round(prop.currentPrice * TACTICS.rumour.costPct); const strikeCost = Math.round(prop.currentPrice * TACTICS.strike.costPct); return (
{meta.name} {fmt(prop.currentPrice)} · security {prop.securityLevel || 0}/{SECURITY_MAX_LEVEL} {onCooldown &&
Recently targeted — cooling down.
}
); })}
)}

Your recent tactics

{!myTactics.length ?
You haven't run any tactics yet.
: myTactics.map((t) => (
{fmtTime(t.time)}
{TACTICS[t.type] ? TACTICS[t.type].label : t.type} against {metaFor(t.targetProperty).name} ({t.targetOwnerName || "a trader"}) — {t.success ? "landed" : "failed"}, cost {fmt(t.cost)}
))}

Activity on your properties

{!againstMe.length ?
No tactics have targeted your properties.
: againstMe.map((t) => (
{fmtTime(t.time)}
{TACTICS[t.type] ? TACTICS[t.type].label : t.type} {t.success ? "hit" : "was attempted against"} {metaFor(t.targetProperty).name} {t.attackerName ? ` — full terminal traces this to ${t.attackerName}.` : "."}
))}
); } /* ---------------------------- Trade ------------------------------ */ function TradeTab({ game, me, onAct }) { const linked = new Set(me.linkedTo || []); const others = Object.values(game.players).filter((p) => p.id !== me.id && !linked.has(p.id)); const [search, setSearch] = useState(""); const [toId, setToId] = useState(others[0] ? others[0].id : ""); const [offerProps, setOfferProps] = useState([]); const [offerCash, setOfferCash] = useState(0); const [requestProps, setRequestProps] = useState([]); const [requestCash, setRequestCash] = useState(0); const filtered = others.filter((p) => p.name.toLowerCase().includes(search.toLowerCase())); const mine = ALL_PROPERTIES.filter((m) => game.properties[m.id] && game.properties[m.id].owner === me.id && !game.properties[m.id].inAuction); const theirs = toId ? ALL_PROPERTIES.filter((m) => game.properties[m.id] && game.properties[m.id].owner === Number(toId) && !game.properties[m.id].inAuction) : []; const toggle = (l, s, id) => s(l.includes(id) ? l.filter((x) => x !== id) : [...l, id]); const incoming = game.trades.filter((o) => o.to === me.id); const outgoing = game.trades.filter((o) => o.from === me.id); const give = offerProps.reduce((s, id) => s + game.properties[id].currentPrice, 0) + (Number(offerCash) || 0); const get = requestProps.reduce((s, id) => s + game.properties[id].currentPrice, 0) + (Number(requestCash) || 0); const duty = Math.round((give + get) * (game.rules.stampDutyPct || 0) / 2); const balanced = give > 0 && get > 0 && get >= give * game.rules.fairTradeFloor && give >= get * game.rules.fairTradeFloor; return (

Both sides of a trade must be within {Math.round((1 - game.rules.fairTradeFloor) * 100)}% of fair value, and stamp duty of {Math.round(game.rules.stampDutyPct * 100)}% is split between you and burned. Only money you've earned can go to another trader — your opening grant stays with you.

{!me.canInteract &&
{me.interactionBlock}
} {!others.length ?
No other traders are available to you yet.
: (

Propose a trade

setSearch(e.target.value)} />
You offer
{!mine.length &&
You own no properties.
} {mine.map((m) => ( ))}
setOfferCash(e.target.value)} />
You can commit {fmt(me.transferable)} of earned money.
You request
{!theirs.length &&
They own no properties.
} {theirs.map((m) => ( ))}
setRequestCash(e.target.value)} />
You give {fmt(give)} · you get {fmt(get)} · stamp duty {fmt(duty)} each {give > 0 && get > 0 && !balanced && — too lopsided to submit}
)} {incoming.length > 0 && <>
Offers for you
{incoming.map((o) => (
From {game.players[o.from] ? game.players[o.from].name : "a trader"}
They give: {o.offerProps.map((id) => metaFor(id).name).join(", ") || "—"}{o.offerCash > 0 ? ` + ${fmt(o.offerCash)}` : ""}
They want: {o.requestProps.map((id) => metaFor(id).name).join(", ") || "—"}{o.requestCash > 0 ? ` + ${fmt(o.requestCash)}` : ""}
))}} {outgoing.length > 0 && <>
Your pending offers
{outgoing.map((o) => (
To {game.players[o.to] ? game.players[o.to].name : "a trader"}
You give: {o.offerProps.map((id) => metaFor(id).name).join(", ") || "—"}{o.offerCash > 0 ? ` + ${fmt(o.offerCash)}` : ""}
You want: {o.requestProps.map((id) => metaFor(id).name).join(", ") || "—"}{o.requestCash > 0 ? ` + ${fmt(o.requestCash)}` : ""}
))}}
); } /* ---------------------------- Leaderboard ------------------------------ */ function snapshotChange(player, current, ms) { const snaps = player.snapshots || []; if (!snaps.length) return null; const cutoff = Date.now() - ms; const past = [...snaps].reverse().find((s) => s.t <= cutoff); if (!past || !past.v) return null; return ((current - past.v) / past.v) * 100; } function LeaderboardTab({ game, me }) { const [sortBy, setSortBy] = useState("net"); const rows = Object.values(game.players).map((p) => ({ id: p.id, p, net: p.netWorth, day: snapshotChange(p, p.netWorth, GAME_DAY_MS), week: snapshotChange(p, p.netWorth, 7 * GAME_DAY_MS), })); const sorted = [...rows].sort((a, b) => { if (sortBy === "day") return (b.day ?? -Infinity) - (a.day ?? -Infinity); if (sortBy === "week") return (b.week ?? -Infinity) - (a.week ?? -Infinity); return b.net - a.net; }).slice(0, 10); const myRank = [...rows].sort((a, b) => b.net - a.net).findIndex((r) => r.id === me.id) + 1; const pct = (v) => v === null ? — : = 0 ? "chg-up" : "chg-down"}>{fmtPct(v)}; return (

Top ten traders by net worth. Percentages compare against saved snapshots, so new traders show a dash until enough history builds up.

Your overall rank: #{myRank || "—"} of {rows.length}
{sorted.map((r, i) => ( ))}
TraderNet worth1d7dProperties
{i + 1} {r.id === me.id && (you)} {r.p.firmName &&
{r.p.firmName}
}		 {fmt(r.net)} {pct(r.day)} {pct(r.week)} {r.p.propertyCount}
); } /* ---------------------------- Market report ------------------------------ */ function EventsTab({ game, me, onAct }) { const level = me.analyticsLevel || 0; const nextTier = ANALYTICS_TIERS[level + 1]; const currentTier = ANALYTICS_TIERS[level]; return (

Your desk

Everything that happened to you, whether or not it made the news.
{!game.notifications.length ?
Nothing yet — buy something and the rents will start arriving.
: game.notifications.map((n) => (
{n.text}
{fmtTime(n.t)}
))}

Analytics subscription

Current plan: {currentTier.name}
{currentTier.desc}
{nextTier ? ( <>
{nextTier.name} — {nextTier.desc}
) :
You have the highest tier available.
} {game.hiddenNews > 0 &&
{game.hiddenNews} trader action{game.hiddenNews === 1 ? "" : "s"} currently below your reporting threshold.
}

Market sentiment

Drives the drift behind every property's price.
Bank rate outlook
= 0 ? "50%" : `${50 + game.market.economicIndex * 50}%`, width: `${Math.abs(game.market.economicIndex) * 50}%` }} />
{game.market.economicIndex >= 0 ? "+" : ""}{(game.market.economicIndex * 100).toFixed(0)}
{Object.entries(REGIONS).map(([code, r]) => { const v = game.market.regionTrend[code] || 0; return (
{r.label}
= 0 ? "50%" : `${50 + v * 50}%`, width: `${Math.abs(v) * 50}%` }} />
{v >= 0 ? "+" : ""}{(v * 100).toFixed(0)}
); })}

Market report

{!game.news.length &&
No market activity reported yet.
} {game.news.map((e) => (
{fmtTime(e.t)}
{e.text}
))}
); } /* ---------------------------- Personalise ------------------------------ */ /* Paddle is loaded lazily, only when someone opens the shop, and only if the server says payments are configured. */ let paddleReady = null; function loadPaddle(shop) { if (paddleReady) return paddleReady; paddleReady = new Promise((resolve, reject) => { if (!shop.configured || !shop.clientToken) return reject(new Error("Payments aren't set up yet.")); if (window.Paddle) return resolve(window.Paddle); const s = document.createElement("script"); s.src = "https://cdn.paddle.com/paddle/v2/paddle.js"; s.onload = () => { try { if (shop.environment !== "production") window.Paddle.Environment.set("sandbox"); window.Paddle.Initialize({ token: shop.clientToken }); resolve(window.Paddle); } catch (e) { reject(e); } }; s.onerror = () => reject(new Error("Couldn't reach the payment provider.")); document.head.appendChild(s); }); return paddleReady; } function PersonaliseTab({ me, onAct, onEquip, onFirmName, flash }) { const shop = me.shop || { items: [], configured: false }; const worn = me.cosmetics || {}; const [firm, setFirm] = useState(worn.firmName || ""); const ownsFirm = shop.owned.includes("firm.name"); async function buy(item) { try { const Paddle = await loadPaddle(shop); Paddle.Checkout.open({ items: [{ priceId: item.priceId, quantity: 1 }], customer: me.email ? { email: me.email } : undefined, customData: { userId: String(me.id), sku: item.sku }, settings: { successUrl: location.origin + "/?purchased=" + encodeURIComponent(item.sku) }, }); } catch (e) { flash(e.message); } } const themeSwatch = (sku) => { const map = { "theme.night-desk": ["#1E1F1C", "#7FA08C", "#D9B45A"], "theme.blueprint": ["#12314F", "#7FB0D8", "#EBD9A6"], "theme.terminal": ["#080C08", "#2C8C43", "#B7F5C0"], }; return map[sku] || ["#E7E1D2", "#1F4B3F", "#C9A227"]; }; return (

Everything here is decoration. None of it moves a price, earns a penny, speeds anything up, or tells you something another trader can't see — the market treats a founding trader exactly like somebody who joined this morning.

Your appearance

How you look to everyone else on the exchange.
Exchange theme
House crest
{Object.keys(CREST_SHAPES).map((sku) => { const owned = shop.crests.includes(sku); return ( ); })}
Property façades
Applies to every property you own, for everyone who looks at them.
Trading house
{ownsFirm ? (
setFirm(e.target.value)} /> {worn.firmName && }
) :
Locked — a firm name appears under yours wherever you trade.
}

Shop

{!shop.configured ? (
The shop isn't switched on yet. Add your Paddle client token and webhook secret to .env to open it.
) : ( <>
One-off purchases. Paddle handles the payment and the VAT; no card details reach this server.
{shop.items.map((item) => (

{item.name}

{item.blurb}
{item.owned ? Owned : (
{item.price}
)}
))}
)}
); } /* ---------------------------- cosmetics ------------------------------ */ /* Crests are drawn, not loaded — no image files to host, and they inherit the current theme's ink colour wherever they appear. */ const CREST_SHAPES = { "crest.rose": (c) => , "crest.keys": (c) => , "crest.tower": (c) => , "crest.lion": (c) => , "crest.ouse": (c) => , "crest.oak": (c) => , "crest.compass": (c) => , "crest.anchor": (c) => , }; function Crest({ id, size = 16, color }) { const draw = CREST_SHAPES[id]; if (!draw) return null; return ( ); } /* A player's name as it appears anywhere in the game: crest, name, and a founder's mark. One component so identity is consistent everywhere. */ function TraderName({ player, size = 16 }) { if (!player) return a trader; return ( {player.crest && } {player.name} {player.founder && ✦} ); } const FACADE_PALETTES = { "facade.georgian": { brick: "#D8CFC0", roof: "#4A4A46", sky: ["#CBD9E2", "#EDE7DA"], ground: "#C6BCA4" }, "facade.victorian": { brick: "#8E4436", roof: "#33302C", sky: ["#C2CFD8", "#E4DFD2"], ground: "#BAB19A" }, "facade.winter": { brick: "#A9A29B", roof: "#E8EDF0", sky: ["#D6E1EA", "#F2F3F1"], ground: "#E9ECEC" }, }; /* ---------------------------- accounts ------------------------------ */ function AuthScreen({ onAuthed }) { const [mode, setMode] = useState("login"); const [email, setEmail] = useState(""); const [username, setUsername] = useState(""); const [password, setPassword] = useState(""); const [error, setError] = useState(""); const [notice, setNotice] = useState(""); const [busy, setBusy] = useState(false); /* Arriving from a reset email: the token is in the URL. */ const resetToken = useMemo(() => { try { return new URL(location.href).searchParams.get("token"); } catch { return null; } }, []); const isResetLink = typeof location !== "undefined" && location.pathname === "/reset" && resetToken; const [resetValid, setResetValid] = useState(null); useEffect(() => { if (!isResetLink) return; setMode("reset"); api(`/api/reset-check?token=${encodeURIComponent(resetToken)}`) .then((r) => { setResetValid(r.valid); if (!r.valid) setError(r.error); }) .catch(() => setResetValid(false)); }, [isResetLink, resetToken]); async function submit(e) { if (e) e.preventDefault(); setError(""); setNotice(""); setBusy(true); try { if (mode === "register") { const res = await api("/api/register", { method: "POST", body: { email, username, password, deviceId: deviceId() } }); if (res.needsVerification) { setNotice("Check your inbox — we've sent you a link to confirm the address before you can trade."); setMode("login"); } else { await onAuthed(); } } else if (mode === "forgot") { const res = await api("/api/forgot", { method: "POST", body: { email } }); setNotice(res.message); } else if (mode === "reset") { await api("/api/reset", { method: "POST", body: { token: resetToken, password } }); history.replaceState({}, "", "/"); await onAuthed(); } else { await api("/api/login", { method: "POST", body: { emailOrName: email, password, deviceId: deviceId() } }); await onAuthed(); } } catch (err) { setError(err.message); } setBusy(false); } /* Set a new password from an emailed link. */ if (mode === "reset") { return (

Set a new password

{resetValid === false ? ( <>

{error || "That reset link is no longer valid."}

) : resetValid === null ?

Checking that link…

: ( <>

Choose something you'll remember. Setting it signs out anyone currently using your account.

setPassword(ev.target.value)} required />
At least 10 characters.
{error &&
{error}
} )}
); } /* Ask for a reset email. */ if (mode === "forgot") { return (

Forgotten password

Tell us the address you registered with and we'll send a link to set a new password. The link works once and expires in an hour.

setEmail(ev.target.value)} required /> {error &&
{error}
} {notice &&
{notice}
}
); } return (

York Property Exchange

A live property market for York: 155 properties across fifteen neighbourhoods, plus landmarks you can only touch once you're worth a couple of million. Everyone trades in the same market, in real time.

setEmail(e.target.value)} required /> {mode === "register" && ( <> setUsername(e.target.value)} required />
This is the name other traders see on the leaderboard and in the market report.
)} setPassword(e.target.value)} required /> {mode === "register" &&
At least 10 characters. A short phrase you'll remember beats a jumble you won't.
} {error &&
{error}
} {notice &&
{notice}
} {mode === "register" && (
One account per person. New accounts trade the open market straight away, but can only deal with other traders after they've been going a while and earned their own money — and your opening grant never leaves your account.
)}
{mode === "login" ? <> No account yet?
: <>Already trading? }
); } /* ---------------------------- app root ------------------------------ */ function Exchange() { const [booted, setBooted] = useState(false); const [state, setState] = useState(null); const [authed, setAuthed] = useState(false); const [tab, setTab] = useState("market"); const [notice, setNotice] = useState(""); const [now, setNow] = useState(Date.now()); const [detailId, setDetailId] = useState(null); const [connected, setConnected] = useState(true); const histories = useRef({}); const esRef = useRef(null); const flash = useCallback((msg) => { setNotice(msg); setTimeout(() => setNotice((c) => (c === msg ? "" : c)), 3600); }, []); /* Prices arrive as a compact map every tick; we keep our own short history locally so the server never has to resend a chart. */ const recordPrices = useCallback((props) => { const h = histories.current; for (const id of Object.keys(props)) { const price = typeof props[id] === "number" ? props[id] : props[id].currentPrice; if (!h[id]) h[id] = [price]; else { h[id].push(price); if (h[id].length > 40) h[id].shift(); } } }, []); const applyState = useCallback((s) => { if (!s) return; GAME_DAY_MS = (s.rules && s.rules.gameDayMs) || GAME_DAY_MS; recordPrices(s.properties); setState(s); setAuthed(true); }, [recordPrices]); const boot = useCallback(async () => { const cat = await api("/api/catalogue"); adoptCatalogue(cat); const me = await api("/api/me"); if (me.authenticated) applyState(me.state); else setAuthed(false); setBooted(true); }, [applyState]); useEffect(() => { boot().catch(() => setBooted(true)); }, [boot]); useEffect(() => { const t = setInterval(() => setNow(Date.now()), 1000); return () => clearInterval(t); }, []); /* One event stream carries everything: a full state after any action by anyone, and a small price message on each tick. */ useEffect(() => { if (!authed) return; const es = new EventSource("/api/stream"); esRef.current = es; es.addEventListener("state", (ev) => { setConnected(true); applyState(JSON.parse(ev.data)); }); es.addEventListener("tick", (ev) => { setConnected(true); const payload = JSON.parse(ev.data); recordPrices(payload.prices); setState((prev) => { if (!prev) return prev; const properties = { ...prev.properties }; for (const id of Object.keys(payload.prices)) { if (properties[id]) properties[id] = { ...properties[id], currentPrice: payload.prices[id] }; } return { ...prev, properties, market: { ...prev.market, economicIndex: payload.economicIndex, regionTrend: payload.regionTrend } }; }); }); es.onerror = () => setConnected(false); return () => { es.close(); esRef.current = null; }; }, [authed, applyState, recordPrices]); const onAct = useCallback(async (action, payload) => { try { const res = await act(action, payload); if (res.message) flash(res.message); if (res.state) applyState(res.state); } catch (e) { flash(e.message); } }, [applyState, flash]); const onEquip = useCallback(async (slot, value) => { try { const res = await api("/api/shop/equip", { method: "POST", body: { slot, value } }); if (res.message) flash(res.message); if (res.state) applyState(res.state); } catch (e) { flash(e.message); } }, [applyState, flash]); const onFirmName = useCallback(async (name) => { try { const res = await api("/api/shop/firm-name", { method: "POST", body: { name } }); if (res.message) flash(res.message); if (res.state) applyState(res.state); } catch (e) { flash(e.message); } }, [applyState, flash]); async function signOut() { try { await api("/api/logout", { method: "POST" }); } catch {} if (esRef.current) esRef.current.close(); setAuthed(false); setState(null); } if (!booted) { return
Opening the exchange…
; } if (!authed || !state) return ; const me = state.self; const game = { players: state.players, properties: state.properties, auctions: state.auctions, trades: state.trades, tactics: state.tactics, news: state.news, notifications: state.notifications, hiddenNews: state.hiddenNews, market: state.market, rules: state.rules, }; const tickerItems = state.news.filter((e) => e.kind === "market").slice(0, 8); const activeAuctions = state.auctions.filter((a) => a.status === "active"); const incoming = state.trades.filter((o) => o.to === me.id); const detailMeta = detailId ? metaFor(detailId) : null; const bankAlert = me.loan > 0 && (me.arrearsSince > 0 || me.netWorth < 0); const openDetail = (id) => setDetailId(id); const themeClass = me.cosmetics && me.cosmetics.theme ? " " + me.cosmetics.theme.replace("theme.", "theme-") : ""; return (

York Property Exchange

A live market for York, open to traders everywhere
{Object.keys(state.players).length} trader{Object.keys(state.players).length === 1 ? "" : "s"} registered ·{" "}
{!connected &&
Reconnecting to the exchange…
}
{tickerItems.length ? tickerItems.map((e) => {e.text}) : Market open — no major moves reported}
Trading as {me.cosmetics && me.cosmetics.crest && } {me.name} {me.cosmetics && me.cosmetics.firmName && {me.cosmetics.firmName}}
Cash{fmt(me.cash)}
Portfolio{fmt(me.portfolioValue)}
{me.deposit > 0 &&
On deposit{fmt(me.deposit)}
} {me.loan > 0 &&
Owed to bank{fmt(me.loan)}
}
Net worth{fmt(me.netWorth)}
Income earned{fmt(me.totalIncome)}
{tab === "market" && } {tab === "map" && } {tab === "portfolio" && } {tab === "auctions" && } {tab === "bank" && } {tab === "tactics" && } {tab === "trade" && } {tab === "leaderboard" && } {tab === "events" && } {tab === "personalise" && }
{notice &&
{notice}
} {detailId && detailMeta && state.properties[detailId] && ( setDetailId(null)} onAct={(a, p) => { onAct(a, p); }} /> )}
); } ReactDOM.createRoot(document.getElementById("root")).render();