handle disconnection on frontend

static/dist/index.html

@@ -1,6 +1,6 @@
 <html lang="en">
   <head>
-    <title>UDN Server</title>
+    <title>My App</title>
 
     <meta charset="UTF-8" />
     <meta
@@ -21,6 +21,7 @@
 
     <link rel="stylesheet" href="styles.css" />
     <link rel="manifest" href="manifest.json" />
+    <link rel="icon" href="icon.png" />
     <script src="support.js" defer></script>
 
     <script src="index.js" defer></script>

static/dist/index.js

@@ -245,6 +245,8 @@
   var staticTextEnglish = {
     channel: "Channel",
     channel_placeholder: "my-channel",
+    disconnected: "Server disconnected",
+    reconnecting: "Reconnecting...",
     info: "Info",
     message: "Message",
     messages: "Messages",
@@ -265,6 +267,8 @@
     es: {
       channel: "Canal",
       channel_placeholder: "mi-canal",
+      disconnected: "Sin conneci\xF3n",
+      reconnecting: "Conectando...",
       info: "Info",
       message: "Mensaje",
       messages: "Mensajes",
@@ -283,6 +287,8 @@
     de: {
       channel: "Kanal",
       channel_placeholder: "mein-kanal",
+      disconnected: "Verbindung getrennt",
+      reconnecting: "Verbindung wird hergestellt...",
       info: "Daten",
       message: "Nachricht",
       messages: "Nachrichten",
@@ -316,6 +322,7 @@
   };
   var UDN = new UDNFrontend();
   UDN.onconnect = () => {
+    isDisconnected.value = false;
     updateStats();
   };
   UDN.onmessage = (data) => {
@@ -326,7 +333,15 @@
       if (messageBody) messages.add(messageObject);
     }
   };
-  UDN.connect(`ws://${window.location.host}`);
+  UDN.ondisconnect = () => {
+    isDisconnected.value = true;
+    setTimeout(connect, 2e3);
+  };
+  function connect() {
+    UDN.connect(`ws://${window.location.host}`);
+  }
+  connect();
+  var isDisconnected = new State(true);
   var messages = new ListState();
   var lastReceivedMessage = new State(
     getText("noMessagesReceived")
@@ -438,4 +453,7 @@
     /* @__PURE__ */ createElement("menu", null, /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#info-screen", active: true }, /* @__PURE__ */ createElement("span", { class: "icon" }, "info"), getText("info")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#main-screen" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "settings"), getText("settings")), /* @__PURE__ */ createElement("a", { class: "tab-link", href: "#message-screen" }, /* @__PURE__ */ createElement("span", { class: "icon" }, "chat"), getText("messages")))
   );
   document.querySelector("main").append(InfoScreen(), MainScreen(), MessageScreen());
+  document.body.append(
+    /* @__PURE__ */ createElement("div", { class: "modal", "toggle:open": isDisconnected }, /* @__PURE__ */ createElement("div", null, /* @__PURE__ */ createElement("main", null, /* @__PURE__ */ createElement("div", { class: "flex-column align-center justify-center width-100 height-100", style: "gap: 1rem" }, /* @__PURE__ */ createElement("span", { class: "icon error", style: "font-size: 3rem" }, "signal_disconnected"), /* @__PURE__ */ createElement("h1", { class: "error" }, getText("disconnected")), /* @__PURE__ */ createElement("p", { class: "secondary" }, getText("reconnecting"))))))
+  );
 })();

static/dist/manifest.json

@@ -3,7 +3,7 @@
   "display": "standalone",
   "icons": [
     {
-      "src": "favicon.ico",
+      "src": "icon.png",
       "sizes": "any"
     }
   ]

static/dist/styles.css

@@ -279,6 +279,7 @@ select {
 header,
 menu {
   backdrop-filter: blur(70px);
+  -webkit-backdrop-filter: blur(70px);
 }
 
 /* border, outline, etc */
@@ -604,6 +605,7 @@ select + .icon,
 article,
 main,
 select + .icon,
+.height-100,
 .modal > div,
 .modal main {
   height: 100%;
@@ -757,12 +759,17 @@ body {
   height: 100%;
 }
 
-body {
+body,
+.modal {
   padding-left: var(--safe-area-left);
   padding-right: var(--safe-area-right);
   padding-top: var(--safe-area-top);
 }
 
+.modal {
+  padding-bottom: var(--safe-area-bottom);
+}
+
 menu {
   width: 100%;
   height: var(--menu-height-mobile);