Integrated Quill

ui/site/components/AppMenu.js

@@ -0,0 +1,62 @@
+css(`
+    app-menu {
+        color: var(--tan);
+        transform: translateX(-50%);
+        transition: transform .3s;
+        display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2.3em;
+    }
+
+    app-menu.minimized {
+        color: var(--accent);
+        transform: translate(-50%, 65%);
+        border: 1px solid var(--accent);
+        padding-left: 2em; padding-right: 2em;
+        border-radius: 12px;
+    }
+`)
+
+registerShadow(
+    
+class AppMenu extends Shadow {
+
+    render() {
+        p("Messages")
+        p("Market")
+        p("Security")
+        p("Jobs")
+    }
+
+    connectedCallback() {
+        Array.from(this.querySelectorAll("p")).forEach((el) => {
+            el.addEventListener("mousedown", (e) => {
+                el.classList.add("touched")
+            })
+        })
+        window.addEventListener("mouseup", (e) => {
+            let target = e.target
+            if(!target.matches("app-menu p")) {
+                return
+            }
+            $$("app-menu p").forEach((el) => {
+                if(el.innerText !== target.innerText) {
+                    el.classList.remove("selected")
+                }
+            })
+
+            target.classList.remove("touched")
+            if(target.classList.contains("selected")) {
+                target.classList.remove("selected")
+                $("app-manu").classList.remove("minimized")
+                $("#divider").classList.remove("minimized")
+                $("app-window").close()
+            } else {
+                target.classList.add("selected")
+                $("app-manu").classList.add("minimized")
+                $("#divider").classList.add("minimized")
+                $("app-window").open(target.innerText)
+            }
+        })
+    }
+}
+
+, "app-menu")

ui/site/components/AppWindow.js

@@ -13,6 +13,7 @@ css(`
 export default class AppWindow extends HTMLElement {
 
     open(app) {
+        console.log("opening", app)
         this.style.display = "block"
     }
 

ui/site/index.html

@@ -21,17 +21,6 @@
                 background-repeat: no-repeat;
             }
 
-            #menu-bar {
-                color: var(--tan);
-                transform: translateX(-50%);
-                transition: transform .3s;
-            }
-            #menu-bar.minimized {
-                color: var(--accent);
-                transform: translate(-50%, 55%);
-                border: 1px solid var(--accent);
-                padding-left: 2em; padding-right: 2em;
-            }
             #divider.minimized {
                 display: none;
             }
@@ -56,7 +45,7 @@
                 transform: translateY(-10%)
             }
         </style>
-        <script src="_/code/util.js"></script>
+        <script src="_/code/quill.js"></script>
         <script type="module">
             import "./components/ProfileButton.js"
             import "./components/InputBox.js"
@@ -66,6 +55,7 @@
             import ConnectionHandler from "./ws/ConnectionHandler.js"
             window.ConnectionHandler = new ConnectionHandler()
         </script>
+        <script src="./components/AppMenu.js"></script>
         <script>
             const img = new Image();
             img.src = "_/images/the_return.webp";
@@ -87,45 +77,8 @@
             <app-window></app-window>
             <profile-button style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw"></profile-button>
             <img src="_/icons/logo.svg" style="width: 3.5em; position: fixed; left: 3em; top: 2em;"/>
-            <div id="menu-bar" style="display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2.3em;">
-                <p class="app">Forum</p>
-                <p class="app">Messages</p>
-                <p class="app">Market</p>
-                <p class="app">Security</p>
-                <p class="app">Jobs</p>
-            </div>
+            <script>AppMenu()</script>
             <img id="divider" src="_/images/divider.svg" style="width: 40vw; position: fixed; bottom: 2em; left: 50vw; transform: translateX(-50%)"/>
-            <script>
-                Array.from(document.querySelectorAll(".app")).forEach((el) => {
-                    el.addEventListener("mousedown", (e) => {
-                        el.classList.add("touched")
-                    })
-                })
-                window.addEventListener("mouseup", (e) => {
-                    let target = e.target
-                    if(!target.matches("p.app")) {
-                        return
-                    }
-                    $("p.app").forEach((el) => {
-                        if(el.innerText !== target.innerText) {
-                            el.classList.remove("selected")
-                        }
-                    })
-
-                    target.classList.remove("touched")
-                    if(target.classList.contains("selected")) {
-                        target.classList.remove("selected")
-                        $("#menu-bar").classList.remove("minimized")
-                        $("#divider").classList.remove("minimized")
-                        $("app-window").close()
-                    } else {
-                        target.classList.add("selected")
-                        $("#menu-bar").classList.add("minimized")
-                        $("#divider").classList.add("minimized")
-                        $("app-window").open(target.innerText)
-                    }
-                })
-            </script>
         </div>
     </body>
 </html>

ui/site/pages/messages.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="icon" href="_/icons/logo.svg">
     <link rel="stylesheet" href="_/code/shared.css">
-    <script src="_/code/util.js"></script>
+    <script src="_/code/quill.js"></script>
     <script type="module">
       import "./components/ProfileButton.js"
       import "./components/InputBox.js"