83 lines
2.7 KiB
JavaScript
83 lines
2.7 KiB
JavaScript
class MessagesPanel extends Shadow {
|
|
forums = [
|
|
"HY"
|
|
]
|
|
messages = []
|
|
|
|
render() {
|
|
VStack(() => {
|
|
if(this.messages.length > 0) {
|
|
for(let i=0; i<this.messages.length; i++) {
|
|
let message = this.messages[i]
|
|
VStack(() => {
|
|
HStack(() => {
|
|
p(message.sentBy)
|
|
.fontWeight("bold")
|
|
.marginBottom(0.3, em)
|
|
|
|
p(this.formatTime(message.time))
|
|
.opacity(0.2)
|
|
.marginLeft(1, em)
|
|
})
|
|
p(message.text)
|
|
})
|
|
}
|
|
} else {
|
|
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);
|
|
});
|
|
}
|
|
})
|
|
.gap(1, em)
|
|
.position("relative")
|
|
.overflow("scroll")
|
|
.height(95, pct)
|
|
.width(93, pct)
|
|
.paddingTop(2, em)
|
|
.paddingBottom(2, em)
|
|
.paddingHorizontal(2, em)
|
|
.backgroundColor("var(--darkbrown)")
|
|
.onAppear(async () => {
|
|
console.log("appear")
|
|
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()
|
|
}
|
|
window.addEventListener("new-message", (e) => {
|
|
this.messages = e.detail
|
|
this.rerender()
|
|
})
|
|
})
|
|
.scrollTop = this.scrollHeight
|
|
}
|
|
|
|
formatTime(str) {
|
|
// Extract the time part with am/pm
|
|
const match = str.match(/-(\d+:\d+):\d+.*(am|pm)/i);
|
|
if (!match) return null;
|
|
|
|
const [_, hourMin, ampm] = match;
|
|
return hourMin + ampm.toLowerCase();
|
|
}
|
|
}
|
|
|
|
register(MessagesPanel) |