Riskless/static/js/modules/interface/dom.js

258 lines
8.6 KiB
JavaScript
Raw Normal View History

2023-03-04 00:25:54 +00:00
import { game, socket, ID } from "./main.js";
import { Region } from "./map.js";
import { Packet } from "./packet.js";
export function unlockMapDom() {
2023-03-05 17:19:37 +00:00
Object.values(Region.getAllRegions()).forEach((region) => {
if (!Region.allRegionsClaimed() && region.owner === null) {
document
.querySelector(`.node[data-name=${region.name}] .actions`)
.classList.remove("hidden");
2023-03-05 17:19:37 +00:00
} else if (region.owner === game.us) {
document
.querySelector(`.node[data-name=${region.name}] .actions`)
.classList.remove("hidden");
}
});
2023-02-06 13:03:25 +00:00
}
export function lockMapDom() {
document.querySelectorAll(".actions").forEach((e) => e.classList.add("hidden"));
2023-02-06 13:03:25 +00:00
}
function updateMapDom() {
2023-03-04 00:25:54 +00:00
if (game.us.isPlaying) {
2023-02-06 13:03:25 +00:00
unlockMapDom();
} else {
lockMapDom();
}
2023-03-04 00:25:54 +00:00
if (game.isPregame()) {
2023-02-16 09:38:03 +00:00
document.querySelectorAll(".fortify, .attack").forEach((e) => {
e.classList.add("hidden");
});
2023-03-13 14:52:14 +00:00
if (Region.allRegionsClaimed()) {
document.querySelectorAll(".claim").forEach((e) => {
e.classList.add("hidden");
});
document.querySelectorAll(".reinforce").forEach((e) => {
e.classList.remove("hidden");
});
} else {
document.querySelectorAll(".reinforce").forEach((e) => {
e.classList.add("hidden");
});
}
2023-03-04 00:25:54 +00:00
} else if (game.isPlaying()) {
2023-03-13 14:52:14 +00:00
document.querySelectorAll(".node button:not(.claim)").forEach((e) => {
2023-02-16 09:38:03 +00:00
e.classList.remove("hidden");
});
2023-02-16 09:38:03 +00:00
2023-03-05 17:19:37 +00:00
if (game.us.isPlaying) {
2023-02-16 09:38:03 +00:00
document.querySelector("#end-turn").classList.remove("hidden");
} else {
document.querySelector("#end-turn").classList.add("hidden");
}
}
showStrengths();
showRemainingReinforcements();
}
function showStrengths() {
for (let region of Region.getAllRegions()) {
2023-02-06 13:03:25 +00:00
const element = document.querySelector(`.node[data-name=${region.name}]`);
2023-03-13 14:52:14 +00:00
element.querySelector(".strength").textContent = region.displayStrength();
2023-02-08 17:55:45 +00:00
element.style.backgroundColor =
region.owner === null ? "white" : region.owner.getColor();
2023-02-06 13:03:25 +00:00
}
}
2023-02-06 12:30:24 +00:00
document.addEventListener("updateStrengths", showStrengths);
2023-03-04 00:25:54 +00:00
document.addEventListener("gameStateUpdate", () => {
if (!game.isWaiting()) {
document.querySelector("#ready-button").style.display = "none";
}
});
document.addEventListener("gameStateUpdate", updateMapDom);
2023-03-05 17:19:37 +00:00
document.addEventListener("playerChange", updateMapDom);
document.addEventListener("turnProgress", updateMapDom);
2023-03-04 00:25:54 +00:00
2023-01-31 12:34:13 +00:00
function updatePlayerDom() {
2023-01-29 16:47:37 +00:00
let list = document.querySelector("#playerList");
list.replaceChildren();
2023-03-04 00:25:54 +00:00
for (let playerId of Object.keys(game.players).sort()) {
let player = game.players[playerId];
let statusSpan = document.createElement("div");
statusSpan.classList.add("status-span");
2023-03-04 00:25:54 +00:00
if (game.isWaiting()) {
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");
2023-02-08 17:55:45 +00:00
idSpan.style.color = player.getColor();
if (playerId === ID) {
idSpan.textContent = `${playerId} (you)`;
} else {
idSpan.textContent = playerId;
2023-01-29 16:47:37 +00:00
}
let newDom = document.createElement("li");
newDom.appendChild(statusSpan);
newDom.appendChild(idSpan);
list.appendChild(newDom);
2023-01-29 16:47:37 +00:00
}
}
2023-03-04 00:25:54 +00:00
document.addEventListener("addPlayer", updatePlayerDom);
document.addEventListener("removePlayer", updatePlayerDom);
document.addEventListener("updatePlayer", updatePlayerDom);
2023-03-05 17:19:37 +00:00
document.addEventListener("playerChange", updatePlayerDom);
2023-03-04 00:25:54 +00:00
document.addEventListener("DOMContentLoaded", () => {
document.querySelector("#ready-button").addEventListener("click", async (ev) => {
let nowReady = ev.target.textContent === "Not ready";
ev.target.classList.toggle("active");
ev.target.textContent = nowReady ? "Ready" : "Not ready";
socket.emit("message", Packet.createSetReady(nowReady));
});
2023-02-06 13:03:25 +00:00
2023-02-16 09:38:03 +00:00
document.querySelector("#end-turn").addEventListener("click", async (ev) => {
socket.emit("message", Packet.createEndTurn());
});
2023-03-13 14:52:14 +00:00
document.querySelectorAll(".claim").forEach((el) =>
2023-02-06 13:03:25 +00:00
el.addEventListener("click", (ev) => {
let region = ev.target.closest(".node").dataset.name;
2023-03-17 10:42:11 +00:00
game.us.sendClaim(region);
2023-02-06 13:03:25 +00:00
})
);
2023-03-13 14:52:14 +00:00
document.querySelectorAll(".reinforce").forEach((el) =>
el.addEventListener("click", (ev) => {
let region = ev.target.closest(".node").dataset.name;
2023-03-17 10:42:11 +00:00
game.us.sendReinforce(region);
2023-03-13 14:52:14 +00:00
})
);
2023-02-17 12:46:21 +00:00
document.querySelectorAll(".attack").forEach((el) =>
el.addEventListener("click", (ev) => {
let modal = document.querySelector("#modal");
2023-02-17 13:48:07 +00:00
let region = ev.target.closest(".node").dataset["name"];
2023-02-17 12:46:21 +00:00
modal.dataset["region"] = ev.target.closest(".node").dataset.name;
modal.dataset["action"] = "ATTACK";
2023-02-17 13:48:07 +00:00
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);
}
2023-02-17 12:46:21 +00:00
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");
})
);
2023-02-18 15:12:06 +00:00
document.querySelector("#modal .submit-modal").addEventListener("click", () => {
2023-02-17 12:46:21 +00:00
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;
2023-04-24 13:20:44 +00:00
if (action === "ATTACK") {
socket.emit(
"message",
Packet.createAction(action, startRegion, endRegion, amount)
);
} else {
game.us.sendFortify(startRegion, endRegion, amount);
}
2023-02-17 12:46:21 +00:00
});
2023-02-18 15:12:06 +00:00
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));
});
2023-02-18 16:48:31 +00:00
document.querySelectorAll(".submit-modal, .cancel-modal").forEach((el) => {
el.addEventListener("click", () => {
el.closest(".modal").classList.add("hidden");
2023-02-18 15:12:06 +00:00
});
2023-02-18 16:48:31 +00:00
});
2023-02-17 12:46:21 +00:00
document.querySelector("#shuffleColors").addEventListener("click", () => {
2023-03-04 00:25:54 +00:00
Object.values(game.players).forEach((player) => {
player.resetColor();
});
updatePlayerDom();
});
});
2023-02-08 15:52:02 +00:00
function showRemainingReinforcements() {
2023-03-04 00:25:54 +00:00
if (game.isPregame()) {
document.querySelector(
"#remaining-reinforcements"
2023-03-17 10:42:11 +00:00
).innerHTML = `<span>Remaining placements: ${game.reinforcementsRemaining()}</span>`;
2023-03-04 00:25:54 +00:00
} else if (game.isPlaying()) {
document.querySelector(
"#remaining-reinforcements"
).innerHTML = `<span>Remaining placements: ${
2023-03-05 17:19:37 +00:00
game.currentPlayer().reinforcementsAvailable -
game.currentPlayer().reinforcementsPlaced
}</span>`;
}
}
2023-02-18 15:12:06 +00:00
2023-03-05 17:19:37 +00:00
export function showDefenseDom(region) {
2023-02-18 16:48:31 +00:00
const modal = document.querySelector("#defense-modal");
modal.querySelector("span").textContent = region;
modal.classList.remove("hidden");
2023-02-18 15:12:06 +00:00
}