create-okona-game 0.5.0 → 0.6.0

package/README.md

@@ -1,11 +1,18 @@
 # create-okona-game
 
 ```
-npm create okona-game my-party-game
+npm create okona-game my-game
 ```
 
-Scaffolds a phone-controlled HTML5 game for [Okona](https://okonaonline.com): a lobby built to the [Okona game standards](https://okonaonline.com/developers/docs.html#standards) (a controller joins by pressing A, any joined player starts, the game freezes while the Okona menu is open, no join code: Okona shows it), 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.
+Scaffolds a phone-controlled HTML5 game for [Okona](https://okonaonline.com), for one player or up to six, on [Phaser](https://phaser.io) 3.90 (bundled). It includes:
 
-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 submit it to the Okona catalog; once it's approved, players join in the Okona app with a phone or a gamepad.
+- A lobby built to the [Okona game standards](https://okonaonline.com/developers/docs.html#standards). A controller joins by pressing A, any joined player starts, and the game freezes while the Okona menu is open. There's no join code in the game: Okona shows it.
+- Six seats, with names and colours pushed to each phone.
+- The Phaser setup Okona recommends for a TV box ([Phaser on Okona](https://okonaonline.com/developers/docs.html#phaser)): a 960x540 canvas scaled to fit, and the effects pipelines off.
+- A `game.js` holding a small slot-car race to replace with your game: hold A for gas, left and right to change lanes, lift before the corners. The best lap is kept with `Okona.save`.
 
-Zero dependencies. Docs: https://okonaonline.com/developers/docs.html#html5 · SDK reference: https://okonaonline.com/developers/docs.html#js-sdk
+Open `index.html` in a browser and the keyboard is P1. There's no build step and 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 submit it to the Okona catalog; once it's approved, players join in the Okona app with a phone or a gamepad.
+
+Zero dependencies to install. Docs: https://okonaonline.com/developers/docs.html#html5 · SDK reference: https://okonaonline.com/developers/docs.html#js-sdk
+
+Phaser is © Richard Davey, Phaser Studio Inc., MIT licensed (`PHASER-LICENSE.md` in the scaffolded folder).

package/index.js

@@ -3,9 +3,10 @@
 //
 //   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, an okona.json catalog record, a README) into ./my-game
-// with the name filled in. Zero
+// Copies the template (the lobby, seats and Phaser setup in index.html, your
+// game in game.js: a slot-car race to replace; Phaser 3.90 bundled as
+// phaser.min.js; an icon, an okona.json catalog record, 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";
@@ -36,7 +37,7 @@ export async function scaffold(target, { name, force = false } = {}) {
         const src = join(TEMPLATE, f);
         if ((await stat(src)).isDirectory()) continue;
         const dest = join(dir, f === "gitignore" ? ".gitignore" : f);
-        if (/\.(html|js|md|json)$/.test(f) || f === "gitignore") {
+        if ((/\.(html|js|md|json)$/.test(f) && !/\.min\.js$/.test(f)) || f === "gitignore") {   // phaser.min.js is copied as is
             const text = (await readFile(src, "utf8")).split("{{NAME}}").join(title);
             await writeFile(dest, text);
         } else {
@@ -58,7 +59,7 @@ if (isMain) {
     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("    open index.html in a browser — the keyboard is P1 (arrows + Space; Shift = B)");
         console.log("    edit game.js — start / update / draw are yours");
         console.log("    edit okona.json — title, description, keywords (the icon is icon.png; add \"screenshots\": \"shots\" for a folder of them)");
         console.log("    npx okona-cli login && npx okona-cli create    # reads okona.json, writes the new game id back into it");

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "create-okona-game",
-  "version": "0.5.0",
-  "description": "Scaffold a phone-controlled HTML5 game for Okona: lobby, join code, six seats, and a game.js to make yours.",
+  "version": "0.6.0",
+  "description": "Scaffold a phone-controlled HTML5 game for Okona on Phaser 3.90: lobby, six seats, the TV-safe Phaser setup, and a slot-car race in game.js to make yours.",
   "license": "MIT",
   "homepage": "https://okonaonline.com/developers/docs.html#html5",
   "bugs": {
     "email": "support@okonaonline.com"
   },
-  "keywords": ["okona", "create", "scaffold", "game", "html5", "phone-controller", "multiplayer", "party-game"],
+  "keywords": ["okona", "create", "scaffold", "game", "html5", "phaser", "phone-controller", "multiplayer", "tv"],
   "type": "module",
   "bin": {
     "create-okona-game": "index.js"

package/template/PHASER-LICENSE.md

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright (c) 2024 Richard Davey, Phaser Studio Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/template/README.md

@@ -1,15 +1,20 @@
 # {{NAME}}
 
-A multiplayer game for [Okona](https://okonaonline.com). Up to six people play with their phones or gamepads; each joins by pressing A.
+A game for [Okona](https://okonaonline.com), for one player or up to six. Each person plays with a phone or a gamepad and joins by pressing A. Built on [Phaser](https://phaser.io) 3.90, the HTML5 engine Okona recommends.
 
-- `index.html` — the lobby, seats and frame loop, built to the [Okona game standards](https://okonaonline.com/developers/docs.html#standards): A joins, any joined player starts, the game freezes while the Okona menu is open, and it draws no join code: Okona shows it (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)
-- `okona.json` — the catalog record: title, description, genre, keywords, the icon, screenshots. `okona push` syncs it
+- `index.html`: the lobby, seats and loop, built to the [Okona game standards](https://okonaonline.com/developers/docs.html#standards) (A joins, any joined player starts, the game freezes while the Okona menu is open, and it draws no join code: Okona shows it), plus the Phaser config Okona recommends for a TV box. It rarely needs changes.
+- `game.js`: **your game**. The sample is a slot-car race (hold A for gas, left and right to change lanes, lift before the corners) to replace with your own: `create`, `start`, `update`, `results`, and the join/leave hooks.
+- `phaser.min.js` + `PHASER-LICENSE.md`: Phaser 3.90.0 (MIT), bundled so no network can block it.
+- `icon.png`: the icon shown in the Okona portal (replace it).
+- `okona.json`: the catalog record: title, description, genre, keywords, the icon, screenshots. `okona push` syncs 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.
+Open `index.html` in a browser (or `npx serve .`). The keyboard is P1: arrows or WASD, Space is A, Shift is B. Phones need the real thing, below.
+
+## Keep it fast on a TV
+
+Okona plays on TV boxes with 2 GB shared by the CPU and the GPU. The setup in `index.html` is the one in [Phaser on Okona](https://okonaonline.com/developers/docs.html#phaser): a 960x540 canvas scaled to fit, and Phaser's effects pipelines off (`disablePreFX` / `disablePostFX`, or Phaser reserves GPU memory you never use). Keep both. Paint textures once (`textures.addImage`), reuse sprites, and change text only when its words change. Then play your sandbox on a real TV box for ten minutes before you submit.
 
 ## Submit to Okona
 
@@ -22,6 +27,6 @@ npx okona-cli push . --sandbox      # catalog + icon + build in one go; try it w
 npx okona-cli push . --publish      # submit for review: Okona approves it into the catalog or sends it back
 ```
 
-Screenshots: put up to six images in a `shots/` folder and add `"screenshots": "shots"` to `okona.json` — the next push uploads them in name order (1.png, 2.png, …). `npx okona-cli update --title "…"` changes a field without a build upload; `npx okona-cli game <id>` shows what the portal has.
+Screenshots: put up to six images in a `shots/` folder and add `"screenshots": "shots"` to `okona.json`: the next push uploads them in name order (1.png, 2.png, …). `npx okona-cli update --title "…"` changes a field without a build upload; `npx okona-cli game <id>` shows what the portal has.
 
-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'|'menu')`, `Okona.menuOpen`, `Okona.players.setIdentity()`, `Okona.rumble()`, `Okona.track()`.
+Docs: https://okonaonline.com/developers/docs.html#html5 · Phaser on Okona: https://okonaonline.com/developers/docs.html#phaser · SDK reference: https://okonaonline.com/developers/docs.html#js-sdk · The contract in one line: `Okona.pads()` once per frame, `Okona.on('join'|'leave'|'park'|'resume'|'menu')`, `Okona.menuOpen`, `Okona.players.setIdentity()`, `Okona.save`, `Okona.rumble()`, `Okona.track()`.

package/template/game.js

@@ -1,98 +1,212 @@
-// {{NAME}} — the game. index.html runs the lobby (A joins), the seats
-// and the frame loop; it calls the hooks below. Replace the sample (a
-// coin-grab race) with your game. Everything is plain canvas — bring any
-// library you like, but bundle it (a venue's network may block CDNs).
+// {{NAME}}: the game. index.html runs the lobby (A joins), the seats and the
+// loop, and calls the hooks below. The sample is a slot-car race: every car
+// runs in a lane of an oval. Hold A for gas, B brakes, left and right change
+// lanes (left = outward, right = inward: the race runs clockwise). Each lane
+// has a safe corner speed: the inside lane is shorter but tighter. Go into a
+// corner too fast and you spin. Five laps; new players join the next race.
+// Replace it with your game.
 //
-// Coordinates: a 1920×1080 logical screen; index.html scales it to fit.
-// Pads: pad.axes.lx/ly (−1..1, +Y down), pad.buttons.a/b/x/y/lb/rb/lt/rt/
-//       select/l3/r3/up/down/left/right, pad.justPressed('a') (start + home are
-//       Okona's: they never reach the game), player.joined (pressed A: a player),
-//       pad.triggers.lt/rt (0..1), pad.parked (controller away — seat held).
-// Saves: Okona.save.get/set keep data for the player's account, on any screen
-//       (the sample keeps its best round); read it after Okona.ready.
+// Drawing: Phaser 3.90 (WebGL) on a 960x540 canvas that Phaser scales to fit.
+//   Textures are painted ONCE on a plain canvas and added with
+//   textures.addImage (never addCanvas: it reads every pixel back); sprites
+//   are made once and reused; text changes only when its words change.
+//   https://okonaonline.com/developers/docs.html#phaser
+// Pads: pad.axes.lx/ly (-1..1, +Y down), pad.buttons.a/b/x/y/lb/rb/lt/rt/
+//   select/l3/r3/up/down/left/right, pad.justPressed('a'), pad.triggers.lt/rt
+//   (0..1), pad.parked (controller away: seat held). Start and Home are
+//   Okona's and never reach the game.
+// Saves: Okona.save.get/set keep data for the player's account on any screen
+//   (the sample keeps the best lap). https://okonaonline.com/developers/docs.html#saves
 var Game = {
   title: '{{NAME}}',
-  subtitle: 'Grab the coins. Most coins after 45 seconds wins.',
-  minPlayers: 1,
-  // Emoji (or a path to an image in this folder, e.g. 'icons/p1.png') shown
-  // on each player's phone.
-  icons: ['🟡', '🔵', '🟢', '🩷', '🟣', '🟠'],
-  ROUND_SECONDS: 45,
+  subtitle: 'Hold A for gas, left and right to change lanes. Lift before the corners!',
+  // Emoji (or a path to an image in this folder) shown on each player's phone.
+  icons: ['🏎️', '🏎️', '🏎️', '🏎️', '🏎️', '🏎️'],
+  LAPS: 5,
+  TOP_SPEED: 330,         // px/s
+  GRIP: 360,              // safe corner speed = sqrt(GRIP * lane radius)
+  CX: 480, CY: 290, L: 400, R: 160,          // the oval: straight length and corner radius
+  LANES: [-26, 0, 26],    // lane offsets from the centre line (negative = inside)
 
-  // ---- lifecycle ------------------------------------------------------------
-  onJoin: function (player, pad) {       // the controller pressed A: now a player
-    player.x = 300 + player.index * 260; player.y = 540; player.vx = 0; player.vy = 0;
+  // ---- set up once: textures, the track, a car sprite per seat --------------
+  create: function (scene, W, H) {
+    this.scene = scene;
+    this.P = 2 * this.L + 2 * Math.PI * this.R;   // centre-line length of one lap
+    var self = this;
+    this.paint('track', W, H, function (g) { self.paintTrack(g, W, H); });
+    this.paint('car', 30, 16, function (g) {      // white: each car is tinted with its player's colour
+      g.fillStyle = '#FFFFFF'; g.fillRect(2, 1, 26, 14);
+      g.fillStyle = '#20262E'; g.fillRect(17, 3, 6, 10); g.fillRect(0, 0, 4, 4); g.fillRect(0, 12, 4, 4); g.fillRect(24, 0, 5, 3); g.fillRect(24, 13, 5, 3);
+    });
+    this.layer = scene.add.container(0, 0);
+    this.layer.add(scene.add.image(0, 0, 'track').setOrigin(0, 0));
+    this.cars = [];
+    for (var i = 0; i < 6; i++) {
+      var sprite = scene.add.image(0, 0, 'car').setVisible(false);
+      this.layer.add(sprite);
+      this.cars.push({ sprite: sprite });
+    }
+    // The infield: the countdown, a line per racer, the best lap. Text objects are made once.
+    var font = { fontFamily: 'system-ui, sans-serif', fontSize: '18px', fontStyle: 'bold', color: '#FFFFFF' };
+    this.banner = scene.add.text(this.CX, this.CY - 88, '', { fontFamily: 'system-ui, sans-serif', fontSize: '34px', fontStyle: 'bold', color: '#FFFFFF' }).setOrigin(0.5);
+    this.info = scene.add.text(this.CX, this.CY + 84, '', { fontFamily: 'system-ui, sans-serif', fontSize: '16px', color: '#A0B4C8', align: 'center' }).setOrigin(0.5);
+    this.layer.add([this.banner, this.info]);
+    this.board = [];
+    for (var k = 0; k < 6; k++) { this.board.push(scene.add.text(this.CX, this.CY - 52 + k * 22, '', font).setOrigin(0.5)); this.layer.add(this.board[k]); }
+  },
+  // A texture painted once with Canvas 2D, then handed to the GPU.
+  paint: function (key, w, h, fn) {
+    var c = document.createElement('canvas');
+    c.width = w; c.height = h;
+    fn(c.getContext('2d'));
+    this.scene.textures.addImage(key, c);
+  },
+  ovalPath: function (g, d) {     // the oval at lane offset d
+    var r = this.R + d, x0 = this.CX - this.L / 2, x1 = this.CX + this.L / 2;
+    g.beginPath();
+    g.moveTo(x0, this.CY - r); g.lineTo(x1, this.CY - r);
+    g.arc(x1, this.CY, r, -Math.PI / 2, Math.PI / 2);
+    g.lineTo(x0, this.CY + r);
+    g.arc(x0, this.CY, r, Math.PI / 2, Math.PI * 1.5);
+    g.closePath();
+  },
+  paintTrack: function (g, W, H) {
+    g.fillStyle = '#2E5E3A'; g.fillRect(0, 0, W, H);
+    g.lineJoin = 'round';
+    g.strokeStyle = '#D9D9D9'; g.lineWidth = 104; this.ovalPath(g, 0); g.stroke();   // kerbs
+    g.strokeStyle = '#3A3F47'; g.lineWidth = 94; this.ovalPath(g, 0); g.stroke();    // tarmac
+    g.strokeStyle = '#59606B'; g.lineWidth = 2; g.setLineDash([10, 12]);
+    this.ovalPath(g, -13); g.stroke(); this.ovalPath(g, 13); g.stroke();             // lane lines
+    g.setLineDash([]);
+    for (var k = 0; k < 10; k++) {                                                  // the start line
+      g.fillStyle = k % 2 ? '#FFFFFF' : '#111111';
+      g.fillRect(this.CX - 4, this.CY - this.R - 47 + k * 9.4, 8, 9.4);
+    }
   },
-  onLeave: function (player, pad) {},   // gone for good (seat given away, or still away when the round ended)
-  onPark: function (player, pad) {},     // controller went away; seat + score held until the round ends — the sample freezes them
-  onResume: function (player, pad) {},
 
+  // ---- players ---------------------------------------------------------------
+  onJoin: function (player, pad, racing) { player.waiting = racing; },   // mid-race: joins the next race
+  onLeave: function (player, pad) { this.cars[player.index].sprite.setVisible(false); },
+
+  // ---- a race ------------------------------------------------------------------
   start: function (players, pads) {
-    this.best = Okona.save.get('best', 0);   // the best round on this account, kept by Okona
-    this.coins = [];
-    for (var i = 0; i < 10; i++) this.spawnCoin();
-    players.forEach(function (p) { p.x = 300 + p.index * 260; p.y = 540; p.vx = 0; p.vy = 0; });
+    this.best = Okona.save.get('bestLap', 0);   // the best lap on this account, kept by Okona
+    this.finished = 0; this.winnerAt = 0;
+    var grid = 0;
+    for (var i = 0; i < 6; i++) {
+      var car = this.cars[i], p = players[i];
+      p.waiting = false;
+      car.racing = p.joined;
+      car.sprite.setVisible(car.racing).setTint(p.tint).setAlpha(1);
+      if (!car.racing) continue;
+      car.lane = grid % 3; car.d = this.LANES[car.lane];
+      car.s = this.P - 40 - Math.floor(grid / 3) * 44;   // the grid, behind the line: rows of three
+      car.lap = 0; car.v = 0; car.spin = 0; car.turn = 0; car.held = 0;
+      car.lapStart = 2; car.bestLap = 0; car.finishTime = 0;
+      grid++;
+      this.place(car);
+    }
+    for (var b = 0; b < 6; b++) this.board[b].setText('');
   },
-
-  spawnCoin: function () {
-    this.coins.push({ x: 120 + Math.random() * 1680, y: 120 + Math.random() * 840, r: 22 });
+  // Where a car is: the centre line runs clockwise from the start line (top middle).
+  place: function (car) {
+    var s = ((car.s % this.P) + this.P) % this.P, L = this.L, R = this.R, r = R + car.d, x, y, a;
+    var half = L / 2, arc = Math.PI * R;
+    if (s < half) { x = this.CX + s; y = this.CY - r; a = 0; }
+    else if (s < half + arc) { a = (s - half) / R; x = this.CX + half + r * Math.sin(a); y = this.CY - r * Math.cos(a); }
+    else if (s < half + arc + L) { x = this.CX + half - (s - half - arc); y = this.CY + r; a = Math.PI; }
+    else if (s < half + 2 * arc + L) { a = (s - half - arc - L) / R; x = this.CX - half - r * Math.sin(a); y = this.CY + r * Math.cos(a); a += Math.PI; }
+    else { x = this.CX - half + (s - half - 2 * arc - L); y = this.CY - r; a = 0; }
+    car.inCorner = (s >= half && s < half + arc) || (s >= half + arc + L && s < half + 2 * arc + L);
+    car.sprite.setPosition(x, y).setRotation(a + car.turn);
   },
 
-  // Return true when the round is over.
+  // Return true when the race is over.
   update: function (dt, players, pads, elapsed) {
+    var GO = 2, racers = 0, home = 0, time = elapsed - GO;
     for (var i = 0; i < 6; i++) {
-      var pad = pads[i], p = players[i];
-      if (!p.joined || !pad.connected || pad.parked) continue;   // only players who are here
-      var speed = pad.buttons.a ? 900 : 600;
-      p.vx += pad.axes.lx * speed * dt * 6; p.vy += pad.axes.ly * speed * dt * 6;
-      p.vx *= 0.88; p.vy *= 0.88;
-      p.x = Math.max(60, Math.min(1860, p.x + p.vx * dt));
-      p.y = Math.max(60, Math.min(1020, p.y + p.vy * dt));
-      for (var c = this.coins.length - 1; c >= 0; c--) {
-        var coin = this.coins[c];
-        if (Math.hypot(coin.x - p.x, coin.y - p.y) < 50) {
-          this.coins.splice(c, 1);
-          p.score++;
-          Okona.rumble(pad, 0.3, 0.6);
-          this.spawnCoin();
-        }
+      var car = this.cars[i], pad = pads[i], p = players[i];
+      if (!car.racing || !p.joined) continue;
+      var here = pad.connected && !pad.parked;
+      car.sprite.setAlpha(here ? 1 : 0.35);          // away: a ghost that waits; it never holds up the race
+      if (here) racers++;
+      if (car.finishTime) { home += here ? 1 : 0; continue; }
+      if (!here || time < 0) continue;
+      // lanes: hold left/right to keep moving over, one lane every 0.25 s
+      var dir = pad.buttons.right || pad.axes.lx > 0.5 ? -1 : pad.buttons.left || pad.axes.lx < -0.5 ? 1 : 0;
+      car.held = dir ? car.held - dt : 0;
+      if (dir && car.held <= 0 && car.spin <= 0) { car.lane = Math.max(0, Math.min(2, car.lane + dir)); car.held = 0.25; }
+      var want = this.LANES[car.lane];
+      car.d += Math.max(-dt * 140, Math.min(dt * 140, want - car.d));
+      // speed: gas, brake, or the motor drags it down
+      var gas = Math.max(pad.buttons.a ? 1 : 0, pad.triggers.rt);
+      if (car.spin > 0) { car.spin -= dt; car.turn += dt * 14; car.v *= Math.pow(0.2, dt); if (car.spin <= 0) car.turn = 0; }
+      else if (pad.buttons.b) car.v = Math.max(0, car.v - 600 * dt);
+      else if (gas) car.v = Math.min(this.TOP_SPEED, car.v + 260 * gas * dt);
+      else car.v = Math.max(0, car.v - 220 * dt);
+      // too fast for this lane's corner: spin
+      if (car.inCorner && car.spin <= 0 && car.v > Math.sqrt(this.GRIP * (this.R + car.d)) * 1.08) {
+        car.spin = 0.9; car.v *= 0.4;
+        Okona.rumble(pad, 0.8, 0.4);
       }
+      // move along the centre line: an inside lane covers ground faster in the corners
+      var before = car.s;
+      car.s += car.v * dt * (car.inCorner ? this.R / (this.R + car.d) : 1);
+      if (Math.floor(car.s / this.P) > Math.floor(before / this.P)) this.lapDone(car, p, time);
+      this.place(car);
     }
-    var over = elapsed >= this.ROUND_SECONDS;
-    if (over) this.keepBest(players);
-    return over;
+    this.drawBoard(players, pads);
+    this.banner.setText(time < 0 ? String(Math.ceil(-time)) : time < 1 ? 'GO!' : '');
+    this.info.setText(time < 0 ? this.LAPS + ' laps' : 'Best lap ' + (this.best ? this.best.toFixed(2) + ' s' : '-') + this.waitingLine(players));
+    // over when every racer who is here is home, or 15 s after the winner
+    return (racers > 0 && home === racers) || (this.winnerAt && time - this.winnerAt > 15) || racers === 0 && time > 0;
   },
-
-  // A new best round goes in the save (it plays on fine if the save is unavailable).
-  keepBest: function (players) {
-    var top = 0;
-    players.forEach(function (p) { if (p.joined && p.score > top) top = p.score; });
-    if (top > this.best) { this.best = top; Okona.save.set('best', top); Okona.save.flush(); }
-  },
-
-  draw: function (ctx, players, pads, W, H) {
-    ctx.strokeStyle = '#2A4A6F'; ctx.lineWidth = 6; ctx.strokeRect(30, 30, W - 60, H - 60);
-    // coins
-    for (var c = 0; c < this.coins.length; c++) {
-      var coin = this.coins[c];
-      ctx.fillStyle = '#F5C04A';
-      ctx.beginPath(); ctx.arc(coin.x, coin.y, coin.r, 0, Math.PI * 2); ctx.fill();
-    }
-    // players
+  // One line per racer, in seat order; setText only redraws a line whose words changed.
+  drawBoard: function (players, pads) {
+    var row = 0;
     for (var i = 0; i < 6; i++) {
-      var pad = pads[i], p = players[i];
-      if (!p.joined) continue;
-      ctx.globalAlpha = pad.parked ? 0.3 : 1;
-      ctx.fillStyle = p.color;
-      ctx.beginPath(); ctx.arc(p.x, p.y, 40, 0, Math.PI * 2); ctx.fill();
-      ctx.globalAlpha = 1;
-      ctx.fillStyle = '#FFFFFF'; ctx.textAlign = 'center'; ctx.font = 'bold 26px system-ui, sans-serif';
-      ctx.fillText(p.name + ' ' + p.score + (pad.parked ? ' (away)' : ''), p.x, p.y - 56);
+      var car = this.cars[i], p = players[i];
+      if (!car.racing || !p.joined) continue;
+      var here = pads[i].connected && !pads[i].parked;
+      this.board[row].setText(p.name + '   ' + (car.finishTime ? 'home ' + car.finishTime.toFixed(2) + ' s'
+        : !here ? 'away' : 'lap ' + Math.max(1, Math.min(car.lap, this.LAPS)) + ' / ' + this.LAPS));
+      if (this.board[row].style.color !== p.color) this.board[row].setColor(p.color);   // setColor redraws: only on a change
+      row++;
+    }
+  },
+  waitingLine: function (players) {
+    var names = players.filter(function (p) { return p.joined && p.waiting; }).map(function (p) { return p.name; });
+    return names.length ? '\n' + names.join(', ') + ' joining the next race' : '';
+  },
+  lapDone: function (car, player, time) {
+    car.lap++;
+    if (car.lap === 1) { car.lapStart = time; return; }    // crossing the line from the grid starts lap 1
+    var lapTime = time - car.lapStart;
+    car.lapStart = time;
+    if (!car.bestLap || lapTime < car.bestLap) car.bestLap = lapTime;
+    if (!this.best || lapTime < this.best) { this.best = lapTime; Okona.save.set('bestLap', Math.round(lapTime * 100) / 100); }
+    if (car.lap > this.LAPS) {
+      car.finishTime = time; car.v = 0;
+      if (!this.winnerAt) this.winnerAt = time;
+      Okona.save.flush();
     }
-    // HUD: big type — it is read from across the room
-    ctx.fillStyle = '#E8A525'; ctx.textAlign = 'left'; ctx.font = 'bold 40px system-ui, sans-serif';
-    ctx.fillText(this.title, 70, 100);
-    ctx.fillStyle = '#A0B4C8'; ctx.textAlign = 'right';
-    ctx.fillText('Best ' + this.best, W - 70, 100);
-  }
+  },
+
+  // ---- results: one line per racer, best first ---------------------------------
+  results: function (players) {
+    var cars = this.cars, rows = [];
+    for (var i = 0; i < 6; i++) if (cars[i].racing && players[i].joined) rows.push(i);
+    rows.sort(function (a, b) {
+      var A = cars[a], B = cars[b];
+      if (A.finishTime && B.finishTime) return A.finishTime - B.finishTime;
+      if (A.finishTime || B.finishTime) return A.finishTime ? -1 : 1;
+      return B.s - A.s;                                     // unfinished: placed by distance
+    });
+    return rows.map(function (i, place) {
+      var c = cars[i];
+      return { color: players[i].color, text: (place + 1) + '.  ' + players[i].name + '   ' +
+        (c.finishTime ? c.finishTime.toFixed(2) + ' s' : 'did not finish') + (c.bestLap ? '   best lap ' + c.bestLap.toFixed(2) + ' s' : '') };
+    });
+  },
+  show: function (on) { this.layer.setVisible(on); }
 };