Market filter works except for exclusive boxes

ui/_/code/quill.js

@@ -1,6 +1,7 @@
 /*
     Sam Russell
     Captured Sun
+    11.25.25 - Added onChange for check boxes, added setQuery / onQueryChanged for easy filtering
     11.24.25 - Fixing onClick because it was reversed, adding event to onHover params
     11.23.25 - Added onSubmit() event for form submission, added marginHorizontal() and marginVertical()
     11.20.25 - Added "pct" style unit, added alignVertical and alignHorizontal for flex boxes
@@ -28,6 +29,23 @@ history.pushState = function pushState() {
 window.addEventListener('popstate', () => {
     window.dispatchEvent(new Event('navigate'));
 });
+
+window.setQuery = function(key, value) {
+    const url = new URL(window.location.href);
+    const params = url.searchParams;
+
+    if (value === null || value === undefined) {
+        params.delete(key);
+    } else {
+        params.set(key, value);
+    }
+
+    const newUrl = url.toString();
+    history.replaceState(null, "", newUrl);
+    window.dispatchEvent(new Event('query-changed'));
+
+    return newUrl;
+};
   
 window.navigateTo = function(url) {
     window.dispatchEvent(new Event('navigate'));
@@ -877,6 +895,14 @@ HTMLElement.prototype.onInput = function(cb) {
     return this;
 };
 
+HTMLElement.prototype.onChange = function(cb) {
+    if(!this.matches('input, textarea, [contenteditable=""], [contenteditable="true"]'))
+        throw new Error("Can't put input event on non-input element!")
+    this._storeListener("change", cb);
+    return this;
+};
+
+
 HTMLElement.prototype.onSubmit = function(cb) {
     if(!this.matches('form'))
         throw new Error("Can't put form event on non-form element!")
@@ -929,6 +955,33 @@ window.addEventListener("navigate", () => {
     }
 })
 
+/* 
+Same principle applies
+*/
+queryListeners = []
+HTMLElement.prototype.onQueryChanged = function(cb) {
+    this._storeListener("query-changed", cb);
+
+    let found = false
+    for(entry of queryListeners) {
+        if(entry.cb.toString() === cb.toString() &&
+            this.nodeName === entry.el.nodeName) {
+            found = true
+            break;
+        }
+    }
+    if(found === false) {
+        queryListeners.push({el: this, cb: cb})
+    }
+
+    return this;
+};
+window.addEventListener("query-changed", () => {
+    for(entry of queryListeners) {
+        entry.el.dispatchEvent(new CustomEvent("query-changed"))
+    }
+})
+
 HTMLElement.prototype.onEvent = function(name, cb) {
     window._storeListener(window, name, cb);
     return this;

ui/site/apps/Forum/Forum.js

@@ -103,27 +103,6 @@ class Forum extends Shadow {
                         }
                     })
 
-                button("+ New Message")
-                    .width(13, em)
-                    .marginLeft(1, em)
-                    .borderRadius(10, px)
-                    .background("transparent")
-                    .border("0.5px solid #bb7c36")
-                    .color("var(--accent)")
-                    .fontFamily("Bona Nova")
-                    .onHover(function (hovering) {
-                        if(hovering) {
-                            this.style.background = "var(--green)"
-
-                        } else {
-                            this.style.background = "transparent"
-
-                        }
-                    })
-                    .onClick((clicking) => {
-                        console.log(this, "clicked")
-                    })
-
             })
             .x(55, vw).y(4, vh)
             .position("absolute")

ui/site/apps/Forum/MessagesPanel.js

@@ -64,7 +64,9 @@ class MessagesPanel extends Shadow {
             }
             window.addEventListener("new-message", (e) => {
                 this.messages = e.detail
-                this.rerender()
+                if(e.detail.length !== this.messages || e.detail.last.time !== this.messages.last.time || e.detail.first.time !== this.messages.first.time) {
+                    this.rerender()
+                }
             })
         })
         .scrollTop = this.scrollHeight

ui/site/apps/Market/Market.js

@@ -35,7 +35,8 @@ class Market extends Shadow {
             price: "$12",
             company: "Hyperia",
             type: "new",
-            image: "/db/images/1"
+            image: "/db/images/1",
+            madeIn: "America"
         }
     ]
 

ui/site/apps/Market/MarketGrid.js

