add sidebar

2022-02-18 01:51:35 +01:00
parent a11d19a457
commit c891fcb1bd
12 changed files with 211 additions and 78 deletions
@@ -0,0 +1,59 @@
+<!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%;
+      }
+
+      body {
+        display: flex;
+        flex-direction: column;
+        width: 70px;
+        background-color: #25292E;
+      }
+
+      #servers {
+        display: flex;
+        flex-direction: column;
+        margin-bottom: 1rem;
+      }
+
+      #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;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="servers"></div>
+    <button id="btn-reload">Refresh</button>
+    <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");
+// };