Producs on FE

2023-03-31 10:19:21 +02:00
parent c9707c0523
commit 210a6aff7c
10 changed files with 100 additions and 7 deletions
--- a/frontend/index.html
+++ b/frontend/index.html
@ -13,10 +13,14 @@
 </head>

 <body>
-    <div class="container-fluid">
+    <main class="container-fluid container">
        <h1 class="mt-1 mb-2">
            FairHopper Visualisation Client
        </h1>
+        <div id="purchase-container" class="purchase-container d-none">
+            <h3>Product selection</h3>
+            <div id="products-content" class="products-content"></div>
+        </div>
        <div class="row">
            <div class="col-10">
                <div class="board-container">
@ -30,7 +34,7 @@
                <ul class="players" id="players-content"></ul>
            </div>
        </div>
-    </div>
+    </main>
 </body>

 <script>
@ -124,7 +128,23 @@
    }

    function productPurchaseStart(products) {
-        console.log("productPurchaseStart:", products)
+        console.log("productPurchaseStart:", products);
+        const containerElement = document.getElementById("purchase-container");
+        const contentElement = document.getElementById("products-content");
+
+        const html = products.map(product => {
+            return `
+                <div class="card product">
+                    <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("");
+
+        contentElement.innerHTML = html;
+        containerElement.classList.remove("d-none")
    }

    function productPurchased(product) {
@ -133,6 +153,8 @@

    function productPurchaseDone() {
        console.log("productPurchaseDone")
+        const container = document.getElementById("purchase-container");
+        container.classList.add("d-none")
    }

    function wsConnect() {
@ -150,7 +172,7 @@
                    renderGameDump(wsMessage.data);
                    break;
                case "product_purchase_start":
-                    productPurchaseStart(wsMessage.data)
+                    productPurchaseStart(wsMessage.data.products)
                    break;
                case "product_purchased":
                    productPurchased(wsMessage.data)
@ -177,6 +199,40 @@

    window.onload = () => {
        wsConnect();
+
+        productPurchaseStart([
+            {
+                "name": "CocaCola",
+                "uuid": "4af72121-c4c5-4a28-b514-2ba577a7f6c5",
+                "description": null
+            },
+            {
+                "name": "Pepsi",
+                "uuid": "a14ad558-6ab2-4aa7-9456-f525430c38f8",
+                "description": null
+            },
+            {
+                "name": "Fanta",
+                "uuid": "7ea2fe22-c938-4217-91ec-e96c040b077f",
+                "description": null
+            },
+            {
+                "name": "Snickers",
+                "uuid": "04d8ad0c-fa80-4342-9449-390b162995fd",
+                "description": null
+            },
+            {
+                "name": "Mars",
+                "uuid": "f8674776-dc57-418f-b4ea-29f4ec4fdf35",
+                "description": null
+            },
+            {
+                "name": "Burek",
+                "uuid": "329942c8-9a6d-42e5-b859-3df577c5bce7",
+                "description": null
+            }
+        ])
+
    }
 </script>