sam/Hyperia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Market filter works except for exclusive boxes

Browse Source
This commit is contained in:
metacryst
2025-11-25 12:51:32 -06:00
parent cf9edc066a
commit dc9b106439
6 changed files with 115 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
ui/_/code/quill.js
View File

@@ -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;

21
ui/site/apps/Forum/Forum.js
View File

@@ -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")

4
ui/site/apps/Forum/MessagesPanel.js
View File

@@ -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

3
ui/site/apps/Market/Market.js
View File

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

51
ui/site/apps/Market/MarketGrid.js
View File

@@ -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)

15
ui/site/apps/Market/MarketSidebar.js
View File

@@ -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"