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

Send player info with product purchase data

Browse Source
This commit is contained in:
Eden Kirin
2023-03-31 11:51:05 +02:00
parent 210a6aff7c
commit 659ca82d74
9 changed files with 141 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/index.html
View File

@ -18,7 +18,12 @@
FairHopper Visualisation Client
</h1>
<div id="purchase-container" class="purchase-container d-none">
<h3>Product selection</h3>
<div class="d-flex header">
<h3>
Product selection
</h3>
<h3 id="purchase-countdown" class="countdown"></h3>
</div>
<div id="products-content" class="products-content"></div>
</div>
<div class="row">
@ -127,10 +132,11 @@
renderPlayers(data.players);
}
function productPurchaseStart(products) {
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");
const html = products.map(product => {
return `
@ -145,6 +151,12 @@
contentElement.innerHTML = html;
containerElement.classList.remove("d-none")
purchaseTimeoutElement.innerText = purchaseTimeout;
}
function productPurchaseTimerTick(timeLeft) {
const purchaseTimeoutElement = document.getElementById("purchase-countdown");
purchaseTimeoutElement.innerText = timeLeft;
}
function productPurchased(product) {
@ -172,7 +184,10 @@
renderGameDump(wsMessage.data);
break;
case "product_purchase_start":
productPurchaseStart(wsMessage.data.products)
productPurchaseStart(wsMessage.data.products, wsMessage.data.timeout)
break;
case "product_purchase_timer_tick":
productPurchaseTimerTick(wsMessage.data.time_left)
break;
case "product_purchased":
productPurchased(wsMessage.data)
@ -199,42 +214,7 @@
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>
</html>

6
frontend/styles.css
View File

@ -69,11 +69,15 @@ ul.players {
border-radius: 10px;
}
.purchase-container h3 {
.purchase-container .header {
color: white;
margin-bottom: 20px;
}
.purchase-container .header .countdown {
margin-left: auto;
}
.purchase-container .products-content {
display: grid;
grid-gap: 10px;