Endgame WS messages & docs

README.md

@@ -170,11 +170,11 @@ package Masterpiece #seashell {
         usecase Game as "Game Engine"
         usecase WS as "WS Server"
     }
-    usecase Vis as "Visualisation\nService"
+    usecase Vis as "Flutter\nVisualisation\nService"
 }
 
-usecase ExtVis1 as "Visualisation\nService"
-usecase ExtVis2 as "Visualisation\nService"
+usecase ExtVis1 as "Visualisation\nClient"
+usecase ExtVis2 as "Visualisation\nClient"
 
 P1 -left-> API: REST API
 P2 -left-> API: REST API
@@ -204,41 +204,58 @@ Game ->o WS: Send initial state
 Client1 ->o WS: Client connect
 activate WS #coral
 	WS -> Client1: Game state
-deactivate
+deactivate WS
 
 Client2 ->o WS: Client connect
 activate WS #coral
 	WS -> Client2: Game state
-deactivate
+deactivate WS
 
 loop #lightyellow On game state change
     Game ->o WS: Game state
     activate WS #coral
         WS o-> Client1: Game state
         WS o-> Client2: Game state
-    deactivate
+    deactivate WS
 end
 
-== Product purchase mode ==
+== Player reached destination ==
 
-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
+Game -> Game: Lock game for other players
+activate Game
+  Game -> WS: Player reached destination
   activate WS #coral
-        WS o-> Client1: Purchase time left
-        WS o-> Client2: Purchase time left
-    deactivate
+    WS o-> Client1: Select product
+    WS o-> Client2: Select product
+  deactivate WS
+deactivate Game
+
+loop #lightyellow Product select countdown timer (60s)
+	Game ->o WS: Timer timeout
+  activate Game
+    activate WS #coral
+      WS o-> Client1: Selection timeout
+      WS o-> Client2: Selection timeout
+    deactivate WS
+    Game -> Game: Unlock game
+  deactivate Game
 end
-Game -> WS: Purchase done
+
+Client1 -> WS: Product selected
 activate WS #coral
-	WS o-> Client1: Purchase done
-	WS o-> Client2: Purchase done
-deactivate
+	WS o-> Game: Product selected
+    activate Game
+	WS o-> Client2: Product selected
+deactivate WS
+
+
+Game -> Game: Unlock game
+    Game -> WS: Game state
+    activate WS #coral
+        WS o-> Client1: Game state
+        WS o-> Client2: Game state
+    deactivate WS
+deactivate Game
 ```
 
 
@@ -383,6 +400,8 @@ Response body:
 
 ### Game state structure
 
+Direction: Game server -> Clients
+
 Message: `game_dump`
 
 Data:
@@ -486,109 +505,42 @@ Data:
 }
 ```
 
-### Product purchase start
+### Player reached destination
 
-Message: `product_purchase_start`
+Direction: Game server -> Clients
+
+Message: `player_reached_destination`
 
 Data:
 ```json
 {
   "player": {
-    "id": "test-player-pero",
-    "name": "Pero",
+    "id": "2e0f1a50-eaa6-4efd-b0c3-adbf7000eec2",
+    "name": "Joso",
     "active": true,
     "position": {
-      "x": 10,
-      "y": 10
+      "x": 5,
+      "y": 5
     },
-    "move_count": 1,
-    "move_attempt_count": 1,
-    "state": "ON_DESTINATION"
-  },
-  "products": [
-    {
-      "name": "CocaCola",
-      "id": "cocacola-id",
-      "description": null
-    },
-    {
-      "name": "Pepsi",
-      "id": "pepsi-id",
-      "description": null
-    },
-    {
-      "name": "Fanta",
-      "id": "fanta-id",
-      "description": null
-    },
-    {
-      "name": "Snickers",
-      "id": "snickers-id",
-      "description": null
-    },
-    {
-      "name": "Mars",
-      "id": "mars-id",
-      "description": null
-    },
-    {
-      "name": "Burek",
-      "id": "burek-id",
-      "description": null
-    }
-  ],
-  "timeout": 5
-}
-```
-
-### Product purchase timer tick
-
-Message: `product_purchase_timer_tick`
-
-Data:
-```json
-{
-  "time_left": 4,
-  "player": {
-    "id": "test-player-pero",
-    "name": "Pero",
-    "active": true,
-    "position": {
-      "x": 10,
-      "y": 10
-    },
-    "move_count": 1,
-    "move_attempt_count": 1,
+    "move_count": 6,
+    "move_attempt_count": 6,
     "state": "ON_DESTINATION"
   }
 }
 ```
 
-### Product purchase timer done
+### Product selection timeout
 
-Message: `product_purchase_done`
+Direction: Game server -> Clients
 
