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">
<link rel="stylesheet" href="styles.css">
<title>Document</title>
<title>FairHopper Visualisation Client</title>
</head>
<body>
<div class="container-fluid">
<h1>FairHopper WS Client</h1>
<h1 class="mt-1 mb-2">
FairHopper Visualisation Client
</h1>
<div class="row">
<div class="col-10">
<div class="board-container">
@ -22,7 +24,9 @@
</div>
</div>
<div class="col-2">
<h3>Players</h3>
<h3 class="pb-2 border-bottom">
Players
</h3>
<ul class="players" id="players-content"></ul>
</div>
</div>
@ -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();
}
</script>

7
frontend/styles.css
View File

@ -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;