From dc9b1064394fe9723501d462567c7bbfbe0b90d7 Mon Sep 17 00:00:00 2001 From: metacryst Date: Tue, 25 Nov 2025 12:51:32 -0600 Subject: [PATCH] Market filter works except for exclusive boxes --- ui/_/code/quill.js | 53 ++++++++++++++++++++++++++++ ui/site/apps/Forum/Forum.js | 21 ----------- ui/site/apps/Forum/MessagesPanel.js | 4 ++- ui/site/apps/Market/Market.js | 3 +- ui/site/apps/Market/MarketGrid.js | 51 +++++++++++++++++++++----- ui/site/apps/Market/MarketSidebar.js | 15 ++++++++ 6 files changed, 115 insertions(+), 32 deletions(-) diff --git a/ui/_/code/quill.js b/ui/_/code/quill.js index 48a6225..be4f0c7 100644 --- a/ui/_/code/quill.js +++ b/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; diff --git a/ui/site/apps/Forum/Forum.js b/ui/site/apps/Forum/Forum.js index 607d354..8fef3e7 100644 --- a/ui/site/apps/Forum/Forum.js +++ b/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") diff --git a/ui/site/apps/Forum/MessagesPanel.js b/ui/site/apps/Forum/MessagesPanel.js index e75d7b6..b13b1ee 100644 --- a/ui/site/apps/Forum/MessagesPanel.js +++ b/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 diff --git a/ui/site/apps/Market/Market.js b/ui/site/apps/Market/Market.js index b06974b..affdcee 100644 --- a/ui/site/apps/Market/Market.js +++ b/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" } ] diff --git a/ui/site/apps/Market/MarketGrid.js b/ui/site/apps/Market/MarketGrid.js index a81821f..8740f9e 100644 --- a/ui/site/apps/Market/MarketGrid.js +++ b/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++) { - const rating = this.listings[i].stars + let params = new URLSearchParams(window.location.search); + + 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) diff --git a/ui/site/apps/Market/MarketSidebar.js b/ui/site/apps/Market/MarketSidebar.js index ea3ce46..16d1bac 100644 --- a/ui/site/apps/Market/MarketSidebar.js +++ b/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"