create-okona-game 0.1.0 → 0.1.2

package/README.md

@@ -1,11 +1,11 @@
-# create-okona-game
-
-```
-npm create okona-game my-party-game
-```
-
-Scaffolds a phone-controlled multiplayer HTML5 game for [Okona](https://okonaonline.com): a lobby that shows the join code until the room is full, six seats with names and colours pushed to each phone, the frame loop, and a `game.js` with `start` / `update` / `draw` hooks holding a small sample (a coin-grab race) to replace with your game.
-
-Open `index.html` in a browser and the keyboard is P1. Publish with the [`okona` CLI](https://www.npmjs.com/package/okona-cli) and phones join by scanning the code on the TV.
-
-Zero dependencies. Docs: https://okonaonline.com/developers/docs.html#html5
+# create-okona-game
+
+```
+npm create okona-game my-party-game
+```
+
+Scaffolds a phone-controlled multiplayer HTML5 game for [Okona](https://okonaonline.com): a lobby that shows the join code until the room is full, six seats with names and colours pushed to each phone, the frame loop, and a `game.js` with `start` / `update` / `draw` hooks holding a small sample (a coin-grab race) to replace with your game.
+
+Open `index.html` in a browser and the keyboard is P1 — no build step, no `package.json`. Ship it with the [`okona` CLI](https://www.npmjs.com/package/okona-cli) (`npx okona-cli`, Node 18.17+): push to your sandbox first to try it with real phones, then publish, and phones join by scanning the code on the TV.
+
+Zero dependencies. Docs: https://okonaonline.com/developers/docs.html#html5 · SDK reference: https://okonaonline.com/developers/docs.html#js-sdk

package/index.js

@@ -1,69 +1,71 @@
-#!/usr/bin/env node
-// create-okona-game — scaffold a phone-controlled multiplayer game for Okona.
-//
-//   npm create okona-game my-game        (or: npx create-okona-game my-game)
-//
-// Copies the template (lobby + join code + seats in index.html, your game in
-// game.js, an icon, a README) into ./my-game with the name filled in. Zero
-// dependencies, Node ≥ 18. `--force` writes into a non-empty directory.
-import { mkdir, readdir, readFile, writeFile, copyFile, stat } from "node:fs/promises";
-import { join, resolve, dirname, basename } from "node:path";
-import { fileURLToPath } from "node:url";
-
-const here = dirname(fileURLToPath(import.meta.url));
-const TEMPLATE = join(here, "template");
-
-export function titleFrom(dirName) {
-    return String(dirName || "My Okona Game")
-        .replace(/[-_]+/g, " ")
-        .replace(/\s+/g, " ")
-        .trim()
-        .replace(/\b\w/g, (c) => c.toUpperCase()) || "My Okona Game";
-}
-
-export async function scaffold(target, { name, force = false } = {}) {
-    const dir = resolve(target);
-    const title = name || titleFrom(basename(dir));
-    await mkdir(dir, { recursive: true });
-    const existing = await readdir(dir);
-    if (existing.length && !force) {
-        throw new Error(dir + " is not empty (use --force to write into it anyway).");
-    }
-    const files = await readdir(TEMPLATE);
-    const written = [];
-    for (const f of files) {
-        const src = join(TEMPLATE, f);
-        if ((await stat(src)).isDirectory()) continue;
-        const dest = join(dir, f === "gitignore" ? ".gitignore" : f);
-        if (/\.(html|js|md)$/.test(f) || f === "gitignore") {
-            const text = (await readFile(src, "utf8")).split("{{NAME}}").join(title);
-            await writeFile(dest, text);
-        } else {
-            await copyFile(src, dest);
-        }
-        written.push(basename(dest));
-    }
-    return { dir, title, files: written };
-}
-
-// ---- CLI ---------------------------------------------------------------------
-const isMain = process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url);
-if (isMain) {
-    const args = process.argv.slice(2);
-    const force = args.includes("--force");
-    const nameIdx = args.indexOf("--name");
-    const name = nameIdx >= 0 ? args[nameIdx + 1] : undefined;
-    const target = args.find((a, i) => !a.startsWith("--") && (nameIdx < 0 || i !== nameIdx + 1)) || "my-okona-game";
-    scaffold(target, { name, force }).then((r) => {
-        console.log(`\n  Created ${r.title} in ${r.dir}\n`);
-        console.log("  Next:");
-        console.log("    open index.html in a browser — the keyboard is P1 (WASD + Space)");
-        console.log("    edit game.js — start / update / draw are yours");
-        console.log("    npx okona-cli login && npx okona-cli create --title \"" + r.title + "\" --description \"…\" --runtime html5");
-        console.log("    npx okona-cli push . --game <id> --icon icon.png --publish\n");
-        console.log("  Docs: https://okonaonline.com/developers/docs.html#html5\n");
-    }).catch((e) => {
-        console.error("error: " + (e && e.message ? e.message : e));
-        process.exit(1);
-    });
-}
+#!/usr/bin/env node
+// create-okona-game — scaffold a phone-controlled multiplayer game for Okona.
+//
+//   npm create okona-game my-game        (or: npx create-okona-game my-game)
+//
+// Copies the template (lobby + join code + seats in index.html, your game in
+// game.js, an icon, a README) into ./my-game with the name filled in. Zero
+// dependencies, Node ≥ 18. `--force` writes into a non-empty directory.
+import { mkdir, readdir, readFile, writeFile, copyFile, stat } from "node:fs/promises";
+import { join, resolve, dirname, basename } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const TEMPLATE = join(here, "template");
+
+export function titleFrom(dirName) {
+    return String(dirName || "My Okona Game")
+        .replace(/[-_]+/g, " ")
+        .replace(/\s+/g, " ")
+        .trim()
+        .replace(/\b\w/g, (c) => c.toUpperCase()) || "My Okona Game";
+}
+
+export async function scaffold(target, { name, force = false } = {}) {
+    const dir = resolve(target);
+    const title = name || titleFrom(basename(dir));
+    await mkdir(dir, { recursive: true });
+    const existing = await readdir(dir);
+    if (existing.length && !force) {
+        throw new Error(dir + " is not empty (use --force to write into it anyway).");
+    }
+    const files = await readdir(TEMPLATE);
+    const written = [];
+    for (const f of files) {
+        const src = join(TEMPLATE, f);
+        if ((await stat(src)).isDirectory()) continue;
+        const dest = join(dir, f === "gitignore" ? ".gitignore" : f);
+        if (/\.(html|js|md)$/.test(f) || f === "gitignore") {
+            const text = (await readFile(src, "utf8")).split("{{NAME}}").join(title);
+            await writeFile(dest, text);
+        } else {
+            await copyFile(src, dest);
+        }
+        written.push(basename(dest));
+    }
+    return { dir, title, files: written };
+}
+
+// ---- CLI ---------------------------------------------------------------------
+const isMain = process.argv[1] && resolve(process.argv[1]) === fileURLToPath(import.meta.url);
+if (isMain) {
+    const args = process.argv.slice(2);
+    const force = args.includes("--force");
+    const nameIdx = args.indexOf("--name");
+    const name = nameIdx >= 0 ? args[nameIdx + 1] : undefined;
+    const target = args.find((a, i) => !a.startsWith("--") && (nameIdx < 0 || i !== nameIdx + 1)) || "my-okona-game";
+    scaffold(target, { name, force }).then((r) => {
+        console.log(`\n  Created ${r.title} in ${r.dir}\n`);
+        console.log("  Next:");
+        console.log("    open index.html in a browser — the keyboard is P1 (WASD + Space)");
+        console.log("    edit game.js — start / update / draw are yours");
+        console.log("    npx okona-cli login && npx okona-cli create --title \"" + r.title + "\" --description \"…\" --runtime html5");
+        console.log("    npx okona-cli push . --game <id> --icon icon.png --sandbox    # try it with real phones first");
+        console.log("    npx okona-cli push . --game <id> --icon icon.png --publish    # → https://play.okonaonline.com/games/?id=<id>");
+        console.log("    (npx okona-cli runs the okona command without installing it; Node 18.17+)\n");
+        console.log("  Docs: https://okonaonline.com/developers/docs.html#html5\n");
+    }).catch((e) => {
+        console.error("error: " + (e && e.message ? e.message : e));
+        process.exit(1);
+    });
+}

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "create-okona-game",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Scaffold a phone-controlled multiplayer HTML5 game for Okona: lobby, join code, six seats, and a game.js to make yours.",
   "license": "MIT",
   "homepage": "https://okonaonline.com/developers/docs.html#html5",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/earthcrosser/okona-platform",
-    "directory": "create-okona-game"
+  "bugs": {
+    "email": "support@okonaonline.com"
   },
   "keywords": ["okona", "create", "scaffold", "game", "html5", "phone-controller", "multiplayer", "party-game"],
   "type": "module",

package/template/README.md

@@ -1,22 +1,24 @@
-# {{NAME}}
-
-A phone-controlled multiplayer game for [Okona](https://okonaonline.com). Up to six people scan the code on screen and their phones become the gamepads.
-
-- `index.html` — the lobby, join code, seats and frame loop (rarely needs changes)
-- `game.js` — **your game**: `start`, `update`, `draw`, and the join/leave/park/resume hooks
-- `icon.png` — the icon shown in the Okona portal (replace it)
-
-## Play it locally
-
-Open `index.html` in a browser (or `npx serve .`). The keyboard is P1: WASD/arrows move, Space is A, Shift is B. Phones need the real thing, below.
-
-## Publish
-
-```
-npx okona-cli login                 # once: approve a code in the portal
-npx okona-cli create --title "{{NAME}}" --description "…" --runtime html5
-npx okona-cli push . --game <id> --icon icon.png --sandbox    # try it with real phones first
-npx okona-cli push . --game <id> --icon icon.png --publish    # → https://play.okonaonline.com/games/?id=<id>
-```
-
-Docs: https://okonaonline.com/developers/docs.html#html5 · The SDK contract in one page: `Okona.pads()`, `Okona.on('join'|'leave'|'park'|'resume'|'pairing')`, `Okona.drawQr()`, `Okona.players.setIdentity()`, `Okona.rumble()`, `Okona.track()`.
+# {{NAME}}
+
+A phone-controlled multiplayer game for [Okona](https://okonaonline.com). Up to six people scan the code on screen and their phones become the gamepads.
+
+- `index.html` — the lobby, join code, seats and frame loop (rarely needs changes)
+- `game.js` — **your game**: `start`, `update`, `draw`, and the join/leave/park/resume hooks
+- `icon.png` — the icon shown in the Okona portal (replace it)
+
+## Play it locally
+
+Open `index.html` in a browser (or `npx serve .`). The keyboard is P1: WASD/arrows move, Space is A, Shift is B. Phones need the real thing, below.
+
+## Publish
+
+The `okona` CLI is the npm package `okona-cli` (Node 18.17+); `npx` runs it without installing.
+
+```
+npx okona-cli login                 # once: approve a code in the portal
+npx okona-cli create --title "{{NAME}}" --description "…" --runtime html5
+npx okona-cli push . --game <id> --icon icon.png --sandbox    # try it with real phones first
+npx okona-cli push . --game <id> --icon icon.png --publish    # → https://play.okonaonline.com/games/?id=<id>
+```
+
+Docs: https://okonaonline.com/developers/docs.html#html5 · SDK reference: https://okonaonline.com/developers/docs.html#js-sdk · The contract in one line: `Okona.pads()`, `Okona.on('join'|'leave'|'park'|'resume'|'pairing')`, `Okona.drawQr()`, `Okona.players.setIdentity()`, `Okona.rumble()`, `Okona.track()` — and, for a choices-on-the-phone game (the RPG controller, Okona Pro), `Okona.choices.show()` / `picked()` / `clear()`.

package/template/index.html

@@ -1,175 +1,175 @@
-<!DOCTYPE html>
-<!--
-  {{NAME}} — an Okona game.
-
-  This file is the LOBBY and the game loop; your game lives in game.js.
-  Six phones scan the code on screen and become gamepads. Okona hosts the
-  game at one link. Open this file in a browser and the keyboard is P1
-  (WASD/arrows, Space = A, Shift = B) so you can play what you build.
-
-  Publish: npx okona-cli push . --game <id> --icon icon.png --publish
-  Docs:    https://okonaonline.com/developers/docs.html#html5
--->
-<html lang="en">
-<head>
-<meta charset="utf-8">
-<meta name="viewport" content="width=device-width, initial-scale=1">
-<title>{{NAME}}</title>
-<style>
-  html, body { margin: 0; height: 100%; background: #0D1B2A; overflow: hidden; }
-  canvas { display: block; width: 100vw; height: 100vh; }
-</style>
-</head>
-<body>
-<canvas id="screen"></canvas>
-<!-- The Okona SDK: phones, pairing code, identity, rumble, analytics. -->
-<script src="https://okonaonline.com/sdk/okona.js"></script>
-<script src="game.js"></script>
-<script>
-(function () {
-  'use strict';
-  // ---- the screen: a fixed 1920×1080 logical canvas scaled to fit ---------
-  var canvas = document.getElementById('screen');
-  var ctx = canvas.getContext('2d');
-  var W = 1920, H = 1080;
-  function resize() {
-    var dpr = window.devicePixelRatio || 1;
-    canvas.width = Math.floor(window.innerWidth * dpr);
-    canvas.height = Math.floor(window.innerHeight * dpr);
-  }
-  window.addEventListener('resize', resize);
-  resize();
-
-  // ---- players ------------------------------------------------------------
-  // Six seats. Okona holds a seat while its controller is away (pad.parked),
-  // so a player who closes their phone gets the same seat back.
-  var PALETTE = ['#E8A525', '#4FC3F7', '#81C784', '#F06292', '#BA68C8', '#FF8A65'];
-  var players = [];
-  for (var i = 0; i < 6; i++) players.push({ index: i, color: PALETTE[i], name: 'P' + (i + 1), score: 0 });
-
-  Okona.on('join', function (pad) {
-    var p = players[pad.index];
-    // What this player sees on their phone: name, emoji or image, accent.
-    Okona.players.setIdentity(pad, { name: p.name, icon: Game.icons[pad.index] || '🎮', accent: p.color });
-    Game.onJoin(p, pad);
-  });
-  Okona.on('leave', function (pad) { Game.onLeave(players[pad.index], pad); });
-  Okona.on('park', function (pad) { Game.onPark(players[pad.index], pad); });
-  Okona.on('resume', function (pad) { Game.onResume(players[pad.index], pad); });
-
-  // ---- the pairing code ---------------------------------------------------
-  var qr = document.createElement('canvas');
-  qr.width = qr.height = 512;
-  Okona.on('pairing', function () { Okona.drawQr(qr); });
-
-  // ---- lobby → playing → results -----------------------------------------
-  var state = 'lobby';
-  var startedAt = 0;
-
-  function connected(pads) {
-    var n = 0;
-    for (var i = 0; i < pads.length; i++) if (pads[i].connected) n++;
-    return n;
-  }
-
-  function drawJoinPanel(pads) {
-    var n = connected(pads);
-    if (n >= 6) return;
-    var size = state === 'lobby' ? 420 : 200;
-    var x = W - size - 70, y = 70;
-    ctx.fillStyle = '#FFFFFF';
-    ctx.fillRect(x - 16, y - 16, size + 32, size + 32);
-    ctx.drawImage(qr, x, y, size, size);
-    ctx.fillStyle = '#FFFFFF';
-    ctx.textAlign = 'center';
-    ctx.font = 'bold ' + (state === 'lobby' ? 40 : 24) + 'px system-ui, sans-serif';
-    ctx.fillText('Scan to join', x + size / 2, y + size + 66);
-    ctx.fillStyle = '#A0B4C8';
-    ctx.font = (state === 'lobby' ? 22 : 16) + 'px system-ui, sans-serif';
-    ctx.fillText(Okona.pairing.caption || (Okona.mode === 'standalone' ? 'Keyboard: WASD + Space' : ''), x + size / 2, y + size + 98);
-  }
-
-  function drawLobby(pads) {
-    ctx.fillStyle = '#E8A525';
-    ctx.textAlign = 'left';
-    ctx.font = 'bold 72px system-ui, sans-serif';
-    ctx.fillText(Game.title, 80, 150);
-    ctx.fillStyle = '#A0B4C8';
-    ctx.font = '30px system-ui, sans-serif';
-    ctx.fillText(Game.subtitle, 80, 205);
-    for (var i = 0; i < 6; i++) {
-      var p = players[i], pad = pads[i];
-      ctx.fillStyle = pad.connected ? p.color : '#2A4A6F';
-      ctx.font = 'bold 34px system-ui, sans-serif';
-      ctx.fillText((pad.connected ? '● ' : '○ ') + p.name + (pad.connected ? '' : '  open'), 80, 300 + i * 56);
-    }
-    var n = connected(pads);
-    ctx.fillStyle = '#FFFFFF';
-    ctx.font = '30px system-ui, sans-serif';
-    ctx.fillText(n === 0 ? 'Waiting for players…' : (n < Game.minPlayers ? 'Need ' + Game.minPlayers + ' to start' : 'P1: press A to start'), 80, 680);
-  }
-
-  function drawResults() {
-    var ranked = players.slice().sort(function (a, b) { return b.score - a.score; });
-    ctx.fillStyle = '#E8A525';
-    ctx.textAlign = 'center';
-    ctx.font = 'bold 84px system-ui, sans-serif';
-    ctx.fillText('Results', W / 2, 200);
-    ctx.font = 'bold 44px system-ui, sans-serif';
-    var shown = 0;
-    for (var i = 0; i < ranked.length && shown < 6; i++) {
-      if (!ranked[i].joined) continue;
-      ctx.fillStyle = ranked[i].color;
-      ctx.fillText(ranked[i].name + '   ' + ranked[i].score, W / 2, 320 + shown * 70);
-      shown++;
-    }
-    ctx.fillStyle = '#A0B4C8';
-    ctx.font = '30px system-ui, sans-serif';
-    ctx.fillText('P1: press A to play again', W / 2, 900);
-  }
-
-  var last = performance.now();
-  function frame(now) {
-    var dt = Math.min(0.05, (now - last) / 1000);
-    last = now;
-    var pads = Okona.pads();               // once per frame — justPressed() depends on it
-    for (var i = 0; i < 6; i++) if (pads[i].connected) players[i].joined = true;
-
-    var sx = canvas.width / W, sy = canvas.height / H;
-    ctx.setTransform(sx, 0, 0, sy, 0, 0);
-    ctx.fillStyle = '#0D1B2A';
-    ctx.fillRect(0, 0, W, H);
-
-    if (state === 'lobby') {
-      drawLobby(pads);
-      drawJoinPanel(pads);
-      if (connected(pads) >= Game.minPlayers && pads[0].justPressed('a')) {
-        players.forEach(function (p) { p.score = 0; });
-        Game.start(players, pads);
-        startedAt = now;
-        state = 'playing';
-        Okona.track('round_start', { players: connected(pads) });
-      }
-    } else if (state === 'playing') {
-      var over = Game.update(dt, players, pads, (now - startedAt) / 1000);
-      Game.draw(ctx, players, pads, W, H);
-      drawJoinPanel(pads);                 // late joiners are welcome
-      if (over) {
-        state = 'results';
-        Okona.track('round_end', { seconds: Math.round((now - startedAt) / 1000) });
-      }
-    } else {
-      drawResults();
-      if (pads[0].justPressed('a')) state = 'lobby';
-    }
-    requestAnimationFrame(frame);
-  }
-
-  Okona.ready(function () {
-    Okona.drawQr(qr);
-    requestAnimationFrame(frame);
-  });
-})();
-</script>
-</body>
-</html>
+<!DOCTYPE html>
+<!--
+  {{NAME}} — an Okona game.
+
+  This file is the LOBBY and the game loop; your game lives in game.js.
+  Six phones scan the code on screen and become gamepads. Okona hosts the
+  game at one link. Open this file in a browser and the keyboard is P1
+  (WASD/arrows, Space = A, Shift = B) so you can play what you build.
+
+  Publish: npx okona-cli push . --game <id> --icon icon.png --publish
+  Docs:    https://okonaonline.com/developers/docs.html#html5
+-->
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>{{NAME}}</title>
+<style>
+  html, body { margin: 0; height: 100%; background: #0D1B2A; overflow: hidden; }
+  canvas { display: block; width: 100vw; height: 100vh; }
+</style>
+</head>
+<body>
+<canvas id="screen"></canvas>
+<!-- The Okona SDK: phones, pairing code, identity, rumble, analytics. -->
+<script src="https://okonaonline.com/sdk/okona.js"></script>
+<script src="game.js"></script>
+<script>
+(function () {
+  'use strict';
+  // ---- the screen: a fixed 1920×1080 logical canvas scaled to fit ---------
+  var canvas = document.getElementById('screen');
+  var ctx = canvas.getContext('2d');
+  var W = 1920, H = 1080;
+  function resize() {
+    var dpr = window.devicePixelRatio || 1;
+    canvas.width = Math.floor(window.innerWidth * dpr);
+    canvas.height = Math.floor(window.innerHeight * dpr);
+  }
+  window.addEventListener('resize', resize);
+  resize();
+
+  // ---- players ------------------------------------------------------------
+  // Six seats. Okona holds a seat while its controller is away (pad.parked),
+  // so a player who closes their phone gets the same seat back.
+  var PALETTE = ['#E8A525', '#4FC3F7', '#81C784', '#F06292', '#BA68C8', '#FF8A65'];
+  var players = [];
+  for (var i = 0; i < 6; i++) players.push({ index: i, color: PALETTE[i], name: 'P' + (i + 1), score: 0 });
+
+  Okona.on('join', function (pad) {
+    var p = players[pad.index];
+    // What this player sees on their phone: name, emoji or image, accent.
+    Okona.players.setIdentity(pad, { name: p.name, icon: Game.icons[pad.index] || '🎮', accent: p.color });
+    Game.onJoin(p, pad);
+  });
+  Okona.on('leave', function (pad) { Game.onLeave(players[pad.index], pad); });
+  Okona.on('park', function (pad) { Game.onPark(players[pad.index], pad); });
+  Okona.on('resume', function (pad) { Game.onResume(players[pad.index], pad); });
+
+  // ---- the pairing code ---------------------------------------------------
+  var qr = document.createElement('canvas');
+  qr.width = qr.height = 512;
+  Okona.on('pairing', function () { Okona.drawQr(qr); });
+
+  // ---- lobby → playing → results -----------------------------------------
+  var state = 'lobby';
+  var startedAt = 0;
+
+  function connected(pads) {
+    var n = 0;
+    for (var i = 0; i < pads.length; i++) if (pads[i].connected) n++;
+    return n;
+  }
+
+  function drawJoinPanel(pads) {
+    var n = connected(pads);
+    if (n >= 6) return;
+    var size = state === 'lobby' ? 420 : 200;
+    var x = W - size - 70, y = 70;
+    ctx.fillStyle = '#FFFFFF';
+    ctx.fillRect(x - 16, y - 16, size + 32, size + 32);
+    ctx.drawImage(qr, x, y, size, size);
+    ctx.fillStyle = '#FFFFFF';
+    ctx.textAlign = 'center';
+    ctx.font = 'bold ' + (state === 'lobby' ? 40 : 24) + 'px system-ui, sans-serif';
+    ctx.fillText('Scan to join', x + size / 2, y + size + 66);
+    ctx.fillStyle = '#A0B4C8';
+    ctx.font = (state === 'lobby' ? 22 : 16) + 'px system-ui, sans-serif';
+    ctx.fillText(Okona.pairing.caption || (Okona.mode === 'standalone' ? 'Keyboard: WASD + Space' : ''), x + size / 2, y + size + 98);
+  }
+
+  function drawLobby(pads) {
+    ctx.fillStyle = '#E8A525';
+    ctx.textAlign = 'left';
+    ctx.font = 'bold 72px system-ui, sans-serif';
+    ctx.fillText(Game.title, 80, 150);
+    ctx.fillStyle = '#A0B4C8';
+    ctx.font = '30px system-ui, sans-serif';
+    ctx.fillText(Game.subtitle, 80, 205);
+    for (var i = 0; i < 6; i++) {
+      var p = players[i], pad = pads[i];
+      ctx.fillStyle = pad.connected ? p.color : '#2A4A6F';
+      ctx.font = 'bold 34px system-ui, sans-serif';
+      ctx.fillText((pad.connected ? '● ' : '○ ') + p.name + (pad.connected ? '' : '  open'), 80, 300 + i * 56);
+    }
+    var n = connected(pads);
+    ctx.fillStyle = '#FFFFFF';
+    ctx.font = '30px system-ui, sans-serif';
+    ctx.fillText(n === 0 ? 'Waiting for players…' : (n < Game.minPlayers ? 'Need ' + Game.minPlayers + ' to start' : 'P1: press A to start'), 80, 680);
+  }
+
+  function drawResults() {
+    var ranked = players.slice().sort(function (a, b) { return b.score - a.score; });
+    ctx.fillStyle = '#E8A525';
+    ctx.textAlign = 'center';
+    ctx.font = 'bold 84px system-ui, sans-serif';
+    ctx.fillText('Results', W / 2, 200);
+    ctx.font = 'bold 44px system-ui, sans-serif';
+    var shown = 0;
+    for (var i = 0; i < ranked.length && shown < 6; i++) {
+      if (!ranked[i].joined) continue;
+      ctx.fillStyle = ranked[i].color;
+      ctx.fillText(ranked[i].name + '   ' + ranked[i].score, W / 2, 320 + shown * 70);
+      shown++;
+    }
+    ctx.fillStyle = '#A0B4C8';
+    ctx.font = '30px system-ui, sans-serif';
+    ctx.fillText('P1: press A to play again', W / 2, 900);
+  }
+
+  var last = performance.now();
+  function frame(now) {
+    var dt = Math.min(0.05, (now - last) / 1000);
+    last = now;
+    var pads = Okona.pads();               // exactly once per frame — a second call (or Okona.pad(i)) resets justPressed()
+    for (var i = 0; i < 6; i++) if (pads[i].connected) players[i].joined = true;
+
+    var sx = canvas.width / W, sy = canvas.height / H;
+    ctx.setTransform(sx, 0, 0, sy, 0, 0);
+    ctx.fillStyle = '#0D1B2A';
+    ctx.fillRect(0, 0, W, H);
+
+    if (state === 'lobby') {
+      drawLobby(pads);
+      drawJoinPanel(pads);
+      if (connected(pads) >= Game.minPlayers && pads[0].justPressed('a')) {
+        players.forEach(function (p) { p.score = 0; });
+        Game.start(players, pads);
+        startedAt = now;
+        state = 'playing';
+        Okona.track('round_start', { players: connected(pads) });
+      }
+    } else if (state === 'playing') {
+      var over = Game.update(dt, players, pads, (now - startedAt) / 1000);
+      Game.draw(ctx, players, pads, W, H);
+      drawJoinPanel(pads);                 // late joiners are welcome
+      if (over) {
+        state = 'results';
+        Okona.track('round_end', { seconds: Math.round((now - startedAt) / 1000) });
+      }
+    } else {
+      drawResults();
+      if (pads[0].justPressed('a')) state = 'lobby';
+    }
+    requestAnimationFrame(frame);
+  }
+
+  Okona.ready(function () {
+    Okona.drawQr(qr);
+    requestAnimationFrame(frame);
+  });
+})();
+</script>
+</body>
+</html>