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

responsive app menu

Browse Source
This commit is contained in:
metacryst
2025-10-29 16:03:47 -05:00
parent 6d46875546
commit 0e36cd30cc
8 changed files with 104 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
server/main.go
View File

@@ -34,16 +34,6 @@ func main() {
}
http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
// Keeps server from crashing if a request fails
// defer func() {
// if r := recover(); r != nil {
// log.Error().
// Interface("panic_reason", r).
// Bytes("stack_trace", debug.Stack()).
// Msg("panic in http goroutine")
// }
// }()
if(loggedIn(w, r)) {
log.Info().Msg("logged")
if isWebSocketRequest(r) {
@@ -106,7 +96,8 @@ func handleSite(w http.ResponseWriter, r *http.Request) {
handlers.HandleLogout(w, r)
return
}
if strings.HasPrefix(r.URL.Path, "/_") {
if strings.Contains(r.URL.Path, "/_") {
log.Debug().Msg("this is what it is")
handleAsset(w, r)
return
}
@@ -117,8 +108,10 @@ func handleSite(w http.ResponseWriter, r *http.Request) {
func serveSiteFiles(w http.ResponseWriter, r *http.Request) {
path := r.URL.Path
if path == "/" {
if(strings.Contains(path, "75820185")) {
_, after, _ := strings.Cut(path, "75820185")
path = after
} else {
// Required for sign in / sign out redirect to work properly
w.Header().Set("Cache-Control", "no-store, no-cache, must-revalidate, proxy-revalidate")
w.Header().Set("Pragma", "no-cache")
@@ -126,8 +119,6 @@ func serveSiteFiles(w http.ResponseWriter, r *http.Request) {
w.Header().Set("Surrogate-Control", "no-store")
path = "/index.html"
} else if !strings.Contains(path, ".") {
path = filepath.Join("/pages", path) + ".html"
}
filePath := filepath.Join("../ui/site", path)
@@ -136,8 +127,8 @@ func serveSiteFiles(w http.ResponseWriter, r *http.Request) {
}
func handleAsset(w http.ResponseWriter, r *http.Request) {
path := r.URL.Path
filePath := filepath.Join("../ui", path)
_, after, _ := strings.Cut(r.URL.Path, "/_")
filePath := filepath.Join("../ui", "/_" + after)
log.Debug().Msgf("serving asset: %s", filePath)
http.ServeFile(w, r, filePath)
}

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

@@ -1,3 +1,9 @@
/* $ NAVIGATION */
window.navigateTo = function(url) {
window.history.pushState({}, '', url);
}
/* $ SELECTOR */
HTMLElement.prototype.$ = function(selector) {
@@ -761,6 +767,5 @@ HTMLElement.prototype.attr = function(attributes) {
for (const [key, value] of Object.entries(attributes)) {
this.setAttribute(key, value);
}
console.log(this)
return this;
};

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

@@ -1,3 +1,7 @@
css(`
`)
class Market extends Shadow {
render() {
@@ -11,6 +15,7 @@ class Market extends Shadow {
.border("1px solid var(--accent)")
.outline("none")
.color("var(--accent)")
.borderRadius(10, px)
button("Search")
})
.x(50, vw).y(5, vh)

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

@@ -3,7 +3,7 @@ css(`
color: var(--tan);
transform: translateX(-50%);
transition: transform .3s;
display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 3em;
display: flex; gap: 2em; position: fixed; left: 50vw; bottom: 2em;
}
app-menu.minimized {
@@ -37,18 +37,65 @@ css(`
text-decoration: underline;
transform: translateY(-10%)
}
#divider.minimized {
display: none;
}
`)
registerShadow(
class AppMenu extends Shadow {
selected;
constructor(selected) {
super()
this.selected = selected
}
render() {
p("Forum")
p("Messages")
p("Market")
VStack(() => {
HStack(() => {
p("Forum")
p("Messages")
p("Market")
})
.justifyContent("center")
.gap("1.5em")
img("_/images/divider.svg", "40vw")
.attr({
"id": "divider",
})
})
.gap("0.5em")
if(this.selected) {
this.styleMinimized()
}
}
styleMaximized() {
$$("app-menu p").forEach((el) => {
el.classList.remove("selected")
})
this.classList.remove("minimized")
$("#divider").style.display = ""
}
styleMinimized() {
$$("app-menu p").forEach((el) => {
if(el.innerText !== this.selected) {
el.classList.remove("selected")
} else {
el.classList.add("selected")
}
})
this.classList.add("minimized")
$("#divider").style.display = "none"
}
connectedCallback() {
Array.from(this.querySelectorAll("p")).forEach((el) => {
el.addEventListener("mousedown", (e) => {
@@ -60,22 +107,18 @@ class AppMenu extends Shadow {
if(!target.matches("app-menu p")) {
return
}
$$("app-menu p").forEach((el) => {
if(el.innerText !== target.innerText) {
el.classList.remove("selected")
}
})
target.classList.remove("touched")
if(target.classList.contains("selected")) {
target.classList.remove("selected")
$("app-menu").classList.remove("minimized")
$("#divider").classList.remove("minimized")
this.selected = ""
this.styleMaximized(target)
window.navigateTo("/")
$("app-window").close()
} else {
target.classList.add("selected")
$("app-menu").classList.add("minimized")
$("#divider").classList.add("minimized")
this.selected = target.innerText
this.styleMinimized(target)
window.navigateTo("/app/" + target.innerText.toLowerCase())
$("app-window").open(target.innerText)
}
})

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

@@ -5,6 +5,11 @@ import "../apps/Market.js"
class AppWindow extends Shadow {
app;
constructor(app) {
super()
this.app = app
}
render() {
ZStack(() => {
console.log("happening")

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

@@ -3,12 +3,6 @@ import "./AppMenu.js"
import "./ProfileButton.js"
import "./InputBox.js"
import "./Sidebar.js"
css(`
#divider.minimized {
display: none;
}
`)
class Home extends Shadow {
@@ -23,7 +17,24 @@ class Home extends Shadow {
.backgroundPosition("48% 65%")
.backgroundRepeat("no-repeat")
AppWindow()
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)
@@ -44,15 +55,6 @@ class Home extends Shadow {
.background("var(--tan)")
.color("var(--red)")
.borderRadius(5, px)
AppMenu()
img("_/images/divider.svg", "40vw")
.attr({"id": "divider"})
.position("fixed")
.bottom("2em")
.left("50vw")
.transform("translateX(-50%)")
})
}

8
ui/site/index.html
View File

@@ -3,10 +3,10 @@
<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">
<script src="_/code/quill.js"></script>
<script type="module" src="index.js"></script>
<link rel="icon" href="/_/icons/logo.svg">
<link rel="stylesheet" href="/_/code/shared.css">
<script src="/_/code/quill.js"></script>
<script type="module" src="75820185/index.js"></script>
</head>
<body style="margin: 0px">
</body>

23
ui/site/pages/messages.html
View File

@@ -1,23 +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">
<script src="_/code/quill.js"></script>
<script type="module">
import "./components/ProfileButton.js"
import "./components/InputBox.js"
import "./components/Sidebar.js"
import ConnectionHandler from "./ws/ConnectionHandler.js"
window.ConnectionHandler = new ConnectionHandler()
</script>
</head>
<body>
<profile-button style="z-index: 1; cursor: default; position: fixed; top: 5.5vh; right: 4.5vw"></profile-button>
<input-box></input-box>
<side-bar></side-bar>
</body>
</html>