Market filter works except for exclusive boxes

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

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

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

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"
}
]

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)

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"