@homie-rocks/studio 0.22.0 → 0.24.0

package/starters/ember-vale/src/main.ts

@@ -43,7 +43,7 @@
  * The take "strike" (lab.json) stands a big training slime in front of the hero (lab.stage "dummy"). Outside the lab
  * every lab call is a no-op.
  */
-import { AI_MARK, createControls, createLabels, createRoom, createSaves, easeView, exposePort, fitView, jitter, q, standoff, stripAi, type BodyBase, type Fit, type LabelIn, type LabelOut, type NetEvent, type Skill } from '@homie-rocks/studio/port';
+import { AI_MARK, BUBBLE_FONT, createBubbles, createControls, createLabels, createRoom, paintBubbles, type BubbleIn, type BubbleOut, createSaves, easeView, exposePort, fitView, jitter, q, standoff, stripAi, type BodyBase, type Fit, type LabelIn, type LabelOut, type NetEvent, type Skill } from '@homie-rocks/studio/port';
 import { useAgents, type Goal, type Vocabulary } from '@homie-rocks/studio/agents';
 import vocabulary from '../agents.json';
 // The Game Lab: tunables, phases, tracks and overlays (no-ops outside the lab).
@@ -712,8 +712,14 @@ const INSET = { top: 124, bottom: 100 }; // the hero panel and its pills; STRIKE
 let cam: Fit | null = null;
 let lastDraw = 0;
 // Names keep clear of the guides' bubbles and of the ask panel (a page element over the canvas).
-const labels = createLabels({ screen: () => ({ w: vw, h: vh }), avoid: () => { const p = document.getElementById('asks'); return p && !p.hidden ? [...bubbleBoxes, p.getBoundingClientRect()] : bubbleBoxes; } });
+const labels = createLabels({ screen: () => ({ w: vw, h: vh }), avoid: () => { const p = document.getElementById('asks'); const all = [...bubbleBoxes, ...chatBubbles.boxes()]; return p && !p.hidden ? [...all, p.getBoundingClientRect()] : all; } });
 let bubbleBoxes: { left: number; top: number; right: number; bottom: number }[] = [];
