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 playerOnDestinationModal = null;
const BOARD_ICONS = {
PLAYER: "😀",
@ -89,8 +90,6 @@ function renderDestination(position) {
}
function renderGameDump(data) {
closePurchaseWindow();
createBoard(data.board);
renderObstacles(data.layers);
renderDestination(data.destination.position);
@ -99,51 +98,14 @@ function renderGameDump(data) {
}
function playerReachedDestination(data) {
console.log(data);
const dlgElement = document.getElementById("player-on-destination-modal");
dlgElement.querySelector(".player-name").textContent = data.player.name;
dlgElement.querySelector(".move-count").textContent = data.player.move_count;
const modal = new bootstrap.Modal(dlgElement);
modal.show();
playerOnDestinationModal.show();
}
function productPurchaseStart(products, purchaseTimeout) {
console.log("productPurchaseStart:", products);
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 productSelectionDone() {
playerOnDestinationModal.hide();
}
function wsConnect() {
@ -162,17 +124,11 @@ function wsConnect() {
case "game_dump":
renderGameDump(wsMessage.data);
break;
case "player_on_destination":
case "player_reached_destination":
playerReachedDestination(wsMessage.data);
break;
case "product_purchase_start":
productPurchaseStart(wsMessage.data.products, wsMessage.data.timeout);
break;
case "product_purchase_timer_tick":
productPurchaseTimerTick(wsMessage.data.time_left);
break;
case "product_purchase_done":
productPurchaseDone(wsMessage.data.product);
case "product_selection_done":
productSelectionDone();
break;
default:
console.error("Unknown message:", wsMessage);
@ -204,6 +160,9 @@ function finishProductSelection() {
}
window.onload = () => {
const dlgElement = document.getElementById("player-on-destination-modal");
playerOnDestinationModal = new bootstrap.Modal(dlgElement);
document.getElementById("finish-product-selection").onclick = () => {
finishProductSelection();
};