Optimizations

frontend/index.html

@@ -8,6 +8,7 @@
     <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="js/frontend.js"></script>
 
     <title>FairHopper Visualisation Client</title>
 </head>
@@ -42,179 +43,4 @@
     </main>
 </body>
 
-<script>
-    const BOARD_ICONS = {
-        PLAYER: "😀",
-        PLAYER_ON_DESTINATION: "😎",
-        OBSTACLE: "🔥",
-        DESTINATION: "🏠",
-    };
-
-    function createBoard(board) {
-        let html = "";
-        for (let y = 0; y < board.height; y++) {
-            let colHtml = "";
-            for (let x = 0; x < board.width; x++) {
-                colHtml += `<div class="cell" id="cell-${x}-${y}">&nbsp;</div>`;
-            }
-            html += `
-                <div class="flex-grid">
-                    ${colHtml}
-                </div>
-            `;
-        }
-        document.getElementById("board-content").innerHTML = html;
-    }
-
-    function findCell(position) {
-        return document.getElementById(`cell-${position.x}-${position.y}`);
-    }
-
-    function renderCellContent(position, content) {
-        const cell = findCell(position);
-        if (cell) {
-            cell.innerText = content;
-        }
-    }
-
-    function renderPlayerList(players) {
-        const html = players.filter(player => player.active).map((player) => {
-            const onDestination = player.state == "ON_DESTINATION";
-            return `
-                <li class="${onDestination ? "text-success" : ""}">
-                    ${player.name} (${player.move_count})
-                    ${onDestination ? "✅" : ""}
-                </li>
-            `;
-        }).join("");
-        document.getElementById("players-content").innerHTML = html;
-    }
-
-    function renderPlayers(players) {
-        players.filter(player => player.active).forEach(player => {
-            const cell = findCell(player.position);
-            const onDestination = player.state == "ON_DESTINATION";
-            const playerIcon = onDestination ? BOARD_ICONS.PLAYER_ON_DESTINATION : BOARD_ICONS.PLAYER;
-            if (cell) {
-                const html = `
-                    <div class="player-tooltip">${player.name}</div>
-                    ${playerIcon}
-                `;
-                cell.innerHTML = html;
-            }
-        });
-    }
-
-    function getLayerObjectsOfType(layers, type) {
-        let objects = [];
-        layers.forEach(layer => {
-            objects = objects.concat(layer.objects.filter(obj => obj.type === type))
-        });
-        return objects;
-    }
-
-    function renderObstacles(layers) {
-        const objects = getLayerObjectsOfType(layers, "OBSTACLE");
-        objects.forEach(obj => {
-            renderCellContent(obj.position, BOARD_ICONS.OBSTACLE);
-        });
-    }
-
-    function renderDestination(position) {
-        renderCellContent(position, BOARD_ICONS.DESTINATION);
-    }
-
-    function renderGameDump(data) {
-        createBoard(data.board);
-        renderObstacles(data.layers)
-        renderDestination(data.destination.position);
-        renderPlayerList(data.players);
-        renderPlayers(data.players);
-    }
-
-    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 `
-                <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")
-        purchaseTimeoutElement.innerText = purchaseTimeout;
-    }
-
-    function productPurchaseTimerTick(timeLeft) {
-        const purchaseTimeoutElement = document.getElementById("purchase-countdown");
-        purchaseTimeoutElement.innerText = timeLeft;
-    }
-
-    function productPurchased(product) {
-        console.log("productPurchased:", product)
-    }
-
-    function productPurchaseDone() {
-        console.log("productPurchaseDone")
-        const container = document.getElementById("purchase-container");
-        container.classList.add("d-none")
-    }
-
-    function wsConnect() {
-        let ws = new WebSocket('ws://localhost:8011');
-        ws.onopen = () => {
-            console.log("WS connected")
-        };
-
-        ws.onmessage = (e) => {
-            const wsMessage = JSON.parse(e.data);
-            console.log("WS message received:", wsMessage)
-
-            switch (wsMessage.message) {
-                case "game_dump":
-                    renderGameDump(wsMessage.data);
-                    break;
-                case "product_purchase_start":
-                    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)
-                    break;
-                case "product_purchase_done":
-                    productPurchaseDone()
-                    break;
-                default:
-                    console.error("Unknown message:", wsMessage)
-            }
-        };
-
-        ws.onclose = (e) => {
-            setTimeout(function () {
-                wsConnect();
-            }, 1000);
-        };
-
-        ws.onerror = (err) => {
-            console.error("Socket encountered error:", err.message, "Closing socket");
-            ws.close();
-        };
-    }
-
-    window.onload = () => {
-        wsConnect();
-    }
-</script>
-
 </html>

frontend/js/frontend.js

@@ -0,0 +1,179 @@
+const BOARD_ICONS = {
+    PLAYER: "😀",
+    PLAYER_ON_DESTINATION: "😎",
+    OBSTACLE: "🔥",
+    DESTINATION: "🏠",
+};
+
+function createBoard(board) {
+    let html = "";
+    for (let y = 0; y < board.height; y++) {
+        let colHtml = "";
+        for (let x = 0; x < board.width; x++) {
+            colHtml += `<div class="cell" id="cell-${x}-${y}">&nbsp;</div>`;
+        }
+        html += `
+                <div class="flex-grid">
+                    ${colHtml}
+                </div>
+            `;
+    }
+    document.getElementById("board-content").innerHTML = html;
+}
+
+function findCell(position) {
+    return document.getElementById(`cell-${position.x}-${position.y}`);
+}
+
+function renderCellContent(position, content) {
+    const cell = findCell(position);
+    if (cell) {
+        cell.innerText = content;
+    }
+}
+
+function renderPlayerList(players) {
+    const html = players
+        .filter((player) => player.active)
+        .map((player) => {
+            const onDestination = player.state == "ON_DESTINATION";
+            return `
+                <li class="${onDestination ? "text-success" : ""}">
+                    ${player.name} (${player.move_count})
+                    ${onDestination ? "✅" : ""}
+                </li>
+            `;
+        })
+        .join("");
+    document.getElementById("players-content").innerHTML = html;
+}
+
+function renderPlayers(players) {
+    players
+        .filter((player) => player.active)
+        .forEach((player) => {
+            const cell = findCell(player.position);
+            const onDestination = player.state == "ON_DESTINATION";
+            const playerIcon = onDestination ? BOARD_ICONS.PLAYER_ON_DESTINATION : BOARD_ICONS.PLAYER;
+            if (cell) {
+                const html = `
+                    <div class="player-tooltip">${player.name}</div>
+                    ${playerIcon}
+                `;
+                cell.innerHTML = html;
+            }
+        });
+}
+
+function getLayerObjectsOfType(layers, type) {
+    let objects = [];
+    layers.forEach((layer) => {
+        objects = objects.concat(layer.objects.filter((obj) => obj.type === type));
+    });
+    return objects;
+}
+
+function renderObstacles(layers) {
+    const objects = getLayerObjectsOfType(layers, "OBSTACLE");
+    objects.forEach((obj) => {
+        renderCellContent(obj.position, BOARD_ICONS.OBSTACLE);
+    });
+}
+
+function renderDestination(position) {
+    renderCellContent(position, BOARD_ICONS.DESTINATION);
+}
+
+function renderGameDump(data) {
+    createBoard(data.board);
+    renderObstacles(data.layers);
+    renderDestination(data.destination.position);
+    renderPlayerList(data.players);
+    renderPlayers(data.players);
+}
+
+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 `
+                <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");
+    purchaseTimeoutElement.innerText = purchaseTimeout;
+}
+
+function productPurchaseTimerTick(timeLeft) {
+    const purchaseTimeoutElement = document.getElementById("purchase-countdown");
+    purchaseTimeoutElement.innerText = timeLeft;
+}
+
+function productPurchased(product) {
+    console.log("productPurchased:", product);
+}
+
+function productPurchaseDone() {
+    console.log("productPurchaseDone");
+    const container = document.getElementById("purchase-container");
+    container.classList.add("d-none");
+}
+
+function wsConnect() {
+    let ws = new WebSocket("ws://localhost:8011");
+    ws.onopen = () => {
+        console.log("WS connected");
+    };
+
+    ws.onmessage = (e) => {
+        const wsMessage = JSON.parse(e.data);
+        console.log("WS message received:", wsMessage);
+
+        switch (wsMessage.message) {
+            case "game_dump":
+                renderGameDump(wsMessage.data);
+                break;
+            case "product_purchase_start":
+                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);
+                break;
+            case "product_purchase_done":
+                productPurchaseDone();
+                break;
+            default:
+                console.error("Unknown message:", wsMessage);
+        }
+    };
+
+    ws.onclose = (e) => {
+        setTimeout(function () {
+            wsConnect();
+        }, 1000);
+    };
+
+    ws.onerror = (err) => {
+        console.error("Socket encountered error:", err.message, "Closing socket");
+        ws.close();
+    };
+}
+
+window.onload = () => {
+    wsConnect();
+};

