@homie-rocks/studio 0.23.0 → 0.24.2

package/worker/index.mjs

@@ -54,6 +54,10 @@
  *   /<game>/api/chat/report    a player reports one chat line (POST, this site's pages): the room's own copy of it is kept
  *                              for the owner, 30 days (worker/chat-store.mjs); room chat itself rides the sockets above
  *                              (NETPLAY.md section 19) and is never stored
+ *   /shop/, /api/shop/...      the studio's shop (worker/shop.mjs, shop/SHOP.md): its items in real money, the studio's
+ *                              OWN Stripe Checkout, the signed webhook, what a player owns (/api/player/owns), refunds;
+ *                              closed until the owner's restricted key is in; never on a kids server or a television
+ *   /api/referrals/statement   another studio's signed referral statement to this one (worker/referrals.mjs)
  *
  * A page in the studio's site/pages wins over the generated one at the same address. Every HTML answer is
  * `no-transform` (an edge in front of a custom domain injects nothing) and is never framed by another site.
@@ -104,6 +108,8 @@ import {
 // every device, and the owner's own account (`homie-studio players owner`) counts as the owner.
 usePlayers(playerAccounts);
 import { STUDIO_VERSION_TAG } from './version.mjs';
+import { roomBadge, shellShop, shopOf, shopRoutes } from './shop.mjs';
+import { arrivalCookie, manifestReferrals } from './referrals.mjs';
 import { licenseOf, remixAllowed, remixRow } from './license.mjs';
 
 export { SEAT_MAX } from './seats.mjs';
@@ -461,6 +467,9 @@ async function gameDocument(request, env, url, game, meta, cat, { agent = null }
     ...(meta?.movement ? { movement: meta.movement } : {}),
     // game.json "saves": the play shell around this frame answers @homie-rocks/studio/saves (saves/SAVES.md).
     ...(meta?.saves && want === 'play' ? { saves: true } : {}),
+    // The studio sells something in this game (shop/SHOP.md): the play shell answers @homie-rocks/studio/shop. A
+    // watcher has no shop; the shell itself says "kids" on a kids server and shows only a code on a television.
+    ...(!agent && !watching && shellShop(cat, game) ? { shop: true } : {}),
   };
   let html = await res.text();
   const head = `<script>window.HOMIE_NET=${JSON.stringify(cfg).replace(/</g, '\\u003c')}</script>`;
@@ -539,7 +548,18 @@ function finish(res, path) {
 
 export default {
   async fetch(request, env, ctx) {
-    return finish(await route(request, env, ctx), new URL(request.url).pathname);
+    const url = new URL(request.url);
+    const res = finish(await route(request, env, ctx), url.pathname);
+    // A referral's arrival (worker/referrals.mjs): only a person's page load with ?via= of another site, on a studio
+    // that pays referrals. The page is answered first; a cookie is added to it only then.
+    if (url.searchParams.has('via') && res && res.status === 200 && /text\/html/i.test(res.headers.get('content-type') ?? '')) {
+      try {
+        const cat = await catalogue(env, url.origin);
+        const cookie = await arrivalCookie(request, env, url, shopOf(cat));
+        if (cookie) { const out = new Response(res.body, res); out.headers.append('set-cookie', cookie); return out; }
+      } catch { /* an arrival is never worth a failed page */ }
+    }
+    return res;
   },
 };
 
@@ -562,6 +582,11 @@ async function route(request, env, ctx) {
   }
   if (path.startsWith('/_studio/')) return (await officeRoutes(request, env, url, { catalogueOf: getAll })) ?? ownerRoutes(request, env, url, { catalogueOf: getAll });
   if (path === '/__homie' || path.startsWith('/__homie/')) return notAHomie(request);
+  // The shop (0.24.0) before player accounts: /api/player/owns is the shop's.
+  {
+    const shopped = await shopRoutes(request, env, ctx, url, { catalogueOf: getAll });
+    if (shopped) return shopped;
+  }
   if (path.startsWith('/api/player/') || path === '/account' || path === '/account/' || path === '/_homie/account.js') return playerRoutes(request, env, ctx, url, { catalogueOf: getCat });
   if (path === '/_homie/site.js') return new Response(SITE_JS, { headers: { 'content-type': 'text/javascript; charset=utf-8', 'cache-control': url.searchParams.get('v') === STUDIO_VERSION_TAG ? 'public, max-age=31536000, immutable' : 'public, max-age=300', 'x-content-type-options': 'nosniff' } });
   if (path === '/api/stats/beat' && request.method === 'POST') return mediaBeat(request, env, ctx, url);
@@ -622,6 +647,10 @@ async function route(request, env, ctx) {
       ...(shareRooms ? { rooms: `${url.origin}/api/rooms` } : {}),
       // Shared only when studio.json says `stats.share`: two numbers for the whole studio, for the hub.
       ...(played ? { played } : {}),
+      // The shop (0.24.0): whether it sells and its till, never a key or a sale; and referrals: this studio takes
+      // signed statements as a referrer, with the public half of its statement key and, if it sells, its terms.
+      ...(shopOf(cat)?.open ? { shop: { open: true, till: shopOf(cat).till, currency: shopOf(cat).currency, page: `${url.origin}/shop/` } } : {}),
+      ...(await manifestReferrals(env, url.origin, shopOf(cat), cat.studio).then((r) => (r ? { referrals: r } : {})).catch(() => ({}))),
     }, 200, { 'access-control-allow-origin': '*' });
   }
   if (path === '/api/games') {
@@ -885,11 +914,15 @@ async function route(request, env, ctx) {
         const local = isLocalOrigin(url.origin);
         let qr = null;
         if (!local) try { qr = qrSvg(joinUrl, { title: `Join ${meta.name ?? game}` }); } catch { /* too long for a QR: the address shows as text */ }
-        return playPage(cat, meta, { screen: true, joinUrl, qr, local, room, ticket, owner: d.owner, launch, server });
+        // The shop on a television is a code to buy on a phone (the TV never sells; never on a kids server).
+        const sh = shellShop(cat, game, { kids: pol.kids });
+        let shopQr = null;
+        if (sh && !local) try { shopQr = qrSvg(`${url.origin}/shop/?game=${encodeURIComponent(game)}`, { title: `Shop: ${meta.name ?? game}` }); } catch { shopQr = null; }
+        return playPage(cat, meta, { screen: true, joinUrl, qr, local, room, ticket, owner: d.owner, launch, server, shop: sh ? { ...sh, qr: shopQr, url: `${url.origin}/shop/?game=${game}` } : null });
       }
       await countVisit(request, env, ctx, game, 'play');
       shareDaily(cat, url, ctx);
-      return playPage(cat, meta, { ticket, owner: d.owner, launch, server, ...(await chatWho(env, game, srv, d.acct)) });
+      return playPage(cat, meta, { ticket, owner: d.owner, launch, server, ...(await chatWho(env, game, srv, d.acct)), shop: shellShop(cat, game, { kids: pol.kids }) });
     }
     if (sub === 'watch') {
       // The same door as Play: a game that is private or an invite-only beta is watched only by whoever may play it.
@@ -1005,8 +1038,12 @@ async function route(request, env, ctx) {
       const origin = request.headers.get('origin');
       const hub = sub === '__watch' && Boolean(origin) && origin !== 'null' && origin !== url.origin;
       const lean = { ...chat, emoji: chat.emoji.filter((e) => !REACTIONS.some((r) => r.k === e.k)) };
+      // A supporter's badge (the shop, 0.24.0): what the player's account owns, looked up here, so a hello can never claim
+      // one; none on a kids server, none for an AI or a watcher.
+      const pid = !ag && !w && sub === '__net' ? parts.find((x) => x.startsWith('p-'))?.slice(2) : null;
+      const badge = pid ? await roomBadge(env, cat, pid, { kids: pol.kids }) : null;
       const stub = env.TABLE.get(env.TABLE.idFromName(`${game}/${room}`));
-      const target = `https://table/${sub}?game=${encodeURIComponent(game)}&room=${encodeURIComponent(room)}&max=${max}${b ? `&b=${b}` : ''}${who ? `&via=${encodeURIComponent(who)}` : ''}${sub === '__net' ? `&wp=${policy}${w ? '&w=1' : ''}` : ''}&pol=${encodeFacts(pol)}&chat=${encodeFacts(lean)}${acct ? '&acct=1' : ''}${member ? '&mem=1' : ''}${hub ? '&hub=1' : ''}${ag ? `&ag=${encodeFacts(ag)}` : ''}`;
+      const target = `https://table/${sub}?game=${encodeURIComponent(game)}&room=${encodeURIComponent(room)}&max=${max}${b ? `&b=${b}` : ''}${who ? `&via=${encodeURIComponent(who)}` : ''}${sub === '__net' ? `&wp=${policy}${w ? '&w=1' : ''}` : ''}&pol=${encodeFacts(pol)}&chat=${encodeFacts(lean)}${acct ? '&acct=1' : ''}${member ? '&mem=1' : ''}${hub ? '&hub=1' : ''}${ag ? `&ag=${encodeFacts(ag)}` : ''}${badge ? `&bd=${encodeURIComponent(badge)}` : ''}`;
       return stub.fetch(new Request(target, request));
     }
     // The same knock, relative to the game's own page: the same answer (see notAHomie).
@@ -1320,6 +1357,8 @@ export class Table {
       watch: url.searchParams.get('w') === '1',
       // An AI with a pass the Worker verified (section 17): its pass, role, hands and name. Only the Worker sets it.
       ...(agent && typeof agent === 'object' && url.pathname === '/__net' ? { agent } : {}),
+      // A badge the player's account owns (the shop): the Worker looked it up; a hello cannot set one.
+      ...(url.pathname === '/__net' && /^[\p{L}\p{N} .'&+-]{1,16}$/u.test(url.searchParams.get('bd') ?? '') ? { badge: url.searchParams.get('bd') } : {}),
       watchPolicy: WATCH_POLICIES.includes(url.searchParams.get('wp')) ? url.searchParams.get('wp') : 'follow',
       // House QA and `homie-studio check` mark their browsers; their rooms, rounds and peaks are not the studio's numbers.
       qa: isQa(request),

package/worker/office-page.mjs

@@ -10,7 +10,7 @@ import { SKILLS } from './agents.mjs';
 import { KIDS_LINE, POLICY_WORDS, SERVER_LIMITS } from './servers.mjs';
 import { esc } from './site.mjs';
 
-const PRIVATE = {
+export const PRIVATE = {
   'content-type': 'text/html; charset=utf-8',
   'cache-control': 'no-store, private',
   'x-robots-tag': 'noindex, nofollow',
@@ -832,7 +832,7 @@ async function officeScriptHash() {
   return scriptHash;
 }
 
-function shell(cat, title, body, { status = 200, script = null, extra = {} } = {}) {
+export function shell(cat, title, body, { status = 200, script = null, extra = {} } = {}) {
   return `<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="robots" content="noindex, nofollow"><title>${esc(title)}</title><style>:root{--accent:${accentOf(cat)}}${CSS}</style></head><body><div class="wrap">${body}</div>${script ? `<script>${script}</script>` : ''}</body></html>`;
 }
@@ -842,7 +842,7 @@ export async function officePage(cat, headers = {}) {
   const name = cat.studio?.name ?? 'Studio';
   const options = (cat.games ?? []).map((g) => `<option value="${esc(g.id)}">every room of ${esc(g.name)}</option>`).join('');
   const body = `<header class="top"><h1>${esc(name)} <small>Office</small></h1>
-<div class="links"><span class="live"><i class="dot" id="livedot"></i><span id="live">…</span></span><a href="/_studio/stats">Stats</a>
+<div class="links"><span class="live"><i class="dot" id="livedot"></i><span id="live">…</span></span><a href="/_studio/stats">Stats</a>${cat.shop ? '<a href="/_studio/office/shop">Shop</a>' : ''}
 <form method="post" action="/_studio/signout" style="display:inline"><button class="ghost small" type="submit">Sign out</button></form></div></header>
 <form class="bar" id="announce-all"><label for="announce-text">Announce</label><input type="text" id="announce-text" maxlength="280" placeholder="A line every player sees, in the game" autocomplete="off">
 <select id="announce-scope" aria-label="Who sees it"><option value="">every room of every game</option>${options}</select><button type="submit">Send</button>
@@ -871,7 +871,7 @@ export function lockedPage(cat, { what = 'office', ask = null } = {}) {
   return new Response(shell(cat, `${what === 'confirm' ? 'Confirm' : 'Office'} · private`, body), { status: 401, headers: { ...PRIVATE, 'content-security-policy': NO_SCRIPT_CSP } });
 }
 
-const VERB = { kick: 'Kick', mute: 'Mute', close: 'Close the room', announce: 'Announce', game: 'Change it', 'server-set': 'Change it', 'server-close': 'Close it', member: 'Remove', 'agents-brain': 'Let them talk' };
+const VERB = { refund: 'Refund it', 'shop-settle': 'Mark it paid', kick: 'Kick', mute: 'Mute', close: 'Close the room', announce: 'Announce', game: 'Change it', 'server-set': 'Change it', 'server-close': 'Close it', member: 'Remove', 'agents-brain': 'Let them talk' };
 
 /** The owner's one tap for what their AI asked, and what came of it. */
 export function confirmPage(cat, ask, { missing = false } = {}) {
@@ -883,7 +883,7 @@ export function confirmPage(cat, ask, { missing = false } = {}) {
     const verb = ask.action?.op === 'mute' && ask.action.off ? 'Unmute' : ask.action?.op === 'close' && ask.action.reopen ? 'Open it again' : VERB[ask.action?.op] ?? 'Yes';
     body = `<h1>${esc(name)} <small>Your AI asks</small></h1>
 <p style="font-size:19px;line-height:1.45;max-width:46ch">${esc(ask.what)}</p>
-<form method="post" class="bar" style="background:transparent;border:0;padding:0"><button type="submit" name="do" value="yes" class="${['kick', 'close', 'server-close', 'member'].includes(ask.action?.op) && !ask.action?.reopen ? 'armed' : ''}">${esc(verb)}</button><button type="submit" name="do" value="no" class="ghost">No</button></form>
+<form method="post" class="bar" style="background:transparent;border:0;padding:0"><button type="submit" name="do" value="yes" class="${['kick', 'close', 'server-close', 'member', 'refund'].includes(ask.action?.op) && !ask.action?.reopen ? 'armed' : ''}">${esc(verb)}</button><button type="submit" name="do" value="no" class="ghost">No</button></form>
 <p class="note">Only you can confirm this: your AI asked through the studio's office key, which cannot say yes. It lasts until ${esc(new Date(ask.expiresAt).toISOString().slice(11, 16))} UTC.</p>`;
   } else {
     const said = { done: 'Done.', failed: 'That did not work.', cancelled: 'Not done: you said no.', expired: 'This ask ran out (15 minutes). Your AI can ask again.', working: 'Working on it…' }[ask.state] ?? ask.state;

package/worker/office.mjs

@@ -49,6 +49,10 @@
  * reports players made (each the one message it is about) with Dismiss, and the review's day (Workers AI neurons).
  * From an office key, a change that opens chat up (more allowed, fewer checks) is an ASK; one that tightens it, or
  * taking a message down, happens at once.
+ *
+ * THE SHOP (0.24.0, worker/shop.mjs): /_studio/office/shop and /_studio/api/shop (sales, refunds, disputes, payouts as
+ * links to the studio's own Stripe, a CSV, the referral books and signed statements). A refund is the owner's one tap;
+ * from an office key it is ALWAYS an ask (the AI may only propose one), and so is marking a referrer paid.
  */
 import { SEAT_MAX, seatsOf } from './seats.mjs';
 import { PUBLIC_SERVER, SERVER_LIMITS, checkServer, levelName, narrows, policyOf, roomServer, rowFor, serverView, serversOf, serverPassCookie, writeServer } from './servers.mjs';
@@ -60,6 +64,8 @@ import { confirmPage, lockedPage, officePage } from './office-page.mjs';
 import { licenseOf } from './license.mjs';
 import { CHAT_MODES, CHAT_WHO, checkChatRules, publicChat } from './chat.mjs';
 import { chatDay, chatOf, chatRowsOf, clearChatRules, dismissReport, reportsOf, writeChatRules } from './chat-store.mjs';
+import { checkRefund, checkSettle, describeRefund, officeShopPage, ordersCsv, performRefund, settleReferrer, shopOffice, statementsOut, statementsSend } from './shop.mjs';
+import { orderById } from './shop-store.mjs';
 
 export { OFFICE_MIGRATION, OFFICE_MIGRATION_FILE } from './office-schema.mjs';
 
@@ -673,6 +679,8 @@ function checkAction(cat, op, body) {
       if (!(level >= 1 && level <= 5)) return bad('level is 1 to 5 (Rookie, Steady, Fair, Strong, Maxed)');
       return { ok: true, action: { op, game: meta.id, room, level } };
     }
+    case 'refund': return checkRefund(body);
+    case 'shop-settle': return checkSettle(body);
     case 'agents-brain': {
       if (!meta) return bad('game is one of this studio\'s game ids');
       if (typeof body.server !== 'string' || !(body.server === 'public' || /^[a-z0-9][a-z0-9-]{1,19}$/.test(body.server))) return bad('server is the server\'s id');
@@ -770,6 +778,8 @@ export function describe(cat, a) {
     case 'member': return a.remove ? `Remove ${a.name ?? 'that player'} from ${gname}'s server ${a.server} (they can join again unless its door keeps them out).` : `Make ${a.name ?? 'that player'} a ${a.role} of ${gname}'s server ${a.server}.`;
     case 'pass': return a.action === 'revoke' ? `Revoke the agent pass ${a.id}: that AI leaves every room and cannot sit again.` : `Issue an agent pass for an AI called "${a.label} · AI".`;
     case 'room-level': return `Set the AI in ${where} to ${levelName(a.level)} (level ${a.level}).`;
+    case 'refund': return describeRefund(cat, a, a.item ? { item: a.item, amount: a.amount, currency: a.currency } : null);
+    case 'shop-settle': return `Mark what this studio owes ${a.via} for referrals as paid${a.ref ? ` (${a.ref})` : ''}: its owed lines are settled in the books.`;
     case 'agents-brain': return ['workers-ai', 'owner-key'].includes(a.mode)
       ? `Let the AI guides on ${gname}'s server ${a.server} talk: they speak only the lines the game's own agents.json gives them (never free text), at most one line every 8 seconds, never about a person, and a player can quiet them. Their brain runs on ${a.mode === 'workers-ai' ? `this studio's own Workers AI (free allowance${a.budget !== undefined ? `; at most ${Math.round(a.budget).toLocaleString('en-US')} neurons a day` : ''})` : `your own AI provider key (claude-haiku-4-5, your money${a.budget !== undefined ? `, at most $${Number(a.budget).toFixed(2)} a day` : ', capped daily'})`}.`
       : `Set the AI guides' brain on ${gname}'s server ${a.server} to ${a.mode}.`;
@@ -800,6 +810,8 @@ export function describe(cat, a) {
 /** Whether an office key (the owner's AI) only ASKS for this (DESIGN D13): what takes something away, or consent. */
 export async function needsAsk(env, cat, a) {
   if (DESTRUCTIVE.has(a.op)) return true;
+  // Money: the owner's AI may only propose a refund or a settlement; the owner says yes.
+  if (a.op === 'refund' || a.op === 'shop-settle') return true;
   if (a.op === 'server-close') return !a.reopen;
   if (a.op === 'member') return a.remove === true;
   if (a.op === 'server-set') {
@@ -1020,6 +1032,8 @@ export async function perform(env, cat, a) {
       if (a.mode === 'off') notes.push('The guides are the game\'s plain bots.');
       return { ok: true, op: a.op, game: meta.id, server: sv.id, brain: sv.brain, budget: day.budget, note: `Saved. ${notes.join(' ')}`.trim() };
     }
+    case 'refund': return performRefund(env, cat, a);
+    case 'shop-settle': return settleReferrer(env, a);
     default: return { ok: false, error: 'op' };
   }
 }
@@ -1155,11 +1169,21 @@ async function api(request, env, url, cat) {
     const view = await officeView(env, { ...cat, games: metas }, url.origin);
     return json({ ok: true, day: view.chat, games: view.games.map((g) => ({ id: g.id, name: g.name, chat: g.chat, rooms: g.rooms.map((r) => ({ room: r.room, label: r.label, players: r.players, chat: r.chat })) })) });
   }
+  // The shop (0.24.0): the owner's view, the accountant's CSV, the referral statements.
+  if (path === '/_studio/api/shop' && request.method === 'GET') return json(await shopOffice(env, cat, url.origin));
+  if (path === '/_studio/api/shop/orders.csv' && request.method === 'GET') {
+    try {
+      return new Response(await ordersCsv(env), { headers: { 'content-type': 'text/csv; charset=utf-8', 'cache-control': 'no-store, private', 'content-disposition': `attachment; filename="orders-${today()}.csv"` } });
+    } catch { return json({ ok: false, error: 'not-migrated', message: 'The shop needs migration 0008_studio_shop.sql (npm run deploy).' }, 503); }
+  }
+  if (path === '/_studio/api/shop/statements' && request.method === 'GET') return json(await statementsOut(env, cat, url.origin, url.searchParams.get('period')));
+  if (path === '/_studio/api/shop/statements/send' && request.method === 'POST') return json(await statementsSend(env, cat, url.origin, body.period));
   const OPS = {
     '/_studio/api/chat/rules': 'chat-rules', '/_studio/api/chat/remove': 'chat-remove', '/_studio/api/chat/report': 'chat-report', '/_studio/api/chat/budget': 'chat-budget',
     '/_studio/api/kick': 'kick', '/_studio/api/mute': 'mute', '/_studio/api/close': 'close', '/_studio/api/announce': 'announce', '/_studio/api/game': 'game',
     '/_studio/api/servers': 'server-create', '/_studio/api/servers/set': 'server-set', '/_studio/api/servers/close': 'server-close', '/_studio/api/servers/member': 'member',
     '/_studio/api/agents/pass': 'pass', '/_studio/api/room-level': 'room-level', '/_studio/api/agents/brain': 'agents-brain',
+    '/_studio/api/shop/refund': 'refund', '/_studio/api/shop/settle': 'shop-settle',
   };
   const op = OPS[path];
   if (!op || request.method !== 'POST') return json({ ok: false, error: 'not-found' }, 404);
@@ -1167,6 +1191,12 @@ async function api(request, env, url, cat) {
   if (!checked.ok) return json(checked, 400);
   const action = checked.action;
   if (op === 'server-create' || op === 'pass') action.origin = url.origin;
+  if (op === 'refund') {
+    // The ask and the confirm page say what the order is (its item and price), read from the books now.
+    const o = await orderById(env, action.order);
+    if (!o) return json({ ok: false, error: 'order', message: 'No such order (homie-studio shop orders lists them).' }, 404);
+    Object.assign(action, { item: o.item, amount: Number(o.amount), currency: o.currency });
+  }
   // An office key (the owner's AI) only ASKS for what takes something away; the owner confirms with one tap.
   if (who === 'office' && await needsAsk(env, cat, action)) {
     if (op === 'kick' || op === 'mute') {
@@ -1199,6 +1229,12 @@ export async function officeRoutes(request, env, url, { catalogueOf }) {
     const secure = url.protocol === 'https:' ? '; Secure' : '';
     return officePage(cat, session ? { 'set-cookie': `${OWNER_COOKIE}=${session}; Path=/; HttpOnly; SameSite=Lax; Max-Age=${30 * 24 * 3600}${secure}` } : {});
   }
+  if (path === '/_studio/office/shop' || path === '/_studio/office/shop/') {
+    const cat = await catalogueOf();
+    if (request.method !== 'GET') return new Response('method', { status: 405 });
+    if (!(await isOwner(request, env))) return lockedPage(cat, { what: 'office' });
+    return officeShopPage(cat);
+  }
   const confirm = /^\/_studio\/confirm\/(ask_[a-f0-9]{16})\/?$/.exec(path);
   if (confirm) {
     const cat = await catalogueOf();

package/worker/pages.mjs

@@ -8,6 +8,7 @@ import { SKILLS } from './agents.mjs';
 import { KIDS_LINE, POLICY_WORDS } from './servers.mjs';
 import { SAVES_SHELL_CSS, SAVES_SHELL_JS } from './saves-shell.mjs';
 import { CHAT_CSS, CHAT_JS, CHAT_OWNER_JS, chatBoot } from './chat-page.mjs';
+import { SHOP_SHELL_CSS, SHOP_SHELL_JS } from './shop-page.mjs';
 
 export { homePage, mediaIndexPage, notFoundPage, songPage, videoPage } from './site.mjs';
 
@@ -85,7 +86,7 @@ export function sharePlaces(value) {
  * the edge (game.json `screen.share`, per device: sharePlaces) opens Invite, Big screen and the room code; nothing
  * covers the middle of the screen or a thumb.
  */
-export function playPage(cat, g, { screen = false, joinUrl = null, qr = null, local = false, room = null, ticket = null, owner = false, launch = 'public', server = null, acct = false, member = false } = {}) {
+export function playPage(cat, g, { screen = false, joinUrl = null, qr = null, local = false, room = null, ticket = null, owner = false, launch = 'public', server = null, acct = false, member = false, shop = null } = {}) {
   const accent = cat?.studio?.theme?.accent ?? '#ffcf5a';
   const corner = (name, fallback) => (['top-left', 'top-right', 'bottom-left', 'bottom-right'].includes(g.screen?.[name]) ? g.screen[name] : fallback);
   const places = sharePlaces(g.screen?.share);
@@ -160,14 +161,14 @@ iframe.game { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; d
 .notice .acts a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 12px; text-decoration: none; font-weight: 700; color: #eef1f8; border: 1px solid rgba(255,255,255,.18); }
 .notice .acts a.primary { background: var(--hot); color: #0b0b10; border-color: transparent; }
 [hidden] { display: none !important; }
-${SERVER_CSS}${CHAT_CSS}${g.saves && !screen ? SAVES_SHELL_CSS : ''}${pillUi}`;
+${SERVER_CSS}${CHAT_CSS}${g.saves && !screen ? SAVES_SHELL_CSS : ''}${shop ? SHOP_SHELL_CSS : ''}${pillUi}`;
   // The room button's place on each device (sharePlaces); the shell moves it to this browser's once it knows the device.
   // A ticket (a game that is not public) and the owner's overlay ride along only for the browser they are for.
   // The server this page plays on (0.16.0): its pool (the Lobby), its badge and line for the chip, its ceiling.
   const srv = server ? { id: server.id, name: server.name, badge: server.badge, line: server.line, policy: server.policy, kids: Boolean(server.kids), mentor: Boolean(server.mentor), levelMax: server.levelMax } : null;
   // game.json "agents": { "vote": "game" } draws its own vote card; false turns the vote off (section 17).
   const vote = g.agents?.vote === 'game' || g.agents?.vote === false ? g.agents.vote : 'shell';
-  const boot = { game: g.id, name: g.name, screen: Boolean(screen), share: places, ...(room ? { room } : {}), ...(ticket ? { t: ticket } : {}), ...(owner ? { owner: true, launch } : {}), ...(srv ? { server: srv } : {}), vote, skills: SKILLS.map((k) => ({ level: k.level, name: k.name, card: k.card })), words: POLICY_WORDS, kidsLine: KIDS_LINE };
+  const boot = { game: g.id, name: g.name, screen: Boolean(screen), share: places, ...(room ? { room } : {}), ...(ticket ? { t: ticket } : {}), ...(owner ? { owner: true, launch } : {}), ...(srv ? { server: srv } : {}), vote, skills: SKILLS.map((k) => ({ level: k.level, name: k.name, card: k.card })), words: POLICY_WORDS, kidsLine: KIDS_LINE, ...(shop ? { shop } : {}) };
   // game.json "screen": { "join": "top-left" | "top-right" | "bottom-left" | "bottom-right" } keeps the card off the game's own HUD.
   const joinCorner = corner('join', 'bottom-right');
   const first = places.desk;
@@ -190,7 +191,7 @@ ${SERVER_CSS}${CHAT_CSS}${g.saves && !screen ? SAVES_SHELL_CSS : ''}${pillUi}`;
       <a data-bigscreen target="_blank" rel="noopener" href="/${esc(g.id)}/tv"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4" width="19" height="13" rx="2"/><path d="M8 20.5h8"/></svg><span>Big screen</span></a>
     </div>
     <span class="link" data-room-link></span>
-    <div class="foot"><a href="/${esc(g.id)}/">← ${esc(g.name)}</a><button type="button" data-copy-link>Copy link</button></div>${g.saves ? `
+    <div class="foot"><a href="/${esc(g.id)}/">← ${esc(g.name)}</a>${shop ? '<button type="button" data-shop-open>Shop</button>' : ''}<button type="button" data-copy-link>Copy link</button></div>${g.saves ? `
     <div class="who-row" data-who hidden><span data-who-name></span><button type="button" data-who-act></button></div>` : ''}
   </div>
 </div>
@@ -206,7 +207,8 @@ ${joinCard}${share}
 <script>window.__HOMIE_CHAT=${JSON.stringify(chatBoot(g, { surface: screen ? 'tv' : 'play', owner, acct, member })).replace(/</g, '\\u003c')};</script>
 <script>${CHAT_JS}</script>
 <script>${SHELL_JS}</script>${g.saves && !screen ? `
-<script>${SAVES_SHELL_JS}</script>` : ''}${owner ? `<style>${OWNER_CSS}</style><script>${OWNER_JS}</script><script>${CHAT_OWNER_JS}</script>` : ''}`, css, frameAncestors(cat));
+<script>${SAVES_SHELL_JS}</script>` : ''}${shop ? `
+<script>${SHOP_SHELL_JS}</script>` : ''}${owner ? `<style>${OWNER_CSS}</style><script>${OWNER_JS}</script><script>${CHAT_OWNER_JS}</script>` : ''}`, css, frameAncestors(cat));
 }
 
 /*

package/worker/players.mjs

@@ -30,6 +30,7 @@ import { cookieValue } from './stats.mjs';
 import { adoptStatements, bumpPlayerStats, dropPlayerData, fall, fallenList, getSave, listSaves, playerData, readPlayerStats, SAVE_LIMITS, savesSummary, wipeSaves, writeSaves } from './saves.mjs';
 import { bytesToB64url, randomToken, sha256Hex, verifyAssertion, verifyRegistration } from './webauthn.mjs';
 import { ACCOUNT_JS, accountPage } from './account-page.mjs';
+import { forgetPlayerShop, livePurchases, shopDataOf } from './shop-store.mjs';
 
 export const PLAYERS_MIGRATION_FILE = '0004_players.sql';
 export const PLAYERS_MIGRATION = `-- Players and cloud saves (@homie-rocks/studio 0.12.0): accounts on this studio only (saves/SAVES.md).
@@ -323,6 +324,8 @@ async function removePlayer(env, id) {
   ]);
   // Their servers' memberships too (0.16.0); a studio before migration 0006 has none to delete.
   try { await env.DB.prepare('DELETE FROM server_members WHERE player = ?1').bind(id).run(); } catch { /* not migrated */ }
+  // What they bought goes with them; the orders stay, without the player (0.24.0; none before migration 0008).
+  try { await env.DB.batch(forgetPlayerShop(env, id)); } catch { /* not migrated */ }
   await data.after();
 }
 
@@ -508,6 +511,8 @@ async function apiRoute(request, env, ctx, url, parts, { catalogueOf, read, f })
       player: me,
       passkeys: keys.map((k) => ({ label: k.label, synced: Number(k.synced) === 1, createdAt: new Date(Number(k.created_at)).toISOString(), lastUsedAt: new Date(Number(k.used_at)).toISOString() })),
       games: await playerData(env, s.player.id),
+      // The shop (0.24.0): their orders, what they own and the age band they gave; never a card or an email.
+      ...(await shopDataOf(env, s.player.id).then((x) => (x ? { shop: x } : {}))),
       note: 'Everything this studio keeps about this player. A passkey\'s private key never left your device; this site keeps only its public key.',
     };
     return json(body, 200, { 'content-disposition': `attachment; filename="${s.player.id}.json"` });
@@ -770,6 +775,9 @@ async function apiRoute(request, env, ctx, url, parts, { catalogueOf, read, f })
 
   if (head === 'delete' && parts.length === 1) {
     if (body.confirm !== 'delete') return fail(400, 'confirm', 'send { "confirm": "delete" } to delete this player and everything they kept');
+    // Things they bought go with the account: say so first (the shop, 0.24.0).
+    const owned = await livePurchases(env, s.player.id).catch(() => 0);
+    if (owned && body.purchases !== 'forfeit') return fail(409, 'purchases', `This account owns ${owned} thing${owned === 1 ? '' : 's'} bought here; deleting it gives ${owned === 1 ? 'it' : 'them'} up for good (an unused item can be refunded first, from this page). Send { "confirm": "delete", "purchases": "forfeit" } to delete anyway.`, { owned });
     await removePlayer(env, s.player.id);
     return withCookies(json({ ok: true, deleted: s.player.id }), [clearCookie(url)]);
   }