init

ui/desktop/apps/Forum/Forum.js

@@ -0,0 +1,104 @@
+import './ForumPanel.js'
+
+css(`
+    forum- {
+        font-family: 'Bona';
+    }
+
+    forum- input::placeholder {
+        font-family: 'Bona Nova';
+        font-size: 0.9em;
+        color: var(--accent);
+    }
+
+    input[type="checkbox"] {
+        appearance: none;        /* remove default style */
+        -webkit-appearance: none;
+        width: 1em;
+        height: 1em;
+        border: 1px solid var(--accent);
+    }
+
+    input[type="checkbox"]:checked {
+        background-color: var(--red);
+    }
+`)
+
+class Forum extends Shadow {
+
+    selectedForum = "HY"
+
+    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)
+
+                    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)
+
+                })
+                .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")
+            })
+            .width(100, "%")
+            .height(87, vh)
+            .x(0).y(0, vh)
+        })
+        .width(100, pct)
+        .height(100, pct)
+    }
+
+    
+}
+
+register(Forum)

ui/desktop/apps/Forum/ForumPanel.js

@@ -0,0 +1,90 @@
+import "../../components/LoadingCircle.js"
+
+class ForumPanel extends Shadow {
+    forums = [
+        "HY"
+    ]
+    messages = []
+
+    render() {
+        VStack(() => {
+            if(this.messages.length > 0) {
+
+                let previousDate = null
+
+                for(let i=0; i<this.messages.length; i++) {
+                    let message = this.messages[i]
+                    const dateParts = this.parseDate(message.time);
+                    const { date, time } = dateParts;
+
+                    if (previousDate !== date) {
+                        previousDate = date;
+
+                        p(date)
+                            .textAlign("center")
+                            .opacity(0.5)
+                            .marginVertical(1, em)
+                            .color("var(--divider)")
+                    }
+
+                    VStack(() => {
+                        HStack(() => {
+                            p(message.sentBy)
+                                .fontWeight("bold")
+                                .marginBottom(0.3, em)
+
+                            p(util.formatTime(message.time))
+                                .opacity(0.2)
+                                .marginLeft(1, em)
+                        })
+                        p(message.text)
+                    })
+                }
+            } else {
+                LoadingCircle()
+            }
+        })
+        .gap(1, em)
+        .position("relative")
+        .overflow("scroll")
+        .height(100, pct)
+        .width(96, pct)
+        .paddingTop(5, em)
+        .paddingBottom(2, em)
+        .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()
+            }
+            window.addEventListener("new-post", (e) => {
+                this.messages = e.detail
+                if(e.detail.length !== this.messages || e.detail.last.time !== this.messages.last.time || e.detail.first.time !== this.messages.first.time) {
+                    this.rerender()
+                }
+            })
+        })
+    }
+
+    parseDate(str) {
+        // Format: MM.DD.YYYY-HH:MM:SSxxxxxx(am|pm)
+        const match = str.match(/^(\d{1,2})\.(\d{1,2})\.(\d{4})-(\d{1,2}):(\d{2}).*(am|pm)$/i);
+        if (!match) return null;
+
+        const [, mm, dd, yyyy, hh, min, ampm] = match;
+        const date = `${mm}/${dd}/${yyyy}`;
+        const time = `${hh}:${min}${ampm.toLowerCase()}`;
+
+        return { date, time };
+    }
+}
+
+register(ForumPanel)