Change buttons a bit. End turn option

static/css/style.css

@@ -20,6 +20,11 @@
     color: red;
 }
 
+#end-turn {
+    font-size: 2em;
+    color: red;
+}
+
 #ready-button.active {
     font-size: 2em;
     color: green;
@@ -103,7 +108,7 @@
 
 #remaining-reinforcements {
     position: fixed;
-    bottom: 20px;
+    bottom: 64px;
     width: 100%;
     display: flex;
     align-items: center;

static/js/dom.js

@@ -34,31 +34,19 @@ function updateMapDom() {
     }
 
     if (gameState === PRE_GAME) {
-        if (allRegionsClaimed()) {
+        document.querySelectorAll(".fortify, .attack").forEach((e) => {
-            document
+            e.classList.add("hidden");
-                .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);
-            }
         });
+    } else if (gameState === PLAYING) {
+        document.querySelectorAll(".node button").forEach((e) => {
+            e.classList.remove("hidden");
+        });
+
+        if (us.isPlaying) {
+            document.querySelector("#end-turn").classList.remove("hidden");
+        } else {
+            document.querySelector("#end-turn").classList.add("hidden");
+        }
     }
 
     for (let region of Object.values(REGIONS)) {
@@ -124,6 +112,10 @@ document.addEventListener("DOMContentLoaded", () => {
         }
     });
 
+    document.querySelector("#end-turn").addEventListener("click", async (ev) => {
+        socket.emit("message", Packet.createEndTurn());
+    });
+
     document.querySelectorAll(".actions button").forEach((el) =>
         el.addEventListener("click", (ev) => {
             let region = ev.target.closest(".node").dataset.name;

static/js/packet.js

@@ -46,4 +46,11 @@ class Packet {
             region: region,
         };
     }
+
+    static createEndTurn() {
+        return {
+            ...this._createBase("ACT"),
+            action: "END",
+        };
+    }
 }

templates/index.html

@@ -50,79 +50,100 @@
             <path d="M -280 80 Q -360 0 -280 -80" stroke="black" fill="transparent"></path>
         </svg>
         <div class="node east" data-name="A" style="left: 280px;">
-            <div class="strength"><strong>U</strong></div>
+            <div class="strength"></div>
             <div class="label">A</div>
             <div class="actions">
-                <button>Claim</button>
+                <button class="reinforce">Reinf.</button>
+                <button class="attack">Attack</button>
+                <button class="fortify">Fortify</button>
             </div>
         </div>
         <div class="node east" data-name="B" style="left: 160px;">
-            <div class="strength"><strong>U</strong></div>
+            <div class="strength"></div>
             <div class="label">B</div>
             <div class="actions">
-                <button>Claim</button>
+                <button class="reinforce">Reinf.</button>
+                <button class="attack">Attack</button>
+                <button class="fortify">Fortify</button>
             </div>
         </div>
         <div class="node east" data-name="C" style="left: 220px; top: -200px;">
-            <div class="strength"><strong>U</strong></div>
+            <div class="strength"></div>
             <div class="label">C</div>
             <div class="actions">
-                <button>Claim</button>
+                <button class="reinforce">Reinf.</button>
+                <button class="attack">Attack</button>
+                <button class="fortify">Fortify</button>
             </div>
         </div>
         <div class="node east" data-name="D" style="left: 380px; top: -200px;">
-            <div class="strength"><strong>U</strong></div>
+            <div class="strength"></div>
             <div class="label">D</div>
             <div class="actions">
-                <button>Claim</button>
+                <button class="reinforce">Reinf.</button>
+                <button class="attack">Attack</button>
+                <button class="fortify">Fortify</button>
             </div>
         </div>
         <div class="node west" data-name="E" style="left: -40px; top: 140px;">
-            <div class="strength"><strong>U</strong></div>
+            <div class="strength"></div>
             <div class="label">E</div>
             <div class="actions">
-                <button>Claim</button>
+                <button class="reinforce">Reinf.</button>
+                <button class="attack">Attack</button>
+                <button class="fortify">Fortify</button>
             </div>
         </div>
         <div class="node west" data-name="F" style="left: -40px; top: -140px;">
-            <div class="strength"><strong>U</strong></div>
+            <div class="strength"></div>
             <div class="label">F</div>
             <div class="actions">
-                <button>Claim</button>
+                <button class="reinforce">Reinf.</button>
+                <button class="attack">Attack</button>
+                <button class="fortify">Fortify</button>
             </div>
         </div>
         <div class="node west" data-name="G" style="left: -280px; top: -80px;">
-            <div class="strength"><strong>U</strong></div>
+            <div class="strength"></div>
             <div class="label">G</div>
             <div class="actions">
-                <button>Claim</button>
+                <button class="reinforce">Reinf.</button>
+                <button class="attack">Attack</button>
+                <button class="fortify">Fortify</button>
             </div>
         </div>
         <div class="node west" data-name="H" style="left: -280px; top: 80px;">
-            <div class="strength"><strong>U</strong></div>
+            <div class="strength"></div>
             <div class="label">H</div>
             <div class="actions">
-                <button>Claim</button>
+                <button class="reinforce">Reinf.</button>
+                <button class="attack">Attack</button>
+                <button class="fortify">Fortify</button>
             </div>
         </div>
         <div class="node west" data-name="I" style="left: -180px;">
-            <div class="strength"><strong>U</strong></div>
+            <div class="strength"></div>
             <div class="label">I</div>
             <div class="actions">
-                <button>Claim</button>
+                <button class="reinforce">Reinf.</button>
+                <button class="attack">Attack</button>
+                <button class="fortify">Fortify</button>
             </div>
         </div>
         <div class="node east" data-name="J" style="">
-            <div class="strength"><strong>U</strong></div>
+            <div class="strength"></div>
             <div class="label">J</div>
             <div class="actions">
-                <button>Claim</button>
+                <button class="reinforce">Reinf.</button>
+                <button class="attack">Attack</button>
+                <button class="fortify">Fortify</button>
             </div>
         </div>
     </div>
 
     <div id="ready">
         <button id="ready-button">Not ready</button>
+        <button id="end-turn" class="hidden">End Turn</button>
     </div>
 
     </body>