140 lines
5.1 KiB
JavaScript
140 lines
5.1 KiB
JavaScript
class MarketGrid extends Shadow {
|
|
listings;
|
|
|
|
constructor(listings) {
|
|
super()
|
|
this.listings = listings
|
|
}
|
|
|
|
boldUntilFirstSpace(text) {
|
|
if(!text) return
|
|
const index = text.indexOf(' ');
|
|
if (index === -1) {
|
|
// No spaces — bold the whole thing
|
|
return `<b>${text}</b>`;
|
|
}
|
|
return `<b>${text.slice(0, index)}</b>${text.slice(index)}`;
|
|
}
|
|
|
|
render() {
|
|
VStack(() => {
|
|
h3("Results")
|
|
.marginTop(0.1, em)
|
|
.marginBottom(1, em)
|
|
.marginLeft(0.4, em)
|
|
.color("var(--accent)")
|
|
.opacity(0.7)
|
|
|
|
if (this.listings.length > 0) {
|
|
ZStack(() => {
|
|
// BuyModal()
|
|
|
|
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(filtered[i].image)
|
|
.marginBottom(0.5, em)
|
|
|
|
p(filtered[i].company)
|
|
.marginBottom(0.5, em)
|
|
|
|
p(filtered[i].title)
|
|
.fontSize(1.2, em)
|
|
.fontWeight("bold")
|
|
.marginBottom(0.5, em)
|
|
|
|
HStack(() => {
|
|
p(filtered[i].stars)
|
|
.marginRight(0.2, em)
|
|
|
|
ZStack(() => {
|
|
div("★★★★★") // Empty stars (background)
|
|
.color("#ccc")
|
|
|
|
div("★★★★★") // Filled stars (foreground, clipped by width)
|
|
.color("#ffa500")
|
|
.position("absolute")
|
|
.top(0)
|
|
.left(0)
|
|
.whiteSpace("nowrap")
|
|
.overflow("hidden")
|
|
.width(percent * 5, em)
|
|
})
|
|
.display("inline-block")
|
|
.position("relative")
|
|
.fontSize(1.2, em)
|
|
.lineHeight(1)
|
|
|
|
p(filtered[i].reviews)
|
|
.marginLeft(0.2, em)
|
|
})
|
|
.marginBottom(0.5, em)
|
|
|
|
p(filtered[i].price)
|
|
.fontSize(1.75, em)
|
|
.marginBottom(0.5, em)
|
|
|
|
button("Coming Soon!")
|
|
.onClick((finished) => {
|
|
if(finished) {
|
|
|
|
}
|
|
})
|
|
.onHover(function (hovering) {
|
|
if(hovering) {
|
|
this.style.backgroundColor = "var(--green)"
|
|
} else {
|
|
this.style.backgroundColor = ""
|
|
}
|
|
})
|
|
|
|
})
|
|
.padding(1, em)
|
|
.border("1px solid var(--accent2)")
|
|
.borderRadius(5, "px")
|
|
}
|
|
})
|
|
.display("grid")
|
|
.gridTemplateColumns("repeat(auto-fill, minmax(250px, 1fr))")
|
|
.gap(1, em)
|
|
} else {
|
|
p("No Listings!")
|
|
}
|
|
})
|
|
.onQueryChanged(() => {
|
|
console.log("query did change yup")
|
|
this.rerender()
|
|
})
|
|
.height(100, vh)
|
|
.paddingLeft(2, em)
|
|
.paddingRight(2, em)
|
|
.gap(0, em)
|
|
.width(100, "%")
|
|
}
|
|
}
|
|
|
|
register(MarketGrid) |