From 9beea4921c0a526767d232352ab2fc182c6aa211 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Laure=CE=B7t?= <laurentfainsin@protonmail.com>
Date: Mon, 13 Dec 2021 17:43:47 +0100
Subject: [PATCH] fix: force svelte websockets to be client side

---
 docker-compose.yml    |  5 ++++-
 src/Controller.svelte | 27 ++++++++++++++++++---------
 src/admin.html        |  2 +-
 src/client.html       |  4 ++--
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/docker-compose.yml b/docker-compose.yml
index 689269b..99399ac 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -14,6 +14,7 @@ services:
       - $WEBSOCKET_PORT:$WEBSOCKET_PORT
     depends_on:
       - redis
+
   emulator:
     build:
       context: .
@@ -28,12 +29,14 @@ services:
       - rtmp
       - redis
     volumes:
-    - ./states/:/code/states/
+      - ./states/:/code/states/
+
   redis:
     image: redis:alpine
     restart: unless-stopped
     ports:
       - $REDIS_PORT:6379
+
   rtmp:
     image: tiangolo/nginx-rtmp
     restart: unless-stopped
diff --git a/src/Controller.svelte b/src/Controller.svelte
index 44f00dc..8f7d09b 100644
--- a/src/Controller.svelte
+++ b/src/Controller.svelte
@@ -1,8 +1,14 @@
 <script lang="ts">
-  const websocket: WebSocket = new WebSocket("ws://localhost:6789/");
+  import { onMount } from "svelte";
+
+  let websocket: WebSocket | undefined;
+
+  onMount(() => {
+    websocket = new WebSocket("ws://localhost:6789/");
+  });
 
   const sendAction = (key: string) => () => {
-    websocket.send(JSON.stringify({ action: key }));
+    if (websocket) websocket.send(JSON.stringify({ action: key }));
   };
 </script>
 
@@ -36,7 +42,7 @@
       <button id="left" on:click={sendAction("left")}> &lt; </button>
     </td>
     <td />
-    <td style="padding-right: 3rem;">
+    <td style="padding-right: 20%;">
       <button id="right" on:click={sendAction("right")}> > </button>
     </td>
     <td />
@@ -58,15 +64,18 @@
   </tr>
 </table>
 
-<style>
+<style lang="sass">
   td {
     text-align: center;
   }
 
+  button {
+    width: 100%;
+    height: 100%;
+  }
+
   #a,
   #b {
-    width: 2rem;
-    height: 2rem;
     border-radius: 50%;
   }
 
@@ -74,8 +83,8 @@
   #right,
   #up,
   #down {
-    width: 2rem;
-    height: 2rem;
+    width: 10%;
+    height: 10%;
     border-radius: 10%;
   }
 
@@ -83,7 +92,7 @@
   #select,
   #l,
   #r {
-    width: 3.5rem;
+    width: 20%;
     border-radius: 25%;
   }
 </style>
diff --git a/src/admin.html b/src/admin.html
index 593919d..56875fd 100644
--- a/src/admin.html
+++ b/src/admin.html
@@ -30,7 +30,7 @@
   </div>
 
   <script>
-    let websocket = new WebSocket("ws://127.0.0.1:6789/");
+    let websocket = new WebSocket("wss://gba.inpt.fr:6789/");
     let passwordInput = document.querySelector('#password-text');
 
     let divLogin = document.querySelector("#login");
diff --git a/src/client.html b/src/client.html
index 7e59e3d..8871531 100644
--- a/src/client.html
+++ b/src/client.html
@@ -79,9 +79,9 @@
   </table>
 
   <script>
-    var websocket = new WebSocket("ws://localhost:6789/");
+    let websocket = new WebSocket("ws://gba.inpt.fr:6789/");
 
-    var a = document.getElementById('a'),
+    let a = document.getElementById('a'),
       b = document.getElementById('b'),
       select = document.getElementById('select'),
       start = document.getElementById('start'),