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

Well, sending messages took longer than it should have

Browse Source
This commit is contained in:
metacryst
2025-11-25 23:38:59 -06:00
parent dc9b106439
commit 9e87364147
25 changed files with 550 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,3 +1,6 @@
import "./MessagesSidebar.js"
import "./MessagesPanel.js"
css(`
messages- {
font-family: 'Bona';
@@ -23,62 +26,76 @@ css(`
`)
class Messages extends Shadow {
friends = []
conversations = []
selectedConvoID = null
onConversationSelect(i) {
console.log("convo selected: ", i)
this.selectedConvoID = i
this.$("messagessidebar-").rerender()
this.$("messagespanel-").rerender()
}
getConvoFromID(id) {
for(let i=0; i<this.conversations.length; i++) {
if(this.conversations[i].id === id) {
return this.conversations[i]
}
}
}
render() {
ZStack(() => {
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(--accent2)")
MessagesSidebar(this.conversations, this.selectedConvoID, this.onConversationSelect)
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)
}
if(this.getConvoFromID(this.selectedConvoID)) {
MessagesPanel(this.getConvoFromID(this.selectedConvoID).messages)
} else {
p("No Conversations!")
MessagesPanel()
}
input("Send Message", "93%")
.paddingVertical(1, em)
.paddingHorizontal(2, em)
.color("var(--accent)")
.background("var(--darkbrown)")
.marginBottom(6, em)
.border("none")
.fontSize(1, em)
.onKeyDown((e) => {
if (e.key === "Enter") {
window.Socket.send({app: "MESSAGES", operation: "SEND", msg: { conversation: `CONVERSATION-${this.selectedConvoID}`, text: e.target.value }})
e.target.value = ""
}
})
})
.gap(1, em)
.width(100, pct)
.alignHorizontal("center")
.alignVertical("end")
})
.onAppear(async () => {
let res = await Socket.send({app: "MESSAGES", operation: "GET"})
if(!res) console.error("failed to get messages")
if(res.msg.length > 0 && this.conversations.length === 0) {
this.conversations = res.msg
this.selectedConvoID = this.conversations[0].id
this.rerender()
}
window.addEventListener("new-message", (e) => {
let convoID = e.detail.conversationID
let messages = e.detail.messages
let convo = this.getConvoFromID(convoID)
convo.messages = messages
this.rerender()
})
.height(100, vh)
.paddingLeft(2, em)
.paddingRight(2, em)
.paddingTop(2, em)
.gap(0, em)
.borderRight("1px solid var(--accent2)")
})
.width(100, "%")
.height(87, vh)
.x(0).y(13, vh)
.borderTop("1px solid var(--accent2)")
p("0 Items")
.position("absolute")
.x(50, vw).y(50, vh)
.transform("translate(-50%, -50%)")
HStack(() => {
input("Search messages...", "45vw")
@@ -88,7 +105,7 @@ class Messages extends Shadow {
.fontSize(1.1, em)
.paddingLeft(1.3, em)
.background("transparent")
.border("1px solid var(--accent2)")
.border("0.5px solid var(--divider)")
.outline("none")
.color("var(--accent)")
.borderRadius(10, px)
@@ -97,7 +114,7 @@ class Messages extends Shadow {
.marginLeft(2, em)
.borderRadius(10, px)
.background("transparent")
.border("1px solid var(--accent2)")
.border("0.5px solid var(--divider)")
.color("var(--accent)")
.fontFamily("Bona Nova")
.onHover(function (hovering) {
@@ -115,7 +132,7 @@ class Messages extends Shadow {
.marginLeft(1, em)
.borderRadius(10, px)
.background("transparent")
.border("1px solid var(--accent2)")
.border("0.5px solid var(--divider)")
.color("var(--accent)")
.fontFamily("Bona Nova")
.onHover(function (hovering) {
@@ -139,40 +156,6 @@ class Messages extends Shadow {
.width(100, "%")
.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(--accent2)")
.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
}
}
register(Messages)