@homie-rocks/studio 0.20.0 → 0.22.0

package/starters/gem-rush-3d/style.json

@@ -0,0 +1,66 @@
+{
+  "v": 1,
+  "palette": {
+    "bg": "#cfe8f5",
+    "ink": "#1d2b3a",
+    "accent": "#ff8a5b",
+    "accent2": "#5cbf8a",
+    "danger": "#e2553f",
+    "good": "#45b36b",
+    "gold": "#ffd25a",
+    "ramp": [
+      "#9fd3ef",
+      "#cfe8f5",
+      "#f8f3e6",
+      "#8fd06a",
+      "#5cbf8a",
+      "#3f8f5a",
+      "#ffd25a",
+      "#ffb347",
+      "#ff8a5b",
+      "#e86a6a",
+      "#b07ad9",
+      "#8a6a4a",
+      "#5a4a3a",
+      "#ffffff"
+    ]
+  },
+  "fonts": {
+    "display": "Fredoka",
+    "body": "Nunito"
+  },
+  "light": {
+    "time": "morning",
+    "key": [
+      -0.5,
+      -1,
+      -0.35
+    ],
+    "intensity": 2.2,
+    "hardness": 0.35,
+    "sky": "#e0f0f9",
+    "ground": "#79c9a5",
+    "fog": 0.35,
+    "bloom": 0.1
+  },
+  "camera": {
+    "angle": "low-3/4",
+    "projection": "perspective",
+    "pitch": 34,
+    "distance": 20,
+    "fov": 42
+  },
+  "render": "lowpoly-flat",
+  "materials": {
+    "model": "flat",
+    "outline": false,
+    "texelDensity": null,
+    "atlas": true
+  },
+  "rev": {
+    "style.palette": 1,
+    "style.ui": 1,
+    "style.light": 1,
+    "style.camera": 1
+  }
+}

package/starters/gem-rush-3d/tunables.json

@@ -0,0 +1,13 @@
+{
+  "knockRange": { "value": 2.2, "min": 1.2, "max": 4, "step": 0.02, "unit": "m", "group": "Knock", "note": "How near a body must be for a wave to bump it" },
+  "hitStopMs": { "value": 70, "min": 0, "max": 200, "step": 5, "unit": "ms", "group": "Knock", "note": "The hit lands: the bumped body holds, squashed and shaking, before it flies" },
+  "knockDistance": { "value": 3.7, "min": 0.8, "max": 8, "step": 0.1, "unit": "m", "group": "Knock", "note": "How far a bump sends a body, the same at any frame rate" },
+  "knockMs": { "value": 420, "min": 120, "max": 1000, "step": 10, "unit": "ms", "group": "Knock", "note": "How long the slide takes" },
+  "knockEase": { "value": 4, "min": 1, "max": 6, "step": 0.1, "group": "Knock", "note": "1 slides at one speed; higher leaves faster and eases into the stop" },
+  "squash": { "value": 0.35, "min": 0, "max": 0.8, "step": 0.01, "group": "Body", "note": "How much a flying body stretches along the hit, and squashes when it stops" },
+  "settleMs": { "value": 260, "min": 0, "max": 700, "step": 10, "unit": "ms", "group": "Body", "note": "The wobble after the stop (overlap)" },
+  "flashMs": { "value": 110, "min": 0, "max": 300, "step": 5, "unit": "ms", "group": "Hit", "note": "How long the bumped body flashes white" },
+  "shake": { "value": 0.16, "min": 0, "max": 0.6, "step": 0.01, "unit": "m", "group": "Hit", "note": "The camera's kick when you bump or are bumped" },
+  "sparks": { "value": 9, "min": 0, "max": 24, "step": 1, "group": "Hit", "note": "Sparks thrown off the hit" },
+  "ringMs": { "value": 900, "min": 200, "max": 2000, "step": 10, "unit": "ms", "group": "Wave", "note": "How long a wave's ring lasts" }
+}

package/worker/index.mjs

