6 files changed, 114 insertions, 0 deletions
diff --git a/pages/login/page.html b/pages/login/page.html
new file mode 100644
index 0000000..5fa188e
--- /dev/null
+++ b/pages/login/page.html
@@ -0,0 +1,11 @@
+<form id="loginForm">
+    <label for="username">Username:</label>
+    <input type="text" name="username" id="username">
+    <br>
+    <label for="password">Password:</label>
+    <input type="password" name="password" id="password">
+    <br>
+    <input type="submit" value="Log in">
+    <br>
+    <span id="error" style="color: red;"></span>
+</form>
\ No newline at end of file
diff --git a/pages/login/page.js b/pages/login/page.js
new file mode 100644
index 0000000..f0c5994
--- /dev/null
+++ b/pages/login/page.js
@@ -0,0 +1,18 @@
+async function fetchJSON(url, opts) {
+    let resp = await fetch(url, opts);
+    return await resp.json()
+}
+
+export function onload() {
+    document.getElementById("loginForm").addEventListener("submit", async function (ev) {
+        ev.preventDefault();
+        const username = document.getElementById('username').value;
+        const password = document.getElementById('password').value;
+        try {
+            await stores.sdlib.login(username, password)
+        } catch (error) {
+            return document.getElementById('error').innerText = 'An error occured\n' + error
+        }
+        pages.goToPage("main")
+    })
+}
\ No newline at end of file
diff --git a/pages/main/page.html b/pages/main/page.html
new file mode 100644
index 0000000..8b16e26
--- /dev/null
+++ b/pages/main/page.html
@@ -0,0 +1,7 @@
+<div class="channel">
+    <div class="messages" id="messages"></div>
+    <div class="messageInput disabled" id="messageForm">
+        <textarea name="message input" id="messageInput"></textarea>
+        <button id="send">Send</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/pages/main/page.js b/pages/main/page.js
new file mode 100644
index 0000000..c337888
--- /dev/null
+++ b/pages/main/page.js
@@ -0,0 +1,74 @@
+import { shiftHeld } from "../../lib/key.js"
+import html from "../../lib/htmlbuilder.js"
+
+async function fetchJSON(url, opts) {
+    let resp = await fetch(url, opts);
+    return await resp.json()
+}
+
+function scrollToBottomOfElement(element) {
+    element.scrollTo(0, element.scrollHeight);
+}
+
+export function onload() {
+    const msgArea = document.getElementById("messages");
+
+    function createMessage(msg) {
+        let elem = html('div')
+            .class('message')
+            .child('div')
+                .class('message-header')
+                .child('span')
+                    .class('username')
+                    .text(msg.author.display_name ? `${msg.author.display_name} (${msg.author.username})` : msg.author.username)
+                    .up()
+                .child('div')
+                    .class('action-buttons')
+                    .child('button').text('reply').up()
+                    .up()
+                .up()
+            .child('span')
+                .class('post-content')
+                .text(msg?.content)
+            .up()
+        msgArea.appendChild(elem)
+    }
+    document.getElementById("messageForm").classList.remove('disabled')
+    msgArea.innerHTML = "";
+    // :+1:
+
+    for (const msg of window.stores.sdlib.messages.reverse()) {
+        createMessage(msg)
+    }
+    scrollToBottomOfElement(msgArea.parentElement);
+
+    stores.sdlib.wsEvents.on("new_post", post => {
+        console.debug('posting of the poster', post)
+		let scrolledToBottom = msgArea.parentElement.scrollTopMax == msgArea.parentElement.scrollTop;
+        createMessage(post.data)
+		if(scrolledToBottom) scrollToBottomOfElement(msgArea.parentElement);
+    })
+
+    const submitBtn = document.getElementById("send")
+
+    submitBtn.onclick = function (event) { // using on(event) = ... instead of addEventListener("(event)", ...) because i cant be bothered to clear the event on channel change lol
+        let msg = document.getElementById("messageInput").value;
+        stores.sdlib.ws.send(JSON.stringify({
+            command: "post",
+            content: msg,
+            replies: [],
+            attachments: []
+        }))
+        document.getElementById("messageInput").value = ""
+    }
+
+    document.getElementById('messageInput').addEventListener('keydown', event => {
+        if (
+            event.key == "Enter" &&
+            !shiftHeld
+        ) {
+            event.preventDefault();
+            if (!submitBtn.disabled) submitBtn.click();
+        }
+    })
+}
\ No newline at end of file
diff --git a/pages/test/page.html b/pages/test/page.html
new file mode 100644
index 0000000..7f8bb38
--- /dev/null
+++ b/pages/test/page.html
@@ -0,0 +1 @@
+testing page (tm)
\ No newline at end of file
diff --git a/pages/test/page.js b/pages/test/page.js
new file mode 100644
index 0000000..f98f2fd
--- /dev/null
+++ b/pages/test/page.js
@@ -0,0 +1,3 @@
+export function onload() {
+    console.log("hi from onload")
+}
\ No newline at end of file