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> </head>
<body> <body>
<div class="container-fluid"> <main class="container-fluid container">
<h1 class="mt-1 mb-2"> <h1 class="mt-1 mb-2">
FairHopper Visualisation Client FairHopper Visualisation Client
</h1> </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="row">
<div class="col-10"> <div class="col-10">
<div class="board-container"> <div class="board-container">
@ -30,7 +34,7 @@
<ul class="players" id="players-content"></ul> <ul class="players" id="players-content"></ul>
</div> </div>
</div> </div>
</div> </main>
</body> </body>
<script> <script>
@ -124,7 +128,23 @@
} }
function productPurchaseStart(products) { 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) { function productPurchased(product) {
@ -133,6 +153,8 @@
function productPurchaseDone() { function productPurchaseDone() {
console.log("productPurchaseDone") console.log("productPurchaseDone")
const container = document.getElementById("purchase-container");
container.classList.add("d-none")
} }
function wsConnect() { function wsConnect() {
@ -150,7 +172,7 @@
renderGameDump(wsMessage.data); renderGameDump(wsMessage.data);
break; break;
case "product_purchase_start": case "product_purchase_start":
productPurchaseStart(wsMessage.data) productPurchaseStart(wsMessage.data.products)
break; break;
case "product_purchased": case "product_purchased":
productPurchased(wsMessage.data) productPurchased(wsMessage.data)
@ -177,6 +199,40 @@
window.onload = () => { window.onload = () => {
wsConnect(); 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> </script>

37
frontend/styles.css
View File

@ -2,6 +2,10 @@ body {
background-color: whitesmoke; background-color: whitesmoke;
} }
main.container {
position: relative;
}
.board-container { .board-container {
background-color: white; background-color: white;
border: 1px solid black; border: 1px solid black;
@ -40,7 +44,6 @@ ul.players {
color: white; color: white;
background-color: darkred; background-color: darkred;
border-radius: 5px; border-radius: 5px;
z-index: 1000;
} }
.player-tooltip::after { .player-tooltip::after {
@ -53,3 +56,35 @@ ul.players {
border-style: solid; border-style: solid;
border-color: darkred transparent transparent transparent; 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;
}

4
hopper/models/product.py
View File

@ -1,8 +1,10 @@
from dataclasses import dataclass, field
import uuid import uuid
from dataclasses import dataclass, field
from typing import Optional
@dataclass @dataclass
class Product: class Product:
name: str name: str
uuid: str = field(default_factory=lambda: str(uuid.uuid4())) uuid: str = field(default_factory=lambda: str(uuid.uuid4()))
description: Optional[str] = None

2
hopper/models/ws_dto.py
View File

@ -8,7 +8,6 @@ from pydantic.generics import GenericModel
from hopper.api.dto import BaseModel, BoardDto, DestinationDto, PlayerDto, PositionDto from hopper.api.dto import BaseModel, BoardDto, DestinationDto, PlayerDto, PositionDto
from hopper.enums import ObjectType from hopper.enums import ObjectType
from hopper.models.product import Product
class LayerObjectDto(BaseModel): class LayerObjectDto(BaseModel):
@ -24,6 +23,7 @@ class LayerDto(BaseModel):
class ProductDto(BaseModel): class ProductDto(BaseModel):
name: str name: str
uuid: str uuid: str
description: Optional[str] = None
class GameDumpPlayerDto(PlayerDto): class GameDumpPlayerDto(PlayerDto):