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

Basic Navigation

Browse Source
This commit is contained in:
metacryst
2025-11-18 04:51:40 -06:00
parent ff28d68988
commit 7f85dbe493
12 changed files with 143 additions and 348 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,6 +1,7 @@
/*
Sam Russell
Captured Sun
11.17.25.2 - Fixing onNavigate() and onAppear()
11.17.25 - Added dynamic function to have units in style func parameters.
11.14.25 - Added onTouch, onTap. Changed style setters to work with Safari. Added center() funcs.
11.13.25 - changed onFocus() to be a boolean event, added onInput()
@@ -273,7 +274,6 @@ function extendHTMLElementWithStyleSetters() {
allStyleProps.forEach(prop => {
if (prop === "translate") return;
if(prop === "position") console.log("position")
const type = cssValueType(prop);
@@ -792,7 +792,7 @@ window.Triangle = function (width = "40px", height = "40px") {
/* EVENTS */
HTMLElement.prototype.onAppear = function(func) {
func(this);
func.call(this);
return this;
};
@@ -867,15 +867,33 @@ HTMLElement.prototype.onTap = function(cb) {
/* WHY THIS LISTENER IS THE WAY IT IS:
- If we dispatch the "navigate" event on the window (as one would expect for a "navigate" event), a listener placed on the element will not pick it up.
- However, if we add the listener here on the window, it won't have the "this" scope that a callback normally would. Which makes it much less useful.
- However, if we add the listener on the window, it won't have the "this" scope that a callback normally would. Which makes it much less useful.
- Then, if we try to add that scope using bind(), it makes the function.toString() unreadable, which means we cannot detect duplicate listeners.
- Therefore, we just have to attach the navigate event to the element, and manually trigger that when the window listener fires.
*/
navigateListeners = []
HTMLElement.prototype.onNavigate = function(cb) {
this._storeListener("navigate", cb);
window.addEventListener("navigate", () => this.dispatchEvent(new CustomEvent("navigate")))
let found = false
for(entry of navigateListeners) {
if(entry.cb.toString() === cb.toString() &&
this.nodeName === entry.el.nodeName) {
found = true
break;
}
}
if(found === false) {
navigateListeners.push({el: this, cb: cb})
}
return this;
};
window.addEventListener("navigate", () => {
for(entry of navigateListeners) {
entry.el.dispatchEvent(new CustomEvent("navigate"))
}
})
HTMLElement.prototype.onEvent = function(name, cb) {
window._storeListener(window, name, cb);

25
ui/public/components/Home.js
View File

@@ -1,25 +0,0 @@
import "./NavBar.js"
class Home extends Shadow {
render() {
img("_/images/knight.png", "29vw")
.position("absolute")
.left(50, vw).top(50, vh)
.center()
p("H   Y   P   E   R   I   A")
.x(50, vw).y(50, vh)
.center()
.color("var(--gold)")
.fontSize(5, vw)
NavBar()
p("A CLASSICAL CHRISTIAN ASSOCIATION")
.x(50, vw).y(94, vh)
.center()
.letterSpacing(0.3, em)
}
}
register(Home)

63
ui/public/components/NavBar.js
View File

@@ -1,10 +1,41 @@
class NavBar extends Shadow {
NavButton(text) {
function normalizeText(text) {
return text.toLowerCase().replace(/[\s?]+/g, "");
}
function isSelected(el) {
return ("/" + normalizeText(el.innerText)) === window.location.pathname
}
return p(text)
.cursor("default")
.textUnderlineOffset(0.5, em)
.onAppear(function() {
this.style.textDecoration = isSelected(this) ? "underline" : ""
})
.onHover(function (hovering) {
if(hovering) {
this.style.textDecoration = "underline"
} else if(!isSelected(this)) {
this.style.textDecoration = ""
}
})
.onClick(function (done) {
if(done) {
window.navigateTo(normalizeText(this.innerText))
}
})
}
render() {
HStack(() => {
p("WHY?")
p("EVENTS")
p("JOIN")
p("SIGN IN")
this.NavButton("WHY?")
this.NavButton("EVENTS")
this.NavButton("JOIN")
this.NavButton("SIGN IN")
})
.x(50, vw).y(4, em)
.center()
@@ -13,30 +44,6 @@ class NavBar extends Shadow {
.gap(3, em)
.paddingRight(2, em)
.onNavigate(() => {
console.log("hi")
})
.onAppear(() => {
Array.from(this.$("p")).forEach((el) => {
el.addEventListener("mousedown", (e) => {
el.classList.add("touched")
})
})
window.addEventListener("mouseup", (e) => {
let target = e.target
if(!target.matches("app-menu p")) {
return
}
target.classList.remove("touched")
if(target.classList.contains("selected")) {
this.selected = ""
window.navigateTo("/")
} else {
this.selected = target.innerText
window.navigateTo("/app/" + target.innerText.toLowerCase())
}
})
})
}
}

2
ui/public/index.js
View File

@@ -1,2 +1,2 @@
import "./components/Home.js"
import "./pages/Home.js"
Home()

7
ui/public/pages/Events.js Normal file
View File

@@ -0,0 +1,7 @@
class Events extends Shadow {
render() {
}
}
register(Events)

55
ui/public/pages/Home.js Normal file
View File

@@ -0,0 +1,55 @@
import "../components/NavBar.js"
import "./Why.js"
import "./Events.js"
import "./Join.js"
import "./SignIn.js"
class Home extends Shadow {
render() {
ZStack(() => {
NavBar()
switch(window.location.pathname) {
case "/":
img("_/images/knight.png", "29vw")
.position("absolute")
.left(50, vw).top(50, vh)
.center()
p("H   Y   P   E   R   I   A")
.x(50, vw).y(50, vh)
.center()
.color("var(--gold)")
.fontSize(5, vw)
p("A CLASSICAL CHRISTIAN ASSOCIATION")
.x(50, vw).y(94, vh)
.center()
.letterSpacing(0.3, em)
break;
case "/why":
Why()
break;
case "/events":
Events()
break;
case "/join":
Join()
break;
case "/signin":
SignIn()
break;
}
})
.onNavigate(() => {
this.rerender()
})
}
}
register(Home)

9
ui/public/pages/Join.js Normal file
View File

@@ -0,0 +1,9 @@
class Join extends Shadow {
render() {
p("Membership is invitation-only. Look out for us in person, or come to an event!")
.x(50, vw).y(50, vh)
.center()
}
}
register(Join)

7
ui/public/pages/SIgnIn.js Normal file
View File

@@ -0,0 +1,7 @@
class SignIn extends Shadow {
render() {
}
}
register(SignIn)

7
ui/public/pages/Why.js Normal file
View File

@@ -0,0 +1,7 @@
class Why extends Shadow {
render() {
}
}
register(Why)

86
ui/public/pages/about.html
View File

@@ -1,86 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hyperia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="_/code/shared.css">
<style>
#items {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center; /* centers children horizontally */
text-align: center; /* ensures text inside spans is centered */
}
@media (max-width: 600px) {
input {
width: 50vw
}
}
</style>
<script src="_/code/quill.js"></script>
<script type="module">
import PageFooter from "./components/Footer.js"
import NavBar from "./components/NavBar.js"
import SideBar from "./components/SideBar.js"
</script>
</head>
<body>
<span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
<a href="join">join</a>
<span>|</span>
<a href="signin">sign in</a>
</div>
<div id="items">
<form id="signup-form">
<input name="email" id="email" placeholder="email" required style="margin-bottom: 15px;">
<br>
<p id="applicant-message" style="color: green; font-size: 1em; margin: 0.5em 0; margin-bottom: 1em"></p>
<button type="submit" style="background-color: rgb(193, 135, 29)">Sign Up</button>
</form>
<script>
document.getElementById('signup-form').addEventListener('submit', async (e) => {
e.preventDefault(); // prevent page reload
const email = document.getElementById('email').value;
const messageEl = document.getElementById('applicant-message');
try {
const res = await fetch('/api/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({ email }),
});
if (res.ok) {
const data = await res.json();
messageEl.style.color = 'green';
messageEl.textContent = data.message;
} else {
const error = await res.text();
messageEl.style.color = 'red';
messageEl.textContent = 'Error: ' + error;
}
} catch (err) {
messageEl.style.color = 'red';
messageEl.textContent = 'Error submitting form.';
console.error(err);
}
});
</script>
</div>
</body>
</html>

118
ui/public/pages/join.html
View File

@@ -1,118 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hyperia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="_/code/shared.css">
<style>
#items {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center; /* centers children horizontally */
text-align: center; /* ensures text inside spans is centered */
}
input {
background-color: transparent;
border: none;
border-radius: 5px;
border-top: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
height: 2em;
width: 15vw;
padding: 0.2em;
transition: border .2s, padding .2s;
color: var(--accent)
}
input::placeholder {
color: var(--accent);
}
input:focus {
outline: none;
padding: 0.4em;
border-top: 2px solid var(--red);
border-bottom: 2px solid var(--red);
}
input:focus::placeholder {
color: var(--red)
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: #c7a67b !important;
}
@media (max-width: 600px) {
input {
width: 50vw
}
}
</style>
<script src="_/code/quill.js"></script>
<script type="module">
import PageFooter from "./components/Footer.js"
import NavBar from "./components/NavBar.js"
import SideBar from "./components/SideBar.js"
</script>
</head>
<body>
<span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
<a href="join">join</a>
<span>|</span>
<a href="signin">sign in</a>
</div>
<div id="items">
<form id="signup-form">
<input name="email" id="email" placeholder="email" required style="margin-bottom: 15px;">
<br>
<p id="applicant-message" style="color: green; font-size: 1em; margin: 0.5em 0; margin-bottom: 1em"></p>
<button type="submit" style="background-color: rgb(193, 135, 29)">Sign Up</button>
</form>
<script>
document.getElementById('signup-form').addEventListener('submit', async (e) => {
e.preventDefault(); // prevent page reload
const email = document.getElementById('email').value;
const messageEl = document.getElementById('applicant-message');
try {
const res = await fetch('/api/signup', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({ email }),
});
if (res.ok) {
const data = await res.json();
messageEl.style.color = 'green';
messageEl.textContent = data.message;
} else {
const error = await res.text();
messageEl.style.color = 'red';
messageEl.textContent = 'Error: ' + error;
}
} catch (err) {
messageEl.style.color = 'red';
messageEl.textContent = 'Error submitting form.';
console.error(err);
}
});
</script>
</div>
</body>
</html>

