Make web login form functional

CMakeLists.txt

@@ -219,6 +219,8 @@ if (CMAKE_SYSTEM_NAME STREQUAL Emscripten)
         "-sUSE_WEBGL2=1"
         "-sNO_DISABLE_EXCEPTION_CATCHING=1"
         "-sALLOW_MEMORY_GROWTH=1"
+        "-sEXPORTED_FUNCTIONS=_RunMain,_SetName,_SetUrl"
+        "-sEXPORTED_RUNTIME_METHODS=ccall,cwrap"
         "--shell-file" "${CMAKE_SOURCE_DIR}/shell.html"
         "--preload-file" "${CMAKE_SOURCE_DIR}/assets/@/"
         )

shell.html

@@ -15,6 +15,8 @@
             height: 100%;
             background: black;
             color: aqua;
+            font-family: Verdana, Geneva, Tahoma, sans-serif;
+            text-align: center;
         }
 
         canvas {
@@ -22,6 +24,28 @@
             width: 100vw;
             height: 100vh;
         }
+
+        #vyplnitmeno{
+            font-size: 100pt;
+            color: red;
+            font-weight: bold;
+            margin: 0;
+            margin-bottom: 100px;
+        }
+
+        #okbut
+        {
+            font-size: 20pt;
+            font-weight: bold;
+            padding: 10pt;
+            margin: 10pt;
+        }
+
+        #name, #url
+        {
+            font-size: 150%;
+            margin: 10pt;
+        }
     </style>
 </head>
 
@@ -32,9 +56,11 @@
         <h1>fekální gtačko</h1>
 
         <form>
-            kdo <input type="text" name="name" id="name"><br>
+            kdo <input type="text" name="name" id="name" placeholder="vyplnit"><br>
-            kam <input type="text" name="url" id="url"><br>
+            <p id="vyplnitmeno" style="display:none">^ vyplnit</p>
-            <input type="button" value="0k" onclick="ok()">
+            
+            kam <input type="text" name="url" id="url" value="ws://deadfish.cz:11200/ws"><br>
+            <input id="okbut" type="button" value="0k" onclick="ok()">
         </form>
     </div>
 
@@ -76,14 +102,34 @@
             const name = document.getElementById("name").value;
             const url = document.getElementById("url").value;
         
-            Module.ccall("SetName", name);
+            if (name == "") {
-            Module.ccall("SetUrl", url);
+                document.getElementById("vyplnitmeno").style = "";
+                return;
+            }
+
+            localStorage.setItem("fg_name", name);
+            localStorage.setItem("fg_url", url);
+
+            Module.ccall("SetName", null, ["string"], [name]);
+            Module.ccall("SetUrl", null, ["string"], [url]);
 
             document.getElementById("loginform").style = "display:none";
             document.getElementById("canvas").style = "";
 
-            Module.ccall("RunMain");
+            Module.ccall("RunMain", null, [], []);
         }
+
+        function loadConfig() 
+        {
+            const saved_name = localStorage.getItem("fg_name");
+            const saved_url = localStorage.getItem("fg_url");
+            if (saved_name != null)
+                document.getElementById("name").value = saved_name;
+            if (saved_url != null)
+                document.getElementById("url").value = saved_url;
+        }
+
+        loadConfig();
     </script>
 
     {{{ SCRIPT }}}