Change buttons a bit. End turn option

This commit is contained in:
jude 2023-02-16 09:38:03 +00:00
parent b3fd23bba2
commit bcbd407d7d
4 changed files with 70 additions and 45 deletions

View File

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

View File

@ -34,31 +34,19 @@ function updateMapDom() {
} }
if (gameState === PRE_GAME) { 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) { } else if (gameState === PLAYING) {
document.querySelectorAll(".node").forEach((e) => { document.querySelectorAll(".node button").forEach((e) => {
e.querySelectorAll(".game-action").forEach((el) => { e.classList.remove("hidden");
el.remove();
}); });
let region = Region.getRegion(e.dataset["name"]); if (us.isPlaying) {
for (let n of region.neighbours) { document.querySelector("#end-turn").classList.remove("hidden");
let b = document.createElement("button");
b.classList.add("game-action");
if (n.owner === us) {
b.classList.add("fortify");
b.textContent = `Fortify ${n.name}`;
} else { } else {
b.classList.add("attack"); document.querySelector("#end-turn").classList.add("hidden");
b.textContent = `Attack ${n.name}`;
} }
e.querySelector(".actions").appendChild(b);
}
});
} }
for (let region of Object.values(REGIONS)) { 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) => document.querySelectorAll(".actions button").forEach((el) =>
el.addEventListener("click", (ev) => { el.addEventListener("click", (ev) => {
let region = ev.target.closest(".node").dataset.name; let region = ev.target.closest(".node").dataset.name;

View File

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

View File

@ -50,79 +50,100 @@
<path d="M -280 80 Q -360 0 -280 -80" stroke="black" fill="transparent"></path> <path d="M -280 80 Q -360 0 -280 -80" stroke="black" fill="transparent"></path>
</svg> </svg>
<div class="node east" 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="strength"></div>
<div class="label">A</div> <div class="label">A</div>
<div class="actions"> <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>
<div class="node east" 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="strength"></div>
<div class="label">B</div> <div class="label">B</div>
<div class="actions"> <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>
<div class="node east" 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="strength"></div>
<div class="label">C</div> <div class="label">C</div>
<div class="actions"> <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>
<div class="node east" 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="strength"></div>
<div class="label">D</div> <div class="label">D</div>
<div class="actions"> <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>
<div class="node west" 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="strength"></div>
<div class="label">E</div> <div class="label">E</div>
<div class="actions"> <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>
<div class="node west" 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="strength"></div>
<div class="label">F</div> <div class="label">F</div>
<div class="actions"> <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>
<div class="node west" 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="strength"></div>
<div class="label">G</div> <div class="label">G</div>
<div class="actions"> <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>
<div class="node west" 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="strength"></div>
<div class="label">H</div> <div class="label">H</div>
<div class="actions"> <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>
<div class="node west" 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="strength"></div>
<div class="label">I</div> <div class="label">I</div>
<div class="actions"> <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>
<div class="node east" data-name="J" style=""> <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="label">J</div>
<div class="actions"> <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>
</div> </div>
<div id="ready"> <div id="ready">
<button id="ready-button">Not ready</button> <button id="ready-button">Not ready</button>
<button id="end-turn" class="hidden">End Turn</button>
</div> </div>
</body> </body>