226 lines
7.3 KiB
JavaScript
226 lines
7.3 KiB
JavaScript
function unlockMapDom() {
|
|
Object.values(REGIONS).forEach((region) => {
|
|
if (!allRegionsClaimed() && region.owner === null) {
|
|
document
|
|
.querySelector(`.node[data-name=${region.name}] .actions`)
|
|
.classList.remove("hidden");
|
|
} else if (region.owner === us) {
|
|
document
|
|
.querySelector(`.node[data-name=${region.name}] .actions`)
|
|
.classList.remove("hidden");
|
|
}
|
|
});
|
|
}
|
|
|
|
function lockMapDom() {
|
|
document.querySelectorAll(".actions").forEach((e) => e.classList.add("hidden"));
|
|
}
|
|
|
|
function updateDom() {
|
|
if (gameState !== WAITING) {
|
|
document.querySelector("#ready-button").style.display = "none";
|
|
}
|
|
|
|
updatePlayerDom();
|
|
showRemainingReinforcements();
|
|
updateMapDom();
|
|
}
|
|
|
|
function updateMapDom() {
|
|
if (us.isPlaying) {
|
|
unlockMapDom();
|
|
} else {
|
|
lockMapDom();
|
|
}
|
|
|
|
if (gameState === PRE_GAME) {
|
|
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)) {
|
|
const element = document.querySelector(`.node[data-name=${region.name}]`);
|
|
element.querySelector(".strength").textContent = region.strength || "";
|
|
element.style.backgroundColor =
|
|
region.owner === null ? "white" : region.owner.getColor();
|
|
}
|
|
}
|
|
|
|
function updatePlayerDom() {
|
|
let list = document.querySelector("#playerList");
|
|
list.replaceChildren();
|
|
|
|
for (let playerId of Object.keys(players).sort()) {
|
|
let player = players[playerId];
|
|
|
|
let statusSpan = document.createElement("div");
|
|
statusSpan.classList.add("status-span");
|
|
if (gameState === WAITING) {
|
|
if (player.ready) {
|
|
statusSpan.textContent = "R";
|
|
statusSpan.classList.add("ready");
|
|
} else {
|
|
statusSpan.textContent = "N";
|
|
statusSpan.classList.add("not-ready");
|
|
}
|
|
} else {
|
|
if (player.isPlaying) {
|
|
statusSpan.textContent = "P";
|
|
}
|
|
}
|
|
|
|
let idSpan = document.createElement("span");
|
|
idSpan.style.color = player.getColor();
|
|
if (playerId === ID) {
|
|
idSpan.textContent = `${playerId} (you)`;
|
|
} else {
|
|
idSpan.textContent = playerId;
|
|
}
|
|
|
|
let newDom = document.createElement("li");
|
|
newDom.appendChild(statusSpan);
|
|
newDom.appendChild(idSpan);
|
|
list.appendChild(newDom);
|
|
}
|
|
}
|
|
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
document.querySelector("#ready-button").addEventListener("click", async (ev) => {
|
|
let nowReady = ev.target.textContent === "Not ready";
|
|
us.ready = nowReady;
|
|
|
|
ev.target.classList.toggle("active");
|
|
ev.target.textContent = nowReady ? "Ready" : "Not ready";
|
|
|
|
socket.emit("message", Packet.createSetReady(nowReady));
|
|
|
|
updatePlayerDom();
|
|
|
|
if (allPlayersReady()) {
|
|
await startPregame();
|
|
}
|
|
});
|
|
|
|
document.querySelector("#end-turn").addEventListener("click", async (ev) => {
|
|
socket.emit("message", Packet.createEndTurn());
|
|
});
|
|
|
|
document.querySelectorAll(".reinforce").forEach((el) =>
|
|
el.addEventListener("click", (ev) => {
|
|
let region = ev.target.closest(".node").dataset.name;
|
|
socket.emit("message", Packet.createRegionClaim(region));
|
|
})
|
|
);
|
|
|
|
document.querySelectorAll(".attack").forEach((el) =>
|
|
el.addEventListener("click", (ev) => {
|
|
let modal = document.querySelector("#modal");
|
|
|
|
let region = ev.target.closest(".node").dataset["name"];
|
|
|
|
modal.dataset["region"] = ev.target.closest(".node").dataset.name;
|
|
modal.dataset["action"] = "ATTACK";
|
|
|
|
let selector = modal.querySelector(".target");
|
|
selector.replaceChildren("");
|
|
for (let neighbour of Region.getRegion(region).neighbours) {
|
|
let opt = document.createElement("option");
|
|
opt.value = neighbour.name;
|
|
opt.textContent = neighbour.name;
|
|
selector.appendChild(opt);
|
|
}
|
|
|
|
modal.classList.remove("hidden");
|
|
})
|
|
);
|
|
|
|
document.querySelectorAll(".fortify").forEach((el) =>
|
|
el.addEventListener("click", (ev) => {
|
|
let modal = document.querySelector("#modal");
|
|
|
|
let region = ev.target.closest(".node").dataset["name"];
|
|
|
|
modal.dataset["region"] = region;
|
|
modal.dataset["action"] = "FORTIFY";
|
|
|
|
let selector = modal.querySelector(".target");
|
|
selector.replaceChildren("");
|
|
for (let neighbour of Region.getRegion(region).neighbours) {
|
|
let opt = document.createElement("option");
|
|
opt.value = neighbour.name;
|
|
opt.textContent = neighbour.name;
|
|
selector.appendChild(opt);
|
|
}
|
|
|
|
modal.classList.remove("hidden");
|
|
})
|
|
);
|
|
|
|
document.querySelector("#modal .submit-modal").addEventListener("click", () => {
|
|
let modal = document.querySelector("#modal");
|
|
|
|
let startRegion = modal.dataset["region"];
|
|
let action = modal.dataset["action"];
|
|
|
|
let amount = modal.querySelector(".amount").value;
|
|
let endRegion = modal.querySelector(".target").value;
|
|
|
|
socket.emit(
|
|
"message",
|
|
Packet.createAction(action, startRegion, endRegion, amount)
|
|
);
|
|
});
|
|
|
|
document
|
|
.querySelector("#defense-modal .submit-modal")
|
|
.addEventListener("click", () => {
|
|
let modal = document.querySelector("#defense-modal");
|
|
let amount = modal.querySelector(".amount").value;
|
|
socket.emit("message", Packet.createDefense(amount));
|
|
});
|
|
|
|
document.querySelectorAll(".submit-modal, .cancel-modal").forEach((el) => {
|
|
el.addEventListener("click", () => {
|
|
el.closest(".modal").classList.add("hidden");
|
|
});
|
|
});
|
|
|
|
document.querySelector("#shuffleColors").addEventListener("click", () => {
|
|
Object.values(players).forEach((player) => {
|
|
player.resetColor();
|
|
});
|
|
updatePlayerDom();
|
|
});
|
|
});
|
|
|
|
function showRemainingReinforcements() {
|
|
if (gameState === PRE_GAME) {
|
|
document.querySelector(
|
|
"#remaining-reinforcements"
|
|
).innerHTML = `<span>Remaining placements: ${reinforcementsRemaining()}</span>`;
|
|
} else if (gameState === PLAYING) {
|
|
document.querySelector(
|
|
"#remaining-reinforcements"
|
|
).innerHTML = `<span>Remaining placements: ${
|
|
currentPlayer().reinforcementsAvailable - currentPlayer().reinforcementsPlaced
|
|
}</span>`;
|
|
}
|
|
}
|
|
|
|
function showDefenseDom(region) {
|
|
const modal = document.querySelector("#defense-modal");
|
|
modal.querySelector("span").textContent = region;
|
|
modal.classList.remove("hidden");
|
|
}
|