improve local-app

2022-02-19 01:08:33 +01:00
parent 389c2e4844
commit 9301433fdf
18 changed files with 82 additions and 33 deletions
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>WorkAdventure Desktop Demo</title>
+    <style>
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+
+      html, body {
+        height: 100%;
+        width: 100%;
+      }
+
+      body {
+        display: flex;
+        flex-direction: row;
+        background-color: #30343D;
+      }
+
+      .sidebar {
+        display: flex;
+        width: 70px;
+        flex-direction: column;
+        background-color: #2B2F37;
+      }
+
+      #servers {
+        display: flex;
+        flex-direction: column;
+      }
+
+      #servers div {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        margin: 0.5rem;
+        color: #62727C;
+        border: 1px solid #62727C;
+        text-align: center;
+        border-radius: 50%;
+        height: 50px;
+        width: 50px;
+      }
+
+      #servers div:hover {
+        border-color: #E1E4E8;
+        color: #E1E4E8;
+      }
+
+      #btn-reload {
+        margin-top: auto;
+      }
+
+      .main {
+        display: flex;
+        flex-grow: 1;
+        justify-content: center;
+        align-items: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="sidebar">
+      <div id="servers">
+
+      </div>
+      <button id="btn-reload">Refresh</button>
+    </div>
+    <div class="main">
+      <img src="../assets/icons/logo-text.png" />
+    </div>
+    <script src="./index.js" lang="javascript"></script>
+  </body>
+</html>
@@ -0,0 +1,34 @@
+// let muted = false;
+
+if (window?.WorkAdventureDesktopApi?.desktop) {
+  (async () => {
+    const servers = await window.WorkAdventureDesktopApi.getServers();
+    servers.forEach((e) => {
+      const server = document.createElement("div");
+      server.innerText = e.name;
+      server.onclick = () => {
+        window.WorkAdventureDesktopApi.selectServer(e._id);
+      };
+      document.getElementById("servers").appendChild(server);
+    });
+  })();
+}
+
+document.getElementById("btn-reload").onclick = () => {
+  location.reload();
+};
+
+// window?.WorkAdventureDesktopApi?.onMutedKeyPress((event) => {
+//   if (muted) {
+//     document.getElementById("demo").innerHTML =
+//       "Ready to speak! Press ctrl-alt-m to mute.";
+//   } else {
+//     document.getElementById("demo").innerHTML =
+//       "Muted! Press ctrl-alt-m to unmute again.";
+//   }
+//   muted = !muted;
+// });
+
+// document.getElementById("btn-api").onclick = () => {
+//   window.WorkAdventureDesktopApi.notify("Hello from website");
+// };