Intis/fairhopper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Frontend

Browse Source
This commit is contained in:
Eden Kirin
2023-03-25 18:45:31 +01:00
parent 1b745c756f
commit ed4d61b37b
5 changed files with 152 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@ -63,12 +63,6 @@ To activate virtual environment:
poetry shell 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. WebSockets server runs on port **8011**. To run WS Server on different port, edit `settings.py` configuration.

120
frontend/index.html Normal file
View 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}">&nbsp;</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
View 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;
}

4
hopper/engine.py
View File

@ -47,7 +47,9 @@ class GameEngine:
def _start_inactivity_watchdog(self) -> None: def _start_inactivity_watchdog(self) -> None:
if not self._inacivity_watchdog: if not self._inacivity_watchdog:
self._inacivity_watchdog = InactivityWatchdog( self._inacivity_watchdog = InactivityWatchdog(
players=self.players, daemon=True players=self.players,
ws_server=self.ws_server,
daemon=True,
) )
self._inacivity_watchdog.start() self._inacivity_watchdog.start()

11
hopper/ws_server.py
View File

@ -5,6 +5,7 @@ from threading import Thread
import websockets import websockets
from websockets import WebSocketServerProtocol from websockets import WebSocketServerProtocol
from websockets.exceptions import ConnectionClosedOK
from hopper.models.ws_dto import GameStateDto from hopper.models.ws_dto import GameStateDto
from settings import settings from settings import settings
@ -15,12 +16,18 @@ class WSServer(Thread):
self.connected_clients = set[WebSocketServerProtocol]() self.connected_clients = set[WebSocketServerProtocol]()
super().__init__(*args, **kwargs) super().__init__(*args, **kwargs)
async def ws_handler(self, websocket: WebSocketServerProtocol) -> None: async def handler(self, websocket: WebSocketServerProtocol) -> None:
self.connected_clients.add(websocket) self.connected_clients.add(websocket)
logging.info(f"Add client: {websocket.id}") logging.info(f"Add client: {websocket.id}")
try: try:
await self.send_game_state_to_client(websocket) await self.send_game_state_to_client(websocket)
connected = True
while connected:
try:
message = await websocket.recv()
except ConnectionClosedOK:
connected = False
finally: finally:
self.connected_clients.remove(websocket) self.connected_clients.remove(websocket)
logging.info(f"Remove client: {websocket.id}") logging.info(f"Remove client: {websocket.id}")
@ -63,7 +70,7 @@ class WSServer(Thread):
) )
async with websockets.serve( async with websockets.serve(
ws_handler=self.ws_handler, ws_handler=self.handler,
host=settings.ws_server.HOST, host=settings.ws_server.HOST,
port=settings.ws_server.PORT, port=settings.ws_server.PORT,
): ):