-Data:
-```json
-{
-  "player": {
-    "id": "test-player-pero",
-    "name": "Pero",
-    "active": true,
-    "position": {
-      "x": 10,
-      "y": 10
-    },
-    "move_count": 1,
-    "move_attempt_count": 1,
-    "state": "ON_DESTINATION"
-  },
-  "product": {
-    "name": "CocaCola",
-    "id": "cocacola-id",
-    "description": null
-  }
-}
-```
+Message: `product_selection_timeout`
 
-If product selection timeout occured, product will be null.
+Data: `null`
+
+### Product selection done
+
+Message: `product_selection_done`
+
+Direction: Client -> Game server, Game server -> Clients
+
+Data: `null`

frontend/index.html

@@ -8,7 +8,9 @@
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
         integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
     <link rel="stylesheet" href="styles.css">
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js" integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V" crossorigin="anonymous"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"
+        integrity="sha384-cuYeSxntonz0PPNlHhBs68uyIAVpIIOZZ5JqeqvYYIcEL727kskC66kF92t6Xl2V"
+        crossorigin="anonymous"></script>
     <script src="js/config.js"></script>
     <script src="js/frontend.js"></script>
 
@@ -20,9 +22,6 @@
         <h1 class="mt-1 mb-2">
             FairHopper Visualisation Client
         </h1>
-        <button type="button" class="btn btn-primary test-button">
-          Launch demo modal
-        </button>
         <div id="purchase-container" class="purchase-container d-none">
             <div class="d-flex header">
                 <h3>
@@ -59,25 +58,13 @@
                     moves.
                 </div>
                 <div class="modal-footer">
-                    <button type="button" class="btn btn-primary">
+                    <button type="button" class="btn btn-primary" id="finish-product-selection" data-bs-dismiss="modal">
                         Finish product selection
                     </button>
                 </div>
             </div>
         </div>
     </div>
-
-    <script>
-        document.querySelector(".test-button").onclick = () => {
-            playerReachedDestination({
-                player: {
-                    name: "Pero Perić",
-                    move_count: 123,
-                }
-            });
-        }
-    </script>
-
 </body>
 
 </html>

frontend/js/frontend.js

@@ -2,6 +2,9 @@ if (typeof FAIRHOPPER_WS_SERVER === "undefined") {
     var FAIRHOPPER_WS_SERVER = "ws://127.0.0.1:8011";
 }
 
