Some claiming logic

static/css/style.css

@@ -70,6 +70,24 @@
 }
 
 .label {
+    font-weight: bold;
     position: absolute;
     top: -20px;
 }
+
+.action {
+    position: absolute;
+    top: 50px;
+}
+
+.hidden {
+    display: none;
+}
+
+.east {
+    border-color: darkgreen;
+}
+
+.west {
+    border-color: darkblue;
+}

static/js/dom.js

@@ -1,6 +1,28 @@
-function unlockMapDom() {}
+function unlockMapDom() {
+    document.querySelectorAll(".action").forEach((e) => e.classList.remove("hidden"));
+}
 
-function lockMapDom() {}
+function lockMapDom() {
+    document.querySelectorAll(".action").forEach((e) => e.classList.add("hidden"));
+}
+
+function updateDom() {
+    updatePlayerDom();
+    updateMapDom();
+}
+
+function updateMapDom() {
+    if (us.isPlaying) {
+        unlockMapDom();
+    } else {
+        lockMapDom();
+    }
+
+    for (let region of Object.values(REGIONS)) {
+        const element = document.querySelector(`.node[data-name=${region.name}]`);
+        element.querySelector(".strength").textContent = region.strength || "U";
+    }
+}
 
 function updatePlayerDom() {
     let list = document.querySelector("#playerList");
@@ -55,4 +77,12 @@ document.addEventListener("DOMContentLoaded", () => {
             await startPregame();
         }
     });
+
+    document.querySelectorAll(".action").forEach((el) =>
+        el.addEventListener("click", (ev) => {
+            let region = ev.target.closest(".node").dataset.name;
+            socket.emit("message", Packet.createRegionClaim(region));
+            us.claim();
+        })
+    );
 });

static/js/index.js

@@ -4,7 +4,7 @@ const TIMEOUT = 30_000;
 
 let players = {};
 let us = null;
-let currentPlayer = () => Object.values(players).filter((p) => p.isReady)[0];
+let currentPlayer = () => Object.values(players).filter((p) => p.isPlaying)[0];
 
 const WAITING = 0;
 const PRE_GAME = 1;
@@ -69,14 +69,12 @@ document.addEventListener("DOMContentLoaded", () => {
                 break;
 
             case "CLAIM":
+                // TODO: block out of order plays.
                 // Claim a region in the pregame.
-                await currentPlayer().claim(data);
+                currentPlayer().claim(data);
                 // Increment to next player.
                 currentPlayer().endTurn();
-
+                updateDom();
-                if (currentPlayer() === us) {
-                    currentPlayer().claimRegions();
-                }
                 break;
         }
     });
@@ -106,13 +104,13 @@ function playerConnected(data) {
     } else {
     }
 
