show action list and remaining placements on a turn

static/js/dom.js

@@ -2,18 +2,18 @@ function unlockMapDom() {
     Object.values(REGIONS).forEach((region) => {
         if (!allRegionsClaimed() && region.owner === null) {
             document
-                .querySelector(`.node[data-name=${region.name}] .action`)
+                .querySelector(`.node[data-name=${region.name}] .actions`)
                 .classList.remove("hidden");
         } else if (region.owner === us) {
             document
-                .querySelector(`.node[data-name=${region.name}] .action`)
+                .querySelector(`.node[data-name=${region.name}] .actions`)
                 .classList.remove("hidden");
         }
     });
 }
 
 function lockMapDom() {
-    document.querySelectorAll(".action").forEach((e) => e.classList.add("hidden"));
+    document.querySelectorAll(".actions").forEach((e) => e.classList.add("hidden"));
 }
 
 function updateDom() {
@@ -33,8 +33,32 @@ function updateMapDom() {
         lockMapDom();
     }
 
-    if (allRegionsClaimed()) {
-        document.querySelectorAll(".action").forEach((e) => (e.textContent = "Reinf."));
+    if (gameState === PRE_GAME) {
+        if (allRegionsClaimed()) {
+            document
+                .querySelectorAll(".actions button")
+                .forEach((e) => (e.textContent = "Reinf."));
+        }
+    } else if (gameState === PLAYING) {
+        document.querySelectorAll(".node").forEach((e) => {
+            e.querySelectorAll(".game-action").forEach((el) => {
+                el.remove();
+            });
+
+            let region = Region.getRegion(e.dataset["name"]);
+            for (let n of region.neighbours) {
+                let b = document.createElement("button");
+                b.classList.add("game-action");
+                if (n.owner === us) {
+                    b.classList.add("fortify");
+                    b.textContent = `Fortify ${n.name}`;
+                } else {
+                    b.classList.add("attack");
+                    b.textContent = `Attack ${n.name}`;
+                }
+                e.querySelector(".actions").appendChild(b);
+            }
+        });
     }
 
     for (let region of Object.values(REGIONS)) {
@@ -100,7 +124,7 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     });
 
-    document.querySelectorAll(".action").forEach((el) =>
+    document.querySelectorAll(".actions button").forEach((el) =>
         el.addEventListener("click", (ev) => {
             let region = ev.target.closest(".node").dataset.name;
             socket.emit("message", Packet.createRegionClaim(region));
@@ -116,10 +140,16 @@ document.addEventListener("DOMContentLoaded", () => {
 });
 
 function showRemainingReinforcements() {
-    if (!allPlaced) {
+    if (gameState === PRE_GAME) {
         document.querySelector(
             "#remaining-reinforcements"
         ).innerHTML = `<span>Remaining placements: ${reinforcementsRemaining()}</span>`;
+    } else if (gameState === PLAYING) {
+        document.querySelector(
+            "#remaining-reinforcements"
+        ).innerHTML = `<span>Remaining placements: ${
+            currentPlayer().reinforcementsAvailable - currentPlayer().reinforcementsPlaced
+        }</span>`;
     }
 }
 

static/js/index.js

@@ -81,15 +81,22 @@ document.addEventListener("DOMContentLoaded", () => {
                     return;
                 }
 
-                if (!allRegionsClaimed()) {
-                    // Claim a region in the pregame.
-                    if (currentPlayer().claim(data)) {
-                        // Increment to next player.
-                        currentPlayer().endTurn();
+                if (gameState === PRE_GAME) {
+                    if (!allRegionsClaimed()) {
+                        // Claim a region in the pregame.
+                        if (currentPlayer().claim(data)) {
+                            // Increment to next player.
+                            currentPlayer().endTurn();
+                        }
+                    } else if (!allReinforcementsPlaced()) {
+                        if (currentPlayer().reinforce(data)) {
+                            currentPlayer().endTurn();
+                        }
                     }
-                } else if (!allReinforcementsPlaced()) {
-                    if (currentPlayer().reinforce(data)) {
-                        currentPlayer().endTurn();
+
+                    if (allReinforcementsPlaced()) {
+                        gameState = PLAYING;
+                        updateDom();
                     }
                 } else {
                     if (currentPlayer().act(data)) {

static/js/map.js

@@ -52,6 +52,21 @@ const H = new Region("H", WEST);
 const I = new Region("I", WEST);
 const E = new Region("E", WEST);
 
+Region.setNeighbours(A, B);
+Region.setNeighbours(A, C);
+Region.setNeighbours(B, C);
+Region.setNeighbours(B, J);
+Region.setNeighbours(C, D);
+Region.setNeighbours(C, F);
+Region.setNeighbours(E, J);
+Region.setNeighbours(E, I);
+Region.setNeighbours(E, H);
+Region.setNeighbours(F, J);
+Region.setNeighbours(F, G);
+Region.setNeighbours(G, H);
+Region.setNeighbours(G, I);
+Region.setNeighbours(H, I);
+
 function allRegionsClaimed() {
     return Object.values(REGIONS).find((region) => region.owner === null) === undefined;
 }

static/js/player.js

@@ -1,6 +1,6 @@
-PHASE_REINFORCE = 1;
-PHASE_ATTACK = 1;
-PHASE_FORTIFY = 1;
+const PHASE_REINFORCE = 1;
+const PHASE_ATTACK = 2;
+const PHASE_FORTIFY = 3;
 
 class Player {
     constructor(id, name) {