adding search bar to appz

server/main.go

@@ -34,16 +34,6 @@ func main() {
 	}
 
 	http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
-		// Keeps server from crashing if a request fails
-		// defer func() {
-		// 	if r := recover(); r != nil {
-		// 		log.Error().
-		// 			Interface("panic_reason", r).
-		// 			Bytes("stack_trace", debug.Stack()).
-		// 			Msg("panic in http goroutine")
-		// 	}
-		// }()
-
 		if(loggedIn(w, r)) {
 			log.Info().Msg("logged")
 			if isWebSocketRequest(r) {
@@ -106,7 +96,8 @@ func handleSite(w http.ResponseWriter, r *http.Request) {
 		handlers.HandleLogout(w, r)
 		return
 	}
-	if strings.HasPrefix(r.URL.Path, "/_") {
+	if strings.Contains(r.URL.Path, "/_") {
+		log.Debug().Msg("this is what it is")
 		handleAsset(w, r)
 		return
 	}
@@ -117,8 +108,10 @@ func handleSite(w http.ResponseWriter, r *http.Request) {
 func serveSiteFiles(w http.ResponseWriter, r *http.Request) {
 	path := r.URL.Path
 
-	if path == "/" {
-
+	if(strings.Contains(path, "75820185")) {
+    	_, after, _ := strings.Cut(path, "75820185")
+        path = after
+	} else {
 		// Required for sign in / sign out redirect to work properly
 		w.Header().Set("Cache-Control", "no-store, no-cache, must-revalidate, proxy-revalidate")
 		w.Header().Set("Pragma", "no-cache")
@@ -126,8 +119,6 @@ func serveSiteFiles(w http.ResponseWriter, r *http.Request) {
 		w.Header().Set("Surrogate-Control", "no-store")
 
 		path = "/index.html"
-	} else if !strings.Contains(path, ".") {
-		path = filepath.Join("/pages", path) + ".html"
 	}
 
 	filePath := filepath.Join("../ui/site", path)
@@ -136,8 +127,8 @@ func serveSiteFiles(w http.ResponseWriter, r *http.Request) {
 }
 
 func handleAsset(w http.ResponseWriter, r *http.Request) {
-	path := r.URL.Path
-	filePath := filepath.Join("../ui", path)
+	_, after, _ := strings.Cut(r.URL.Path, "/_")
+	filePath := filepath.Join("../ui", "/_" + after)
 	log.Debug().Msgf("serving asset: %s", filePath)
 	http.ServeFile(w, r, filePath)
 }

ui/_/code/quill.js

@@ -1,3 +1,9 @@
+/* $ NAVIGATION */
+
+window.navigateTo = function(url) {
+    window.history.pushState({}, '', url);
+}
+
 /* $ SELECTOR */
 
 HTMLElement.prototype.$ = function(selector) {
@@ -259,21 +265,29 @@ HTMLElement.prototype.padding = function(one, two, three = "px") {
 };
 
     HTMLElement.prototype.paddingTop = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.paddingTop = value + unit
         return this
     }
 
     HTMLElement.prototype.paddingLeft = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.paddingLeft = value + unit
         return this
     }
 
     HTMLElement.prototype.paddingBottom = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.paddingBottom = value + unit
         return this
     }
 
     HTMLElement.prototype.paddingRight = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.paddingRight = value + unit
         return this
     }
@@ -303,21 +317,29 @@ HTMLElement.prototype.margin = function(direction, value, unit = "px") {
 };
 
     HTMLElement.prototype.marginTop = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.marginTop = value + unit
         return this
     }
 
     HTMLElement.prototype.marginLeft = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.marginLeft = value + unit
         return this
     }
 
     HTMLElement.prototype.marginBottom = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.marginBottom = value + unit
         return this
     }
 
     HTMLElement.prototype.marginRight = function(value, unit = "px") {
+        if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+            throw new Error(`Invalid value: ${value}. Expected a number.`);
         this.style.marginRight = value + unit
         return this
     }
@@ -351,6 +373,9 @@ HTMLElement.prototype.minHeight = function(value, unit = "px") {
 }
 
 HTMLElement.prototype.fontSize = function(value, unit = "px") {
+    if ((typeof value !== 'number' && value !== "auto") || Number.isNaN(value))
+        throw new Error(`Invalid value: ${value}. Expected a number.`);
+    
     switch(value) {
         case "6xl": 
             value = "3.75"; unit = "rem"
@@ -761,6 +786,5 @@ HTMLElement.prototype.attr = function(attributes) {
     for (const [key, value] of Object.entries(attributes)) {
         this.setAttribute(key, value);
     }
-    console.log(this)
     return this;
 };

ui/site/apps/Forum.js

@@ -1,14 +1,44 @@
 css(`
-    forum- {
-        width: 100%; height: 100%;
+    forum- input::placeholder {
+        font-size: 0.9em;
+        color: var(--accent);
     }
 `)
 
-export default class Forum extends HTMLElement {
+class Forum extends Shadow {
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                input("Search...", "50vw")
+                    .attr({
+                        "type": "text"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .borderRadius(10, px)
+                button("Search")
+                    .marginLeft(2, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .color("var(--accent)")
+            })
+            .x(50, vw).y(5, vh)
+            .position("absolute")
+            .transform("translateX(-50%)")
+        })
+        .width(100, "%")
+        .height(100, "%")
+    }
 
     connectedCallback() {
-        this.innerHTML += /* html */`<p style="position: fixed; top: 50vh; left: 50vw; transform: translate(-50%, -50%)">Coming Soon!</p>`
+        // Optional additional logic
     }
 }
 
-customElements.define("forum-", Forum)
+registerShadow(Forum)

ui/site/apps/Market.js

@@ -1,3 +1,10 @@
+css(`
+    market- input::placeholder {
+        font-size: 0.9em;
+        color: var(--accent);
+    }
+`)
+
 class Market extends Shadow {
 
     render() {
@@ -7,11 +14,19 @@ class Market extends Shadow {
                     .attr({
                         "type": "text"
                     })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
                     .background("transparent")
                     .border("1px solid var(--accent)")
                     .outline("none")
                     .color("var(--accent)")
+                    .borderRadius(10, px)
                 button("Search")
+                    .marginLeft(2, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .color("var(--accent)")
             })
             .x(50, vw).y(5, vh)
             .position("absolute")

ui/site/apps/Messages.js

@@ -1,15 +1,44 @@
 css(`
-    messages- {
-        width: 100%; height: 100%;
+    messages- input::placeholder {
+        font-size: 0.9em;
+        color: var(--accent);
     }
 `)
 
-export default class Messages extends HTMLElement {
+class Messages extends Shadow {
+
+    render() {
+        ZStack(() => {
+            HStack(() => {
+                input("Search...", "50vw")
+                    .attr({
+                        "type": "text"
+                    })
+                    .fontSize(1.1, em)
+                    .paddingLeft(1.3, em)
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .outline("none")
+                    .color("var(--accent)")
+                    .borderRadius(10, px)
+                button("Search")
+                    .marginLeft(2, em)
+                    .borderRadius(10, px)
+                    .background("transparent")
+                    .border("1px solid var(--accent)")
+                    .color("var(--accent)")
+            })
+            .x(50, vw).y(5, vh)
+            .position("absolute")
+            .transform("translateX(-50%)")
+        })
+        .width(100, "%")
+        .height(100, "%")
+    }
 
     connectedCallback() {
-        console.log("rendeirng messages")
-        this.innerHTML += /* html */`<p style="position: fixed; top: 50vh; left: 50vw; transform: translate(-50%, -50%)">Coming Soon!</p>`
+        // Optional additional logic
     }
 }
 
-customElements.define("messages-", Messages)
+registerShadow(Messages)

ui/site/components/AppMenu.js

@@ -3,7 +3,7 @@ css(`
         color: var(--tan);
         transform: translateX(-50%);
         transition: transform .3s;
-        display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 3em;
+        display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2em;
     }
 
     app-menu.minimized {
@@ -37,17 +37,64 @@ css(`
         text-decoration: underline;
         transform: translateY(-10%)
     }
+
+    #divider.minimized {
+        display: none;
+    }
 `)
 
 registerShadow(
     
 class AppMenu extends Shadow {
+    selected;
+
+    constructor(selected) {
+        super()
+        this.selected = selected
+    }
 
     render() {
+        VStack(() => {
+            HStack(() => {
                 p("Forum")
                 p("Messages")
                 p("Market")
+            })
+            .justifyContent("center")
+            .gap("1.5em")
+    
+            img("_/images/divider.svg", "40vw")
+                .attr({
+                    "id": "divider",
+                })
+        })
+        .gap("0.5em")
+
+        if(this.selected) {
+            this.styleMinimized()
         }
+    }
+
+    styleMaximized() {
+        $$("app-menu p").forEach((el) => {
+            el.classList.remove("selected")
+        })
+        this.classList.remove("minimized")
+        $("#divider").style.display = ""
+    }
+
+    styleMinimized() {
+        $$("app-menu p").forEach((el) => {
+            if(el.innerText !== this.selected) {
+                el.classList.remove("selected")
+            } else {
+                el.classList.add("selected")
+            }
+        })
+        this.classList.add("minimized")
+        $("#divider").style.display = "none"
+    }
+
 
     connectedCallback() {
         Array.from(this.querySelectorAll("p")).forEach((el) => {
@@ -60,22 +107,18 @@ class AppMenu extends Shadow {
             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-menu").classList.remove("minimized")
-                $("#divider").classList.remove("minimized")
+                this.selected = ""
+                this.styleMaximized(target)
+                window.navigateTo("/")
                 $("app-window").close()
             } else {
-                target.classList.add("selected")
-                $("app-menu").classList.add("minimized")
-                $("#divider").classList.add("minimized")
+                this.selected = target.innerText
+                this.styleMinimized(target)
+                window.navigateTo("/app/" + target.innerText.toLowerCase())
                 $("app-window").open(target.innerText)
             }
         })

ui/site/components/AppWindow.js

@@ -5,6 +5,11 @@ import "../apps/Market.js"
 class AppWindow extends Shadow {
     app;
 
+    constructor(app) {
+        super()
+        this.app = app
+    }
+
     render() {
         ZStack(() => {
             console.log("happening")

ui/site/components/Home.js

@@ -4,12 +4,6 @@ import "./ProfileButton.js"
 import "./InputBox.js"
 import "./Sidebar.js"
     
-css(`
-    #divider.minimized {
-        display: none;
-    }
-`)
-    
 class Home extends Shadow {
 
     render() {
@@ -23,7 +17,24 @@ class Home extends Shadow {
                 .backgroundPosition("48% 65%")
                 .backgroundRepeat("no-repeat")
 
+                switch(window.location.pathname) {
+                    case "/":
                         AppWindow()
+                        AppMenu()
+                        break
+                    case "/app/forum":
+                        AppWindow("Forum")
+                        AppMenu("Forum")
+                        break;
+                    case "/app/messages":
+                        AppWindow("Messages")
+                        AppMenu("Messages")
+                        break;
+                    case "/app/market":
+                        AppWindow("Market")
+                        AppMenu("Market")
+                        break;
+                }
 
                 ProfileButton()
                     .zIndex(1)
@@ -39,20 +50,22 @@ class Home extends Shadow {
 
                 a("/signout", "Sign Out")
                     .position("fixed")
-                    .top("2em")
+                    .top("3em")
                     .right("2em")
-                    .background("var(--tan)")
-                    .color("var(--red)")
+                    .background("transparent")
+                    .border("1px solid var(--tan)")
+                    .color("var(--tan)")
                     .borderRadius(5, px)
-
-                AppMenu()
-
-                img("_/images/divider.svg", "40vw")
-                    .attr({"id": "divider"})
-                    .position("fixed")
-                    .bottom("2em")
-                    .left("50vw")
-                    .transform("translateX(-50%)")
+                    .onHover(function (hovering) {
+                        console.log('hovering', hovering, this)
+                        if(hovering) {
+                            this.style.background = "var(--tan)"
+                            this.style.color = "black"
+                        } else {
+                            this.style.background = ""
+                            this.style.color = "var(--tan)"
+                        }
+                    })
         })
 
     }

ui/site/index.html

@@ -3,10 +3,10 @@
 <head>
     <title>Hyperia</title>
     <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/quill.js"></script>
-    <script type="module" src="index.js"></script>
+    <link rel="icon" href="/_/icons/logo.svg">
+    <link rel="stylesheet" href="/_/code/shared.css">
+    <script src="/_/code/quill.js"></script>
+    <script type="module" src="75820185/index.js"></script>
 </head>
 <body style="margin: 0px">
 </body>

ui/site/pages/messages.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>Hyperia</title>
-    <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/quill.js"></script>
-    <script type="module">
-      import "./components/ProfileButton.js"
-      import "./components/InputBox.js"
-      import "./components/Sidebar.js"
-
-      import ConnectionHandler from "./ws/ConnectionHandler.js"
-      window.ConnectionHandler = new ConnectionHandler()
-    </script>
-  </head>
-  <body>
-    <profile-button style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw"></profile-button>
-    <input-box></input-box>
-    <side-bar></side-bar>
-  </body>
-</html>