diff --git a/static/css/style.css b/static/css/style.css
index 2f8fb50..479d540 100644
--- a/static/css/style.css
+++ b/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;
+}
diff --git a/static/js/dom.js b/static/js/dom.js
index fbc27b5..646b507 100644
--- a/static/js/dom.js
+++ b/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();
+ })
+ );
});
diff --git a/static/js/index.js b/static/js/index.js
index 7748c23..6b25659 100644
--- a/static/js/index.js
+++ b/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();
-
- if (currentPlayer() === us) {
- currentPlayer().claimRegions();
- }
+ updateDom();
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();
-
- // Players select starting regions.
+ updateDom();
}
diff --git a/static/js/map.js b/static/js/map.js
index c16705d..5d625c5 100644
--- a/static/js/map.js
+++ b/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);
diff --git a/static/js/packet.js b/static/js/packet.js
index 0c224d2..7d9dd50 100644
--- a/static/js/packet.js
+++ b/static/js/packet.js
@@ -36,7 +36,7 @@ class Packet {
static createRegionClaim(region) {
return {
...this._createBase("CLAIM"),
- name: region,
+ region: region,
};
}
}
diff --git a/static/js/player.js b/static/js/player.js
index 781c8fe..21305c8 100644
--- a/static/js/player.js
+++ b/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) {
diff --git a/templates/index.html b/templates/index.html
index 064d5a3..c19aa85 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -13,6 +13,7 @@
+
@@ -39,45 +40,55 @@
-