@@ -81,7 +81,7 @@ import {
 import { BRAIN_BUDGET, HouseAgents, agentFacts, aiName, decodeFacts, encodeFacts, passById, passRefusal, sitRoute } from './agents.mjs';
 import { talks } from './brain.mjs';
 import { doorPage, serverPage, serversPage } from './site.mjs';
-import { qrSvg } from './qr.mjs';
+import { isLocalOrigin, qrSvg } from './qr.mjs';
 import { SEAT_MAX, perAddress, seatsOf } from './seats.mjs';
 import {
   SITE_JS, atomFeed, creditsPage, customPage, gameCover, gameLanding, gamesPage, homePage, jsonFeed, mediaArt, mediaIndexPage,
@@ -846,9 +846,11 @@ async function route(request, env, ctx) {
           try { room = (await (await lobby().fetch(`https://lobby/join?max=${humanSeats(pol)}&server=${srv.id}&rooms=${srv.roomsMax}`, { method: 'POST' })).json()).room ?? null; } catch { room = null; }
         }
         const joinUrl = `${url.origin}/${game}/play${room ? `?room=${encodeURIComponent(room)}` : ''}`;
+        // Local development: no phone can open this computer's own address, so no code for it; the card says to deploy.
+        const local = isLocalOrigin(url.origin);
         let qr = null;
-        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, room, ticket, owner: d.owner, launch, server });
+        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 });
       }
       await countVisit(request, env, ctx, game, 'play');
       shareDaily(cat, url, ctx);

package/worker/pages.mjs

