qol and bugfix

src/App.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { onMount } from "svelte";
   import { emit, listen } from "@tauri-apps/api/event";
+  import { open } from "@tauri-apps/api/shell";
 
   import Link from "./Link.svelte";
   import Preview from "./Preview.svelte";
@@ -27,6 +28,7 @@
   let polling = null;
   let tick = 0;
   let previewData = Array(131).fill(0);
+  let logfile = "";
 
   function updatePolling(enabled) {
     if (!!polling) {
@@ -67,6 +69,10 @@
       );
     });
 
+    await listen("updateLogPath", (event) => {
+      logfile = event.payload as string;
+    });
+
     await emit("ready", "");
 
     updatePolling(true);
@@ -106,6 +112,10 @@
   async function quit() {
     await emit("quit", "");
   }
+
+  async function logs() {
+    await open(logfile);
+  }
 </script>
 
 <main class="main">
@@ -138,10 +148,12 @@
     <div class="row">
       <div class="label" />
       <div class="input">
-        Brokenithm open at:
-        <pre>
-          {ips.map((x) => `http://${x}:1606/`).join("\n")}
-        </pre>
+        <div class="serverlist">
+          Brokenithm open at:
+          <pre>
+            {ips.map((x) => `http://${x}:1606/`).join("\n")}
+          </pre>
+        </div>
       </div>
     </div>
   {/if}
@@ -156,6 +168,9 @@
         <option value="kb-8-deemo">Keyboard 8-zone, Deemo Layout</option>
         <option value="kb-voltex">Keyboard 10-zone, Voltex Layout</option>
         <option value="gamepad-voltex">XBOX 360 Gamepad, Voltex Layout</option>
+        <option value="gamepad-neardayo"
+          >XBOX 360 Gamepad, Neardayo Layout</option
+        >
         <!-- <option value="websocket">Websocket</option> -->
       </select>
     </div>
@@ -299,6 +314,9 @@
     >
     <button on:click={async () => await hide()}>Hide</button>
     <button on:click={async () => await quit()}>Quit</button>
+    {#if !!logfile.length}
+      <button on:click={async () => await logs()}>Logs</button>
+    {/if}
   </div>
 </main>
 

src/Preview.svelte

@@ -3,6 +3,8 @@
 
   let topDatas = Array(16).fill(0);
   let botDatas = Array(16).fill(0);
+  let airDatas = Array(6).fill(0);
+  let extraDatas = Array(3).fill(0);
   let ledDatas = Array(31)
     .fill(0)
     .map((_, idx) => ({
@@ -11,15 +13,22 @@
     }));
 
   $: {
-    if (data.length === 131) {
+    if (data.length === 134) {
       // console.log(data);
       for (let i = 0; i < 16; i++) {
         topDatas[i] = data[i * 2 + 1];
         botDatas[i] = data[i * 2];
       }
+      for (let i = 0; i < 6; i++) {
+        airDatas[i] = data[32 + i];
+      }
+      for (let i = 0; i < 3; i++) {
+        extraDatas[i] = data[38 + i];
+      }
+
       for (let i = 0; i < 31; i++) {
-        ledDatas[i].color = `rgb(${data[38 + i * 3]}, ${data[39 + i * 3]}, ${
-          data[40 + i * 3]
+        ledDatas[i].color = `rgb(${data[41 + i * 3]}, ${data[42 + i * 3]}, ${
+          data[43 + i * 3]
         })`;
       }
     }
@@ -27,7 +36,11 @@
 </script>
 
 <main class="preview">
-  <div class="air" />
+  <div class="air">
+    {#each airDatas as airData, idx (idx)}
+      <div class={`air-data air-data-${airData}`} />
+    {/each}
+  </div>
   <div class="ground">
     <div class="ground-led">
       <div class="ground-row">
@@ -54,4 +67,9 @@
       </div>
     </div>
   </div>
+  <div class="extra">
+    {#each extraDatas as extraData, idx (idx)}
+      <div class={`extra-data extra-data-${extraData}`} />
+    {/each}
+  </div>
 </main>