Purchase delays

frontend/js/frontend.js

@@ -85,6 +85,8 @@ function renderDestination(position) {
 }
 
 function renderGameDump(data) {
+    closePurchaseWindow();
+
     createBoard(data.board);
     renderObstacles(data.layers);
     renderDestination(data.destination.position);
@@ -101,7 +103,7 @@ function productPurchaseStart(products, purchaseTimeout) {
     const html = products
         .map((product) => {
             return `
-                <div class="card product">
+                <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>
@@ -121,16 +123,16 @@ function productPurchaseTimerTick(timeLeft) {
     purchaseTimeoutElement.innerText = timeLeft;
 }
 
-function productPurchased(product) {
-    console.log("productPurchased:", product);
-}
-
-function productPurchaseDone() {
-    console.log("productPurchaseDone");
+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() {
     let ws = new WebSocket("ws://localhost:8011");
     ws.onopen = () => {
@@ -151,11 +153,8 @@ function wsConnect() {
             case "product_purchase_timer_tick":
                 productPurchaseTimerTick(wsMessage.data.time_left);
                 break;
-            case "product_purchased":
-                productPurchased(wsMessage.data);
-                break;
             case "product_purchase_done":
-                productPurchaseDone();
+                productPurchaseDone(wsMessage.data.product);
                 break;
             default:
                 console.error("Unknown message:", wsMessage);