handle disconnection on frontend

static/src/index.tsx

@@ -4,6 +4,7 @@ import { InfoScreen } from "./infoScreen";
 import { MainScreen } from "./mainScreen";
 import { MessageScreen } from "./messageScreen";
 import { getText } from "./translations";
+import { isDisconnected } from "./model";
 
 // WS
 document.body.prepend(
@@ -25,3 +26,18 @@ document.body.prepend(
 document
   .querySelector("main")!
   .append(InfoScreen(), MainScreen(), MessageScreen());
+document.body.append(
+  <div class="modal" toggle:open={isDisconnected}>
+    <div>
+      <main>
+        <div class="flex-column align-center justify-center width-100 height-100" style="gap: 1rem">
+          <span class="icon error" style="font-size: 3rem">
+            signal_disconnected
+          </span>
+          <h1 class="error">{getText("disconnected")}</h1>
+          <p class="secondary">{getText("reconnecting")}</p>
+        </div>
+      </main>
+    </div>
+  </div>
+);

static/src/model.tsx

@@ -13,6 +13,7 @@ export class Message implements React.Identifiable {
 const UDN = new UDNFrontend();
 
 UDN.onconnect = () => {
+  isDisconnected.value = false;
   updateStats();
 };
 
@@ -26,9 +27,20 @@ UDN.onmessage = (data) => {
   }
 };
 
-UDN.connect(`ws://${window.location.host}`)
+UDN.ondisconnect = () => {
+  isDisconnected.value = true;
+  setTimeout(connect, 2000);
+};
+
+function connect() {
+  UDN.connect(`ws://${window.location.host}`);
+}
+connect();
 
 // STATE
+// connection
+export const isDisconnected = new React.State(true);
+
 // messages
 export const messages = new React.ListState<Message>();
 export const lastReceivedMessage = new React.State(

static/src/translations.tsx

@@ -2,6 +2,8 @@
 export const staticTextEnglish = {
   channel: "Channel",
   channel_placeholder: "my-channel",
+  disconnected: "Server disconnected",
+  reconnecting: "Reconnecting...",
   info: "Info",
   message: "Message",
   messages: "Messages",
@@ -23,6 +25,8 @@ export const translations: { [key: string]: typeof staticTextEnglish } = {
   es: {
     channel: "Canal",
     channel_placeholder: "mi-canal",
+    disconnected: "Sin conneción",
+    reconnecting: "Conectando...",
     info: "Info",
     message: "Mensaje",
     messages: "Mensajes",
@@ -41,6 +45,8 @@ export const translations: { [key: string]: typeof staticTextEnglish } = {
   de: {
     channel: "Kanal",
     channel_placeholder: "mein-kanal",
+    disconnected: "Verbindung getrennt",
+    reconnecting: "Verbindung wird hergestellt...",
     info: "Daten",
     message: "Nachricht",
     messages: "Nachrichten",