port over all static code

index.js

@@ -0,0 +1,76 @@
+
+var messages = document.getElementById('messages');
+var form = document.getElementById('form');
+var input = document.getElementById('input');
+const server = new URLSearchParams(document.location.search).get('server') || '/';
+
+async function goPage(count) {
+    let counter = input.value.match(/[^\s]+$/g);
+    if (!counter) return false;
+
+    input.value = `${input.value.match(/^[^\s]+/g)[0]} ${counter[0] * 1 + count}`;
+    main(new Event('placeholder'));
+    return false;
+}
+
+async function addMsg(msg) {
+    let lines = msg.split('\n');
+    var wrap = document.createElement('li');
+
+    for (let line of lines) {
+        var item = document.createElement('li');
+        item.textContent = line;
+
+        if (line.startsWith('-') || line.startsWith('<')) {
+            let img = new Image();
+            if (line.startsWith('<') || line[2] == '>') {
+                item.textContent = line.slice(3);
+                img.src = `arrows/left.svg`;
+            } else {
+                item.textContent = line.slice(2);
+                img.src = `arrows/right.svg`;
+            }
+            item.insertBefore(img, item.childNodes[0])
+        }
+        wrap.appendChild(item);
+    }
+    messages.appendChild(wrap);
+    window.scrollTo(0, messages.offsetHeight);
+}
+
+async function main(e) {
+    e.preventDefault();
+
+    if (!input.value) return false;
+
+    let msg = await fetch(server, {
+        "method": "POST",
+        "headers": {
+            "content-type": "application/json",
+        },
+        "body": JSON.stringify({ "data": input.value })
+    })
+
+    msg = await msg.text();
+    msg = msg.trim();
+
+    addMsg(input.value)
+    addMsg(msg)
+
+    return false;
+}
+
+form.addEventListener('submit', main);
+
+document.querySelector('.send').addEventListener('click', main);
+document.querySelector('.prev').addEventListener('click', (e) => { e.preventDefault(); return goPage(1) });
+document.querySelector('.next').addEventListener('click', (e) => { e.preventDefault(); return goPage(-1) });
+
+
+input.value = '/help 1';
+goPage(0);
+
+setTimeout(function () {
+    input.value = '/inv 1';
+    goPage(0);
+}, 500)