Defending sort of works

This commit is contained in:
jude 2023-02-18 15:12:06 +00:00
parent 0b4379326e
commit 507a087198
6 changed files with 93 additions and 8 deletions

View File

@ -115,7 +115,7 @@
justify-content: center;
}
#modal {
.modal {
position: fixed;
z-index: 99;
width: 100vw;

View File

@ -167,7 +167,7 @@ document.addEventListener("DOMContentLoaded", () => {
})
);
document.querySelector(".submit-modal").addEventListener("click", () => {
document.querySelector("#modal .submit-modal").addEventListener("click", () => {
let modal = document.querySelector("#modal");
let startRegion = modal.dataset["region"];
@ -182,9 +182,19 @@ document.addEventListener("DOMContentLoaded", () => {
);
});
document.querySelector(".cancel-modal").addEventListener("click", () => {
document.querySelector("#modal").classList.add("hidden");
});
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
.querySelector(".submit-modal, .cancel-modal")
.addEventListener("click", (el) => {
el.target.closest(".modal").classList.add("hidden");
});
document.querySelector("#shuffleColors").addEventListener("click", () => {
Object.values(players).forEach((player) => {
@ -207,3 +217,7 @@ function showRemainingReinforcements() {
}</span>`;
}
}
function showDefenseDom() {
document.querySelector("#defense-modal").classList.remove("hidden");
}

View File

@ -78,6 +78,10 @@ document.addEventListener("DOMContentLoaded", () => {
case "ACT":
if (data.author !== currentPlayer().id) {
if (data.action === "DEFENSE") {
await players[data.author].setDefense(data.amount);
}
return;
}

View File

@ -50,6 +50,14 @@ class Packet {
};
}
static createDefense(amount) {
return {
...this._createBase("ACT"),
action: "DEFENSE",
amount: amount,
};
}
static createEndTurn() {
return {
...this._createBase("ACT"),

View File

@ -18,6 +18,10 @@ class Player {
this.offenderRegion = null;
this.turnPhase = PHASE_REINFORCE;
// Data for defending
this.defenderPromise = null;
this.defenderAmount = null;
this.resetColor();
}
@ -129,8 +133,6 @@ class Player {
let offender = Region.getRegion(data.startRegion);
let defender = Region.getRegion(data.endRegion);
let offenderStrength = parseInt(data.strength);
// Assume this for now.
let defenderStrength = 1;
// Basic validation on game state
if (
@ -144,6 +146,20 @@ class Player {
return false;
}
// If we're the defender, we need to send a packet to state our defense.
if (defender.owner === us) {
showDefenseDom();
}
// Grab the defense amount from
let defenderStrength = 0;
while (
defenderStrength <= 0 ||
defenderStrength > Math.min(2, defender.strength)
) {
defenderStrength = await defender.owner.getDefense();
}
/* How do Risk attacks work?
- Offender signs 1-3 armies, defender signs 1-2 armies
- Both roll respective dice
@ -193,9 +209,39 @@ class Player {
}
}
// Reset the promises in case they attack again.
defender.owner.defenderPromise = null;
defender.owner.defenderAmount = null;
updateDom();
}
async setDefense(amount) {
await navigator.locks.request("defender", () => {
this.defenderAmount = amount;
if (this.defenderPromise !== null) {
this.defenderPromise(amount);
}
});
}
async getDefense() {
let promise, resolver;
await navigator.locks.request("defender", () => {
if (this.defenderAmount === null) {
promise = new Promise((resolve) => {
resolver = resolve;
});
this.defenderPromise = resolver;
} else {
promise = new Promise((resolve) => {
resolve(this.defenderAmount);
});
}
});
return promise;
}
/**
* Process an action which is to attack another region.
*

View File

@ -18,7 +18,7 @@
<script src="{{ url_for('static', filename='js/paillier.js') }}"></script>
</head>
<body>
<div id="modal" class="hidden">
<div id="modal" class="hidden modal">
<div class="modal-content">
<div>
<label>
@ -39,6 +39,19 @@
</div>
</div>
<div id="defense-modal" class="hidden modal">
<div class="modal-content">
<div>
<h2>Defending region <span class="region-tag">R</span></h2>
<label>
Defense amount
<input type="number" class="amount">
</label>
</div>
<button class="submit-modal">Submit</button>
</div>
</div>
<div id="players">
<strong>Players</strong>
<ul id="playerList">