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

Improving the 3 apps

Browse Source
This commit is contained in:
metacryst
2025-11-07 20:14:38 -06:00
parent cb526b5ec0
commit e17efce338
13 changed files with 364 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.gitignore vendored
View File

@@ -7,4 +7,5 @@ db/*
server/db/users.json
server/.env
abetaccredited.html
qrCodes/qr_codes
qrCodes/qr_codes
.env

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

@@ -1,6 +1,7 @@
/*
Sam Russell
Captured Sun
11.7.25 - changed registerShadow() to register(), changed onClick() to be like onHover()
11.6.25 - adding default value for "button()" "children" parameter
10.29.25 - adding "gap()" and "label()" functions
*/
@@ -186,7 +187,7 @@ window.Shadow = class extends HTMLElement {
super()
}
}
window.registerShadow = (el, tagname) => {
window.register = (el, tagname) => {
if (typeof el.prototype.render !== 'function') {
throw new Error("Element must have a render: " + el.prototype.constructor.name)
}
@@ -713,7 +714,10 @@ HTMLElement.prototype.onAppear = function(func) {
};
HTMLElement.prototype.onClick = function(func) {
this._storeListener("click", func);
const onMouseDown = () => func.call(this, true);
const onMouseUp = () => func.call(this, false);
this._storeListener("mousedown", onMouseDown);
this._storeListener("mouseup", onMouseUp);
return this;
};

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

@@ -1,49 +0,0 @@
css(`
forum- input::placeholder {
font-size: 0.9em;
color: var(--accent);
}
`)
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({
"type": "text"
})
.fontSize(1.1, em)
.paddingLeft(1.3, em)
.background("transparent")
.border("1px solid var(--accent)")
.outline("none")
.color("var(--accent)")
.borderRadius(10, px)
button("Search")
.marginLeft(2, em)
.borderRadius(10, px)
.background("transparent")
.border("1px solid var(--accent)")
.color("var(--accent)")
})
.x(50, vw).y(5, vh)
.position("absolute")
.transform("translateX(-50%)")
})
.width(100, "%")
.height(100, "%")
}
connectedCallback() {
// Optional additional logic
}
}
registerShadow(Forum)

116
ui/site/apps/Jobs/Jobs.js Normal file
View File

