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

Frontend support for product selection

Browse Source
This commit is contained in:
Eden Kirin
2023-05-11 16:09:32 +02:00
parent 9151aa3e1e
commit 76ee207bce
1 changed files with 10 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
frontend/js/frontend.js
View File

@ -3,6 +3,7 @@ if (typeof FAIRHOPPER_WS_SERVER === "undefined") {
} }
let ws = null; let ws = null;
let playerOnDestinationModal = null;
const BOARD_ICONS = { const BOARD_ICONS = {
PLAYER: "😀", PLAYER: "😀",
@ -89,8 +90,6 @@ function renderDestination(position) {
} }
function renderGameDump(data) { function renderGameDump(data) {
closePurchaseWindow();
createBoard(data.board); createBoard(data.board);
renderObstacles(data.layers); renderObstacles(data.layers);
renderDestination(data.destination.position); renderDestination(data.destination.position);
@ -99,51 +98,14 @@ function renderGameDump(data) {
} }
function playerReachedDestination(data) { function playerReachedDestination(data) {
console.log(data);
const dlgElement = document.getElementById("player-on-destination-modal"); const dlgElement = document.getElementById("player-on-destination-modal");
dlgElement.querySelector(".player-name").textContent = data.player.name; dlgElement.querySelector(".player-name").textContent = data.player.name;
dlgElement.querySelector(".move-count").textContent = data.player.move_count; dlgElement.querySelector(".move-count").textContent = data.player.move_count;
playerOnDestinationModal.show();
const modal = new bootstrap.Modal(dlgElement);
modal.show();
} }
function productPurchaseStart(products, purchaseTimeout) { function productSelectionDone() {
console.log("productPurchaseStart:", products); playerOnDestinationModal.hide();
const containerElement = document.getElementById("purchase-container");
const contentElement = document.getElementById("products-content");
const purchaseTimeoutElement = document.getElementById("purchase-countdown");
contentElement.innerHTML = products
.map((product) => {
return `
<div class="card product" id="product-${product.id}">
<img src="img/products/${product.name}.jpeg" class="card-img-topx" alt="${product.name}">
<div class="card-body">
<h5 class="card-title">${product.name}</h5>
</div>
</div>
`;
})
.join("");
containerElement.classList.remove("d-none");
purchaseTimeoutElement.innerText = purchaseTimeout;
}
function productPurchaseTimerTick(timeLeft) {
const purchaseTimeoutElement = document.getElementById("purchase-countdown");
purchaseTimeoutElement.innerText = timeLeft;
}
function closePurchaseWindow() {
const container = document.getElementById("purchase-container");
container.classList.add("d-none");
}
function productPurchaseDone(product) {
const cardContainer = document.getElementById(`product-${product.id}`);
cardContainer.classList.add("selected");
} }
function wsConnect() { function wsConnect() {
@ -162,17 +124,11 @@ function wsConnect() {
case "game_dump": case "game_dump":
renderGameDump(wsMessage.data); renderGameDump(wsMessage.data);
break; break;
case "player_on_destination": case "player_reached_destination":
playerReachedDestination(wsMessage.data); playerReachedDestination(wsMessage.data);
break; break;
case "product_purchase_start": case "product_selection_done":
productPurchaseStart(wsMessage.data.products, wsMessage.data.timeout); productSelectionDone();
break;
case "product_purchase_timer_tick":
productPurchaseTimerTick(wsMessage.data.time_left);
break;
case "product_purchase_done":
productPurchaseDone(wsMessage.data.product);
break; break;
default: default:
console.error("Unknown message:", wsMessage); console.error("Unknown message:", wsMessage);
@ -204,6 +160,9 @@ function finishProductSelection() {
} }
window.onload = () => { window.onload = () => {
const dlgElement = document.getElementById("player-on-destination-modal");
playerOnDestinationModal = new bootstrap.Modal(dlgElement);
document.getElementById("finish-product-selection").onclick = () => { document.getElementById("finish-product-selection").onclick = () => {
finishProductSelection(); finishProductSelection();
}; };