Store primes in sessionStorage to make reloading the page quicker.

static/css/style.css

@@ -99,3 +99,12 @@
     bottom: 0;
     right: 0;
 }
+
+#remaining-reinforcements {
+    position: fixed;
+    bottom: 20px;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}

static/js/dom.js

@@ -12,6 +12,7 @@ function updateDom() {
     }
 
     updatePlayerDom();
+    showRemainingReinforcements();
     updateMapDom();
 }
 
@@ -91,8 +92,23 @@ document.addEventListener("DOMContentLoaded", () => {
             socket.emit("message", Packet.createRegionClaim(region));
         })
     );
+
+    document.querySelector("#shuffleColors").addEventListener("click", () => {
+        Object.values(players).forEach((player) => {
+            player.resetColor();
+        });
+        updatePlayerDom();
+    });
 });
 
+function showRemainingReinforcements() {
+    if (!allPlaced) {
+        document.querySelector(
+            "#remaining-reinforcements"
+        ).innerHTML = `<span>Remaining placements: ${reinforcementsRemaining()}</span>`;
+    }
+}
+
 function addInfoMessage(message) {
     let child = document.createElement("div");
     child.textContent = message;

static/js/index.js

@@ -88,9 +88,10 @@ document.addEventListener("DOMContentLoaded", () => {
                         currentPlayer().endTurn();
                     }
                 } else if (!allReinforcementsPlaced()) {
-                    currentPlayer().reinforce(data);
+                    if (currentPlayer().reinforce(data)) {
                         currentPlayer().endTurn();
                     }
+                }
 
                 updateDom();
                 break;

static/js/map.js

@@ -58,6 +58,22 @@ function allRegionsClaimed() {
 
 let allPlaced = false;
 
+// In standard Risk, this is 5
+const _REINFORCEMENT_MULTIPLIER = 1;
+
+function reinforcementsRemaining() {
+    if (allPlaced) {
+        return 0;
+    } else {
+        let totalStrength = Object.values(REGIONS)
+            .filter((region) => region.owner === us)
+            .reduce((counter, region) => counter + region.strength, 0);
+        let numPlayers = Object.values(players).length;
+
+        return _REINFORCEMENT_MULTIPLIER * (10 - numPlayers) - totalStrength;
+    }
+}
+
 function allReinforcementsPlaced() {
     if (allPlaced) {
         return true;
@@ -68,7 +84,8 @@ function allReinforcementsPlaced() {
         );
         let numPlayers = Object.values(players).length;
 
-        allPlaced = totalStrength >= numPlayers * 5 * (10 - numPlayers);
+        allPlaced =
+            totalStrength >= numPlayers * _REINFORCEMENT_MULTIPLIER * (10 - numPlayers);
         return allPlaced;
     }
 }

static/js/paillier.js

@@ -39,8 +39,19 @@ class PrivKey {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
+    if (window.sessionStorage.getItem("p") === null) {
         p = generate_prime();
+        window.sessionStorage.setItem("p", p);
+    } else {
+        p = BigInt(window.sessionStorage.getItem("p"));
+    }
+
+    if (window.sessionStorage.getItem("q") === null) {
         q = generate_prime();
+        window.sessionStorage.setItem("q", q);
+    } else {
+        q = BigInt(window.sessionStorage.getItem("q"));
+    }
 
     pubKey = new PubKey(p, q);
     privKey = new PrivKey(p, q);

static/js/player.js

@@ -6,8 +6,7 @@ class Player {
         this.ready = false;
         this.isPlaying = false;
 
-        let randomColor = Math.random() * 360;
+        this.resetColor();
-        this.color = `hsl(${randomColor} 57% 50%)`;
     }
 
     resetTimeout() {
@@ -30,6 +29,11 @@ class Player {
         return this.color;
     }
 
+    resetColor() {
+        let randomColor = Math.random() * 360;
+        this.color = `hsl(${randomColor} 57% 50%)`;
+    }
+
     /**
      * Claim a region of the map.
      *

templates/index.html

@@ -23,6 +23,10 @@
         <strong>Players</strong>
         <ul id="playerList">
         </ul>
+        <button id="shuffleColors">Shuffle colours</button>
+    </div>
+
+    <div id="remaining-reinforcements">
     </div>
 
     <div id="info">