@@ -0,0 +1,116 @@
import "./JobsSidebar.js"
import "./JobsGrid.js"
css(`
jobs- {
font-family: 'Bona';
}
jobs- 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 Jobs extends Shadow {
jobs = [
{
title: "Austin Chapter Lead",
salary: "1% of Local Tax Revenue",
location: "Austin"
},
{
title: "San Marcos Chapter Lead",
salary: "1% of Local Tax Revenue"
}
]
render() {
ZStack(() => {
HStack(() => {
JobsSidebar()
JobsGrid(this.jobs)
})
.width(100, "%")
.x(0).y(13, vh)
HStack(() => {
input("Search jobs...", "45vw")
.attr({
"type": "text"
})
.fontSize(1.1, em)
.paddingLeft(1.3, em)
.background("transparent")
.border("1px solid var(--periwinkle)")
.outline("none")
.color("var(--accent)")
.borderRadius(10, px)
button("Search")
.marginLeft(2, em)
.borderRadius(10, px)
.background("transparent")
.border("1px solid var(--periwinkle)")
.color("var(--accent)")
.fontFamily("Bona Nova")
.onHover(function (hovering) {
if(hovering) {
this.style.background = "var(--green)"
} else {
this.style.background = "transparent"
}
})
button("+ Add Job")
.width(7, em)
.marginLeft(1, em)
.borderRadius(10, px)
.background("transparent")
.border("1px solid var(--periwinkle)")
.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")
.transform("translateX(-50%)")
})
.width(100, "%")
.height(100, "%")
}
connectedCallback() {
// Optional additional logic
}
}
register(Jobs)

43
ui/site/apps/Jobs/JobsGrid.js Normal file
View File

@@ -0,0 +1,43 @@
class JobsGrid extends Shadow {
jobs;
constructor(jobs) {
super()
this.jobs = jobs
}
render() {
VStack(() => {
h3("Results")
.marginTop(0)
.marginBottom(1, em)
.marginLeft(0.4, em)
.color("var(--periwinkle)")
if (this.jobs.length > 0) {
ZStack(() => {
for (let i = 0; i < this.jobs.length; i++) {
p(this.jobs[i].title)
.border("1px solid var(--periwinkle)")
.padding(1, em)
.borderRadius(5, "px")
}
})
.display("grid")
.gridTemplateColumns("repeat(auto-fill, minmax(200px, 1fr))")
.gap(1, em)
} else {
p("No Jobs!")
}
})
.height(100, vh)
.paddingLeft(2, em)
.paddingRight(2, em)
.paddingTop(2, em)
.gap(0, em)
.width(100, "%")
.borderTop("1px solid var(--periwinkle)")
}
}
register(JobsGrid)

17
ui/site/apps/Jobs/JobsSidebar.js Normal file
View File

@@ -0,0 +1,17 @@
class JobsSidebar extends Shadow {
render() {
VStack(() => {
h3("Location")
})
.paddingTop(1, em)
.paddingLeft(3, em)
.paddingRight(3, em)
.gap(1, em)
.borderRight("1px solid var(--periwinkle)")
.minWidth(10, vw)
}
}
register(JobsSidebar)

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

@@ -100,7 +100,7 @@ class Market extends Shadow {
.fontSize(1.1, em)
.paddingLeft(1.3, em)
.background("transparent")
.border("1px solid var(--accent)")
.border("1px solid var(--periwinkle)")
.outline("none")
.color("var(--accent)")
.borderRadius(10, px)
@@ -109,21 +109,42 @@ class Market extends Shadow {
.marginLeft(2, em)
.borderRadius(10, px)
.background("transparent")
.border("1px solid var(--accent)")
.border("1px solid var(--periwinkle)")
.color("var(--accent)")
.fontFamily("Bona Nova")
.onHover(function (hovering) {
if(hovering) {
this.style.background = "var(--green)"
} else {
this.style.background = "transparent"
}
})
button("+ Add Item")
.width(7, em)
.marginLeft(1, em)
.borderRadius(10, px)
.background("transparent")
.border("1px solid var(--accent)")
.border("1px solid var(--periwinkle)")
.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(5, vh)
.x(55, vw).y(4, vh)
.position("absolute")
.transform("translateX(-50%)")
})
@@ -136,4 +157,4 @@ class Market extends Shadow {
}
}
registerShadow(Market)
register(Market)

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

@@ -1,39 +1,138 @@
css(`
messages- {
font-family: 'Bona';
}
messages- 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 Messages extends Shadow {
friends = []
conversations = []
render() {
ZStack(() => {
p("Coming Soon!")
HStack(() => {
VStack(() => {
h3("Friends")
.marginTop(0)
.marginBottom(1, em)
.marginLeft(0.4, em)
if (this.friends.length > 1) {
for(let i = 0; i < this.friends.length; i++) {
p(this.friends[i].name)
}
} else {
p("No Friends!")
}
})
.height(100, vh)
.paddingLeft(2, em)
.paddingRight(2, em)
.paddingTop(2, em)
.gap(0, em)
.borderRight("1px solid var(--periwinkle)")
VStack(() => {
h3("Conversations")
.marginTop(0)
.marginBottom(1, em)
.marginLeft(0.4, em)
if (this.conversations.length > 1) {
for(let i = 0; i < this.conversations.length; i++) {
p(this.conversations[i].name)
}
} else {
p("No Conversations!")
}
})
.height(100, vh)
.paddingLeft(2, em)
.paddingRight(2, em)
.paddingTop(2, em)
.gap(0, em)
.borderRight("1px solid var(--periwinkle)")
})
.width(100, "%")
.x(0).y(13, vh)
.borderTop("1px solid var(--periwinkle)")
p("0 Items")
.position("absolute")
.x(50, vw).y(50, vh)
.transform("translate(-50%, -50%)")
HStack(() => {
input("Search...", "50vw")
input("Search messages...", "45vw")
.attr({
"type": "text"
})
.fontSize(1.1, em)
.paddingLeft(1.3, em)
.background("transparent")
.border("1px solid var(--accent)")
.border("1px solid var(--periwinkle)")
.outline("none")
.color("var(--accent)")
.borderRadius(10, px)
button("Search")
.marginLeft(2, em)
.borderRadius(10, px)
.background("transparent")
.border("1px solid var(--accent)")
.border("1px solid var(--periwinkle)")
.color("var(--accent)")
.fontFamily("Bona Nova")
.onHover(function (hovering) {
if(hovering) {
this.style.background = "var(--green)"
} else {
this.style.background = "transparent"
}
})
button("+ New Message")
.width(15, em)
.marginLeft(1, em)
.borderRadius(10, px)
.background("transparent")
.border("1px solid var(--periwinkle)")
.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(50, vw).y(5, vh)
.x(55, vw).y(4, vh)
.position("absolute")
.transform("translateX(-50%)")
})
@@ -41,9 +140,39 @@ class Messages extends Shadow {
.height(100, "%")
}
SidebarName(name) {
let firstLetter = name[0]
HStack(() => {
div(firstLetter)
.display("flex")
.justifyContent("center")
.alignItems("center")
.width(1.5, em)
.height(1.5, em)
.border("1px solid var(--periwinkle)")
.borderRadius(100, "%")
p(name)
.marginLeft(1, em)
})
.alignItems("center")
.padding(5, px)
.borderRadius(0.5, em)
.cursor("default")
.onHover(function (hovering) {
if(hovering) {
this.style.background = "var(--green)"
} else {
this.style.background = "transparent"
}
})
}
connectedCallback() {
// Optional additional logic
}
}
registerShadow(Messages)
register(Messages)

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

@@ -43,7 +43,7 @@ css(`
}
`)
registerShadow(
register(
class AppMenu extends Shadow {
selected;
@@ -56,12 +56,13 @@ class AppMenu extends Shadow {
render() {
VStack(() => {
HStack(() => {
p("Forum")
p("Messages")
p("Market")
p("Jobs")
})
.justifyContent("center")
.gap(1.5, em)
.paddingRight(2, em)
img("_/images/divider.svg", "40vw")
.attr({

8
ui/site/components/AppWindow.js
View File

@@ -1,4 +1,4 @@
import "../apps/Forum.js"
import "../apps/Jobs/Jobs.js"
import "../apps/Messages.js"
import "../apps/Market.js"
@@ -13,8 +13,8 @@ class AppWindow extends Shadow {
render() {
ZStack(() => {
switch(this.app) {
case "Forum":
Forum()
case "Jobs":
Jobs()
break;
case "Messages":
Messages()
@@ -44,4 +44,4 @@ class AppWindow extends Shadow {
}
registerShadow(AppWindow, "app-window")
register(AppWindow, "app-window")

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

@@ -8,10 +8,10 @@ class Home extends Shadow {
render() {
ZStack(() => {
img("_/icons/logo.svg", "3.5em")
img("_/icons/logo.svg", "2.5em")
.position("fixed")
.left("3em")
.top("2em")
.top("3vh")
.zIndex(3)
// .onClick(() => {
// window.navigateTo("/")
@@ -32,9 +32,9 @@ class Home extends Shadow {
AppWindow()
AppMenu()
break
case "/app/forum":
AppWindow("Forum")
AppMenu("Forum")
case "/app/jobs":
AppWindow("Jobs")
AppMenu("Jobs")
break;
case "/app/messages":
AppWindow("Messages")
@@ -55,20 +55,17 @@ class Home extends Shadow {
a("/signout", "Sign Out")
.position("fixed")
.top("3em")
.top("5vh")
.right("2em")
.background("transparent")
.border(window.location.pathname === "/" ? "1px solid var(--tan)" : "1px solid var(--accent)")
.border(window.location.pathname === "/" ? "1px solid var(--tan)" : "1px solid var(--periwinkle)")
.color(window.location.pathname === "/" ? "var(--tan)" : "var(--accent)")
.borderRadius(5, px)
.onHover(function (hovering) {
console.log('hovering', hovering, this)
if(hovering) {
this.style.background = "var(--tan)"
this.style.color = "black"
this.style.background = "var(--green)"
} else {
this.style.background = ""
this.style.color = window.location.pathname === "/" ? "var(--tan)" : "var(--accent)"
}
})
.onNavigate(function () {
@@ -77,7 +74,7 @@ class Home extends Shadow {
this.style.border = "1px solid var(--tan)"
this.style.color = "var(--tan)"
} else {
this.style.border = "1px solid var(--accent)"
this.style.border = "1px solid var(--periwinkle)"
this.style.color = "var(--accent)"
}
})
@@ -85,4 +82,4 @@ class Home extends Shadow {
}
}
registerShadow(Home)
register(Home)

2
ui/site/components/ProfileButton.js
View File

@@ -40,4 +40,4 @@ class ProfileButton extends Shadow {
}
}
registerShadow(ProfileButton)
register(ProfileButton)

2
ui/site/components/ProfileMenu.js
View File

@@ -49,4 +49,4 @@ class ProfileMenu extends Shadow {
}
}
registerShadow(ProfileMenu, "profile-menu")
register(ProfileMenu, "profile-menu")