+// Room chat (NETPLAY.md section 19): what a hero's player says in the room's chat shows over the hero for a few seconds,
+// clear of the guides' own bubbles. The studio taking a message down takes its bubble too.
+const chatBubbles = createBubbles({ measure: (t) => { ctx.font = BUBBLE_FONT; return ctx.measureText(t).width; }, screen: () => ({ w: vw, h: vh }), avoid: () => bubbleBoxes });
+net.on('say', (e) => chatBubbles.say(e.seat, e.text, { id: e.id, kind: e.kind }));
+net.on('unchat', (e) => { for (const id of e.ids) chatBubbles.remove(id); });
+let shownChat: BubbleOut[] = [];
 let shownLabels: LabelOut[] = [];
 function aim(): Fit {
   const v = lookOnly ? room.viewBody() : null;
@@ -772,6 +778,7 @@ function draw(t: number): void {
   ctx.font = `600 ${fs}px ui-sans-serif, system-ui, sans-serif`;
   const names: LabelIn[] = [];
   const said: { x: number; y: number; head: number; text: string }[] = [];
+  const heads = new Map<number, { x: number; y: number; seat: number; self: boolean }>();
   const mine: ScreenBox[] = []; // your own hero and its name: no bubble covers them
   const meAt = (() => { const v = room.view().find((b) => !b.bot && b.seat === viewS); return v ? { x: v.x, y: v.y } : null; })();
   for (const b of room.view()) {
@@ -801,6 +808,7 @@ function draw(t: number): void {
     const body = { left: sx(x - 24), top: sy(y - R - 12), right: sx(x + 24), bottom: sy(y + R) };
     if (body.right < 0 || body.left > vw || body.bottom < 0 || body.top > vh) continue; // off screen: no name at the edge
     if (self) { const w = ctx.measureText(text).width; mine.push(body, { left: sx(x) - w / 2 - 6, top: body.top - 4 - fs * 1.2, right: sx(x) + w / 2 + 6, bottom: body.top }); }
+    if (!b.bot && b.seat !== null && b.seat !== undefined) heads.set(b.slot, { x: sx(x), y: body.top - 3, seat: b.seat, self });
     names.push({ key: b.slot, text, x: sx(x), y: body.top - 3, w: ctx.measureText(text).width, h: fs * 1.2, below: body.bottom + 4 + fs * 1.2, body, self, rank: (b.bot ? (isGuide ? 1 : 2) : 0) * 10_000 + near });
     const line = bubbles.get(b.slot);
     // The bubble's tail stops just above the guide's own name, so the name keeps its spot while it speaks.
@@ -830,6 +838,16 @@ function draw(t: number): void {
     ctx.fillText(l.text, l.cx, l.cy);
   }
   ctx.globalAlpha = 1; ctx.textBaseline = 'alphabetic';
+  // Room chat's bubbles: over each speaking hero's name (your own placed first), clear of the guides' bubbles.
+  if (chatBubbles.size) {
+    const anchors: BubbleIn[] = [];
+    for (const [slot, h] of heads) {
+      const l = shownLabels.find((x) => x.key === slot && x.alpha > 0 && !x.moved);
+      anchors.push({ key: h.seat, x: l ? l.cx : h.x, y: l ? l.top - 1 : h.y, self: h.self });
+    }
+    shownChat = chatBubbles.place(anchors);
+    paintBubbles(ctx, shownChat, { paper: '#f6efdc', ink: '#1a1710', edge: 'rgba(40,30,10,.35)' });
+  } else shownChat = [];
   ctx.setTransform(1, 0, 0, 1, 0, 0);
   hud(t);
 }
@@ -1116,6 +1134,8 @@ function frame(t: number): void {
 
 // Tonight's experience per hero: the watch page's live scores, and who Auto follows when nobody is slaying.
 net.expose({
+  // Room chat's bubbles on this screen now: whose, what, and where (an end-to-end test reads them).
+  chatBubbles: () => shownChat.map((b) => ({ seat: b.key, text: b.lines.join(' '), alpha: b.alpha, left: Math.round(b.left), top: Math.round(b.top), right: Math.round(b.right), bottom: Math.round(b.bottom) })),
   scores: () => room.view().map((b) => ({ slot: b.slot, seat: b.seat, bot: b.bot, score: b.score })),
   // The guides, for the e2e probe: each guide's goal now, and the log of goals, asks and lines (seats and ids only).
   guides: () => ({

package/starters/gem-rush/src/main.ts

@@ -39,7 +39,7 @@
 import { createNetplay, Roster, q, lerp, capMove, PALETTE, AI_MARK, type RoleChange, type RoundInfo, type RoundResult, type Skill, type Slot, type Snapshot } from '@homie-rocks/studio/netplay';
 // The port toolkit: its probe (what `homie-studio port check` reads for the owner tests, and sandbox + audio shims),
 // and a flat world on every screen (port/view.ts: the camera, and name labels that never pile up).
-import { createLabels, exposePort, fitView, type LabelIn, type LabelOut } from '@homie-rocks/studio/port';
+import { BUBBLE_FONT, createBubbles, createLabels, exposePort, fitView, paintBubbles, type BubbleIn, type BubbleOut, type LabelIn, type LabelOut } from '@homie-rocks/studio/port';
 // The Game Lab: tunables, phases, tracks and overlays (no-ops outside the lab).
 import { lab } from '@homie-rocks/studio/lab';
 import tuning from '../tunables.json';
@@ -768,6 +768,12 @@ resize();
 
 const cam = { x: W / 2, y: H / 2, scale: 0 };
 const labels = createLabels({ screen: () => ({ w: innerWidth, h: innerHeight }) });
+// Room chat (NETPLAY.md section 19): what a player says in the room's chat (the play page's Chat, or a quick line) shows
+// over their body for a few seconds, when they want it there. The studio taking a message down takes its bubble too.
+const bubbles = createBubbles({ measure: (t) => { ctx.font = BUBBLE_FONT; return ctx.measureText(t).width; }, screen: () => ({ w: innerWidth, h: innerHeight }) });
+net.on('say', (s) => bubbles.say(s.seat, s.text, { id: s.id, kind: s.kind }));
+net.on('unchat', (e) => { for (const id of e.ids) bubbles.remove(id); });
+let shownBubbles: BubbleOut[] = [];
 let shownLabels: LabelOut[] = [];
 let lastDraw = 0;
 /** Where a seat's body is drawn now (host: the real body; replica: interpolated), or null. */
@@ -868,6 +874,7 @@ function draw(t: number): void {
   const fs = Math.round(Math.max(15, Math.min(22, (15 * Math.min(cw, ch)) / 720)));
   ctx.font = `600 ${fs}px ui-sans-serif, system-ui, sans-serif`;
   const tags: LabelIn[] = [];
+  const heads = new Map<number, { x: number; y: number; seat: number; mine: boolean }>();
   const viewAt = list.find((a) => a.mine) ?? null;
   for (const a of list) {
     const colour = colourOf(a.slot, a.bot ? null : a.seat);
@@ -884,6 +891,7 @@ function draw(t: number): void {
     const text = a.mine && !net.watching ? 'You' : label(a.name, a.bot);
     const sx = cw / 2 + (a.x - cam.x) * scale; const sy = ch / 2 + (a.y - cam.y) * scale; const r = (R_AV + (a.mine ? 7 : 0)) * scale;
     if (sx + r < 0 || sx - r > cw || sy + r < 0 || sy - r > ch) continue; // off screen: no name at the edge
+    if (a.seat !== null && !a.bot) heads.set(a.slot, { x: sx, y: sy - r - 5, seat: a.seat, mine: a.mine });
     // People before bots, nearer the view's body first; each keeps off the others' bodies when it can.
     tags.push({ key: a.slot, text, x: sx, y: sy - r - 5, w: ctx.measureText(text).width, h: fs * 1.2, below: sy + r + 4 + fs * 1.2, body: { left: sx - r, top: sy - r, right: sx + r, bottom: sy + r }, self: a.mine, rank: (a.bot ? 10_000 : 0) + (viewAt ? Math.hypot(a.x - viewAt.x, a.y - viewAt.y) : 0) });
   }
@@ -909,6 +917,16 @@ function draw(t: number): void {
     ctx.fillText(l.text, l.cx, l.cy);
   }
   ctx.globalAlpha = 1; ctx.textBaseline = 'alphabetic';
+  // Speech bubbles (room chat): over each speaker's name, the view's own player first.
+  if (bubbles.size) {
+    const anchors: BubbleIn[] = [];
+    for (const [slot, h] of heads) {
+      const l = shownLabels.find((x) => x.key === slot && x.alpha > 0 && !x.moved);
+      anchors.push({ key: h.seat, x: l ? l.cx : h.x, y: l ? l.top - 1 : h.y, self: h.mine });
+    }
+    shownBubbles = bubbles.place(anchors);
+    paintBubbles(ctx, shownBubbles);
+  } else shownBubbles = [];
 
   hud(cw, ch, phone, list);
   if (stick.active) {
@@ -985,6 +1003,8 @@ function frame(t: number): void {
 }
 
 net.expose({
+  // Room chat's bubbles on this screen now: whose, what, and where (an end-to-end test reads them).
+  bubbles: () => shownBubbles.map((b) => ({ seat: b.key, text: b.lines.join(' '), alpha: b.alpha, left: Math.round(b.left), top: Math.round(b.top), right: Math.round(b.right), bottom: Math.round(b.bottom) })),
   self: () => (me.has ? { x: me.x, y: me.y } : null),
   peer: (seat: number) => {
     if (hosting) { const b = [...bodies.values()].find((x) => x.seat === seat); return b ? { x: b.x, y: b.y } : null; }

package/starters/gem-rush-3d/src/main.ts

@@ -45,7 +45,7 @@ import { createModels, instancedCopies, placeCopy, repaint, stylize, type Copies
 import { createNetplay, Roster, q, lerp, capMove, PALETTE, AI_MARK, type RoleChange, type RoundInfo, type RoundResult, type Skill, type Slot, type Snapshot } from '@homie-rocks/studio/netplay';
 // The port toolkit: its probe (what `homie-studio port check` and `perf` read, and sandbox + audio shims), and name
 // labels that never pile up (port/view.ts).
-import { createLabels, exposePort, type LabelIn, type LabelOut } from '@homie-rocks/studio/port';
+import { createBubbles, createLabels, exposePort, paintBubbles, type BubbleIn, type BubbleOut, type LabelIn, type LabelOut } from '@homie-rocks/studio/port';
 // The Game Lab: tunables, phases, tracks and overlays (no-ops outside the lab).
 import { lab } from '@homie-rocks/studio/lab';
 import tuning from '../tunables.json';
@@ -1659,6 +1659,13 @@ resize();
 let zoneMark: { left: number; top: number; right: number; bottom: number } | null = null;
 const labels = createLabels({ screen: () => ({ w: innerWidth, h: innerHeight }), avoid: () => (zoneMark ? [zoneMark] : []) });
 let shownLabels: LabelOut[] = [];
+// Room chat (NETPLAY.md section 19): what a player says in the room's chat shows over their animal for a few seconds,
+// on the HUD's own paper (one UI with the names, the clock and the board). The studio taking a message down takes it too.
+const BUBBLE_TYPE = `600 14px ${FONT_BODY}`;
+const bubbles = createBubbles({ measure: (t) => { ctx.font = BUBBLE_TYPE; return ctx.measureText(t).width; }, screen: () => ({ w: innerWidth, h: innerHeight }), avoid: () => (zoneMark ? [zoneMark] : []) });
+net.on('say', (s) => bubbles.say(s.seat, s.text, { id: s.id, kind: s.kind }));
+net.on('unchat', (e) => { for (const id of e.ids) bubbles.remove(id); });
+let shownBubbles: BubbleOut[] = [];
 let lastDraw = 0;
 /** Where a seat's body is drawn now (host: the real body; replica: interpolated), or null. */
 function seatPos(seat: number): { x: number; y: number } | null {
@@ -1823,6 +1830,7 @@ function draw(t: number, dt: number): void {
   const fs = Math.round(Math.max(15, Math.min(22, (15 * Math.min(cw, ch)) / 720)));
   ctx.font = `700 ${fs}px ${FONT_BODY}`;
   const tags: LabelIn[] = [];
+  const heads = new Map<number, { x: number; y: number; seat: number; mine: boolean }>();
   const viewAt = list.find((a) => a.mine) ?? null;
   for (const a of list) {
     const text = a.mine && !net.watching ? 'You' : label(a.name, a.bot);
@@ -1833,6 +1841,7 @@ function draw(t: number, dt: number): void {
     const r = Math.max(6, Math.hypot(side.x - mid.x, side.y - mid.y));
     if (mid.x + r < 0 || mid.x - r > cw || head.y > ch || mid.y + r < 0) continue; // off screen: no name at the edge
     const foot = onScreen(a.x, a.y, 0, cw, ch);
+    if (a.seat !== null && !a.bot) heads.set(a.slot, { x: head.x, y: head.y - 3, seat: a.seat, mine: a.mine });
     // People before bots, nearer the view's body first; each keeps off the others' bodies when it can.
     tags.push({ key: a.slot, text, x: head.x, y: head.y - 3, w: ctx.measureText(text).width, h: fs * 1.2, below: foot.y + r * 0.6 + 4 + fs * 1.2, body: { left: mid.x - r, top: head.y, right: mid.x + r, bottom: foot.y + r * 0.4 }, self: a.mine, rank: (a.bot ? 10_000 : 0) + (viewAt ? Math.hypot(a.x - viewAt.x, a.y - viewAt.y) * 50 : 0) });
   }
@@ -1855,6 +1864,16 @@ function draw(t: number, dt: number): void {
     ctx.fillText(l.text, l.cx, l.cy);
   }
   ctx.globalAlpha = 1; ctx.textBaseline = 'alphabetic';
+  // Speech bubbles (room chat): over each speaker's name pill, the view's own player first.
+  if (bubbles.size) {
+    const anchors: BubbleIn[] = [];
+    for (const [slot, h] of heads) {
+      const l = shownLabels.find((x) => x.key === slot && x.alpha > 0 && !x.moved);
+      anchors.push({ key: h.seat, x: l ? l.cx : h.x, y: l ? l.top - 3 : h.y, self: h.mine });
+    }
+    shownBubbles = bubbles.place(anchors);
+    paintBubbles(ctx, shownBubbles, { font: BUBBLE_TYPE, paper: PAPER, ink: TEXT, edge: mixHex(TEXT, PAPER, 0.7) });
+  } else shownBubbles = [];
 
   hud(cw, ch, phone, list);
   if (stick.active) {
@@ -2028,6 +2047,8 @@ function frame(t: number): void {
 }
 
 net.expose({
+  // Room chat's bubbles on this screen now: whose, what, and where (an end-to-end test reads them).
+  bubbles: () => shownBubbles.map((b) => ({ seat: b.key, text: b.lines.join(' '), alpha: b.alpha, left: Math.round(b.left), top: Math.round(b.top), right: Math.round(b.right), bottom: Math.round(b.bottom) })),
   self: () => (me.has ? { x: me.x, y: me.y } : null),
   peer: (seat: number) => {
     if (hosting) { const b = [...bodies.values()].find((x) => x.seat === seat); return b ? { x: b.x, y: b.y } : null; }

package/worker/account-page.mjs

@@ -160,6 +160,10 @@ export function accountPage(cat, { origin = '', next = '/account/', owner = null
     <label for="acct-email">Email</label><input id="acct-email" data-email type="email" autocomplete="email">
     <div class="row"><button class="ghost" type="button" data-email-save>Send a confirmation</button><button class="ghost" type="button" data-email-remove hidden>Remove it</button></div>
   </div>` : ''}
+  <div class="card shop-card" data-shop-card hidden>
+    <h2>Your purchases</h2>
+    <div data-shop-body></div>
+  </div>
   <div class="card" data-servers-card hidden>
     <h2>Your servers</h2>
     <p>The servers you belong to in this studio's games. Your home server is where Play takes you.</p>
@@ -193,8 +197,9 @@ ${back}
 </details>
 </section>
 <script type="application/json" id="account-boot">${JSON.stringify(boot).replace(/</g, '\\u003c')}</script>
-<script src="/_homie/account.js" defer></script>`;
-  return layout(cat, { title: `Your account · ${studio}`, description: `Your player account on ${studio}.`, origin, path: '/account/', page: 'account', head: `<style>${ACCOUNT_CSS}</style><meta name="robots" content="noindex">`, main });
+<script src="/_homie/account.js" defer></script>
+<script src="/_homie/shop.js" defer></script>`;
+  return layout(cat, { title: `Your account · ${studio}`, description: `Your player account on ${studio}.`, origin, path: '/account/', page: 'account', head: `<style>${ACCOUNT_CSS}.shop-card .badge{display:inline-block;padding:3px 10px;border-radius:999px;background:var(--hot,#ffcf5a);color:var(--hot-ink,#0b0b10);font:800 12px/1.3 ui-sans-serif,system-ui,sans-serif;margin-right:6px}.shop-card ul{margin:8px 0 0;padding-left:18px}.shop-card li{margin:4px 0}</style><meta name="robots" content="noindex">`, main });
 }
 
 /** /_homie/account.js */
@@ -343,6 +348,13 @@ export const ACCOUNT_JS = `${PASSKEY_JS}
     var typed = prompt('This deletes your account and everything it kept on ' + boot.studio + ', in every game. It cannot be undone. Type DELETE to go ahead.');
     if (!typed || typed.trim().toUpperCase() !== 'DELETE') { say('Nothing was deleted.'); return; }
     P.api('POST', '/api/player/delete', { confirm: 'delete' }).then(function (r) {
+      if (!r.ok && r.error === 'purchases') {
+        var again = prompt(r.message + ' Type DELETE again to give them up and delete the account.');
+        if (!again || again.trim().toUpperCase() !== 'DELETE') return { ok: false, message: 'Nothing was deleted.' };
+        return P.api('POST', '/api/player/delete', { confirm: 'delete', purchases: 'forfeit' });
+      }
+      return r;
+    }).then(function (r) {
       if (!r.ok) throw new Error(r.message);
       me = null; P.remember(null); render();
       say('Your account and everything it kept are deleted. You can also remove the passkey from your device\\'s passwords.', 'good');

package/worker/agents.mjs

@@ -74,10 +74,10 @@ export function encodeFacts(value) {
   for (const b of bytes) s += String.fromCharCode(b);
   return btoa(s).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
 }
-/** The reverse, or null for anything that is not one (at most 4 KB). */
-export function decodeFacts(text) {
+/** The reverse, or null for anything that is not one (at most 4 KB, or `max`: a room's chat rules may be longer). */
+export function decodeFacts(text, max = 4096) {
   const t = String(text ?? '');
-  if (!t || t.length > 4096 || !/^[A-Za-z0-9_-]+$/.test(t)) return null;
+  if (!t || t.length > max || !/^[A-Za-z0-9_-]+$/.test(t)) return null;
   try {
     const s = atob(t.replace(/-/g, '+').replace(/_/g, '/'));
     const bytes = Uint8Array.from(s, (c) => c.charCodeAt(0));