Demo SDK

frontend/index.html

@@ -8,6 +8,7 @@
     <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>
 
@@ -57,7 +58,7 @@
     }
 
     function renderPlayerList(players) {
-        const html = players.map((player) => {
+        const html = players.filter(player => player.active).map((player) => {
             return `
                 <li class="${player.reached_destination ? "text-success" : ""}">
                     ${player.name} (${player.move_count})
@@ -69,7 +70,7 @@
     }
 
     function renderPlayers(players) {
-        players.forEach(player => {
+        players.filter(player => player.active).forEach(player => {
             const cell = findCell(player.position);
             if (cell) {
                 const playerIcon = "😎";
@@ -79,11 +80,6 @@
                 `;
                 cell.innerHTML = html;
             }
-
-
-            //renderCellContent(player.position.x, player.position.y, "😎");
-
-
         });
     }
 
@@ -106,11 +102,18 @@
         renderCellContent(position, "🏠");
     }
 
-    window.onload = function () {
-        const ws = new WebSocket('ws://localhost:8011/bla-tra');
 
-        ws.onmessage = function (event) {
-            const data = JSON.parse(event.data);
+    function wsConnect() {
+        let ws = new WebSocket('ws://localhost:8011/bla-tra');
+        ws.onopen = function () {
+            /*
+            ws.send(JSON.stringify({
+            }));
+            */
+        };
+
+        ws.onmessage = function (e) {
+            const data = JSON.parse(e.data);
             console.log("message received:", data)
 
             createBoard(data.board);
@@ -118,21 +121,23 @@
             renderDestination(data.destination.position);
             renderPlayerList(data.players);
             renderPlayers(data.players);
-        }
+        };
 
-        ws.onopen = function () {
-            console.log("open");
-        }
+        ws.onclose = function (e) {
+            setTimeout(function () {
+                wsConnect();
+            }, 1000);
+        };
 
-        ws.onclose = function () {
-            console.log("close");
-        }
-
-        ws.onerror = function () {
-            console.log("error");
-        }
+        ws.onerror = function (err) {
+            console.error('Socket encountered error: ', err.message, 'Closing socket');
+            ws.close();
+        };
     }
 
+    window.onload = function () {
+        wsConnect();
+    }
 </script>