-
FairHopper WS Client
+
+ FairHopper Visualisation Client
+
@@ -104,17 +108,14 @@
function wsConnect() {
- let ws = new WebSocket('ws://localhost:8011/bla-tra');
- ws.onopen = function () {
- /*
- ws.send(JSON.stringify({
- }));
- */
+ let ws = new WebSocket('ws://localhost:8011');
+ ws.onopen = () => {
+ console.log("WS connected")
};
- ws.onmessage = function (e) {
+ ws.onmessage = (e) => {
const data = JSON.parse(e.data);
- console.log("message received:", data)
+ console.log("WS message received:", data)
createBoard(data.board);
renderObstacles(data.layers)
@@ -123,19 +124,19 @@
renderPlayers(data.players);
};
- ws.onclose = function (e) {
+ ws.onclose = (e) => {
setTimeout(function () {
wsConnect();
}, 1000);
};
- ws.onerror = function (err) {
- console.error('Socket encountered error: ', err.message, 'Closing socket');
+ ws.onerror = (err) => {
+ console.error("Socket encountered error:", err.message, "Closing socket");
ws.close();
};
}
- window.onload = function () {
+ window.onload = () => {
wsConnect();
}
diff --git a/frontend/styles.css b/frontend/styles.css
index d8fa3b0..67efbed 100644
--- a/frontend/styles.css
+++ b/frontend/styles.css
@@ -15,9 +15,12 @@ body {
}
.cell {
flex: 1;
- text-align: center;
+ aspect-ratio: 1;
background-color: beige;
position: relative;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
ul.players {
@@ -27,7 +30,7 @@ ul.players {
.player-tooltip {
position: absolute;
- top: -25px;
+ margin-bottom: 50px;
font-size: 8pt;
padding: 2px 10px;
color: white;