create-smore-game 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-smore-game",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "type": "module",
   "bin": {
     "create-smore-game": "./index.js"

package/templates.js

@@ -1262,6 +1262,16 @@ async function main() {
   app.get('/', servePage(join(__dirname, 'index.html')));
   app.get('/controller', servePage(join(__dirname, 'controller.html')));
 
+  // Serve game.json for dev harness (minPlayers, maxPlayers, title, etc.)
+  app.get('/game.json', (_req, res) => {
+    try {
+      const gameJson = JSON.parse(readFileSync(join(__dirname, '..', 'game.json'), 'utf-8'));
+      res.json(gameJson);
+    } catch (e) {
+      res.json({ id: 'dev-game', title: 'Dev Game', minPlayers: 1, maxPlayers: 8 });
+    }
+  });
+
   // ── Socket handling ──
 
   io.on('connection', (socket) => {
@@ -1535,6 +1545,10 @@ export function devHarness(gameId) {
     .btn-primary:disabled:hover { background: #4f46e5; }
     .btn-danger { background: #dc2626; border-color: #dc2626; color: #fff; }
     .btn-danger:hover { background: #b91c1c; }
+    .btn-start { background: #16a34a; border-color: #16a34a; color: #fff; font-size: 13px; padding: 5px 16px; }
+    .btn-start:hover { background: #15803d; }
+    .btn-start:disabled { opacity: 0.35; cursor: not-allowed; }
+    .btn-start:disabled:hover { background: #16a34a; }
 
     /* Main layout */
     .main { display: flex; height: calc(100% - 48px); }
@@ -1610,6 +1624,7 @@ export function devHarness(gameId) {
   <div class="badge-muted" id="playerCount">0 players</div>
   <div class="phase-badge phase-lobby" id="phaseBadge">Lobby</div>
   <div class="topbar-spacer"></div>
+  <button class="btn btn-start" id="startGameBtn" disabled>▶ Start</button>
   <button class="btn btn-danger" id="endGameBtn" style="display:none;">End Game</button>
   <button class="btn" id="resetBtn">Reset</button>
   <button class="btn btn-primary" id="addPlayerBtn">+ Player</button>
@@ -1648,6 +1663,10 @@ export function devHarness(gameId) {
   var screenIframe = null;
   var screenReady = false;
   var gamePhase = 'lobby';
+  var gameStarted = false;
+  var pendingGameReady = [];  // { socket, data }
+  var minPlayers = 1;
+  var gameConfig = {};
 
   // ── DOM refs ──
   var roomCodeEl = document.getElementById('roomCode');
@@ -1659,6 +1678,7 @@ export function devHarness(gameId) {
   var controllerGrid = document.getElementById('controllerGrid');
   var emptyState = document.getElementById('emptyState');
   var addPlayerBtn = document.getElementById('addPlayerBtn');
+  var startGameBtn = document.getElementById('startGameBtn');
   var endGameBtn = document.getElementById('endGameBtn');
   var resetBtn = document.getElementById('resetBtn');
 
@@ -1670,12 +1690,19 @@ export function devHarness(gameId) {
     phaseBadgeEl.className = 'phase-badge phase-' + phase;
     addPlayerBtn.disabled = (phase === 'playing');
     endGameBtn.style.display = (phase === 'playing') ? 'inline-block' : 'none';
+    startGameBtn.style.display = (phase === 'lobby') ? 'inline-block' : 'none';
+    updateStartButton();
+  }
+
+  function updateStartButton() {
+    startGameBtn.disabled = gameStarted || serverPlayers.length < minPlayers;
   }
 
   // ── Helpers ──
   function updatePlayerCount() {
     var count = serverPlayers.length;
     playerCountEl.textContent = count + ' player' + (count !== 1 ? 's' : '');
+    updateStartButton();
   }
 
   function updateEmptyState() {
@@ -1897,9 +1924,13 @@ export function devHarness(gameId) {
         return;
       }
 
-      // Relay game-ready to server for ready/start sync
+      // Buffer game-ready until game is started (prevents auto-start)
       if (event === 'smore:game-ready') {
-        screenSocket.emit('smore:game-ready', data || {});
+        if (gameStarted) {
+          screenSocket.emit('smore:game-ready', data || {});
+        } else {
+          pendingGameReady.push({ socket: screenSocket, data: data });
+        }
         return;
       }
 
@@ -1945,9 +1976,13 @@ export function devHarness(gameId) {
         setPhase('lobby');
       }
 
-      // Relay game-ready to server for ready/start sync
+      // Buffer game-ready until game is started (prevents auto-start)
       if (event === 'smore:game-ready') {
-        player.socket.emit('smore:game-ready', data || {});
+        if (gameStarted) {
+          player.socket.emit('smore:game-ready', data || {});
+        } else {
+          pendingGameReady.push({ socket: player.socket, data: data });
+        }
         return;
       }
 
@@ -1966,6 +2001,9 @@ export function devHarness(gameId) {
 
   // ── End Game ──
   function endGame() {
+    gameStarted = false;
+    pendingGameReady = [];
+
     // Broadcast phase-change to ALL controllers (including phone) via server relay
     screenSocket.emit('phase-change', { phase: 'lobby' });
 
@@ -1986,6 +2024,9 @@ export function devHarness(gameId) {
 
   // ── Reset ──
   function resetAll() {
+    gameStarted = false;
+    pendingGameReady = [];
+
     // 1. Disconnect all local iframe player sockets
     players.forEach(function(p) {
       if (p.socket) p.socket.disconnect();
@@ -2034,6 +2075,24 @@ export function devHarness(gameId) {
     if (!addPlayerBtn.disabled) addController();
   });
 
+  startGameBtn.addEventListener('click', function() {
+    if (gameStarted || serverPlayers.length < minPlayers) return;
+    gameStarted = true;
+
+    // Tell server to start the game (triggers smore:game-selected + smore:game-started)
+    screenSocket.emit('smore:select-game', { gameId: gameConfig.id || 'dev-game' });
+
+    // Flush all buffered game-ready messages after server processes select-game
+    setTimeout(function() {
+      pendingGameReady.forEach(function(entry) {
+        entry.socket.emit('smore:game-ready', entry.data || {});
+      });
+      pendingGameReady = [];
+    }, 50);
+
+    setPhase('playing');
+  });
+
   endGameBtn.addEventListener('click', endGame);
   resetBtn.addEventListener('click', resetAll);
 
@@ -2053,6 +2112,13 @@ export function devHarness(gameId) {
   });
 
   // ── Boot ──
+  // Fetch game.json for minPlayers config
+  fetch('/game.json').then(function(r) { return r.json(); }).then(function(cfg) {
+    gameConfig = cfg;
+    minPlayers = cfg.minPlayers || 1;
+    updateStartButton();
+  }).catch(function() {});
+
   initScreen();
   setTimeout(function() { addController(); }, 500);
 })();
@@ -2127,6 +2193,8 @@ export function devControllerPage(gameId) {
   var roomCode = '';
   var players = [];
   var iframeReady = false;
+  var gameStarted = false;
+  var pendingGameReady = null;
 
   // Connect and join room
   socket = io();
@@ -2159,6 +2227,15 @@ export function devControllerPage(gameId) {
     }
   });
 
+  // Listen for game-started to flush pending game-ready
+  socket.on('smore:game-started', function() {
+    gameStarted = true;
+    if (pendingGameReady !== null) {
+      socket.emit('smore:game-ready', pendingGameReady);
+      pendingGameReady = null;
+    }
+  });
+
   // Forward system events to iframe
   var sysEvents = [
     'smore:game-over',
@@ -2220,9 +2297,13 @@ export function devControllerPage(gameId) {
       var data = msg.payload.data;
       var ackId = msg.payload.ackId;
 
-      // Relay game-ready to server for ready/start sync
+      // Buffer game-ready until game is started (prevents auto-start)
       if (event === 'smore:game-ready') {
-        socket.emit('smore:game-ready', data || {});
+        if (gameStarted) {
+          socket.emit('smore:game-ready', data || {});
+        } else {
+          pendingGameReady = data || {};
+        }
         return;
       }