jude/Riskless
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Some claiming logic

Browse Source
This commit is contained in:
jude 2023-02-06 13:03:25 +00:00
parent 79c4ce20d1
commit 38b720d1b7
7 changed files with 84 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
static/css/style.css
View File

@ -70,6 +70,24 @@
}
.label {
font-weight: bold;
position: absolute;
top: -20px;
}
.action {
position: absolute;
top: 50px;
}
.hidden {
display: none;
}
.east {
border-color: darkgreen;
}
.west {
border-color: darkblue;
}

34
static/js/dom.js
View File

@ -1,6 +1,28 @@
function unlockMapDom() {}
function unlockMapDom() {
document.querySelectorAll(".action").forEach((e) => e.classList.remove("hidden"));
}
function lockMapDom() {}
function lockMapDom() {
document.querySelectorAll(".action").forEach((e) => e.classList.add("hidden"));
}
function updateDom() {
updatePlayerDom();
updateMapDom();
}
function updateMapDom() {
if (us.isPlaying) {
unlockMapDom();
} else {
lockMapDom();
}
for (let region of Object.values(REGIONS)) {
const element = document.querySelector(`.node[data-name=${region.name}]`);
element.querySelector(".strength").textContent = region.strength || "U";
}
}
function updatePlayerDom() {
let list = document.querySelector("#playerList");
@ -55,4 +77,12 @@ document.addEventListener("DOMContentLoaded", () => {
await startPregame();
}
});
document.querySelectorAll(".action").forEach((el) =>
el.addEventListener("click", (ev) => {
let region = ev.target.closest(".node").dataset.name;
socket.emit("message", Packet.createRegionClaim(region));
us.claim();
})
);
});

20
static/js/index.js
View File

@ -4,7 +4,7 @@ const TIMEOUT = 30_000;
let players = {};
let us = null;
let currentPlayer = () => Object.values(players).filter((p) => p.isReady)[0];
let currentPlayer = () => Object.values(players).filter((p) => p.isPlaying)[0];
const WAITING = 0;
const PRE_GAME = 1;
@ -69,14 +69,12 @@ document.addEventListener("DOMContentLoaded", () => {
break;
case "CLAIM":
// TODO: block out of order plays.
// Claim a region in the pregame.
await currentPlayer().claim(data);
currentPlayer().claim(data);
// Increment to next player.
currentPlayer().endTurn();
if (currentPlayer() === us) {
currentPlayer().claimRegions();
}
updateDom();
break;
}
});
@ -106,13 +104,13 @@ function playerConnected(data) {
} else {
}
updatePlayerDom();
updateDom();
}
function playerDisconnected(data) {
console.log("deleting player");
delete players[data.author];
updatePlayerDom();
updateDom();
}
/**
@ -133,7 +131,7 @@ async function setReady(data) {
players[data.author].name = data.name;
players[data.author].ready = data.ready;
updatePlayerDom();
updateDom();
if (allPlayersReady()) {
await startPregame();
@ -163,7 +161,5 @@ async function startPregame() {
firstPlayer.isPlaying = true;
await barrier.wait();
updatePlayerDom();
// Players select starting regions.
updateDom();
}

4
static/js/map.js
View File

@ -53,10 +53,10 @@ const A = new Region("A", EAST);
const B = new Region("B", EAST);
const C = new Region("C", EAST);
const D = new Region("D", EAST);
const E = new Region("E", EAST);
const J = new Region("J", EAST);
const F = new Region("F", WEST);
const G = new Region("G", WEST);
const H = new Region("H", WEST);
const I = new Region("I", WEST);
const J = new Region("J", WEST);
const E = new Region("E", WEST);

2
static/js/packet.js
View File

@ -36,7 +36,7 @@ class Packet {
static createRegionClaim(region) {
return {
...this._createBase("CLAIM"),
name: region,
region: region,
};
}
}

12
static/js/player.js
View File

@ -16,25 +16,17 @@ class Player {
if (players[this.id] !== undefined) {
delete players[this.id];
}
updatePlayerDom();
updateDom();
}, TIMEOUT);
}
/**
* Allow the user to claim regions whilst in the pre-game phase.
*/
claimRegions() {
unlockMapDom();
lockMapDom();
}
/**
* Claim a region of the map.
*
* @param data Data received via socket.
*/
claim(data) {
console.log(data.region);
let region = Region.getRegion(data.region);
if (region.owner === null) {

31
templates/index.html
View File

@ -13,6 +13,7 @@
<script src="{{ url_for('static', filename='js/random.js') }}"></script>
<script src="{{ url_for('static', filename='js/barrier.js') }}"></script>
<script src="{{ url_for('static', filename='js/packet.js') }}"></script>
<script src="{{ url_for('static', filename='js/map.js') }}"></script>
</head>
<body>
@ -39,45 +40,55 @@
<line x1="-180" y1="0" x2="-40" y2="140" stroke="black"></line>
<path d="M -280 80 Q -360 0 -280 -80" stroke="black" fill="transparent"></path>
</svg>
<div class="node" 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="label">A</div>
<button class="action">Claim</button>
</div>
<div class="node" 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="label">B</div>
<button class="action">Claim</button>
</div>
<div class="node" 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="label">C</div>
<button class="action">Claim</button>
</div>
<div class="node" 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="label">D</div>
<button class="action">Claim</button>
</div>
<div class="node" 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="label">E</div>
<button class="action">Claim</button>
</div>
<div class="node" 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="label">F</div>
<button class="action">Claim</button>
</div>
<div class="node" 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="label">G</div>
<button class="action">Claim</button>
</div>
<div class="node" 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="label">H</div>
<button class="action">Claim</button>
</div>
<div class="node" 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="label">I</div>
<button class="action">Claim</button>
</div>
<div class="node" data-name="J" style="">
<div class="node east" data-name="J" style="">
<div class="strength"><strong>U</strong></div>
<div class="label">J</div>
<button class="action">Claim</button>
</div>
</div>