test ui

src/client.ts

@@ -96,5 +96,5 @@ async function testDelay() {
   console.log(ws.latency());
 }
 
-await testDelay();
-await new Client().connect("124931507");
+testDelay();
+new Client().connect("124931507");

src/main.ts

@@ -1,9 +1,3 @@
-import './style.css';
+import "./style.css";
 import "./client";
-
-const app = document.querySelector<HTMLDivElement>('#app')!
-
-app.innerHTML = `
-  <h1>Hello Vite!</h1>
-  <a href="https://vitejs.dev/guide/features.html" target="_blank">Documentation</a>
-`
+import "./ui";

src/ui.js

@@ -0,0 +1,42 @@
+const app = document.querySelector("#app");
+
+if (app) {
+  app.innerHTML = `
+  <div id="connect" style="text-align: center"><table style="display: inline-block">
+    <tr><td><span>Host: </span></td><td><input id="host" /></td></tr>
+    <tr><td><span>Id: </span></td><td><input id="id" /></td></tr>
+    <tr><td></td><td><button onclick="connect();">Connect</button></td></tr>
+  </table></div>
+  <div id="password" style="display: none;">
+    <input type="password" id="password" />
+    <button id="confirm" id="confirm()">Confirm</button>
+    <button id="cancel" onclick="cancel();">Cancel</button>
+  </div>
+`;
+
+  document.body.onload = () => {
+    const host = document.querySelector('#host');
+    host.value = localStorage.getItem('host');
+    const id = document.querySelector('#id');
+    id.value = localStorage.getItem('id');
+  };
+
+  window.connect = () => {
+    const host = document.querySelector('#host');
+    localStorage.setItem('host', host.value);
+    const id = document.querySelector('#id');
+    localStorage.setItem('id', id.value);
+    document.querySelector('div#connect').style.display = 'none';
+    document.querySelector('div#password').style.display = 'block';
+  }
+
+  window.cancel = () => {
+    document.querySelector('div#connect').style.display = 'block';
+    document.querySelector('div#password').style.display = 'none';
+  }
+
+  window.confirm = () => {
+    //
+  }
+
+}