hopper/engine.py

@@ -22,6 +22,22 @@ from hopper.ws_server import WSServer
 from settings import settings
 
 
+def create_player_start_position(board_width: int, board_height: int) -> Position:
+    """Create random position somewhere on the board border"""
+    border_len = (board_width + board_height) * 2
+    rnd_position = random.randint(0, border_len - 1)
+
+    if rnd_position < board_width * 2:
+        x = rnd_position % board_width
+        y = 0 if rnd_position < board_width else board_height - 1
+    else:
+        rnd_position -= 2 * board_width
+        x = 0 if rnd_position < board_height else board_width - 1
+        y = rnd_position % board_height
+
+    return Position(x=x, y=y)
+
+
 class GameEngine:
     def __init__(self, board: GameBoard, ws_server: WSServer = None) -> None:
         self.board = board
@@ -29,7 +45,8 @@ class GameEngine:
         self.players = PlayerList()
         self._inacivity_watchdog = None
         self._purchase_countdown_timer: Optional[CountdownTimer] = None
-        self.reset_game()
+        self.game_state = GameState.RUNNING
+        self.__debug_print_board()
 
     def dump_board(self) -> list[list[str]]:
         dump = self.board.dump()
@@ -61,6 +78,10 @@ class GameEngine:
             )
             self._inacivity_watchdog.start()
 
