From 34a970e550dc6a4a184811f79c35d3fdba4bd1bf Mon Sep 17 00:00:00 2001
From: Eden Kirin <eden@ekirin.com>
Date: Sun, 16 Apr 2023 22:32:11 +0200
Subject: [PATCH] Frontend js tweaks

---
 frontend/js/frontend.js | 30 +++++++++++++++---------------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/frontend/js/frontend.js b/frontend/js/frontend.js
index a68e5e5..c046149 100644
--- a/frontend/js/frontend.js
+++ b/frontend/js/frontend.js
@@ -1,3 +1,5 @@
+const FAIRHOPPER_WS_SERVER = "ws://localhost:8011";
+
 const BOARD_ICONS = {
     PLAYER: "😀",
     PLAYER_ON_DESTINATION: "😎",
@@ -13,10 +15,10 @@ function createBoard(board) {
             colHtml += `<div class="cell" id="cell-${x}-${y}">&nbsp;</div>`;
         }
         html += `
-                <div class="flex-grid">
-                    ${colHtml}
-                </div>
-            `;
+            <div class="flex-grid">
+                ${colHtml}
+            </div>
+        `;
     }
     document.getElementById("board-content").innerHTML = html;
 }
@@ -33,10 +35,10 @@ function renderCellContent(position, content) {
 }
 
 function renderPlayerList(players) {
-    const html = players
+    document.getElementById("players-content").innerHTML = players
         .filter((player) => player.active)
         .map((player) => {
-            const onDestination = player.state == "ON_DESTINATION";
+            const onDestination = player.state === "ON_DESTINATION";
             return `
                 <li class="${onDestination ? "text-success" : ""}">
                     ${player.name} (${player.move_count})
@@ -45,7 +47,6 @@ function renderPlayerList(players) {
             `;
         })
         .join("");
-    document.getElementById("players-content").innerHTML = html;
 }
 
 function renderPlayers(players) {
@@ -53,14 +54,13 @@ function renderPlayers(players) {
         .filter((player) => player.active)
         .forEach((player) => {
             const cell = findCell(player.position);
-            const onDestination = player.state == "ON_DESTINATION";
+            const onDestination = player.state === "ON_DESTINATION";
             const playerIcon = onDestination ? BOARD_ICONS.PLAYER_ON_DESTINATION : BOARD_ICONS.PLAYER;
             if (cell) {
-                const html = `
+                cell.innerHTML = `
                     <div class="player-tooltip">${player.name}</div>
                     ${playerIcon}
                 `;
-                cell.innerHTML = html;
             }
         });
 }
@@ -100,7 +100,7 @@ function productPurchaseStart(products, purchaseTimeout) {
     const contentElement = document.getElementById("products-content");
     const purchaseTimeoutElement = document.getElementById("purchase-countdown");
 
-    const html = products
+    contentElement.innerHTML = products
         .map((product) => {
             return `
                 <div class="card product" id="product-${product.id}">
@@ -112,8 +112,6 @@ function productPurchaseStart(products, purchaseTimeout) {
             `;
         })
         .join("");
-
-    contentElement.innerHTML = html;
     containerElement.classList.remove("d-none");
     purchaseTimeoutElement.innerText = purchaseTimeout;
 }
@@ -134,7 +132,9 @@ function productPurchaseDone(product) {
 }
 
 function wsConnect() {
-    let ws = new WebSocket("ws://localhost:8011");
+    console.log("Attempting to connect to", FAIRHOPPER_WS_SERVER);
+    let ws = new WebSocket(FAIRHOPPER_WS_SERVER);
+
     ws.onopen = () => {
         console.log("WS connected");
     };
@@ -162,7 +162,7 @@ function wsConnect() {
     };
 
     ws.onclose = (e) => {
-        setTimeout(function () {
+        setTimeout(() => {
             wsConnect();
         }, 1000);
     };