Multi-player?

tomgidden · Oct 13, 2024 · 11a9a70 · 11a9a70
1 parent abc9b40
commit 11a9a70
Show file tree

Hide file tree

Showing 7 changed files with 390 additions and 78 deletions.
diff --git a/gamestate.js b/gamestate.js
@@ -0,0 +1,107 @@
+
+// The player states. We'll have two players, players[0] and players[1]
+// which are the LEFT and RIGHT armies, respectively.
+let players = [];
+
+// In addition, we keep the current player and the current opponent in
+// "us" and "them" vars.
+let us, them;
+
+// The current wind speed
+let wind;
+
+// The current battle's terrain, as an Array[130] of numbers, each
+// denoting the y-value of each of the 130 x-values.
+let terrain;
+
+// Game phase.  This is used for multiplayer.
+let phase = 'init';
+
+function setPhase(_phase) {
+  phase = _phase;
+  const ev = new CustomEvent('gamePhase', { detail: phase });
+  document.dispatchEvent(ev);
+}
+
+async function waitForNotBusy() {
+  return new Promise(resolve => {
+    if (phase !== 'busy') resolve();
+    const handle = () => {
+      document.removeEventListener('gamePhase', handle);
+      resolve();
+    };
+    document.addEventListener('gamePhase', handle);
+  });
+}
+
+function getGameState() {
+  return {
+    left: players[0]?.getState(),
+    right: players[1]?.getState(),
+    player: us?.ix,
+    phase,
+    prng: prng.state,
+    wind,
+    frameStep,
+    testing,
+    terrain,
+  };
+}
+
+// Synchronizes program state with the 'state' variable.  This is for
+// multiplayer to make sure all clients are on the same page as such.
+async function setGameState(state) {
+  console.log("Received game state", state);
+
+  clearRegisteredTimeouts();
+  await waitForNotBusy();
+
+  console.log("Setting game state", state);
+  players[0] = new Player(0, state.left);
+  players[1] = new Player(1, state.right);
+  prng.state = state.prng;
+  wind = state.wind;
+  frameStep = state.frameStep;
+  testing = state.testing;
+  terrain = state.terrain;
+
+  if (state.phase === phase && state.player === us?.ix) {
+    setPhase(state.phase);
+    us = players[state.player];
+    them = players[1 - state.player];
+    return;
+  }
+
+  console.log("Routing phase", phase);
+  routePhase(phase);
+}
+
+function mqttReceiveState(state_json) {
+  if (JSON.stringify(getGameState()) === state_json) return;
+
+  const state = JSON.parse(state_json);
+  clearRegisteredTimeouts();
+  setRegisteredTimeout(setGameState, 100, state);
+}
+
+const registeredTimeouts = new Set();
+
+function setRegisteredTimeout(functionRef, delay, ...params) {
+  const t = setTimeout(functionRef, delay, ...params);
+  registeredTimeouts.add(t);
+  return t;
+}
+
+function clearRegisteredTimeouts()
+{
+  for (const t of registeredTimeouts)
+    clearTimeout(t);
+  registeredTimeouts.clear();
+}
+
+function clearRegisteredTimeout(t) {
+  if (registeredTimeouts.has(t))
+    registeredTimeouts.delete(t);
+  clearTimeout(t);
+}
+
diff --git a/graphics.js b/graphics.js
@@ -33,15 +33,15 @@ const G = new (class {
   }
 
   scheduleFlashies() {
-    if (this.flashieTimeout) clearTimeout(this.flashieTimeout);
-    this.flashieTimeout = setTimeout(
+    if (this.flashieTimeout) clearRegisteredTimeout(this.flashieTimeout);
+    this.flashieTimeout = setRegisteredTimeout(
       this.redrawFlashies.bind(this),
       flashiePeriod
     );
   }
 
   clearFlashies() {
-    this.flashieTimeout = clearTimeout(this.flashieTimeout);
+    this.flashieTimeout = clearRegisteredTimeout(this.flashieTimeout);
     this.flashies = [];
   }
 
@@ -204,15 +204,15 @@ const drawTerrain = () => new Promise((resolve, reject) => {
     G.plotLine((i - 1) * xscale, terrain[i - 1] * yscale, (i) * xscale, terrain[i] * yscale);
     G.commit();
     if ((i += 2) < terrain.length)
-      setTimeout(render, 10);
+      setRegisteredTimeout(render, 10);
     else
       resolve(true);
   };
 
   render();
 });
 
-const sleep = async delay => new Promise(resolve => setTimeout(resolve, delay ?? 1000));
+const sleep = async delay => new Promise(resolve => setRegisteredTimeout(resolve, delay ?? 1000));
 
 function message(str, cx = 0, cy = undefined) {
   G.printText(str, cx, cy);

diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/mqtt/5.10.1/mqtt.min.js"></script>
     <style>
       * {
         font-family: monospace;
@@ -54,7 +55,6 @@
         color: white;
         font-size: 24px;
         height: 32px;
-
       }
 
       canvas {
@@ -75,11 +75,14 @@
         <p><a href="https://github.com/tomgidden/js-barrage">GitHub repo</a></p>
       </div>
     </div>
+    <script src="./random.js"></script>
+    <script src="./gamestate.js"></script>
+    <script src="./mqtt.js"></script>
+    <script src="./player.js"></script>
     <script src="./chrs.js"></script>
     <script src="./terrain.js"></script>
     <script src="./sound.js"></script>
     <script src="./graphics.js"></script>
-    <script src="./Player.js"></script>
     <script src="./main.js"></script>
     <script>
       let startEl = document.getElementById("start");
@@ -91,7 +94,7 @@
         startEl.parentNode.removeChild(startEl);
         startEl = undefined;
         event.preventDefault();
-        startWar();
+        init();
       }
     </script>
   </body>