Intis/fairhopper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Frontend js tweaks

Browse Source
This commit is contained in:
Eden Kirin
2023-04-16 22:32:11 +02:00
parent e46edcc821
commit 34a970e550
1 changed files with 15 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/js/frontend.js
View File

@ -1,3 +1,5 @@
const FAIRHOPPER_WS_SERVER = "ws://localhost:8011";
const BOARD_ICONS = { const BOARD_ICONS = {
PLAYER: "😀", PLAYER: "😀",
PLAYER_ON_DESTINATION: "😎", PLAYER_ON_DESTINATION: "😎",
@ -33,10 +35,10 @@ function renderCellContent(position, content) {
} }
function renderPlayerList(players) { function renderPlayerList(players) {
const html = players document.getElementById("players-content").innerHTML = players
.filter((player) => player.active) .filter((player) => player.active)
.map((player) => { .map((player) => {
const onDestination = player.state == "ON_DESTINATION"; const onDestination = player.state === "ON_DESTINATION";
return ` return `
<li class="${onDestination ? "text-success" : ""}"> <li class="${onDestination ? "text-success" : ""}">
${player.name} (${player.move_count}) ${player.name} (${player.move_count})
@ -45,7 +47,6 @@ function renderPlayerList(players) {
`; `;
}) })
.join(""); .join("");
document.getElementById("players-content").innerHTML = html;
} }
function renderPlayers(players) { function renderPlayers(players) {
@ -53,14 +54,13 @@ function renderPlayers(players) {
.filter((player) => player.active) .filter((player) => player.active)
.forEach((player) => { .forEach((player) => {
const cell = findCell(player.position); const cell = findCell(player.position);
const onDestination = player.state == "ON_DESTINATION"; const onDestination = player.state === "ON_DESTINATION";
const playerIcon = onDestination ? BOARD_ICONS.PLAYER_ON_DESTINATION : BOARD_ICONS.PLAYER; const playerIcon = onDestination ? BOARD_ICONS.PLAYER_ON_DESTINATION : BOARD_ICONS.PLAYER;
if (cell) { if (cell) {
const html = ` cell.innerHTML = `
<div class="player-tooltip">${player.name}</div> <div class="player-tooltip">${player.name}</div>
${playerIcon} ${playerIcon}
`; `;
cell.innerHTML = html;
} }
}); });
} }
@ -100,7 +100,7 @@ function productPurchaseStart(products, purchaseTimeout) {
const contentElement = document.getElementById("products-content"); const contentElement = document.getElementById("products-content");
const purchaseTimeoutElement = document.getElementById("purchase-countdown"); const purchaseTimeoutElement = document.getElementById("purchase-countdown");
const html = products contentElement.innerHTML = products
.map((product) => { .map((product) => {
return ` return `
<div class="card product" id="product-${product.id}"> <div class="card product" id="product-${product.id}">
@ -112,8 +112,6 @@ function productPurchaseStart(products, purchaseTimeout) {
`; `;
}) })
.join(""); .join("");
contentElement.innerHTML = html;
containerElement.classList.remove("d-none"); containerElement.classList.remove("d-none");
purchaseTimeoutElement.innerText = purchaseTimeout; purchaseTimeoutElement.innerText = purchaseTimeout;
} }
@ -134,7 +132,9 @@ function productPurchaseDone(product) {
} }
function wsConnect() { function wsConnect() {
let ws = new WebSocket("ws://localhost:8011"); console.log("Attempting to connect to", FAIRHOPPER_WS_SERVER);
let ws = new WebSocket(FAIRHOPPER_WS_SERVER);
ws.onopen = () => { ws.onopen = () => {
console.log("WS connected"); console.log("WS connected");
}; };
@ -162,7 +162,7 @@ function wsConnect() {
}; };
ws.onclose = (e) => { ws.onclose = (e) => {
setTimeout(function () { setTimeout(() => {
wsConnect(); wsConnect();
}, 1000); }, 1000);
}; };