improve UI on web client to include features from penguinmod client

package-lock.json

@@ -1,5 +1,5 @@
 {
-    "name": "elem-proxy",
+    "name": "elemental-to-web",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {

static/arrows/left.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.39781" height="40.84766" viewBox="0,0,24.39781,40.84766"><g transform="translate(-383.10315,-227.43774)"><g fill="#59d1ff" stroke="none" stroke-width="0" stroke-miterlimit="10"><path d="M383.11376,235.59304c0.0417,-1.28124 0.28408,-3.05221 0.52072,-4.52665c0.06427,-0.40046 0.95106,-2.75365 1.55773,-2.75365c1.46906,0 7.96106,-0.875 14.92534,-0.875c9.3685,0 9.82235,7.18112 1.35686,7.18521c-3.8115,0.00185 -7.59051,0.64161 -9.6918,0.68055c-2.03349,0.03769 1.02447,24.24763 -0.13762,28.15481c-2.69245,9.05257 -7.94532,2.59519 -7.94532,2.59519c0,0 -0.68953,-27.27634 -0.58591,-30.46046z"/></g></g></svg><!--rotationCenter:41.89684967562516:12.562256428571374-->

static/arrows/right.svg

@@ -0,0 +1 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="30.09294" height="45.84839" viewBox="0,0,30.09294,45.84839"><g transform="translate(-382.61101,-201.83478)"><g fill="#59d1ff" stroke="none" stroke-width="0" stroke-miterlimit="10"><path d="M383.20753,204.06668c0,0 5.25287,-6.45738 7.94532,2.59519c1.16209,3.90718 -1.89587,28.11712 0.13762,28.15481c2.10129,0.03894 5.8803,0.6787 9.6918,0.68055c8.46549,0.00409 8.01164,7.18521 -1.35686,7.18521c-6.96428,0 -13.45628,-0.875 -14.92534,-0.875c-0.60667,0 -1.49346,-2.35319 -1.55773,-2.75365c-0.23664,-1.47444 -0.47902,-3.24541 -0.52072,-4.52665c-0.10362,-3.18412 0.58591,-30.46046 0.58591,-30.46046z"/><path d="M412.70395,238.07506l-9.82048,9.60811l0.44465,-20.24512z"/></g></g></svg><!--rotationCenter:42.38899245042728:38.16522307833455-->

static/index.css

@@ -1,7 +1,7 @@
 :root,
 input,
 button {
-    font-family: monospace;
+    font-family: sans-serif;
 }
 
 body {
@@ -64,6 +64,18 @@ button, button a {
     padding: 0.5rem 1rem;
     white-space: pre-wrap;
 }
+#messages>li>li {
+    margin: 0;
+    line-height: 1em;
+    height: 1em;
+    padding-bottom: 0.1em; 
+    overflow: hidden;
+}
+
+
+#messages>li>li>img {
+    height: 1.1em;
+}
 
 #messages>li:nth-child(odd) {
     background: #efefef;

static/index.html

@@ -13,11 +13,11 @@
     <form id="form" action="">
         <p>Run /help for info; more clients are also <a
                 href='https://git.dervland.net/elemental/elemental-on-terminal'>here</a>.</p>
-        <p><b>The web client is a demo and may not always be updated. Other clients will have better support for
-                features and interface elements.</b></p>
         <div class='inner-form'>
             <input id="input" autocomplete="off" />
             <button class='send'><a href='#'>Send</a></button>
+            <button class='next'><a href='#'>Previous</a></button>
+            <button class='prev'><a href='#'>Next</a></button>
         </div>
     </form>
     <script src='/index.js'></script>

static/index.js

@@ -3,11 +3,43 @@ var messages = document.getElementById('messages');
 var form = document.getElementById('form');
 var input = document.getElementById('input');
 
+async function nextPage(e) {
+    input.value = '';
+    main(new Event('click'));
+}
+
+async function goPage(count) {
+    let counter = input.value.match(/[^\s]+$/g);
+    if (!counter) return;
+
+    input.value = `${input.value.match(/^[^\s]+/g)[0]} ${counter[0] * 1 + count}`;
+    main(new Event('click'));
+}
+
 async function addMsg(msg) {
-    var item = document.createElement('li');
+    let lines = msg.split('\n');
-    item.textContent = msg;
+    var wrap = document.createElement('li');
-    messages.appendChild(item);
+
-    window.scrollTo(0, document.body.scrollHeight);
+    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);
+        window.scrollTo(0, document.body.scrollHeight);
+    }
+    messages.appendChild(wrap);
 }
 
 async function main(e) {
@@ -15,7 +47,7 @@ async function main(e) {
 
     if (!input.value) return;
 
-    let msg = await fetch("/", {
+    let msg = await fetch("https://elem.dervland.net/" /*"/"*/, {
         "method": "POST",
         "headers": {
             "content-type": "application/json",
@@ -33,4 +65,9 @@ async function main(e) {
 
 form.addEventListener('submit', main);
 
-document.querySelector('.send').addEventListener('click',main);
+document.querySelector('.send').addEventListener('click', main);
+document.querySelector('.prev').addEventListener('click', () => goPage(1));
+document.querySelector('.next').addEventListener('click', () => goPage(-1));
+
+input.value = '/inv 1';
+goPage(0);