better debug page.

Author: DanielRailean

src/frontend/Components/Debug.svelte

@@ -2,6 +2,18 @@
     import { backendLogs, currentPage, pressedKeys } from '../stores'
     import { IPages } from '../types'
     import MenuItem from './MenuItem.svelte'
+    let keys = []
+    pressedKeys.subscribe((v) => {
+        keys = reverseArr(v)
+    })
+
+    function reverseArr(input: any[]) {
+        var ret = new Array()
+        for (var i = input.length - 1; i >= 0; i--) {
+            ret.push(input[i])
+        }
+        return ret
+    }
 </script>
 
 <MenuItem>
@@ -20,19 +32,19 @@ dark:text-gray-200
 even:dark:border-gray-800 
 even:dark:bg-slate-900"
 >
-    <div class="flex flex-row justify-between">
+    <div class="flex flex-col justify-between">
         <div class="flex flex-col">
-            <p>Pressed keys</p>
-            {#each $pressedKeys as key}
-                <p>
-                    {key}
+            <p>Pressed keys:</p>
+            {#each keys as key}
+                <p class="my-1 border border-black bg-stone-300 dark:bg-slate-700">
+                    {key.length > 0 ? key : '[nothing pressed]'}
                 </p>
             {/each}
         </div>
         <div class="flex flex-col">
-            <p>logs</p>
+            <p>Logs:</p>
             {#each $backendLogs as log}
-                <p>
+                <p class="my-1 border border-black bg-stone-300 dark:bg-slate-700">
                     {log}
                 </p>
             {/each}

src/frontend/Components/EventHandler.svelte

@@ -145,7 +145,7 @@
     ]
     function addLog(log: string) {
         const logs = get(backendLogs)
-        if (logs.length > 1000) {
+        if (logs.length > 50) {
             logs.pop()
         }
         logs.unshift(log)