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

FE tweaks

Browse Source
This commit is contained in:
Eden Kirin
2023-03-26 15:16:51 +02:00
parent 63e7e0d21c
commit f74bc9b52e
2 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
frontend/index.html
View File

@ -9,12 +9,14 @@
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous"> integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.css">
<title>Document</title> <title>FairHopper Visualisation Client</title>
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container-fluid">
<h1>FairHopper WS Client</h1> <h1 class="mt-1 mb-2">
FairHopper Visualisation Client
</h1>
<div class="row"> <div class="row">
<div class="col-10"> <div class="col-10">
<div class="board-container"> <div class="board-container">
@ -22,7 +24,9 @@
</div> </div>
</div> </div>
<div class="col-2"> <div class="col-2">
<h3>Players</h3> <h3 class="pb-2 border-bottom">
Players
</h3>
<ul class="players" id="players-content"></ul> <ul class="players" id="players-content"></ul>
</div> </div>
</div> </div>
@ -104,17 +108,14 @@
function wsConnect() { function wsConnect() {
let ws = new WebSocket('ws://localhost:8011/bla-tra'); let ws = new WebSocket('ws://localhost:8011');
ws.onopen = function () { ws.onopen = () => {
/* console.log("WS connected")
ws.send(JSON.stringify({
}));
*/
}; };
ws.onmessage = function (e) { ws.onmessage = (e) => {
const data = JSON.parse(e.data); const data = JSON.parse(e.data);
console.log("message received:", data) console.log("WS message received:", data)
createBoard(data.board); createBoard(data.board);
renderObstacles(data.layers) renderObstacles(data.layers)
@ -123,19 +124,19 @@
renderPlayers(data.players); renderPlayers(data.players);
}; };
ws.onclose = function (e) { ws.onclose = (e) => {
setTimeout(function () { setTimeout(function () {
wsConnect(); wsConnect();
}, 1000); }, 1000);
}; };
ws.onerror = function (err) { ws.onerror = (err) => {
console.error('Socket encountered error: ', err.message, 'Closing socket'); console.error("Socket encountered error:", err.message, "Closing socket");
ws.close(); ws.close();
}; };
} }
window.onload = function () { window.onload = () => {
wsConnect(); wsConnect();
} }
</script> </script>

7
frontend/styles.css
View File

@ -15,9 +15,12 @@ body {
} }
.cell { .cell {
flex: 1; flex: 1;
text-align: center; aspect-ratio: 1;
background-color: beige; background-color: beige;
position: relative; position: relative;
display: flex;
align-items: center;
justify-content: center;
} }
ul.players { ul.players {
@ -27,7 +30,7 @@ ul.players {
.player-tooltip { .player-tooltip {
position: absolute; position: absolute;
top: -25px; margin-bottom: 50px;
font-size: 8pt; font-size: 8pt;
padding: 2px 10px; padding: 2px 10px;
color: white; color: white;