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

Producs on FE

Browse Source
This commit is contained in:
Eden Kirin
2023-03-31 10:19:21 +02:00
parent c9707c0523
commit 210a6aff7c
10 changed files with 100 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/img/products/Burek.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 53 KiB

BIN
frontend/img/products/CocaCola.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
frontend/img/products/Fanta.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
frontend/img/products/Mars.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
frontend/img/products/Pepsi.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
frontend/img/products/Snickers.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 22 KiB

64
frontend/index.html
View File

@ -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>

37
frontend/styles.css
View File

@ -2,6 +2,10 @@ body {
background-color: whitesmoke;
}
main.container {
position: relative;
}
.board-container {
background-color: white;
border: 1px solid black;
@ -40,7 +44,6 @@ ul.players {
color: white;
background-color: darkred;
border-radius: 5px;
z-index: 1000;
}
.player-tooltip::after {
@ -53,3 +56,35 @@ ul.players {
border-style: solid;
border-color: darkred transparent transparent transparent;
}
.purchase-container {
width: 50vw;
position: fixed;
top: 200px;
left: 50%;
padding: 20px;
transform: translateX(-50%);
background-color: darkred;
z-index: 999;
border-radius: 10px;
}
.purchase-container h3 {
color: white;
margin-bottom: 20px;
}
.purchase-container .products-content {
display: grid;
grid-gap: 10px;
grid-template-columns: 1fr 1fr 1fr;
}
.purchase-container .products-content .product .card-title {
text-align: center;
}
.purchase-container .products-content .product img {
margin: 20px;
max-height: 300px;
}