diff --git a/frontend/img/products/Burek.jpeg b/frontend/img/products/Burek.jpeg new file mode 100644 index 0000000..9a6f2f8 Binary files /dev/null and b/frontend/img/products/Burek.jpeg differ diff --git a/frontend/img/products/CocaCola.jpeg b/frontend/img/products/CocaCola.jpeg new file mode 100644 index 0000000..e0b85dc Binary files /dev/null and b/frontend/img/products/CocaCola.jpeg differ diff --git a/frontend/img/products/Fanta.jpeg b/frontend/img/products/Fanta.jpeg new file mode 100644 index 0000000..474aec5 Binary files /dev/null and b/frontend/img/products/Fanta.jpeg differ diff --git a/frontend/img/products/Mars.jpeg b/frontend/img/products/Mars.jpeg new file mode 100644 index 0000000..843565f Binary files /dev/null and b/frontend/img/products/Mars.jpeg differ diff --git a/frontend/img/products/Pepsi.jpeg b/frontend/img/products/Pepsi.jpeg new file mode 100644 index 0000000..1a2df54 Binary files /dev/null and b/frontend/img/products/Pepsi.jpeg differ diff --git a/frontend/img/products/Snickers.jpeg b/frontend/img/products/Snickers.jpeg new file mode 100644 index 0000000..ce6884e Binary files /dev/null and b/frontend/img/products/Snickers.jpeg differ diff --git a/frontend/index.html b/frontend/index.html index c0e4105..0815d7a 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -13,10 +13,14 @@ -
+

FairHopper Visualisation Client

+
+

Product selection

+
+
@@ -30,7 +34,7 @@
    -
    +
    diff --git a/frontend/styles.css b/frontend/styles.css index 2606587..6b0a649 100644 --- a/frontend/styles.css +++ b/frontend/styles.css @@ -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; +} diff --git a/hopper/models/product.py b/hopper/models/product.py index 1dcd976..3939a4d 100644 --- a/hopper/models/product.py +++ b/hopper/models/product.py @@ -1,8 +1,10 @@ -from dataclasses import dataclass, field import uuid +from dataclasses import dataclass, field +from typing import Optional @dataclass class Product: name: str uuid: str = field(default_factory=lambda: str(uuid.uuid4())) + description: Optional[str] = None diff --git a/hopper/models/ws_dto.py b/hopper/models/ws_dto.py index fe2348a..bbb8e8d 100644 --- a/hopper/models/ws_dto.py +++ b/hopper/models/ws_dto.py @@ -8,7 +8,6 @@ from pydantic.generics import GenericModel from hopper.api.dto import BaseModel, BoardDto, DestinationDto, PlayerDto, PositionDto from hopper.enums import ObjectType -from hopper.models.product import Product class LayerObjectDto(BaseModel): @@ -24,6 +23,7 @@ class LayerDto(BaseModel): class ProductDto(BaseModel): name: str uuid: str + description: Optional[str] = None class GameDumpPlayerDto(PlayerDto):