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

Mobile improvements

Browse Source
This commit is contained in:
metacryst
2025-12-17 22:16:38 -06:00
parent 279be987a4
commit 9567e4e284
16 changed files with 347 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
ui/mobile/apps/Forum/Forum.js
View File

@@ -30,70 +30,32 @@ class Forum extends Shadow {
render() {
ZStack(() => {
HStack(() => {
VStack(() => {
img("/_/icons/logo.svg", "2em")
.padding(0.8, em)
.borderRadius(12, px)
.marginHorizontal(1, em)
.onHover(function (hovering) {
if(hovering) {
this.style.background = "var(--darkbrown)"
} else {
this.style.background = ""
}
})
.opacity(0)
VStack(() => {
img("/_/icons/place/austin.svg", "2em")
.padding(0.8, em)
.borderRadius(12, px)
.marginHorizontal(1, em)
.onHover(function (hovering) {
if(hovering) {
this.style.background = "var(--darkbrown)"
} else {
this.style.background = ""
}
})
.opacity(0)
ForumPanel()
})
.height(100, vh)
.paddingLeft(2, em)
.paddingRight(2, em)
.gap(1, em)
.marginTop(20, vh)
VStack(() => {
ForumPanel()
input("Message Hyperia", "98%")
.paddingVertical(1, em)
.paddingLeft(2, pct)
.color("var(--accent)")
.background("var(--darkbrown)")
.marginBottom(6, em)
.border("none")
.fontSize(1, em)
.onKeyDown(function (e) {
if (e.key === "Enter") {
window.Socket.send({app: "FORUM", operation: "SEND", msg: {forum: "HY", text: this.value }})
this.value = ""
}
})
})
.gap(0.5, em)
.width(100, pct)
.height(100, vh)
.alignHorizontal("center")
.alignVertical("end")
input("Message Hyperia", "98%")
.paddingVertical(1, em)
.paddingLeft(2, pct)
.color("var(--accent)")
.background("var(--darkbrown)")
.marginBottom(6, em)
.border("none")
.fontSize(1, em)
.onKeyDown(function (e) {
if (e.key === "Enter") {
window.Socket.send({app: "FORUM", operation: "SEND", msg: {forum: "HY", text: this.value }})
this.value = ""
}
})
})
.width(100, "%")
.height(87, vh)
.x(0).y(0, vh)
.gap(0.5, em)
.width(100, pct)
.height(100, vh)
.alignHorizontal("center")
.alignVertical("end")
})
.onAppear(() => document.body.style.backgroundColor = "var(--darkbrown)")
.width(100, pct)
.height(100, pct)
}

2
ui/mobile/apps/Forum/ForumPanel.js
View File

@@ -54,14 +54,12 @@ class ForumPanel extends Shadow {
.paddingLeft(4, pct)
.backgroundColor("var(--darkbrown)")
.onAppear(async () => {
console.log("appear")
requestAnimationFrame(() => {
this.scrollTop = this.scrollHeight
});
let res = await Socket.send({app: "FORUM", operation: "GET", msg: {forum: "HY", number: 100}})
if(!res) console.error("failed to get messages")
if(res.msg.length > 0 && this.messages.length === 0) {
console.log("rerendering", res.msg)
this.messages = res.msg
this.rerender()
}

71
ui/mobile/components/AppMenu.js
View File

@@ -1,19 +1,74 @@
class AppMenu extends Shadow {
selected = ""
onNewSelection() {
this.$$("img").forEach((image) => {
image.style.background = ""
})
}
render() {
console.log("rendering")
HStack(() => {
img("/_/icons/mail.png", "2em", "2em")
img("/_/icons/Column.svg", "2em", "2em")
p("S")
p("S")
p("S")
img("/_/icons/Column.svg", "1.5em", "1.5em")
.attr({app: "forum"})
.padding(0.5, em)
.borderRadius(10, px)
.onAppear(function () {
this.style.border = "1px solid black"
})
.onClick((finished, e) => {
if(finished) {
this.onNewSelection()
}
e.target.style.background = "var(--accent)"
console.log(e.target, e.target.style.background)
if(finished) {
window.navigateTo("/")
}
})
img("/_/icons/letter.svg", "1.5em", "1.5em")
.attr({app: "messages"})
.padding(0.5, em)
.borderRadius(10, px)
.onAppear(function () {
this.style.border = "1px solid black"
})
.onClick((finished, e) => {
if(finished) {
this.onNewSelection()
}
e.target.style.background = "rgb(112 150 114)"
if(finished) {
window.navigateTo("/messages")
}
})
img("/_/icons/jobs.svg", "1.5em", "1.5em")
.attr({app: "jobs"})
.padding(0.5, em)
.borderRadius(10, px)
.onAppear(function () {
this.style.border = "1px solid black"
})
.onClick((finished, e) => {
if(finished) {
this.onNewSelection()
}
e.target.style.background = "#9392bb"
if(finished) {
window.navigateTo("/jobs")
}
})
})
.borderTop("1px solid black")
.height(3, em)
.height("auto")
.position('fixed')
.background("var(--main)")
.zIndex(1)
.x(0).yBottom(0)
.justifyContent("space-between")
.paddingHorizontal(2, em)
.paddingHorizontal(4, em)
.paddingVertical(1, em)
.transform("translateY(-50%)")
.width(100, vw)
.boxSizing("border-box")
}

26
ui/mobile/components/Home.js
View File

@@ -1,11 +1,37 @@
import "./AppMenu.js"
import "../apps/Forum/Forum.js"
import "../apps/Messages/Messages.js"
import "../apps/Jobs/Jobs.js"
class Home extends Shadow {
render() {
ZStack(() => {
ZStack(() => {
console.log("it's happening", window.location.pathname)
switch(window.location.pathname) {
case "/":
Forum()
break;
case "/messages":
Messages()
break;
case "/jobs":
Jobs()
break;
}
})
.onNavigate(function () {
console.log("navigate")
this.rerender()
})
AppMenu()
})
.overflowX("hidden")
}
}

25
ui/mobile/components/LoadingCircle.js Normal file
View File

@@ -0,0 +1,25 @@
class LoadingCircle extends Shadow {
render() {
div()
.borderRadius(100, pct)
.width(2, em).height(2, em)
.x(45, pct).y(50, pct)
.center()
.backgroundColor("var(--accent")
.transition("transform 1.75s ease-in-out")
.onAppear(function () {
let growing = true;
setInterval(() => {
if (growing) {
this.style.transform = "scale(1.5)";
} else {
this.style.transform = "scale(0.7)";
}
growing = !growing;
}, 750);
});
}
}
register(LoadingCircle)

2
ui/mobile/index.html
View File

@@ -9,6 +9,6 @@
<script src="/_/code/zod.js"></script>
<script type="module" src="75820185/index.js"></script>
</head>
<body style="margin: 0px">
<body>
</body>
</html>

2
ui/mobile/index.js
View File

@@ -1,4 +1,4 @@
import Socket from "./ws/Socket.js"
import Socket from "/_/code/ws/Socket.js"
import "./components/Home.js"
import util from "./util.js"

62
ui/mobile/ws/Connection.js
View File

@@ -1,62 +0,0 @@
class Connection {
connectionTries = 0
ws;
linkCreated;
wsStatus;
constructor(receiveCB) {
this.init()
this.receiveCB = receiveCB
}
init() {
if(window.location.hostname === "localhost") {
this.ws = new WebSocket("ws://" + "localhost:3003")
} else {
this.ws = new WebSocket("wss://" + window.location.hostname + window.location.pathname)
}
this.ws.addEventListener('open', () => {
this.connectionTries = 0
console.log("Websocket connection established.");
this.ws.addEventListener('message', this.receiveCB)
});
this.ws.addEventListener("close", () => {
this.checkOpen();
console.log('Websocket Closed')
})
}
async checkOpen() {
if (this.ws.readyState === WebSocket.OPEN) {
return true
} else {
await this.sleep(this.connectionTries < 20 ? 5000 : 60000)
this.connectionTries++
console.log('Reestablishing connection')
this.init()
}
}
sleep = (time) => {
return new Promise(resolve => {
setTimeout(resolve, time);
});
}
send = (msg) => {
console.log("sending")
if (this.ws.readyState === WebSocket.OPEN) {
this.ws.send(msg);
}
else if(this.connectionTries === 0) {
setTimeout(() => {
this.send(msg)
}, 100)
}
else {
console.error('No websocket connection: Cannot send message');
}
}
}
export default Connection

45
ui/mobile/ws/Socket.js
View File

@@ -1,45 +0,0 @@
import Connection from "./Connection.js";
export default class Socket {
connection;
disabled = true;
requestID = 1;
pending = new Map();
constructor() {
this.connection = new Connection(this.receive);
}
isOpen() {
if(this.connection.checkOpen()) {
return true;
} else {
return false;
}
}
send(msg) {
return new Promise(resolve => {
const id = (++this.requestID).toString();
this.pending.set(id, resolve);
this.connection.send(JSON.stringify({ id, ...msg }));
});
}
receive = (event) => {
const msg = JSON.parse(event.data);
if (msg.id && this.pending.has(msg.id)) {
this.pending.get(msg.id)(msg);
this.pending.delete(msg.id);
return;
} else {
this.onBroadcast(msg)
}
}
onBroadcast(msg) {
window.dispatchEvent(new CustomEvent(msg.event, {
detail: msg.msg
}));
}
}