diff --git a/README.md b/README.md
index b2b8085..2261ef2 100644
--- a/README.md
+++ b/README.md
@@ -100,6 +100,7 @@ WebSockets server runs on port **8011**. To run WS Server on different port, edi
### Architecture
```plantuml
+scale 1024 width
actor "Player 1" as P1
actor "Player 2" as P2
actor "Player 3" as P3
@@ -129,6 +130,7 @@ WS --> ExtVis2: WS Game State
### WebSockets
```plantuml
+scale 1024 width
box "FairHopper Game Server" #lightcyan
participant Game as "Game Engine"
participant WS as "WS Server"
@@ -136,6 +138,8 @@ endbox
participant Client1 as "Visualisation\nClient 1"
participant Client2 as "Visualisation\nClient 2"
+== Player movement mode ==
+
Game ->o WS: Send initial state
Client1 ->o WS: Client connect
@@ -155,6 +159,27 @@ loop #lightyellow On game state change
WS o-> Client2: Game state
deactivate
end
+
+== Product purchase mode ==
+
+Game -> WS: Purchase start
+activate WS #coral
+ WS o-> Client1: Purchase start
+ WS o-> Client2: Purchase start
+deactivate
+
+loop #lightyellow Purchase countdown timer
+ Game ->o WS: Timer count down
+ activate WS #coral
+ WS o-> Client1: Purchase time left
+ WS o-> Client2: Purchase time left
+ deactivate
+end
+Game -> WS: Purchase done
+activate WS #coral
+ WS o-> Client1: Purchase done
+ WS o-> Client2: Purchase done
+deactivate
```
diff --git a/frontend/index.html b/frontend/index.html
index 0815d7a..53da497 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -18,7 +18,12 @@
FairHopper Visualisation Client
@@ -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
- }
- ])
-
}
-