-    updatePlayerDom();
+    updateDom();
 }
 
 function playerDisconnected(data) {
     console.log("deleting player");
     delete players[data.author];
-    updatePlayerDom();
+    updateDom();
 }
 
 /**
@@ -133,7 +131,7 @@ async function setReady(data) {
     players[data.author].name = data.name;
     players[data.author].ready = data.ready;
 
-    updatePlayerDom();
+    updateDom();
 
     if (allPlayersReady()) {
         await startPregame();
@@ -163,7 +161,5 @@ async function startPregame() {
 
     firstPlayer.isPlaying = true;
     await barrier.wait();
-    updatePlayerDom();
+    updateDom();
-
-    // Players select starting regions.
 }

static/js/map.js

@@ -53,10 +53,10 @@ const A = new Region("A", EAST);
 const B = new Region("B", EAST);
 const C = new Region("C", EAST);
 const D = new Region("D", EAST);
-const E = new Region("E", EAST);
+const J = new Region("J", EAST);
 
 const F = new Region("F", WEST);
 const G = new Region("G", WEST);
 const H = new Region("H", WEST);
 const I = new Region("I", WEST);
-const J = new Region("J", WEST);
+const E = new Region("E", WEST);

static/js/packet.js

@@ -36,7 +36,7 @@ class Packet {
     static createRegionClaim(region) {
         return {
             ...this._createBase("CLAIM"),
-            name: region,
+            region: region,
         };
     }
 }

static/js/player.js

@@ -16,25 +16,17 @@ class Player {
             if (players[this.id] !== undefined) {
                 delete players[this.id];
             }
-            updatePlayerDom();
+            updateDom();
         }, TIMEOUT);
     }
 
-    /**
-     * Allow the user to claim regions whilst in the pre-game phase.
-     */
-    claimRegions() {
-        unlockMapDom();
-
-        lockMapDom();
-    }
-
     /**
      * Claim a region of the map.
      *
      * @param data Data received via socket.
      */
     claim(data) {
+        console.log(data.region);
         let region = Region.getRegion(data.region);
 
         if (region.owner === null) {

templates/index.html

@@ -13,6 +13,7 @@
         <script src="{{ url_for('static', filename='js/random.js') }}"></script>
         <script src="{{ url_for('static', filename='js/barrier.js') }}"></script>
         <script src="{{ url_for('static', filename='js/packet.js') }}"></script>
+        <script src="{{ url_for('static', filename='js/map.js') }}"></script>
     </head>
     <body>
 
@@ -39,45 +40,55 @@
             <line x1="-180" y1="0" x2="-40" y2="140" stroke="black"></line>
             <path d="M -280 80 Q -360 0 -280 -80" stroke="black" fill="transparent"></path>
         </svg>
-        <div class="node" data-name="A" style="left: 280px;">
+        <div class="node east" data-name="A" style="left: 280px;">
             <div class="strength"><strong>U</strong></div>
             <div class="label">A</div>
+            <button class="action">Claim</button>
         </div>
-        <div class="node" data-name="B" style="left: 160px;">
+        <div class="node east" data-name="B" style="left: 160px;">
             <div class="strength"><strong>U</strong></div>
             <div class="label">B</div>
+            <button class="action">Claim</button>
         </div>
-        <div class="node" data-name="C" style="left: 220px; top: -200px;">
+        <div class="node east" data-name="C" style="left: 220px; top: -200px;">
             <div class="strength"><strong>U</strong></div>
             <div class="label">C</div>
+            <button class="action">Claim</button>
         </div>
-        <div class="node" data-name="D" style="left: 380px; top: -200px;">
+        <div class="node east" data-name="D" style="left: 380px; top: -200px;">
             <div class="strength"><strong>U</strong></div>
             <div class="label">D</div>
+            <button class="action">Claim</button>
         </div>
-        <div class="node" data-name="E" style="left: -40px; top: 140px;">
+        <div class="node west" data-name="E" style="left: -40px; top: 140px;">
             <div class="strength"><strong>U</strong></div>
             <div class="label">E</div>
+            <button class="action">Claim</button>
         </div>
-        <div class="node" data-name="F" style="left: -40px; top: -140px;">
+        <div class="node west" data-name="F" style="left: -40px; top: -140px;">
             <div class="strength"><strong>U</strong></div>
             <div class="label">F</div>
+            <button class="action">Claim</button>
         </div>
-        <div class="node" data-name="G" style="left: -280px; top: -80px;">
+        <div class="node west" data-name="G" style="left: -280px; top: -80px;">
             <div class="strength"><strong>U</strong></div>
             <div class="label">G</div>
+            <button class="action">Claim</button>
         </div>
-        <div class="node" data-name="H" style="left: -280px; top: 80px;">
+        <div class="node west" data-name="H" style="left: -280px; top: 80px;">
             <div class="strength"><strong>U</strong></div>
             <div class="label">H</div>
+            <button class="action">Claim</button>
         </div>
-        <div class="node" data-name="I" style="left: -180px;">
+        <div class="node west" data-name="I" style="left: -180px;">
             <div class="strength"><strong>U</strong></div>
             <div class="label">I</div>
+            <button class="action">Claim</button>
         </div>
-        <div class="node" data-name="J" style="">
+        <div class="node east" data-name="J" style="">
             <div class="strength"><strong>U</strong></div>
             <div class="label">J</div>
+            <button class="action">Claim</button>
         </div>
     </div>