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

adding some market elements

Browse Source
This commit is contained in:
metacryst
2025-10-29 22:27:56 -05:00
parent 759ee54c32
commit 9dec94e58e
6 changed files with 144 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -487,6 +487,13 @@ HTMLElement.prototype.positionType = function (value) {
return this
}
HTMLElement.prototype.gap = function(value, unit = "px") {
if (typeof value !== 'number' || Number.isNaN(value))
throw new Error(`Invalid value: ${value}. Expected a number.`);
this.style.gap = value + unit
return this
}
/* Elements */
quill.setChildren = function(el, innerContent) {
@@ -617,6 +624,13 @@ window.input = function(placeholder, width, height) {
return el
}
window.label = function(text) {
let el = document.createElement("label")
el.innerText = text
quill.render(el)
return el
}
window.textarea = function(placeholder) {
let el = document.createElement("textarea")
el.placeholder = placeholder

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

@@ -9,6 +9,11 @@ class Forum extends Shadow {
render() {
ZStack(() => {
p("Coming Soon!")
.position("absolute")
.x(50, vw).y(50, vh)
.transform("translate(-50%, -50%)")
HStack(() => {
input("Search...", "50vw")
.attr({

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

@@ -1,14 +1,70 @@
css(`
market- {
font-family: 'Bona';
}
market- input::placeholder {
font-family: 'Bona Nova';
font-size: 0.9em;
color: var(--accent);
}
input[type="checkbox"] {
appearance: none; /* remove default style */
-webkit-appearance: none;
width: 1em;
height: 1em;
border: 1px solid var(--accent);
}
input[type="checkbox"]:checked {
background-color: var(--red);
}
`)
class Market extends Shadow {
render() {
ZStack(() => {
HStack(() => {
VStack(() => {
HStack(() => {
input()
.attr({
"type": "checkbox",
"id": "hyperia-check"
})
label("Hyperia-Made")
.attr({
"for": "hyperia-check"
})
.marginLeft(0.5, em)
})
HStack(() => {
input()
.attr({
"type": "checkbox",
"id": "america-check"
})
label("America-Made")
.attr({
"for": "america-check"
})
.marginLeft(0.5, em)
})
})
.paddingLeft(3, em)
.gap(1, em)
})
.width(100, "%")
.x(0).y(25, vh)
p("0 Items")
.position("absolute")
.x(50, vw).y(50, vh)
.transform("translate(-50%, -50%)")
HStack(() => {
input("Search for products...", "50vw")
.attr({
@@ -27,6 +83,7 @@ class Market extends Shadow {
.background("transparent")
.border("1px solid var(--accent)")
.color("var(--accent)")
.fontFamily("Bona Nova")
})
.x(50, vw).y(5, vh)
.position("absolute")

5
ui/site/apps/Messages.js
View File

@@ -9,6 +9,11 @@ class Messages extends Shadow {
render() {
ZStack(() => {
p("Coming Soon!")
.position("absolute")
.x(50, vw).y(50, vh)
.transform("translate(-50%, -50%)")
HStack(() => {
input("Search...", "50vw")
.attr({

4
ui/site/components/AppMenu.js
View File

@@ -61,14 +61,14 @@ class AppMenu extends Shadow {
p("Market")
})
.justifyContent("center")
.gap("1.5em")
.gap(1.5, em)
img("_/images/divider.svg", "40vw")
.attr({
"id": "divider",
})
})
.gap("0.5em")
.gap(0.5, em)
if(this.selected) {
this.styleMinimized()

117
ui/site/components/Home.js
View File

@@ -8,6 +8,16 @@ class Home extends Shadow {
render() {
ZStack(() => {
img("_/icons/logo.svg", "3.5em")
.position("fixed")
.left("3em")
.top("2em")
.zIndex(3)
// .onClick(() => {
// window.navigateTo("/")
// this.rerender()
// })
div()
.width(100, vw)
.height(100, vh)
@@ -17,64 +27,59 @@ class Home extends Shadow {
.backgroundPosition("48% 65%")
.backgroundRepeat("no-repeat")
switch(window.location.pathname) {
case "/":
AppWindow()
AppMenu()
break
case "/app/forum":
AppWindow("Forum")
AppMenu("Forum")
break;
case "/app/messages":
AppWindow("Messages")
AppMenu("Messages")
break;
case "/app/market":
AppWindow("Market")
AppMenu("Market")
break;
}
switch(window.location.pathname) {
case "/":
AppWindow()
AppMenu()
break
case "/app/forum":
AppWindow("Forum")
AppMenu("Forum")
break;
case "/app/messages":
AppWindow("Messages")
AppMenu("Messages")
break;
case "/app/market":
AppWindow("Market")
AppMenu("Market")
break;
}
ProfileButton()
.zIndex(1)
.cursor("default")
.position("fixed")
.top("5.5vh")
.right("4.5vw")
ProfileButton()
.zIndex(1)
.cursor("default")
.position("fixed")
.top("5.5vh")
.right("4.5vw")
img("_/icons/logo.svg", "3.5em")
.position("fixed")
.left("3em")
.top("2em")
a("/signout", "Sign Out")
.position("fixed")
.top("3em")
.right("2em")
.background("transparent")
.border("1px solid var(--tan)")
.color("var(--tan)")
.borderRadius(5, px)
.onHover(function (hovering) {
console.log('hovering', hovering, this)
if(hovering) {
this.style.background = "var(--tan)"
this.style.color = "black"
} else {
this.style.background = ""
this.style.color = "var(--tan)"
}
})
.onNavigate(function () {
if(window.location.pathname === "/") {
this.style.border = "1px solid var(--tan)"
this.style.color = "var(--tan)"
} else {
this.style.border = "1px solid var(--accent)"
this.style.color = "var(--accent)"
}
})
a("/signout", "Sign Out")
.position("fixed")
.top("3em")
.right("2em")
.background("transparent")
.border("1px solid var(--tan)")
.color("var(--tan)")
.borderRadius(5, px)
.onHover(function (hovering) {
console.log('hovering', hovering, this)
if(hovering) {
this.style.background = "var(--tan)"
this.style.color = "black"
} else {
this.style.background = ""
this.style.color = "var(--tan)"
}
})
.onNavigate(function () {
if(window.location.pathname === "/") {
this.style.border = "1px solid var(--tan)"
this.style.color = "var(--tan)"
} else {
this.style.border = "1px solid var(--accent)"
this.style.color = "var(--accent)"
}
})
})
}