diff --git a/static/css/style.css b/static/css/style.css
index 6b0d227..02dc299 100644
--- a/static/css/style.css
+++ b/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;
diff --git a/static/js/dom.js b/static/js/dom.js
index 1fe58bf..806fe32 100644
--- a/static/js/dom.js
+++ b/static/js/dom.js
@@ -34,31 +34,19 @@ function updateMapDom() {
}
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);
- }
+ document.querySelectorAll(".fortify, .attack").forEach((e) => {
+ e.classList.add("hidden");
});
+ } 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;
diff --git a/static/js/packet.js b/static/js/packet.js
index 69455b0..9e4d06b 100644
--- a/static/js/packet.js
+++ b/static/js/packet.js
@@ -46,4 +46,11 @@ class Packet {
region: region,
};
}
+
+ static createEndTurn() {
+ return {
+ ...this._createBase("ACT"),
+ action: "END",
+ };
+ }
}
diff --git a/templates/index.html b/templates/index.html
index ba5303f..ad2ff86 100644
--- a/templates/index.html
+++ b/templates/index.html
@@ -50,79 +50,100 @@