+    async def send_game_dump(self):
+        self.__debug_print_board()
+        await self.ws_server.send_game_dump()
+
     def reset_game(self) -> None:
         self.__debug_print_board()
         self.game_state = GameState.RUNNING
@@ -69,7 +90,7 @@ class GameEngine:
         self._start_inactivity_watchdog()
         player = Player(
             name=player_name,
-            position=self._create_player_start_position(),
+            position=create_player_start_position(self.board.width, self.board.height),
             state=PlayerState.CREATED,
         )
         self.players.append(player)
@@ -77,32 +98,15 @@ class GameEngine:
         logging.info(f"Starting new game for player: {player}")
         self.__debug_print_board()
 
-        if self.ws_server:
+        await self.send_game_dump()
-            await self.ws_server.send_game_dump()
 
         #!!!!!!!!!!!!!!!
         await self._player_on_destination(player)
         #!!!!!!!!!!!!!!!
 
         await asyncio.sleep(settings.game.MOVE_DELAY)
-
         return player
 
-    def _create_player_start_position(self) -> Position:
-        """Create random position somewhere on the board border"""
-        border_len = (self.board.width + self.board.height) * 2
-        rnd_position = random.randint(0, border_len - 1)
-
-        if rnd_position < self.board.width * 2:
-            x = rnd_position % self.board.width
-            y = 0 if rnd_position < self.board.width else self.board.height - 1
-        else:
-            rnd_position -= 2 * self.board.width
-            x = 0 if rnd_position < self.board.height else self.board.width - 1
-            y = rnd_position % self.board.height
-
-        return Position(x=x, y=y)
-
     def _move_position(self, position: Position, direction: Direction) -> Position:
         new_position = Position(position.x, position.y)
         if direction == Direction.LEFT:
@@ -149,10 +153,8 @@ class GameEngine:
             await self._player_on_destination(player)
             return PlayerMoveResult.DESTINATION_REACHED
 
-        if self.ws_server:
+        await self.send_game_dump()
-            await self.ws_server.send_game_dump()
 
-        self.__debug_print_board()
         await asyncio.sleep(settings.game.MOVE_DELAY)
         return PlayerMoveResult.OK
 
@@ -171,8 +173,7 @@ class GameEngine:
         logging.info(f"Player {player} reached destination!")
 
         self.game_state = GameState.LOCK_FOR_MOVEMENT
-        await self.ws_server.send_game_dump()
+        await self.send_game_dump()
-        self.__debug_print_board()
 
         await self.ws_server.send_product_purchase_start_message(
             player=player, products=settings.products
@@ -183,6 +184,7 @@ class GameEngine:
         )
 
         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
@@ -198,6 +200,7 @@ class GameEngine:
                 )
             )
             self.game_state = GameState.RUNNING
+            asyncio.run(self.send_game_dump())
 
         self._purchase_countdown_timer = CountdownTimer(
             seconds=settings.purchase_timeout,
@@ -206,6 +209,12 @@ class GameEngine:
         )
         self._purchase_countdown_timer.start()
 
+    def _reset_player(self, player) -> None:
+        # move player to start position
+        player.position = create_player_start_position(self.board.width, self.board.height)
+        player.state = PlayerState.CREATED
+        player.last_seen = None
+
     def get_board_layout(self) -> BoardLayout:
         return BoardLayout(board=self.board, players=self.players)