create-okona-game 0.4.0 → 0.6.0

package/template/index.html

@@ -1,14 +1,16 @@
 <!DOCTYPE html>
 <!--
-  {{NAME}} — an Okona game.
+  {{NAME}}: an Okona game, built on Phaser 3.90 (bundled: phaser.min.js).
 
-  This file is the LOBBY and the game loop; your game lives in game.js.
+  This file is the LOBBY, the seats and the loop; your game lives in game.js.
   Six phones or gamepads connect through Okona, and each becomes a player by
   pressing A. It follows 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, in the Okona app and in the sandbox.
-  Open this file in a browser and the keyboard is P1 (WASD/arrows,
+  The Phaser config is the one Okona recommends for a TV box
+  (https://okonaonline.com/developers/docs.html#phaser): keep it.
+  Open this file in a browser and the keyboard is P1 (arrows/WASD,
   Space = A, Shift = B) so you can play what you build.
 
   Submit:  npx okona-cli create && npx okona-cli push . --publish   (okona.json holds the title, icon, screenshots)
@@ -21,44 +23,34 @@
 <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 and gamepads, identity, rumble, analytics. -->
+<!-- The Okona SDK: phones and gamepads, identity, rumble, saves, analytics. -->
 <script src="https://okonaonline.com/sdk/okona.js"></script>
+<script src="phaser.min.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();
+  var W = 960, H = 540;                    // the canvas: a 1080p TV's webview is 960x540 CSS px
 
-  // ---- players ------------------------------------------------------------
+  // ---- players --------------------------------------------------------------
   // Six seats. A controller that connects is only CONNECTED; it becomes a
   // player (joined) when it presses A. Okona holds a seat while its
   // controller is away (pad.parked), so a player who closes their phone gets
-  // the same seat, and keeps their score, when they come back.
-  var PALETTE = ['#E8A525', '#4FC3F7', '#81C784', '#F06292', '#BA68C8', '#FF8A65'];
+  // the same seat back when they return.
+  var COLORS = ['#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, joined: false });
+  for (var i = 0; i < 6; i++) players.push({ index: i, color: COLORS[i], tint: parseInt(COLORS[i].slice(1), 16), name: 'P' + (i + 1), joined: false });
+
+  var state = 'lobby', elapsed = 0, scene = null, ui = null;
 
   function joinPlayer(p, pad) {
     p.joined = true;
-    p.score = 0;
     // 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);
+    Game.onJoin(p, pad, state === 'playing');
   }
   function dropPlayer(p, pad) {
     if (!p.joined) return;
@@ -66,140 +58,126 @@
     Okona.players.clearIdentity(pad);
     Game.onLeave(p, pad);
   }
-
   // 'leave' = the seat went to another controller: that player is gone.
   Okona.on('leave', function (pad) { dropPlayer(players[pad.index], pad); });
-  Okona.on('park', function (pad) { if (players[pad.index].joined) Game.onPark(players[pad.index], pad); });
-  Okona.on('resume', function (pad) { if (players[pad.index].joined) Game.onResume(players[pad.index], pad); });
-
-  // No join code here: Okona shows it (the Okona app's Scan to play and
-  // Controllers; the sandbox's join code, which Start brings back).
-
-  // ---- lobby → playing → results -----------------------------------------
-  var state = 'lobby';
-  var elapsed = 0;                         // round time; stops while the Okona menu is open
 
   function count(pads, joinedOnly) {
     var n = 0;
-    for (var i = 0; i < pads.length; i++) if (pads[i].connected && (!joinedOnly || players[i].joined)) n++;
+    for (var k = 0; k < 6; k++) if (pads[k].connected && (!joinedOnly || players[k].joined)) n++;
     return n;
   }
 
-  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];
-      var label = p.joined ? '● ' + p.name + (pad.parked ? '  away' : '')
-        : pad.connected ? '○ ' + p.name + '  press A to join'
-        : '○ ' + p.name + '  open';
-      ctx.fillStyle = p.joined ? p.color : (pad.connected ? '#A0B4C8' : '#2A4A6F');
-      ctx.font = 'bold 34px system-ui, sans-serif';
-      ctx.fillText(label, 80, 300 + i * 56);
+  // ---- screens: Phaser text objects, made once; setText only changes them when the words change
+  function text(x, y, size, color, align) {
+    var t = scene.add.text(x, y, '', { fontFamily: 'system-ui, sans-serif', fontSize: size + 'px', fontStyle: 'bold', color: color });
+    t.setOrigin(align === 'center' ? 0.5 : 0, 0.5);
+    return t;
+  }
+  function buildUi() {
+    ui = { lobby: scene.add.container(0, 0), results: scene.add.container(0, 0), seats: [], seatColors: [], rows: [] };
+    ui.lobby.add(text(48, 70, 44, '#E8A525').setText(Game.title));
+    ui.lobby.add(text(48, 112, 20, '#A0B4C8').setText(Game.subtitle));
+    for (var s = 0; s < 6; s++) { ui.seats.push(text(48, 170 + s * 38, 22, '#2A4A6F')); ui.lobby.add(ui.seats[s]); }
+    ui.prompt = text(48, 430, 22, '#FFFFFF'); ui.lobby.add(ui.prompt);
+    ui.results.add(scene.add.rectangle(W / 2, H / 2, 720, 460, 0x0D1B2A, 0.88));   // over the game, so it reads
+    ui.results.add(text(W / 2, 90, 48, '#E8A525', 'center').setText('Results'));
+    for (var r = 0; r < 6; r++) { ui.rows.push(text(W / 2, 170 + r * 40, 26, '#FFFFFF', 'center')); ui.results.add(ui.rows[r]); }
+    ui.results.add(text(W / 2, 470, 22, '#A0B4C8', 'center').setText('Press A to play again'));
+  }
+  function show(next) {
+    state = next;
+    ui.lobby.setVisible(state === 'lobby');
+    ui.results.setVisible(state === 'results');
+    Game.show(state === 'playing' || state === 'results');
+  }
+  function updateLobby(pads) {
+    for (var s = 0; s < 6; s++) {
+      var p = players[s], pad = pads[s];
+      ui.seats[s].setText(p.joined ? '● ' + p.name + (pad.parked ? '   away' : '   ready')
+        : pad.connected ? '○ ' + p.name + '   press A to join' : '○ ' + p.name);
+      var color = p.joined ? p.color : (pad.connected ? '#A0B4C8' : '#2A4A6F');
+      if (ui.seatColors[s] !== color) { ui.seatColors[s] = color; ui.seats[s].setColor(color); }   // setColor redraws the text: only on a change
     }
     var n = count(pads, true);
-    ctx.fillStyle = '#FFFFFF';
-    ctx.font = '30px system-ui, sans-serif';
-    ctx.fillText(n === 0 ? (count(pads, false) ? 'Press A to join' : 'Waiting for players…')
-      : (n < Game.minPlayers ? 'Need ' + Game.minPlayers + ' to start' : 'Press A to start · B to leave'), 80, 680);
-    if (Okona.mode === 'standalone') {
-      ctx.fillStyle = '#A0B4C8';
-      ctx.fillText('Keyboard: WASD + Space', 80, 730);
-    }
+    ui.prompt.setText(n === 0 ? (count(pads, false) ? 'Press A to join' : 'Waiting for players…')
+      : 'Press A to start · B to leave' + (Okona.mode === 'standalone' ? '      (keyboard: arrows + Space)' : ''));
   }
-
-  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++;
+  function showResults() {
+    var lines = Game.results(players);
+    for (var r = 0; r < 6; r++) {
+      var line = lines[r];
+      ui.rows[r].setText(line ? line.text : '').setColor(line ? line.color : '#FFFFFF');
     }
-    ctx.fillStyle = '#A0B4C8';
-    ctx.font = '30px system-ui, sans-serif';
-    ctx.fillText('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()
-    var menuOpen = Okona.menuOpen === true;
+  // ---- the loop: Phaser's scene update, once per frame ------------------------
+  function update(time, delta) {
+    var dt = Math.min(0.05, delta / 1000);
+    var pads = Okona.pads();               // exactly once per frame: a second call (or Okona.pad(i)) resets justPressed()
+    if (Okona.menuOpen) return;            // the Okona menu is over the game: everything freezes
 
-    // A connected controller becomes a player by pressing A (drop-in: in the
-    // lobby or mid-round). That press only joins; it never also starts the round.
+    // A connected controller becomes a player by pressing A. That press only
+    // joins; it never also starts the race.
     var joinedNow = [];
-    for (var i = 0; i < 6; i++) {
-      var pad = pads[i], p = players[i];
-      if (!p.joined && pad.connected && !pad.parked && pad.justPressed('a') && !menuOpen) {
-        joinPlayer(p, pad);
-        joinedNow[i] = true;
-      }
+    for (var j = 0; j < 6; j++) {
+      if (!players[j].joined && pads[j].connected && !pads[j].parked && pads[j].justPressed('a')) { joinPlayer(players[j], pads[j]); joinedNow[j] = true; }
     }
-    // Any joined player who is here (never "P1 only": seat 1 may be empty).
+    // Any joined player who is here drives the flow (never "P1 only": seat 1 may be empty).
     function pressed(button) {
-      for (var j = 0; j < 6; j++) {
-        if (!joinedNow[j] && players[j].joined && pads[j].connected && !pads[j].parked && pads[j].justPressed(button)) return true;
-      }
+      for (var k = 0; k < 6; k++) if (!joinedNow[k] && players[k].joined && pads[k].connected && !pads[k].parked && pads[k].justPressed(button)) return true;
       return false;
     }
 
-    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);
-      if (!menuOpen) {
-        // Lobby: B leaves.
-        for (var k = 0; k < 6; k++) {
-          if (!joinedNow[k] && players[k].joined && pads[k].connected && pads[k].justPressed('b')) dropPlayer(players[k], pads[k]);
-        }
-        if (count(pads, true) >= Game.minPlayers && pressed('a')) {
-          players.forEach(function (pl) { pl.score = 0; });
-          Game.start(players, pads);
-          elapsed = 0;
-          state = 'playing';
-          Okona.track('round_start', { players: count(pads, true) });
-        }
+      for (var b = 0; b < 6; b++) if (!joinedNow[b] && players[b].joined && pads[b].connected && pads[b].justPressed('b')) dropPlayer(players[b], pads[b]);
+      updateLobby(pads);
+      if (count(pads, true) > 0 && pressed('a')) {
+        Game.start(players, pads);
+        elapsed = 0;
+        show('playing');
+        Okona.track('round_start', { players: count(pads, true) });
       }
     } else if (state === 'playing') {
-      // While the Okona menu is open the round freezes: no update, no clock.
-      var over = false;
-      if (!menuOpen) {
-        elapsed += dt;
-        over = Game.update(dt, players, pads, elapsed);
-      }
-      Game.draw(ctx, players, pads, W, H);
-      if (over) {
-        state = 'results';
+      elapsed += dt;
+      if (Game.update(dt, players, pads, elapsed)) {
         Okona.track('round_end', { seconds: Math.round(elapsed) });
-        // The round is over: let go of anyone still away.
+        showResults();                     // everyone who raced, away or not
+        show('results');
+        // The race is over: let go of anyone still away.
         for (var m = 0; m < 6; m++) if (players[m].joined && (!pads[m].connected || pads[m].parked)) dropPlayer(players[m], pads[m]);
       }
-    } else {
-      drawResults();
-      if (!menuOpen && pressed('a')) state = 'lobby';
+    } else if (pressed('a')) {
+      show('lobby');
     }
-    requestAnimationFrame(frame);
   }
 
   Okona.ready(function () {
-    requestAnimationFrame(frame);
+    new Phaser.Game({
+      type: Phaser.WEBGL,
+      width: W, height: H,
+      backgroundColor: '#0D1B2A',
+      disablePreFX: true,                  // top-level keys: without them Phaser reserves GPU memory
+      disablePostFX: true,                 // for effects at boot (about 90 MB at this size; 35 MB without)
+      banner: false,
+      fps: { target: 60 },
+      input: { keyboard: false, mouse: false, touch: false, gamepad: false },   // Okona.pads() is the input
+      scale: { mode: Phaser.Scale.FIT, autoCenter: Phaser.Scale.CENTER_BOTH },
+      render: { antialiasGL: false, powerPreference: 'high-performance' },
+      scene: {
+        create: function () {
+          scene = this;
+          Game.create(scene, W, H);
+          buildUi();
+          show('lobby');
+          // Freeze anything Phaser runs on its own while the Okona menu is open.
+          Okona.on('menu', function (open) {
+            scene.time.paused = open;
+            if (open) { scene.tweens.pauseAll(); scene.sound.pauseAll(); } else { scene.tweens.resumeAll(); scene.sound.resumeAll(); }
+          });
+        },
+        update: update
+      }
+    });
   });
 })();
 </script>

package/template/okona.json

@@ -1,8 +1,8 @@
 {
   "title": "{{NAME}}",
-  "description": "A multiplayer party game for phones and gamepads. Drop in any time: press A to join.",
-  "genre": "multiplayer-party",
-  "keywords": ["party", "multiplayer"],
+  "description": "Slot-car racing for one player or up to six. Hold A for gas, press left or right to change lanes, and lift before the corners or you spin out. Five laps; beat your best lap. Press A to join: new players join the next race.",
+  "genre": "racing",
+  "keywords": ["racing", "slot cars", "cars", "local multiplayer"],
   "controller": "basic",
   "icon": "icon.png"
 }