86
ui/public/pages/signin.html
View File

@@ -1,86 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hyperia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="_/icons/logo.svg">
<link rel="stylesheet" href="_/code/shared.css">
<style>
#items {
position: absolute;
top: 50vh;
left: 50vw;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center; /* centers children horizontally */
text-align: center; /* ensures text inside spans is centered */
}
input {
background-color: transparent;
border: none;
border-radius: 5px;
border-top: 2px solid var(--accent);
border-bottom: 2px solid var(--accent);
height: 2em;
width: 15vw;
padding: 0.2em;
transition: border .2s, padding .2s;
color: var(--accent)
}
input::placeholder {
color: var(--accent);
}
input:focus {
outline: none;
padding: 0.4em;
border-top: 2px solid var(--red);
border-bottom: 2px solid var(--red);
}
input:focus::placeholder {
color: var(--red)
}
input:-webkit-autofill,
input:-webkit-autofill:focus {
transition: background-color 600000s 0s, color 600000s 0s;
}
input[data-autocompleted] {
background-color: #c7a67b !important;
}
@media (max-width: 600px) {
input {
width: 50vw
}
}
</style>
<script src="_/code/quill.js"></script>
<script type="module">
import PageFooter from "./components/Footer.js"
import NavBar from "./components/NavBar.js"
import SideBar from "./components/SideBar.js"
</script>
</head>
<body>
<span id="title" onclick='console.log("hey"); window.location.href="/"'>hyperia</span>
<div class="links" style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw">
<a href="join">join</a>
<span>|</span>
<a href="signin">sign in</a>
</div>
<div id="items">
<form id="login-form" action="/login" method="POST">
<input name="email" placeholder="email" style="margin-bottom: 15px;" required>
<br>
<input name="password" type="password" placeholder="password" required>
<br>
<p id="applicant-message" style="color: green; margin-left: 10px; display: inline-block; margin: 0px; margin-left: 20px; font-size: 1em"></p>
<br>
<button type="submit" style="background-color: rgb(193, 135, 29)">Sign In</button>
</form>
</div>
</body>
</html>