+let ws = null;
+let playerOnDestinationModal = null;
+
 const BOARD_ICONS = {
     PLAYER: "😀",
     PLAYER_ON_DESTINATION: "😎",
@@ -87,8 +90,6 @@ function renderDestination(position) {
 }
 
 function renderGameDump(data) {
-    closePurchaseWindow();
-
     createBoard(data.board);
     renderObstacles(data.layers);
     renderDestination(data.destination.position);
@@ -97,56 +98,23 @@ function renderGameDump(data) {
 }
 
 function playerReachedDestination(data) {
-    console.log(data);
-
     const dlgElement = document.getElementById("player-on-destination-modal");
     dlgElement.querySelector(".player-name").textContent = data.player.name;
     dlgElement.querySelector(".move-count").textContent = data.player.move_count;
-
-    const modal = new bootstrap.Modal(dlgElement);
-    modal.show();
+    playerOnDestinationModal.show();
 }
 
-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");
-
-    contentElement.innerHTML = products
-        .map((product) => {
-            return `
-                <div class="card product" id="product-${product.id}">
-                    <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("");
-    containerElement.classList.remove("d-none");
-    purchaseTimeoutElement.innerText = purchaseTimeout;
+function productSelectionTimeout() {
+    playerOnDestinationModal.hide();
 }
 
-function productPurchaseTimerTick(timeLeft) {
-    const purchaseTimeoutElement = document.getElementById("purchase-countdown");
-    purchaseTimeoutElement.innerText = timeLeft;
-}
-
-function closePurchaseWindow() {
-    const container = document.getElementById("purchase-container");
-    container.classList.add("d-none");
-}
-
-function productPurchaseDone(product) {
-    const cardContainer = document.getElementById(`product-${product.id}`);
-    cardContainer.classList.add("selected");
+function productSelectionDone() {
+    playerOnDestinationModal.hide();
 }
 
 function wsConnect() {
     console.log("Attempting to connect to", FAIRHOPPER_WS_SERVER);
-    let ws = new WebSocket(FAIRHOPPER_WS_SERVER);
+    ws = new WebSocket(FAIRHOPPER_WS_SERVER);
 
     ws.onopen = () => {
         console.log("WS connected");
@@ -160,17 +128,14 @@ function wsConnect() {
             case "game_dump":
                 renderGameDump(wsMessage.data);
                 break;
-            case "player_on_destination":
+            case "player_reached_destination":
                 playerReachedDestination(wsMessage.data);
                 break;
-            case "product_purchase_start":
-                productPurchaseStart(wsMessage.data.products, wsMessage.data.timeout);
+            case "product_selection_timeout":
+                productSelectionTimeout();
                 break;
-            case "product_purchase_timer_tick":
-                productPurchaseTimerTick(wsMessage.data.time_left);
-                break;
-            case "product_purchase_done":
-                productPurchaseDone(wsMessage.data.product);
+            case "product_selection_done":
+                productSelectionDone();
                 break;
             default:
                 console.error("Unknown message:", wsMessage);
@@ -178,6 +143,7 @@ function wsConnect() {
     };
 
     ws.onclose = (e) => {
+        ws = null;
         setTimeout(() => {
             wsConnect();
         }, 1000);
@@ -189,6 +155,24 @@ function wsConnect() {
     };
 }
 
+function finishProductSelection() {
+    if (!ws) {
+        return;
+    }
+    const wsMessage = {
+        message: "product_selection_done",
+        data: null,
+    };
+    ws.send(JSON.stringify(wsMessage));
+}
+
 window.onload = () => {
+    const dlgElement = document.getElementById("player-on-destination-modal");
+    playerOnDestinationModal = new bootstrap.Modal(dlgElement);
+
+    document.getElementById("finish-product-selection").onclick = () => {
+        finishProductSelection();
+    };
+
     wsConnect();
 };

hopper/engine.py

@@ -5,11 +5,7 @@ from typing import Optional
 
 from hopper.countdown_timer import CountdownTimer
 from hopper.enums import Direction, GameState, PlayerMoveResult, PlayerState
-from hopper.errors import (
-    Collision,
-    GameLockForMovement,
-    PositionOutOfBounds,
-)
+from hopper.errors import Collision, GameLockForMovement, PositionOutOfBounds
 from hopper.models.board import (
     BOARD_DUMP_CHARS,
     BoardLayout,
@@ -179,24 +175,17 @@ class GameEngine:
         await self.ws_server.send_player_reached_destination_message(player=player)
 
         logging.info(
-            f"Starting purchase countdown timer for {settings.purchase_timeout} seconds"
+            f"Starting product selection countdown timer for {settings.purchase_timeout} seconds"
         )
 
         def on_purchase_timer_tick(time_left) -> None:
-            logging.info(f"Purchase countdown timer tick, time left: {time_left}")
-            asyncio.run(
-                self.ws_server.send_product_purchase_time_left_message(
-                    player=player, time_left=time_left
-                )
-            )
+            logging.info(f"Product selection countdown timer tick, time left: {time_left}")
 
         def on_purchase_timer_done() -> None:
-            logging.info("Ding ding! Purchase countdown timer timeout")
+            logging.info("Ding ding! Product selection countdown timer timeout")
             self._purchase_countdown_timer = None
             asyncio.run(
-                self.ws_server.send_product_purchase_done_message(
-                    player=player, product=None
-                )
+                self.ws_server.send_product_selection_timeout_message()
             )
             self.game_state = GameState.RUNNING
             asyncio.run(self.send_game_dump())
@@ -210,16 +199,12 @@ class GameEngine:
 
         await asyncio.sleep(settings.game.PURCHASE_START_DELAY)
 
-    # async def purchase_product(self, player: Player, product: Product) -> None:
-    #     if not player.state == PlayerState.ON_DESTINATION:
-    #         raise PurchaseForbiddenForPlayer()
-    #     if self._purchase_countdown_timer:
-    #         self._purchase_countdown_timer.stop()
-    #     await self.ws_server.send_product_purchase_done_message(
-    #         player=player, product=product
-    #     )
-    #     await asyncio.sleep(settings.game.PURCHASE_FINISHED_DELAY)
-    #     await self.reset_game()
+    async def product_selection_done(self) -> None:
+        logging.info("Product selection done, unlocking game")
+        if self._purchase_countdown_timer:
+            self._purchase_countdown_timer.stop()
+        await self.ws_server.send_product_selection_done_message()
+        await self.reset_game()
 
     def _reset_player(self, player) -> None:
         # move player to start position

hopper/models/config.py

@@ -10,7 +10,6 @@ from hopper.models.product import Product
 class GameSettings:
     MOVE_DELAY: float = 0.5  # seconds
     PURCHASE_START_DELAY: float = 2  # seconds
-    PURCHASE_FINISHED_DELAY: float = 2  # seconds
 
 
 @dataclass

hopper/models/ws_dto.py

@@ -6,13 +6,7 @@ from typing import Optional, TypeVar
 from pydantic import Field
 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
 
 
@@ -33,11 +27,6 @@ class GameDumpDto(BaseModel):
     layers: list[LayerDto]
 
 
-class ProductPurchaseTimerDto(BaseModel):
-    time_left: int
-    player: PlayerDto
-
-
 class PlayerReachedDestinationDto(BaseModel):
     player: PlayerDto
 
@@ -55,19 +44,23 @@ class WSMessage(GenericModel):
     def to_str(self) -> str:
         return json.dumps(self.dict())
 
+    @classmethod
+    @property
+    def message_type(cls) -> str:
+        return cls.__fields__["message"].default
+
 
 class WSGameDumpMessage(WSMessage):
     message: str = "game_dump"
     data: GameDumpDto
 
 
-class WSProductPurchaseTimerTickMessage(WSMessage):
-    message: str = "product_purchase_timer_tick"
-    data: ProductPurchaseTimerDto
+class WSProductSelectionDoneMessage(WSMessage):
+    message: str = "product_selection_done"
 
 
-class WSProductPurchaseDoneMessage(WSMessage):
-    message: str = "product_purchase_done"
+class WSProductSelectionTimeoutMessage(WSMessage):
+    message: str = "product_selection_timeout"
 
 
 class WSPlayerReachedDestinationMessage(WSMessage):

hopper/ws_server.py

@@ -1,22 +1,21 @@
 import asyncio
+import json
 import logging
 from threading import Thread
-from typing import Iterable, Optional
 
 import websockets
 from websockets import WebSocketServerProtocol
 from websockets.exceptions import ConnectionClosedError, ConnectionClosedOK
 
 from hopper.models.player import Player
-from hopper.models.product import Product
 from hopper.models.ws_dto import (
     GameDumpDto,
     PlayerReachedDestinationDto,
-    ProductPurchaseTimerDto,
     WSGameDumpMessage,
     WSMessage,
     WSPlayerReachedDestinationMessage,
-    WSProductPurchaseTimerTickMessage,
+    WSProductSelectionDoneMessage,
+    WSProductSelectionTimeoutMessage,
 )
 
 
@@ -26,6 +25,31 @@ class WSServer(Thread):
         self.port = port
         super().__init__(daemon=True)
 
+    async def handle_rcv_message(
+        self, client: WebSocketServerProtocol, raw_message: str
+    ) -> None:
+        try:
+            ws_message = json.loads(raw_message)
+        except Exception as ex:
+            logging.error(
+                f"Error decoding WS message from {client.id} {raw_message}: {ex}"
+            )
+            return None
+
+        data_message = ws_message.get("message")
+        if data_message == WSProductSelectionDoneMessage.message_type:
+            await self.handle_rcv_product_selection_done(client)
+
+    async def handle_rcv_product_selection_done(
+        self, client: WebSocketServerProtocol
+    ) -> None:
+        logging.info(f"Handle WSProductSelectionDoneMessage: {client.id}")
+        # avoid circular imports
+        from hopper.api.dependencies import get_game_engine
+
+        engine = get_game_engine()
+        await engine.product_selection_done()
+
     async def handler(self, websocket: WebSocketServerProtocol) -> None:
         """New handler instance spawns for each connected client"""
         self.connected_clients.add(websocket)
@@ -39,7 +63,10 @@ class WSServer(Thread):
             while connected:
                 try:
                     # we're expecting nothing from client, but read if client sends a message
-                    await websocket.recv()
+                    rcv_data = await websocket.recv()
+                    await self.handle_rcv_message(
+                        client=websocket, raw_message=rcv_data
+                    )
                 except ConnectionClosedOK:
                     logging.info(f"Connection closed OK for client: {websocket.id}")
                     connected = False
@@ -98,25 +125,13 @@ class WSServer(Thread):
         )
         await self.send_message_to_clients(message)
 
-    async def send_product_purchase_time_left_message(
-        self, player: Player, time_left: int
-    ) -> None:
-        message = WSProductPurchaseTimerTickMessage(
-            data=ProductPurchaseTimerDto(
-                player=player,
-                time_left=time_left,
-            )
-        )
+    async def send_product_selection_done_message(self) -> None:
+        message = WSProductSelectionDoneMessage()
         await self.send_message_to_clients(message)
 
-    async def send_product_purchase_done_message(
-        self, player: Player, product: Optional[Product] = None
-    ) -> None:
-        # message = WSProductPurchaseDoneMessage(
-        #     data=ProductPurchaseDoneDto(player=player, product=product),
-        # )
-        # await self.send_message_to_clients(message)
-        ...
+    async def send_product_selection_timeout_message(self) -> None:
+        message = WSProductSelectionTimeoutMessage()
+        await self.send_message_to_clients(message)
 
     async def run_async(self) -> None:
         logging.info(