@homie-rocks/studio 0.36.0 → 0.37.1

package/worker/pages.mjs

@@ -1,3 +1,5 @@
+import { appWords, openPath } from './app-format.mjs';
+import { APP_SHELL_JS } from './app-shell.mjs';
 /**
  * The play shell: the page around a game's sandboxed frame at /<game>/play and /<game>/tv. Every other page is
  * worker/site.mjs. Every name a player typed is escaped.
@@ -46,7 +48,7 @@ export function noWatchPage(cat, g) {
     title: `${g.name} is not shown to watchers`, page: 'no-watch', status: 404,
     main: `<header class="head"><p class="kicker">${esc(g.name)}</p><h1>${esc(g.name)} is played, not watched</h1>
 <p class="lead">Its rooms are not shown to watchers: what each player sees stays theirs. Press Play and you are in a room, with bots in the empty seats.</p>
-<div class="keys"><a class="btn" href="/${esc(g.id)}/play" data-play>Play ${esc(g.name)}</a><a class="ghost" href="/${esc(g.id)}/">Back to ${esc(g.name)}</a></div></header>`,
+<div class="keys"><a class="btn" href="${esc(openPath(g))}" data-play>Play ${esc(g.name)}</a><a class="ghost" href="/${esc(g.id)}/">Back to ${esc(g.name)}</a></div></header>`,
   });
 }
 
@@ -90,6 +92,7 @@ export function sharePlaces(value) {
  * covers the middle of the screen or a thumb.
  */
 export function playPage(cat, g, { embed = false, origin = '', preview = false, 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 shopControl = Boolean(shop && !screen && g.screen?.shop !== false);
   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);
@@ -168,6 +171,7 @@ iframe.game { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; d
 [hidden] { display: none !important; }
 ${arrive.css}
 ${embed ? `html,body{touch-action:auto}.room.at-top-center{transform:none;left:auto;right:max(8px,env(safe-area-inset-right))}.embed-open{display:flex;align-items:center;min-height:44px;color:inherit}.embed-note{font:12px/1.4 system-ui;overflow-wrap:anywhere}.sheet{position:fixed;inset:calc(max(8px,env(safe-area-inset-top)) + 48px) max(8px,env(safe-area-inset-right)) auto auto;max-width:calc(100vw - max(8px,env(safe-area-inset-left)) - max(8px,env(safe-area-inset-right)));max-height:calc(100dvh - max(8px,env(safe-area-inset-top)) - 48px - max(8px,env(safe-area-inset-bottom)));overflow:auto;overscroll-behavior:contain;touch-action:pan-y}.sheet.more::after{content:'▾ more below';position:sticky;bottom:-12px;display:block;margin:0 -12px -12px;padding:16px 0 5px;text-align:center;font:600 11px/1 system-ui;color:#cfd6e6;background:linear-gradient(transparent,rgba(8,12,22,.98) 60%);pointer-events:none}.sheet .embed-help{margin:8px 2px;font:500 12px/1.4 system-ui;color:#aab3c7}html:not(.player-frame) .frame-only{display:none}.sheet a,.sheet button{min-height:44px}.sheet .foot a,.sheet .foot button{display:inline-flex;align-items:center}.embed-open .frame-only{margin-left:4px}.player-top iframe.game{inset:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);width:calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));height:calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom))}.arrive-in{padding:12px}.arrive-title{font-size:clamp(24px,7vw,52px)}` : ''}
+${shopControl ? `.shop-control{color:#eef1f8;font:600 13px/1.2 system-ui;position:fixed;top:env(safe-area-inset-top);left:max(8px,env(safe-area-inset-left));height:52px;display:flex;align-items:center;z-index:6}.shop-control button{min-height:44px;padding:0 18px}html body .room.room{flex-direction:column;align-items:flex-end;top:max(4px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right));left:auto;bottom:auto;transform:none}html body iframe.game.game{top:calc(env(safe-area-inset-top) + 52px);height:calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 52px)}` : ''}
 ${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.
@@ -176,13 +180,13 @@ ${SERVER_CSS}${CHAT_CSS}${g.saves && !screen ? SAVES_SHELL_CSS : ''}${shop ? SHO
   // 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';
   // The address's switches the game's frame is handed (NETPLAY.md section 24): the defaults and the game's own names.
-  const boot = { embed, game: g.id, name: g.name, screen: Boolean(screen), share: places, params: playParams(g), paramValue: PARAM_VALUE, prefs: PREFS_LIMITS, ...(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 } : {}) };
+  const boot = { ...(g.kind === 'app' ? { kind: 'app', appWords: appWords(g) } : {}), embed, game: g.id, name: g.name, screen: Boolean(screen), share: places, params: playParams(g), paramValue: PARAM_VALUE, prefs: PREFS_LIMITS, ...(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;
   // Local development: no join card at all on the big screen (no phone can open this computer's address); the room
   // button's sheet says to deploy to share, for whoever looks for a link.
-  const joinCard = screen && joinUrl && !local ? `<div class="join join-${joinCorner}" data-join>${qr ? `<div class="qr">${qr}</div>` : ''}<div><b>Scan to play</b><span>${esc(joinUrl.replace(/^https?:\/\//, ''))}</span></div></div>` : '';
+  const joinCard = screen && joinUrl && !local ? `<div class="join join-${joinCorner}" data-join>${qr ? `<div class="qr">${qr}</div>` : ''}<div><b>${esc(appWords(g).join)}</b><span>${esc(joinUrl.replace(/^https?:\/\//, ''))}</span></div></div>` : '';
   const share = screen ? '' : `<div class="room at-${first.at}" style="--dx:${first.x}px;--dy:${first.y}px" data-room-ui>
   <div class="pills"><button class="pill${first.label ? '' : ' icon'}" type="button" data-share-toggle aria-expanded="false" aria-controls="share-sheet" aria-label="${embed ? 'Room, invite and the studio’s site' : 'Room, invite and big screen'}"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5.5" r="2.5"/><circle cx="6" cy="12" r="2.5"/><circle cx="18" cy="18.5" r="2.5"/><path d="m8.2 10.8 7.6-4.1M8.2 13.2l7.6 4.1"/></svg><span data-room-code>Room</span></button>
   <button class="pill spill" type="button" data-server-toggle aria-expanded="false" aria-controls="server-sheet" hidden><span class="sdot" aria-hidden="true"></span><span data-server-label></span></button></div>
@@ -194,7 +198,7 @@ ${SERVER_CSS}${CHAT_CSS}${g.saves && !screen ? SAVES_SHELL_CSS : ''}${shop ? SHO
   </div>
   <div class="sheet" id="share-sheet" role="dialog" aria-label="This room" data-share-sheet hidden>
     <div class="code"><b data-room-label>This room</b><span data-room-count></span></div>${embed ? `
-    <a class="embed-open" data-studio-open href="/${esc(g.id)}/play" target="_blank" rel="noopener noreferrer">Open on the studio's site<span class="frame-only"> ↗</span></a><div class="embed-note" data-embed-note role="status" hidden></div>` : ''}
+    <a class="embed-open" data-studio-open href="${esc(openPath(g))}" target="_blank" rel="noopener noreferrer">Open on the studio's site<span class="frame-only"> ↗</span></a><div class="embed-note" data-embed-note role="status" hidden></div>` : ''}
     <div class="acts">
       <button type="button" class="primary" data-invite><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 15V3M7.5 7.5 12 3l4.5 4.5M5 12v7a1.5 1.5 0 0 0 1.5 1.5h11A1.5 1.5 0 0 0 19 19v-7"/></svg><span data-invite-word>Invite</span></button>
       <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>
@@ -206,19 +210,19 @@ ${embed ? `    <p class="embed-help">Sound starts after a press. If pointer lock
   </div>
 </div>
 <div class="toast" data-toast role="status" hidden></div>`;
-  return layoutless(`${g.name} · play`, `
+  return layoutless(`${g.name} · ${appWords(g).open}`, `
 <iframe class="game" title="${esc(g.name)}" sandbox="allow-scripts allow-pointer-lock allow-forms allow-modals allow-popups" allow="fullscreen *; autoplay *; gamepad *"></iframe>
 ${arrive.html}
 <div class="chip${arrive.html ? ' held' : ''}" data-chip><span data-status>finding a room…</span></div>
 <div class="vote" data-vote role="dialog" aria-label="How strong should the AI be?" data-keep-focus hidden></div>
 <div class="card" data-results hidden></div>
 <div class="card" data-screen hidden></div>
-${joinCard}${share}
+${joinCard}${share}${shopControl ? '<div class="shop-control"><button class="pill" type="button" data-shop-open data-shop-control>Shop</button></div>' : ''}
 <script>window.__HOMIE_PLAY=${JSON.stringify(boot).replace(/</g, '\\u003c')};</script>
 <script>window.__HOMIE_CHAT=${JSON.stringify(chatBoot(g, { surface: screen ? 'tv' : 'play', owner, acct, member })).replace(/</g, '\\u003c')};</script>
 <script>${CHAT_JS}</script>
 <script>${ARRIVAL_JS}</script>
-<script>${SHELL_JS}</script>${g.saves && !screen ? `
+<script>${SHELL_JS}</script>${g.kind === 'app' ? `<script>${APP_SHELL_JS}</script>` : ''}${g.saves && !screen ? `
 <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, embed ? embedAncestors(cat, origin, preview) : frameAncestors(cat), { embed, origin, head: gameSocialTags(cat, g, origin, launch === 'public') });
 }
@@ -352,7 +356,7 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
   var state = { game: boot.game, room: null, device: device, want: want, attached: false, stats: null, round: null, roster: null, facts: null, seat: null, results: [], closed: null, link: null, notice: null, banner: null, muted: null, server: boot.server || null, vote: null, myVote: {}, quietAi: false, full: false };
   window.__shell = state;
   // Where signing in comes back to. From the player address that is Play in the same room: the player itself is guests only.
-  state.returnPath = function () { return boot.embed ? '/' + boot.game + '/play' + (state.room ? '?room=' + encodeURIComponent(state.room) : '') : location.pathname + location.search; };
+  state.returnPath = function () { return boot.embed ? '/' + boot.game + (boot.kind === 'app' ? '/open' : '/play') + (state.room ? '?room=' + encodeURIComponent(state.room) : '') : location.pathname + location.search; };
   // The arrival card (worker/arrival.mjs): the game's look while the room connects and the game loads.
   var A = window.__homieArrival || { done: true, room: function () {}, facts: function () {}, full: function () {}, message: function () {}, lift: function () {}, frameLoaded: function () {} };
   state.arrival = A.state || null;
@@ -450,7 +454,7 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
   }
   function shareReady(room) {
     if (!ui) return;
-    var link = location.origin + '/' + boot.game + '/play?room=' + encodeURIComponent(room);
+    var link = location.origin + '/' + boot.game + (boot.kind === 'app' ? '/open?room=' : '/play?room=') + encodeURIComponent(room);
     state.link = link;
     ui.querySelector('[data-room-code]').textContent = labelOf(room) + (boot.embed ? ' \u00b7 Site' : '');
     ui.querySelector('[data-room-label]').textContent = labelOf(room);
@@ -458,7 +462,7 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
     ui.querySelector('[data-bigscreen]').href = '/' + boot.game + '/tv?room=' + encodeURIComponent(room);
     toggle.addEventListener('click', function (e) { e.stopPropagation(); open(sheet.hidden); });
     ui.querySelector('[data-invite]').addEventListener('click', function () {
-      var data = { title: boot.name, text: 'Play ' + boot.name + ' with me: join my room.', url: link };
+      var data = { title: boot.name, text: (boot.appWords ? boot.appWords.open : 'Play') + ' ' + boot.name + ' with me: join my room.', url: link };
       try { if (navigator.share && (!navigator.canShare || navigator.canShare(data))) navigator.share(data).catch(function () { copy(link, 'Invite link copied'); });
       else copy(link, 'Invite link copied'); } catch (e) { copy(link, 'Invite link copied'); }
     });
@@ -472,7 +476,7 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
     state.room = room;
     if (boot.embed && keeps) try { sessionStorage.setItem(EMBED_KEY, JSON.stringify({ room: room, name: guestName })); } catch (e) {}
     var studioOpen = document.querySelector('[data-studio-open]');
-    if (studioOpen) studioOpen.href = '/' + boot.game + '/play?room=' + encodeURIComponent(room);
+    if (studioOpen) studioOpen.href = '/' + boot.game + (boot.kind === 'app' ? '/open?room=' : '/play?room=') + encodeURIComponent(room);
     // The room goes into the address: a reload comes back to it, and a copied address brings a friend into it.
     try {
       if (params.get('room') !== room) {
@@ -577,7 +581,7 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
     if (typeof setInterval === 'function') setInterval(tellRects, 1000);
     if (screenMode && !document.querySelector('[data-join]') && !LOCAL) {
       var h2 = document.createElement('h2'); h2.textContent = 'Join on your phone';
-      var div = document.createElement('div'); div.textContent = location.origin + '/' + boot.game + '/play?room=' + encodeURIComponent(room);
+      var div = document.createElement('div'); div.textContent = location.origin + '/' + boot.game + (boot.kind === 'app' ? '/open?room=' : '/play?room=') + encodeURIComponent(room);
       screenCard.append(h2, div); screenCard.hidden = false;
     }
   }
@@ -756,7 +760,7 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
     var w = document.createElement('p'); w.className = 'when';
     w.textContent = mins ? (kind === 'kicked' ? 'You can come back to ' + label + ' in ' + mins + ' min.' : label + ' opens again in ' + mins + ' min.') : '';
     var acts = document.createElement('div'); acts.className = 'acts';
-    var other = document.createElement('a'); other.className = 'primary'; other.href = '/' + boot.game + '/play?not=' + encodeURIComponent(state.room || ''); other.textContent = 'Play in another room';
+    var other = document.createElement('a'); other.className = 'primary'; other.href = '/' + boot.game + (boot.kind === 'app' ? '/open?not=' : '/play?not=') + encodeURIComponent(state.room || ''); other.textContent = boot.kind === 'app' ? 'Join another room' : 'Play in another room';
     var back = document.createElement('a'); back.href = '/' + boot.game + '/'; back.textContent = 'Back to ' + boot.name;
     acts.append(other, back);
     inner.append(h, p, w, acts); box.appendChild(inner);
@@ -769,7 +773,7 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
     var n = f && f.counts ? f.counts.players : null;
     var bits = [];
     if (state.server) bits.push(state.server.name);
-    if (n !== null) bits.push(n + ' playing');
+    if (n !== null) bits.push(n + (boot.kind === 'app' ? ' ' + (n === 1 ? boot.appWords.one : boot.appWords.many) + ' here' : ' playing'));
     // Every AI is counted as AI (agents, the seats kept for them, and the game's bots), never as a player.
     var aiN = f && f.counts ? (Number(f.counts.ai) || 0) + (Number(f.counts.bots) || 0) : 0;
     if (aiN) bits.push(aiN + ' AI');
@@ -783,10 +787,10 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
     else if (state.link && state.link.state === 'reconnecting') bits.push('reconnecting');
     else if (state.link && state.link.state === 'alone') bits.push(state.link.why === 'reconnect-timeout' ? 'playing on your own: the room dropped' : 'playing on your own: looking for the room');
     // The arrival card's line: the room and who is in it ("Room 2 · 3 playing · 2 AI").
-    if (!A.done && state.room) A.facts([labelOf(state.room), n ? n + ' playing' : '', aiN ? aiN + ' AI' : ''].filter(Boolean).join(' · '));
+    if (!A.done && state.room) A.facts([labelOf(state.room), n ? n + (boot.kind === 'app' ? ' ' + (n === 1 ? boot.appWords.one : boot.appWords.many) + ' here' : ' playing') : '', aiN ? aiN + ' AI' : ''].filter(Boolean).join(' · '));
     say(bits.join(' · ') || 'joining…');
     var count = ui && ui.querySelector('[data-room-count]');
-    if (count && n !== null) count.textContent = n + (n === 1 ? ' player here' : ' players here') + (aiN ? ' · ' + aiN + ' AI' : '');
+    if (count && n !== null) count.textContent = n + ' ' + (boot.appWords ? (n === 1 ? boot.appWords.one : boot.appWords.many) : (n === 1 ? 'player' : 'players')) + ' here' + (aiN ? ' · ' + aiN + ' AI' : '');
     serverUi();
   }
 
@@ -803,7 +807,7 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
   // server's words from the page load are the fallback.
   function policyText(pol) {
     var w = pol && boot.words ? boot.words[pol.kind] : null;
-    if (!w) return state.server ? { badge: state.server.badge, line: state.server.line } : { badge: 'Open', line: 'Open: anyone can play. AI players are always marked AI.' };
+    if (!w) return state.server ? { badge: state.server.badge, line: state.server.line } : { badge: 'Open', line: boot.kind === 'app' ? 'Open: join this screen together.' : 'Open: anyone can play. AI players are always marked AI.' };
     var n = pol.kind === 'hybrid' ? (Number(pol.aiSeats) || 0) : 0;
     return { badge: pol.kind === 'hybrid' ? w.badge + ' · ' + n : w.badge, line: w.line.replace('{n}', String(n)) + (pol.kids && boot.kidsLine ? ' ' + boot.kidsLine : '') };
   }
@@ -910,14 +914,14 @@ const SHELL_JS = String.raw`${BUILD_RETRY_JS}(function () {
       var a = e.target.closest && e.target.closest('a[href]');
       if (!a) return;
       var u = new URL(a.href, location.href);
-      if (u.origin === location.origin && u.pathname === '/' + boot.game + '/play/embed') return;
+      if (u.origin === location.origin && u.pathname === '/' + boot.game + (boot.kind === 'app' ? '/open/embed' : '/play/embed')) return;
       e.preventDefault(); state.openStudio(a.href);
     }, true);
     if (self.origin === 'null') {
       A.lift(); open(true);
       var note = document.querySelector('[data-embed-note]');
-      note.hidden = false; note.textContent = 'This host prevents the game from connecting. Open on the studio’s site to play.';
-      say('Open on the studio’s site to play');
+      note.hidden = false; note.textContent = 'This host prevents connecting. Open on the studio’s site.';
+      say('Open on the studio’s site');
       return;
     }
   }
@@ -1116,8 +1120,8 @@ const OWNER_JS = String.raw`(function () {
 export function watchPage(cat, g, { origin = '', room = null, ticket = null, policy = 'follow', owner = false, acct = false, member = false } = {}) {
   const accent = cat?.studio?.theme?.accent ?? '#ffcf5a';
   const hot = /^#[0-9a-f]{3,8}$/i.test(accent) ? accent : '#ffcf5a';
-  const boot = { game: g.id, name: g.name, policy, palette: NET_PALETTE, ...(room ? { room } : {}), ...(ticket ? { t: ticket } : {}) };
-  const css = `:root{--hot:${hot}}${WATCH_CSS}${CHAT_CSS}`;
+  const boot = { ...(g.kind === 'app' ? { kind: 'app', screen: true, role: g.surfaces?.wall, params: playParams(g) } : {}), game: g.id, name: g.name, policy, palette: NET_PALETTE, ...(room ? { room } : {}), ...(ticket ? { t: ticket } : {}) };
+  const css = `:root{--hot:${hot}}${WATCH_CSS}${CHAT_CSS}${g.kind === 'app' ? '.dock{display:none}' : ''}`;
   return layoutless(`Watch ${g.name}`, `
 <header class="wtop" data-top>
   <span class="live" data-live><i aria-hidden="true"></i><b>Live</b></span>
@@ -1126,7 +1130,7 @@ export function watchPage(cat, g, { origin = '', room = null, ticket = null, pol
   <span class="clock" data-clock hidden></span>
   <span class="grow"></span>
   <span class="eyes" data-eyes hidden title="Watching this room"><svg viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.6-6.5 10-6.5S22 12 22 12s-3.6 6.5-10 6.5S2 12 2 12Z"/><circle cx="12" cy="12" r="3"/></svg><span data-eyes-n></span><span class="eyes-w"> watching</span></span>
-  <a class="playb" data-playb href="/${esc(g.id)}/play"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4.8v14.4a1 1 0 0 0 1.5.86l12-7.2a1 1 0 0 0 0-1.72l-12-7.2A1 1 0 0 0 7 4.8Z" fill="currentColor"/></svg><span>Play</span></a>
+  <a class="playb" data-playb href="${esc(openPath(g))}"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 4.8v14.4a1 1 0 0 0 1.5.86l12-7.2a1 1 0 0 0 0-1.72l-12-7.2A1 1 0 0 0 7 4.8Z" fill="currentColor"/></svg><span>${esc(appWords(g).open)}</span></a>
 </header>
 <main class="stage"><iframe class="game" title="${esc(g.name)}, live" tabindex="-1" sandbox="allow-scripts allow-pointer-lock allow-forms allow-modals allow-popups" allow="fullscreen *; autoplay *; gamepad *"></iframe></main>
 <footer class="dock">
@@ -1137,7 +1141,7 @@ export function watchPage(cat, g, { origin = '', room = null, ticket = null, pol
 <script>window.__HOMIE_WATCH=${JSON.stringify(boot).replace(/</g, '\\u003c')};</script>
 <script>window.__HOMIE_CHAT=${JSON.stringify(chatBoot(g, { surface: 'watch', owner, acct, member })).replace(/</g, '\\u003c')};</script>
 <script>${CHAT_JS}</script>${owner ? `<script>${CHAT_OWNER_JS}</script>` : ''}
-<script>${WATCH_JS}</script>`, css, frameAncestors(cat), { head: gameSocialTags(cat, g, origin) });
+<script>${WATCH_JS}</script>${g.kind === 'app' ? `<script>${APP_SHELL_JS}</script>` : ''}`, css, frameAncestors(cat), { head: gameSocialTags(cat, g, origin) });
 }
 
 /*
@@ -1291,9 +1295,10 @@ const WATCH_JS = String.raw`${BUILD_RETRY_JS}(function () {
     state.room = room;
     syncUrl();
     q1('[data-room-label]').textContent = labelOf(room);
-    q1('[data-playb]').href = '/' + boot.game + '/play?room=' + encodeURIComponent(room);
+    q1('[data-playb]').href = '/' + boot.game + (boot.kind === 'app' ? '/open?room=' : '/play?room=') + encodeURIComponent(room);
     document.title = 'Watch ' + boot.name + ' · ' + labelOf(room);
     var q = new URLSearchParams({ room: room, watch: '1', device: device, b: roomKey });
+    if (boot.kind === 'app') { q.set('role', params.get('role') || boot.role); q.set('surface', 'wall'); q1('[data-playb] span').textContent = 'Open'; }
     q.set('follow', first === 'auto' ? 'auto' : first === null ? 'overview' : String(first));
     if (boot.t) q.set('t', boot.t);
     if (params.get('debug') === '1') q.set('debug', '1');
@@ -1385,10 +1390,11 @@ const WATCH_JS = String.raw`${BUILD_RETRY_JS}(function () {
       full: 'Every place to watch it from is taken. Try the busiest other room.',
       none: 'This page finds a room the moment somebody starts one. Or press Play, and people who come to watch will see you.',
     };
+    if (boot.kind === 'app') { heads.none = 'Nobody is here right now'; heads.off = 'Watching is unavailable'; lines.empty = lines.none = lines.off = 'Open the app to join a screen, or watch another room.'; }
     box.appendChild(el('h1', '', heads[kind] || heads.closed));
     box.appendChild(el('p', '', lines[kind] || lines.closed));
     var acts = el('div', 'acts');
-    var other = el('a', 'primary', kind === 'none' || kind === 'off' ? 'Play ' + boot.name : 'Watch another room');
+    var other = el('a', 'primary', kind === 'none' || kind === 'off' ? (boot.kind === 'app' ? 'Open ' : 'Play ') + boot.name : 'Watch another room');
     other.href = kind === 'none' || kind === 'off' ? '/' + boot.game + '/play' : '/' + boot.game + '/watch?not=' + encodeURIComponent(state.room || '');
     acts.appendChild(other);
     if (kind !== 'none' && kind !== 'off') { var play = el('a', '', 'Play'); play.href = '/' + boot.game + '/play'; acts.appendChild(play); }
@@ -1536,5 +1542,5 @@ export function embedAncestors(cat, origin, preview = false) {
 
 export function embedPreview(cat, g, origin) {
   const frameOrigin = new URL(origin); frameOrigin.hostname = frameOrigin.hostname === 'localhost' ? '127.0.0.1' : 'localhost';
-  return layoutless(`Preview ${g.name} in a post`, `<h1>Player card preview</h1><p>A cross-origin mock post using the sandbox observed in X’s web client. X’s phone apps open the player full screen; its website opens third-party games in a new tab.</p><iframe title="${esc(g.name)}" src="${esc(frameOrigin.origin)}/${esc(g.id)}/play/embed" sandbox="${PLAYER_SANDBOX}" allow="autoplay; fullscreen; web-share" allowfullscreen scrolling="no" style="width:100%;aspect-ratio:${PLAYER_SIZE.width}/${PLAYER_SIZE.height};border:0"></iframe>`, 'body{max-width:480px;margin:24px auto;background:#101622;color:white;font:16px system-ui}');
+  return layoutless(`Preview ${g.name} in a post`, `<h1>Player card preview</h1><p>A cross-origin mock post using the sandbox observed in X’s web client. X’s phone apps open the player full screen; its website opens third-party games in a new tab.</p><iframe title="${esc(g.name)}" src="${esc(frameOrigin.origin)}${esc(openPath(g))}/embed" sandbox="${PLAYER_SANDBOX}" allow="autoplay; fullscreen; web-share" allowfullscreen scrolling="no" style="width:100%;aspect-ratio:${PLAYER_SIZE.width}/${PLAYER_SIZE.height};border:0"></iframe>`, 'body{max-width:480px;margin:24px auto;background:#101622;color:white;font:16px system-ui}');
 }

package/worker/parts.mjs

@@ -38,11 +38,12 @@ export async function partsIndex(env, origin) {
  * Only a PUBLIC game is named (a private or invite-only game's parts are still shared, without saying where from).
  */
 function entryOf(p, cat, url) {
-  const g = p.from?.game ? (cat.games ?? []).find((x) => x.id === p.from.game) : null;
+  const g = (p.from?.game ?? p.from?.app) ? (cat.games ?? []).find((x) => x.id === (p.from.game ?? p.from.app)) : null;
   const { from, ...rest } = p;
   return {
     ...rest,
-    ...(g ? { from: { game: g.id, name: g.name ?? g.id, studio: cat.studio?.name ?? from.studio ?? null, page: `${url.origin}/${g.id}/`, play: `${url.origin}/${g.id}/play` } } : {}),
+    ...(!g && from && (from.music || from.video) ? { from: { ...(from.music ? { music: from.music } : { video: from.video }), name: from.name ?? null, studio: from.studio ?? null } } : {}),
+    ...(g ? { from: { [g.kind === 'app' ? 'app' : 'game']: g.id, name: g.name ?? g.id, studio: cat.studio?.name ?? from.studio ?? null, page: `${url.origin}/${g.id}/`, [g.kind === 'app' ? 'open' : 'play']: `${url.origin}/${g.id}/${g.kind === 'app' ? 'open' : 'play'}` } } : {}),
     add: `${url.host}/${p.id}`,
   };
 }
@@ -131,21 +132,21 @@ const CSS = `<style>
 </style>`;
 const head = (kicker, title, lead, extra = '') => `<header class="head"><p class="kicker">${esc(kicker)}</p><h1>${esc(title)}</h1>${lead ? `<p class="lead">${esc(lead)}</p>` : ''}${extra}</header>`;
 const studioOf = (cat) => cat.studio?.name ?? 'Studio';
-const fromLine = (p) => (p.from?.game ? `From <a href="/${esc(p.from.game)}/">${esc(p.from.name ?? p.from.game)}</a>` : '');
+const fromLine = (p) => ((p.from?.game ?? p.from?.app) ? `From <a href="/${esc((p.from.game ?? p.from.app))}/">${esc(p.from.name ?? (p.from.game ?? p.from.app))}</a>` : '');
 /** What a person says to their AI to get the part, in plain words with its name and reference: no command to type. */
 const sayAdd = (p) => `Add the "${p.name}" part from ${p.add} to my game`;
 const sayRow = (label, say) => `<div class="psay"><div><span class="ptag">${esc(label)}</span><code>${esc(say)}</code></div><button class="pcopy" type="button" data-copy="${esc(say)}">${icon('copy')}<span data-copy-word>Copy</span></button></div>`;
 
 function card(p) {
   const img = p.preview?.image ? `<img src="${esc(`${p.url}${p.preview.image}`)}" alt="" loading="lazy">` : '';
-  return `<li><a class="pcard" href="/parts/${esc(p.id)}/">${img}<span class="ptag">${esc(kindOf(p))} · ${esc(p.license ?? '')}</span><h3>${esc(p.name)}</h3><p>${esc(p.summary ?? '')}</p>${p.from?.game ? `<p>From ${esc(p.from.name ?? p.from.game)}</p>` : ''}</a></li>`;
+  return `<li><a class="pcard" href="/parts/${esc(p.id)}/">${img}<span class="ptag">${esc(kindOf(p))} · ${esc(p.license ?? '')}</span><h3>${esc(p.name)}</h3><p>${esc(p.summary ?? '')}</p>${(p.from?.game ?? p.from?.app) ? `<p>From ${esc(p.from.name ?? (p.from.game ?? p.from.app))}</p>` : ''}</a></li>`;
 }
 
 export function partsPage(cat, parts, url) {
   const name = studioOf(cat);
   // Grouped by the game each came out of: a mashup starts from "the creature in that game".
   const groups = new Map();
-  for (const p of parts) { const k = p.from?.game ?? ''; if (!groups.has(k)) groups.set(k, []); groups.get(k).push(p); }
+  for (const p of parts) { const k = (p.from?.game ?? p.from?.app) ?? ''; if (!groups.has(k)) groups.set(k, []); groups.get(k).push(p); }
   const body = [...groups].sort(([a], [b]) => (a === '' ? 1 : b === '' ? -1 : a.localeCompare(b))).map(([k, list]) => `<p class="sec"${k ? ` id="from-${esc(k)}"` : ''}>${k ? `From ${esc(list[0].from.name ?? k)}` : 'More parts'}</p><ul class="pgrid">${list.map(card).join('')}</ul>`).join('');
   return layout(cat, {
     title: `Game parts · ${name}`, description: `Pieces of ${name}'s games that other studios can use in their own: creatures, levels, mechanics, sounds. Each with its licence.`, origin: url.origin, path: '/parts/', page: 'parts', head: CSS,
@@ -213,7 +214,8 @@ export function partPage(cat, p, url) {
     : p.preview?.image ? `<img class="pframe" src="${esc(`${p.url}${p.preview.image}`)}" alt="${esc(p.name)}">` : '';
   const facts = [
     ['Kind', esc(kindOf(p))],
-    p.from?.game ? ['From the game', `<a href="/${esc(p.from.game)}/">${esc(p.from.name ?? p.from.game)}</a> · <a href="/${esc(p.from.game)}/play">Play it</a>`] : null,
+    p.uses?.length ? ['For', esc(p.uses.join(', '))] : null,
+    (p.from?.game ?? p.from?.app) ? [p.from.app ? 'From the app' : 'From the game', `<a href="/${esc((p.from.game ?? p.from.app))}/">${esc(p.from.name ?? (p.from.game ?? p.from.app))}</a> · <a href="/${esc((p.from.game ?? p.from.app))}/${p.from.app ? 'open' : 'play'}">${p.from.app ? 'Open it' : 'Play it'}</a>`] : null,
     ['Licence', `${esc(p.license ?? 'none named')}${p.license && !/^LicenseRef-/.test(p.license) ? ` · <a href="https://spdx.org/licenses/${esc(p.license)}.html" rel="noopener">what it allows</a>` : ''}`],
     p.attribution ? ['Credit', esc(p.attribution)] : null,
     ['Version', `${esc(p.version)}${(p.versions ?? []).length > 1 ? ` (also ${esc(p.versions.filter((v) => v !== p.version).join(', '))})` : ''}`],
@@ -228,7 +230,7 @@ export function partPage(cat, p, url) {
   return layout(cat, {
     title: `${p.name} · a game part from ${name}`, description: `${p.summary ?? ''} A ${kindOf(p).toLowerCase()} from ${name}${p.from?.name ? `'s ${p.from.name}` : ''}, shared under ${p.license ?? 'its own terms'}.`.trim(), origin: url.origin, path: `/parts/${p.id}/`, page: 'part', head: CSS,
     image: p.preview?.image ? `${p.url}${p.preview.image}` : null,
-    main: `${head(`${kindOf(p)} · game part`, p.name, p.summary ?? '', `<div class="keys"><a class="ghost" href="/parts/">${icon('arrow')}<span>All parts</span></a>${p.from?.game ? `<a class="ghost" href="/${esc(p.from.game)}/play">${icon('games')}<span>Play ${esc(p.from.name ?? p.from.game)}</span></a>` : ''}</div>`)}
+    main: `${head(`${kindOf(p)} · shared part`, p.name, p.summary ?? '', `<div class="keys"><a class="ghost" href="/parts/">${icon('arrow')}<span>All parts</span></a>${(p.from?.game ?? p.from?.app) ? `<a class="ghost" href="/${esc((p.from.game ?? p.from.app))}/${p.from.app ? 'open' : 'play'}">${icon('games')}<span>${p.from.app ? 'Open' : 'Play'} ${esc(p.from.name ?? (p.from.game ?? p.from.app))}</span></a>` : ''}</div>`)}
 <div class="wrap">
 ${preview ? `<p class="sec">Try it</p>${preview}` : ''}
 <p class="sec">Use it in your game</p>
@@ -248,7 +250,7 @@ ${sayRow('Say', sayAdd(p))}
  * build something new from them. Empty when the game shared none. It stands by itself: its own markup and styles.
  */
 export function partsBand(g, parts, host) {
-  const mine = parts.filter((p) => p.from?.game === g.id);
+  const mine = parts.filter((p) => (p.from?.game ?? p.from?.app) === g.id);
   if (!mine.length) return '';
   const say = mine.length === 1 ? sayAdd({ ...mine[0], add: `${host}/${mine[0].id}` }) : `Make a new game in my Homie studio with these parts of ${g.name}: ${mine.slice(0, 4).map((p) => `${host}/${p.id}`).join(', ')}`;
   return `${CSS}<section class="pband" aria-labelledby="parts-title" data-parts-band>
@@ -266,7 +268,7 @@ export async function withPartsBand(res, env, url, g) {
   try {
     if (!res || res.status !== 200 || !/text\/html/i.test(res.headers.get('content-type') ?? '')) return res;
     const index = await partsIndex(env, url.origin);
-    const band = partsBand(g, index.parts.map((p) => ({ ...p, from: p.from?.game === g.id ? { ...p.from, name: g.name } : p.from })), url.host);
+    const band = partsBand(g, index.parts.map((p) => ({ ...p, from: (p.from?.game ?? p.from?.app) === g.id ? { ...p.from, name: g.name } : p.from })), url.host);
     if (!band) return res;
     const html = await res.text();
     const at = html.lastIndexOf('</main>');

package/worker/schema.mjs

@@ -164,7 +164,7 @@ export function gameNode(cat, g, origin, { listed = true, shop = null } = {}) {
   const L = g.landing ?? {};
   const h = L.hero ?? {};
   const page = `${origin}/${g.id}/`;
-  const play = `${origin}/${g.id}/play`;
+  const play = `${origin}/${g.id}/${g.kind === 'app' ? 'open' : 'play'}`;
   const min = Number(g.players?.min) || 1;
   const max = Number(g.players?.max) || 8;
   const modes = [...(min <= 1 ? ['SinglePlayer'] : []), ...(max > 1 ? ['MultiPlayer'] : [])];
@@ -180,7 +180,7 @@ export function gameNode(cat, g, origin, { listed = true, shop = null } = {}) {
   const addOn = listed ? shopOffers(shop, g, origin) : [];
   const genre = (Array.isArray(g.genre) ? g.genre : g.genre ? [g.genre] : []).map((x) => text(x, 40)).filter(Boolean);
   const node = {
-    '@type': ['VideoGame', 'WebApplication'],
+    '@type': g.kind === 'app' ? 'WebApplication' : ['VideoGame', 'WebApplication'],
     '@id': `${page}#game`,
     name: g.name,
     ...(text(g.blurb ?? L.pitch) ? { description: text(g.blurb || L.pitch) } : {}),
@@ -189,10 +189,11 @@ export function gameNode(cat, g, origin, { listed = true, shop = null } = {}) {
     ...(images.length ? { image: images.length === 1 ? images[0] : images } : {}),
     ...(shots.length ? { screenshot: shots } : {}),
     ...(genre.length ? { genre: genre.length === 1 ? genre[0] : genre } : {}),
-    playMode: modes.map(PLAY_MODE),
+    ...(g.kind === 'app' ? {} : { playMode: modes.map(PLAY_MODE),
     numberOfPlayers: { '@type': 'QuantitativeValue', minValue: min, maxValue: max },
     gamePlatform: ['Web browser', 'Phone', 'Computer', ...(L.tv !== false ? ['TV'] : [])],
-    applicationCategory: 'GameApplication',
+    }),
+    applicationCategory: g.kind === 'app' ? 'BusinessApplication' : 'GameApplication',
     operatingSystem: 'Any',
     browserRequirements: 'A modern web browser with JavaScript',
     isAccessibleForFree: true,
@@ -203,7 +204,7 @@ export function gameNode(cat, g, origin, { listed = true, shop = null } = {}) {
     ...(trailer ? { trailer: videoNode(cat, trailer, origin, { nested: true }) } : {}),
     ...(when(g.dates?.published) ? { datePublished: g.dates.published } : {}),
     ...(when(g.dates?.modified) ? { dateModified: g.dates.modified } : {}),
-    potentialAction: { '@type': 'PlayAction', target: play },
+    potentialAction: { '@type': g.kind === 'app' ? 'ViewAction' : 'PlayAction', target: play },
     ...(listed ? { offers: { '@type': 'Offer', price: 0, priceCurrency: /^[A-Z]{3}$/.test(String(shop?.currency ?? '').toUpperCase()) ? String(shop.currency).toUpperCase() : 'USD', availability: 'https://schema.org/OnlineOnly', url: play, ...(addOn.length ? { addOn } : {}) } } : {}),
   };
   return withExtras(node, g.schema);

package/worker/seats.mjs

@@ -34,7 +34,7 @@ export const PREFS_LIMITS = Object.freeze({ bytes: 16_384, keys: 32, key: 64 });
  * the seat's token, the ticket, the browser key…): a game can never ask to be handed those.
  */
 export const PLAY_PARAMS = Object.freeze(['debug', 'q', 'touchdebug', 'cam', 'view']);
-const RESERVED_PARAMS = new Set(['room', 'device', 'want', 'k', 'b', 't', 'name', 'hush', 'chat', 'bub', 'watch', 'follow', 'hand', 'screen', 'arrive', 'not', 'via', 'invite', 'w', 'gv', 'pf', 'server', 'token', 'key', 'code']);
+const RESERVED_PARAMS = new Set(['room', 'device', 'want', 'k', 'b', 't', 'name', 'hush', 'chat', 'bub', 'watch', 'follow', 'hand', 'screen', 'arrive', 'not', 'via', 'invite', 'w', 'gv', 'pf', 'server', 'token', 'key', 'code', 'access']);
 const PARAM_NAME = /^[a-z][a-z0-9_-]{0,23}$/;
 /** A switch's value as it is passed in: up to 48 of A-Z a-z 0-9 _ . ~ - (empty for a bare `?debug`). */
 export const PARAM_VALUE = '^[A-Za-z0-9_.~-]{0,48}$';
@@ -42,7 +42,7 @@ export const PARAM_VALUE = '^[A-Za-z0-9_.~-]{0,48}$';
 /** The names a game may be handed: the defaults, then up to 12 of its own (lowercase, never one the page uses). */
 export function playParams(meta) {
   const own = Array.isArray(meta?.netplay?.params) ? meta.netplay.params : [];
-  const out = [...PLAY_PARAMS];
+  const out = [...PLAY_PARAMS, ...(meta?.kind === 'app' ? ['role', 'surface', 'ticket'] : [])];
   for (const raw of own) {
     const k = String(raw ?? '');
     if (PARAM_NAME.test(k) && !RESERVED_PARAMS.has(k) && !out.includes(k)) out.push(k);

package/worker/shop-page.mjs

@@ -409,7 +409,7 @@ export const SHOP_SHELL_JS = String.raw`(function () {
     try { inFrame = Boolean(window.top) && window.top !== window; } catch (e) { inFrame = true; }
     if (boot.embed || inFrame) {
       box.appendChild(el('p', { class: 'sub' }, inFrame ? 'Purchases open on the studio’s site, outside this post.' : 'Purchases are made in the studio’s shop.'));
-      box.appendChild(el('a', { class: 'buy', href: '/shop/?game=' + encodeURIComponent(GAME), target: '_blank', rel: 'noopener noreferrer' }, inFrame ? 'Buy on the studio’s site ↗' : 'Go to the shop'));
+      box.appendChild(el('a', { class: 'buy', href: '/shop/?game=' + encodeURIComponent(GAME) + (want ? '&item=' + encodeURIComponent(want) : ''), target: '_blank', rel: 'noopener noreferrer' }, inFrame ? 'Buy on the studio’s site ↗' : 'Go to the shop'));
       return;
     }
     if (screen) {
@@ -463,8 +463,9 @@ export const SHOP_SHELL_JS = String.raw`(function () {
     }
     loadItems('');
   }
-  var opener = document.querySelector('[data-shop-open]');
-  if (opener) opener.addEventListener('click', function () { open(null); });
+  document.querySelectorAll('[data-shop-open]').forEach(function (opener) {
+    opener.addEventListener('click', function () { open(null); });
+  });
   var state = window.__shell || (window.__shell = {});
   state.shop = { open: open, close: close, refresh: refresh, get owns() { return owns.slice(); } };