diff --git a/static/css/style.css b/static/css/style.css index a6b652e..7b895a4 100644 --- a/static/css/style.css +++ b/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; +} diff --git a/static/js/dom.js b/static/js/dom.js index e8bfebf..148fda7 100644 --- a/static/js/dom.js +++ b/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 = `Remaining placements: ${reinforcementsRemaining()}`; + } +} + function addInfoMessage(message) { let child = document.createElement("div"); child.textContent = message; diff --git a/static/js/index.js b/static/js/index.js index fe70626..f464100 100644 --- a/static/js/index.js +++ b/static/js/index.js @@ -88,8 +88,9 @@ document.addEventListener("DOMContentLoaded", () => { currentPlayer().endTurn(); } } else if (!allReinforcementsPlaced()) { - currentPlayer().reinforce(data); - currentPlayer().endTurn(); + if (currentPlayer().reinforce(data)) { + currentPlayer().endTurn(); + } } updateDom(); diff --git a/static/js/map.js b/static/js/map.js index c70836f..4b29b8e 100644 --- a/static/js/map.js +++ b/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; } } diff --git a/static/js/paillier.js b/static/js/paillier.js index 7d0de5f..5d65c74 100644 --- a/static/js/paillier.js +++ b/static/js/paillier.js @@ -39,8 +39,19 @@ class PrivKey { } document.addEventListener("DOMContentLoaded", () => { - p = generate_prime(); - q = generate_prime(); + 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); diff --git a/static/js/player.js b/static/js/player.js index 74da8cb..2d2be07 100644 --- a/static/js/player.js +++ b/static/js/player.js @@ -6,8 +6,7 @@ class Player { this.ready = false; this.isPlaying = false; - let randomColor = Math.random() * 360; - this.color = `hsl(${randomColor} 57% 50%)`; + this.resetColor(); } 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. * diff --git a/templates/index.html b/templates/index.html index 6ddd96e..fd4181c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -23,6 +23,10 @@ Players + + + +