@@ -84,12 +84,16 @@ 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, room = null, ticket = null, owner = false, launch = 'public', server = null } = {}) {
+export function playPage(cat, g, { screen = false, joinUrl = null, qr = null, local = false, room = null, ticket = null, owner = false, launch = 'public', server = 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);
   // The phone's glass belongs to the game: no page pan, pinch-zoom, text selection or callout under a thumb
   // (a pinch between a stick thumb and a button thumb made the browser cancel both touches).
+  // A game with an art direction (games.json `ui`, from its style.json): the pills wear its paper and text, like its HUD.
+  const okHex = (v) => /^#[0-9a-f]{6}$/i.test(String(v ?? ''));
+  const ui = okHex(g.ui?.paper) && okHex(g.ui?.text) ? g.ui : null;
+  const pillUi = ui ? `\n.pill, .chip, .pill.dim { background: ${ui.paper}e6; color: ${ui.text}; border-color: ${ui.text}22; }\n.pill svg { color: ${ui.text}; }` : '';
   const css = `:root{--hot:${/^#[0-9a-f]{3,8}$/i.test(accent) ? accent : '#ffcf5a'}}
 html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; background: #04060c; touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
 iframe.game { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #04060c; touch-action: none; }
@@ -155,7 +159,7 @@ 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}${g.saves && !screen ? SAVES_SHELL_CSS : ''}`;
+${SERVER_CSS}${g.saves && !screen ? SAVES_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.
@@ -166,7 +170,9 @@ ${SERVER_CSS}${g.saves && !screen ? SAVES_SHELL_CSS : ''}`;
   // 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;
-  const joinCard = screen && joinUrl ? `<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>` : '';
+  // 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 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="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>
@@ -267,6 +273,8 @@ const SHELL_JS = String.raw`(function () {
   var boot = window.__HOMIE_PLAY;
   var params = new URLSearchParams(location.search);
   var screenMode = params.get('screen') === '1' || boot.screen === true;
+  // Local development (this computer's own address): never hand a phone a link it cannot open.
+  var LOCAL = /^(localhost|.*\.localhost|127\..*|\[::1\]|0\.0\.0\.0)$/.test(location.hostname);
   var asked = params.get('hand');
   var device = asked === 'phone' || asked === 'desk' || asked === 'tv' ? asked : Math.min(innerWidth, innerHeight) <= 540 ? 'phone' : 'desk';
   var want = screenMode ? 'screen' : 'play';
@@ -352,7 +360,7 @@ const SHELL_JS = String.raw`(function () {
     state.link = link;
     ui.querySelector('[data-room-code]').textContent = labelOf(room);
     ui.querySelector('[data-room-label]').textContent = labelOf(room);
-    ui.querySelector('[data-room-link]').textContent = link.replace(/^https?:\/\//, '');
+    ui.querySelector('[data-room-link]').textContent = LOCAL ? 'Deploy to share: this preview address works on this computer only.' : link.replace(/^https?:\/\//, '');
     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 () {
@@ -412,7 +420,7 @@ const SHELL_JS = String.raw`(function () {
     });
     watch(room);
     shareReady(room);
-    if (screenMode && !document.querySelector('[data-join]')) {
+    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);
       screenCard.append(h2, div); screenCard.hidden = false;

package/worker/qr.mjs

@@ -489,6 +489,17 @@ export function encodeQr(text, { minLevel = 'M' } = {}) {
 
 
 /** The symbol as an SVG string: one path, dark modules on a light square with the quiet zone. */
+/**
+ * An address only this computer can open (local development: localhost, 127.x, ::1, 0.0.0.0). A page never puts one in
+ * a QR code or tells a phone to open it: a phone cannot reach it. It says "deploy to share" instead.
+ */
+export function isLocalOrigin(origin) {
+  let host = '';
+  try { host = new URL(String(origin)).hostname; } catch { return false; }
+  host = host.replace(/^\[|\]$/g, '');
+  return host === 'localhost' || host.endsWith('.localhost') || /^127\./.test(host) || host === '::1' || host === '0.0.0.0';
+}
+
 export function qrSvg(text, { minLevel = 'M', quiet = 4, dark = '#000000', light = '#ffffff', title = '' } = {}) {
   const q = encodeQr(text, { minLevel });
   const total = q.size + quiet * 2;

package/worker/site.mjs

@@ -9,7 +9,7 @@
  * What a studio puts in site/ wins: a whole page (site/pages), a partial (site/partials), its tokens
  * (site/theme.json) and CSS (site/theme.css). The build gathers them into games.json and site/dist/_site/.
  */
-import { qrSvg } from './qr.mjs';
+import { isLocalOrigin, qrSvg } from './qr.mjs';
 import { STUDIO_VERSION_TAG } from './version.mjs';
 import { licenseLabel, licenseOf, remixRow } from './license.mjs';
 import { POLICY_WORDS, policyWords } from './servers.mjs';
@@ -1080,7 +1080,9 @@ export function gameLanding(cat, g, { origin = '', rooms = [], playing = 0, week
   const host = origin.replace(/^https?:\/\//, '');
   const playUrl = `${origin}/${g.id}/play`;
   let qr = '';
-  try { qr = qrSvg(playUrl, { title: `Play ${g.name} on your phone` }); } catch { qr = ''; }
+  // Local development: no code a phone cannot open; the landing says to deploy instead of naming this computer's address.
+  const local = isLocalOrigin(origin);
+  if (!local) try { qr = qrSvg(playUrl, { title: `Play ${g.name} on your phone` }); } catch { qr = ''; }
   const tvOn = L.tv !== false;
   const max = g.players?.max ?? 8;
   const words = L.words ?? {};
@@ -1111,7 +1113,7 @@ export function gameLanding(cat, g, { origin = '', rooms = [], playing = 0, week
     <p class="lead">Nothing to download and nothing to install: ${esc(g.name)} runs in the browser you already have, and everyone who presses Play meets in the same public room.</p>
     <ol class="ways">
       <li class="way"><span class="n">${icon('phone')}</span><div><h3>On your phone</h3><p>${esc(L.controls?.phone ?? 'Touch controls appear under your thumbs; the middle of the screen stays clear.')}</p>
-        <div class="scan desk-only">${qr ? `<span class="qr" role="img" aria-label="A code for your phone’s camera: ${esc(host)}/${esc(g.id)}/play">${qr}</span>` : ''}<p>Point your phone’s camera at the code, or open <span class="addr">${esc(host)}/${esc(g.id)}/play</span>.</p></div>
+        <div class="scan desk-only">${qr ? `<span class="qr" role="img" aria-label="A code for your phone’s camera: ${esc(host)}/${esc(g.id)}/play">${qr}</span>` : ''}<p>${local ? 'Deploy to share: once the studio is online, a code here takes a phone straight to the game.' : `Point your phone’s camera at the code, or open <span class="addr">${esc(host)}/${esc(g.id)}/play</span>.`}</p></div>
         <p class="phone-only" style="margin-top:8px"><strong>You are on it:</strong> press Play above.</p></div></li>
       <li class="way"><span class="n">${icon('computer')}</span><div><h3>On your computer</h3><p>${esc(L.controls?.computer ?? 'Keys and mouse, in any modern browser; the game shows you which keys.')}</p></div></li>
       ${tvOn ? `<li class="way"><span class="n">${icon('tv')}</span><div><h3>On the TV</h3><ol><li>Open <span class="addr">${esc(host)}/${esc(g.id)}/tv</span> in the TV’s browser, or on a laptop plugged into it.</li><li>Scan the code it shows with your phone’s camera.</li><li>Play on your phone. Everyone on the couch joins the same way, up to ${esc(max)} ${esc(many)}, and the TV shows the whole room.</li></ol>${L.controls?.tv ? `<p style="margin-top:8px">${esc(L.controls.tv)}</p>` : ''}</div></li>` : ''}

package/worker/version.mjs

@@ -1,2 +1,2 @@
 /** The @homie-rocks/studio version this Worker code is (package.json's; a test keeps them equal). Cache-busts /_homie/site.js. */
-export const STUDIO_VERSION_TAG = '0.20.0';
+export const STUDIO_VERSION_TAG = '0.22.0';