Frontend
This commit is contained in:
Eden Kirin
@ -63,12 +63,6 @@ To activate virtual environment:
|
||||
poetry shell
|
||||
```
|
||||
|
||||
### Starting WebSockets Server
|
||||
|
||||
```sh
|
||||
make run-ws
|
||||
```
|
||||
|
||||
WebSockets server runs on port **8011**. To run WS Server on different port, edit `settings.py` configuration.
|
||||
|
||||
|
||||
|
||||
120
frontend/index.html
Normal file
120
frontend/index.html
Normal file
@ -0,0 +1,120 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container-fluid">
|
||||
<h1>FairHopper WS Client</h1>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<div class="board-container">
|
||||
<div id="board-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<h3>Players</h3>
|
||||
<ul id="players-content"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<script>
|
||||
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}"> </div>`;
|
||||
}
|
||||
html += `
|
||||
<div class="flex-grid">
|
||||
${colHtml}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
document.getElementById("board-content").innerHTML = html;
|
||||
}
|
||||
|
||||
function renderCellContent(x, y, content) {
|
||||
const cell = document.getElementById(`cell-${x}-${y}`);
|
||||
if (cell) {
|
||||
cell.innerText = content;
|
||||
}
|
||||
}
|
||||
|
||||
function renderPlayerList(players) {
|
||||
const html = players.map((player) => {
|
||||
return `
|
||||
<li>${player.name} (${player.move_count})</li>
|
||||
`;
|
||||
}).join("");
|
||||
document.getElementById("players-content").innerHTML = html;
|
||||
}
|
||||
|
||||
function renderPlayers(players) {
|
||||
players.forEach(player => {
|
||||
renderCellContent(player.position.x, player.position.y, "😎");
|
||||
});
|
||||
}
|
||||
|
||||
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.x, obj.position.y, "🔥");
|
||||
});
|
||||
}
|
||||
|
||||
function renderDestination(position) {
|
||||
renderCellContent(position.x, position.y, "🏠");
|
||||
}
|
||||
|
||||
window.onload = function () {
|
||||
const ws = new WebSocket('ws://localhost:8011/bla-tra');
|
||||
|
||||
ws.onmessage = function (event) {
|
||||
const data = JSON.parse(event.data);
|
||||
console.log("message received:", data)
|
||||
|
||||
createBoard(data.board);
|
||||
renderObstacles(data.layers)
|
||||
renderDestination(data.destination.position);
|
||||
renderPlayerList(data.players);
|
||||
renderPlayers(data.players);
|
||||
}
|
||||
|
||||
ws.onopen = function () {
|
||||
console.log("open");
|
||||
}
|
||||
|
||||
ws.onclose = function () {
|
||||
console.log("close");
|
||||
}
|
||||
|
||||
ws.onerror = function () {
|
||||
console.log("error");
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
</html>
|
||||
20
frontend/styles.css
Normal file
20
frontend/styles.css
Normal file
@ -0,0 +1,20 @@
|
||||
body {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
|
||||
.board-container {
|
||||
background-color: white;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.flex-grid {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
grid-gap: 2px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
.cell {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
background-color: beige;
|
||||
}
|
||||
@ -47,7 +47,9 @@ class GameEngine:
|
||||
def _start_inactivity_watchdog(self) -> None:
|
||||
if not self._inacivity_watchdog:
|
||||
self._inacivity_watchdog = InactivityWatchdog(
|
||||
players=self.players, daemon=True
|
||||
players=self.players,
|
||||
ws_server=self.ws_server,
|
||||
daemon=True,
|
||||
)
|
||||
self._inacivity_watchdog.start()
|
||||
|
||||
|
||||
@ -5,6 +5,7 @@ from threading import Thread
|
||||
|
||||
import websockets
|
||||
from websockets import WebSocketServerProtocol
|
||||
from websockets.exceptions import ConnectionClosedOK
|
||||
|
||||
from hopper.models.ws_dto import GameStateDto
|
||||
from settings import settings
|
||||
@ -15,12 +16,18 @@ class WSServer(Thread):
|
||||
self.connected_clients = set[WebSocketServerProtocol]()
|
||||
super().__init__(*args, **kwargs)
|
||||
|
||||
async def ws_handler(self, websocket: WebSocketServerProtocol) -> None:
|
||||
async def handler(self, websocket: WebSocketServerProtocol) -> None:
|
||||
self.connected_clients.add(websocket)
|
||||
logging.info(f"Add client: {websocket.id}")
|
||||
|
||||
try:
|
||||
await self.send_game_state_to_client(websocket)
|
||||
connected = True
|
||||
while connected:
|
||||
try:
|
||||
message = await websocket.recv()
|
||||
except ConnectionClosedOK:
|
||||
connected = False
|
||||
finally:
|
||||
self.connected_clients.remove(websocket)
|
||||
logging.info(f"Remove client: {websocket.id}")
|
||||
@ -63,7 +70,7 @@ class WSServer(Thread):
|
||||
)
|
||||
|
||||
async with websockets.serve(
|
||||
ws_handler=self.ws_handler,
|
||||
ws_handler=self.handler,
|
||||
host=settings.ws_server.HOST,
|
||||
port=settings.ws_server.PORT,
|
||||
):
|
||||
|
||||
Reference in New Issue
Block a user