FE tweaks
This commit is contained in:
@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user