@@ -29,24 +29,46 @@ class MarketGrid extends Shadow {
                 ZStack(() => {
                     // BuyModal()
 
-                    for (let i = 0; i < this.listings.length; i++) {
+                    let params = new URLSearchParams(window.location.search);
-                        const rating = this.listings[i].stars
+
+                    const hyperiaMade = params.get("hyperia-made") === "true";
+                    const americaMade = params.get("america-made") === "true";
+                    const newItem = params.get("new") === "true";
+                    const usedItem = params.get("used") === "true";
+
+
+                    let filtered = this.listings;
+                    if (hyperiaMade) {
+                        filtered = filtered.filter(item => item.madeIn === "Hyperia");
+                    }
+                    if (americaMade) {
+                        filtered = filtered.filter(item => item.madeIn === "America");
+                    }
+                    if (newItem) {
+                        filtered = filtered.filter(item => item.type === "new");
+                    }
+                    if (usedItem) {
+                        filtered = filtered.filter(item => item.type === "used");
+                    }
+
+                    for (let i = 0; i < filtered.length; i++) {
+                        const rating = filtered[i].stars
                         const percent = (rating / 5)
 
                         VStack(() => {
-                            img(this.listings[i].image)
+                            img(filtered[i].image)
                                 .marginBottom(0.5, em)
 
-                            p(this.listings[i].company)
+                            p(filtered[i].company)
                                 .marginBottom(0.5, em)
 
-                            p(this.listings[i].title)
+                            p(filtered[i].title)
                                 .fontSize(1.2, em)
                                 .fontWeight("bold")
                                 .marginBottom(0.5, em)
 
                             HStack(() => {
-                                p(this.listings[i].stars)
+                                p(filtered[i].stars)
                                     .marginRight(0.2, em)
 
                                 ZStack(() => {
@@ -67,21 +89,28 @@ class MarketGrid extends Shadow {
                                 .fontSize(1.2, em)
                                 .lineHeight(1)
                                 
-                                p(this.listings[i].reviews)
+                                p(filtered[i].reviews)
                                 .marginLeft(0.2, em)
                             })
                                 .marginBottom(0.5, em)
 
-                            p(this.listings[i].price)
+                            p(filtered[i].price)
                                 .fontSize(1.75, em)
                                 .marginBottom(0.5, em)
 
-                            button("Buy Now")
+                            button("Coming Soon!")
                                 .onClick((finished) => {
                                     if(finished) {
 
                                     }
                                 })
+                                .onHover(function (hovering) {
+                                    if(hovering) {
+                                        this.style.backgroundColor = "var(--green)"
+                                    } else {
+                                        this.style.backgroundColor = ""
+                                    }
+                                })
 
                         })
                         .padding(1, em)
@@ -96,6 +125,10 @@ class MarketGrid extends Shadow {
                 p("No Listings!")
             }
         })
+        .onQueryChanged(() => {
+            console.log("query did change yup")
+            this.rerender()
+        })
         .height(100, vh)
         .paddingLeft(2, em)
         .paddingRight(2, em)

ui/site/apps/Market/MarketSidebar.js

@@ -1,4 +1,15 @@
 class MarketSidebar extends Shadow {
+
+    handleChecked(e) {
+        let checked = e.target.checked
+        let label = $(`label[for="${e.target.id}"]`).innerText
+        if(checked) {
+            window.setQuery(label.toLowerCase(), true)
+        } else {
+            window.setQuery(label.toLowerCase(), null)
+        }
+    }
+
     render() {
         VStack(() => {
             HStack(() => {
@@ -7,6 +18,7 @@ class MarketSidebar extends Shadow {
                         "type": "checkbox",
                         "id": "hyperia-check"
                     })
+                    .onChange(this.handleChecked)
                 label("Hyperia-Made")
                     .attr({
                         "for": "hyperia-check"
@@ -20,6 +32,7 @@ class MarketSidebar extends Shadow {
                         "type": "checkbox",
                         "id": "america-check"
                     })
+                    .onChange(this.handleChecked)
                 label("America-Made")
                     .attr({
                         "for": "america-check"
@@ -33,6 +46,7 @@ class MarketSidebar extends Shadow {
                         "type": "checkbox",
                         "id": "new-check"
                     })
+                    .onChange(this.handleChecked)
                 label("New")
                     .attr({
                         "for": "new-check"
@@ -46,6 +60,7 @@ class MarketSidebar extends Shadow {
                         "type": "checkbox",
                         "id": "used-check"
                     })
+                    .onChange(this.handleChecked)
                 label("Used")
                     .attr({
                         "for": "used-check"