Merge branch 'main' of https://github.com/portapack-mayhem/MayhemHub …

…into main

.eslintrc.json

@@ -24,7 +24,11 @@
     "import/order": [
       "error",
       {
-        "groups": [["builtin", "external"], "internal", ["parent", "sibling", "index"]],
+        "groups": [
+          ["builtin", "external"],
+          "internal",
+          ["parent", "sibling", "index"]
+        ],
         "newlines-between": "never",
         "alphabetize": {
           "order": "asc",
@@ -35,4 +39,4 @@
   },
   "ignorePatterns": ["next-env.d.ts"],
   "plugins": ["tailwindcss"]
-}
+}

src/components/Controller/Controller.tsx

@@ -9,7 +9,6 @@ import {
   getVersionType,
   nightlyVersionFormat,
 } from "@/utils/versionUtils";
-import { DeviceButtons } from "../DeviceButtons/DeviceButtons";
 import { FileBrowser, FileStructure } from "../FileBrowser/FileBrowser";
 import HotkeyButton from "../HotkeyButton/HotkeyButton";
 import { Loader } from "../Loader/Loader";
@@ -111,8 +110,6 @@ const Controller = () => {
   };
 
   const renderFrame = () => {
-    const width = 241;
-    const height = 321;
     if (!consoleMessage.includes("screenframe")) return;
 
     const lines = consoleMessage.split("\r\n");
@@ -323,7 +320,99 @@ const Controller = () => {
               />
             </div>
 
-            <DeviceButtons autoUpdateFrame={autoUpdateFrame} />
+            {/* 
+            
+            Attention!
+            For some reason, when I use <DeviceButtons />, once the buttons are clicked, the 
+            buttons never disable. I have spent hours trying to fix this, but I cannot. So 
+            for now I have moved them back out of their own compoent which "Solves" the problem.
+
+            Basically the issue is it seems to be setting the state of disableTransmitAction, but 
+            not rerendering.
+
+            If someone else could fix this, that would be great <3
+
+            */}
+            {/* <DeviceButtons
+              autoUpdateFrame={autoUpdateFrame}
+              disableTransmitAction={disableTransmitAction}
+            /> */}
+            <div
+              className="flex flex-col items-center justify-center gap-5"
+              id="controlGroup"
+            >
+              <div className="flex flex-col items-center justify-center">
+                <div className="grid grid-flow-col grid-rows-3 gap-4">
+                  <div></div>
+                  <HotkeyButton
+                    label="Left"
+                    disabled={disableTransmitAction}
+                    onClickFunction={() => write("button 2", autoUpdateFrame)}
+                    className="h-16 w-16 bg-green-500"
+                    shortcutKeys={"ArrowLeft"}
+                  />
+                  <button
+                    disabled={disableTransmitAction}
+                    onClick={() => write("button 7", autoUpdateFrame)}
+                    className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
+                  >
+                    ↪️
+                  </button>
+                  <HotkeyButton
+                    label="Up"
+                    disabled={disableTransmitAction}
+                    onClickFunction={() => write("button 4", autoUpdateFrame)}
+                    className="h-16 w-16 bg-green-500"
+                    shortcutKeys={"ArrowUp"}
+                  />
+                  <HotkeyButton
+                    label="Ok"
+                    disabled={disableTransmitAction}
+                    onClickFunction={() => write("button 5", autoUpdateFrame)}
+                    className="h-16 w-16 bg-blue-500"
+                    shortcutKeys={"Enter"}
+                  />
+                  <HotkeyButton
+                    label="Down"
+                    disabled={disableTransmitAction}
+                    onClickFunction={() => write("button 3", autoUpdateFrame)}
+                    className="h-16 w-16 bg-green-500"
+                    shortcutKeys={"ArrowDown"}
+                  />
+                  <div></div>
+                  <HotkeyButton
+                    label="Right"
+                    disabled={disableTransmitAction}
+                    onClickFunction={() => write("button 1", autoUpdateFrame)}
+                    className="h-16 w-16 bg-green-500"
+                    shortcutKeys={"ArrowRight"}
+                  />
+                  <button
+                    disabled={disableTransmitAction}
+                    onClick={() => write("button 8", autoUpdateFrame)}
+                    className="h-12 w-12 self-end justify-self-end rounded bg-blue-400 text-white disabled:opacity-50"
+                  >
+                    ↩️
+                  </button>
+                </div>
+              </div>
+              <div className="flex items-center justify-center gap-4">
+                <HotkeyButton
+                  label="DFU"
+                  disabled={disableTransmitAction}
+                  onClickFunction={() => write("button 6", autoUpdateFrame)}
+                  className="h-16 w-16 bg-slate-400"
+                  shortcutKeys={"mod+D"}
+                />
+                <button
+                  disabled={disableTransmitAction}
+                  onClick={() => write("reboot", autoUpdateFrame)}
+                  className="h-16 w-16 rounded bg-slate-400 text-white disabled:opacity-50"
+                >
+                  Reboot
+                </button>
+              </div>
+            </div>
           </div>
 
           {!serial.isReading ? (

src/components/DeviceButtons/DeviceButtons.tsx

@@ -1,26 +1,50 @@
-import { useEffect } from "react";
 import { useWriteCommand } from "@/utils/serialUtils";
 import HotkeyButton from "../HotkeyButton/HotkeyButton";
 
 export const DeviceButtons = ({
   autoUpdateFrame,
+  disableTransmitAction,
 }: {
   autoUpdateFrame: boolean;
+  disableTransmitAction: boolean;
 }) => {
-  // const { write, disableTransmitAction } = useWriteCommand();
   const { write } = useWriteCommand();
 
-  const disableTransmitAction = false;
-
-  useEffect(() => {
-    console.log(disableTransmitAction);
-  }, [disableTransmitAction]);
-
   return (
     <div
       className="flex flex-col items-center justify-center gap-5"
       id="controlGroup"
     >
+      {/* Test Buttons ==================================================================================================== */}
+      <button
+        disabled={disableTransmitAction}
+        onClick={() => write("button 7", true, true)}
+        className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
+      >
+        T1
+      </button>
+      <button
+        disabled={disableTransmitAction}
+        onClick={() => write("button 7", true, false)}
+        className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
+      >
+        T2
+      </button>
+      <button
+        disabled={disableTransmitAction}
+        onClick={async () => await write("button 7", true, true)}
+        className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
+      >
+        T3
+      </button>
+      <button
+        disabled={disableTransmitAction}
+        onClick={async () => await write("button 7", true, false)}
+        className="h-12 w-12 self-end justify-self-start rounded bg-blue-400 text-white disabled:opacity-50"
+      >
+        T4
+      </button>
+      {/* ==================================================================================================== */}
       <div className="flex flex-col items-center justify-center">
         <div className="grid grid-flow-col grid-rows-3 gap-4">
           <div></div>

src/components/FileBrowser/FileBrowser.tsx

@@ -5,7 +5,7 @@ import {
   faFile,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Dispatch, RefObject, SetStateAction, useState } from "react";
+import { Dispatch, RefObject, SetStateAction } from "react";
 import { parseDirectories } from "@/utils/fileUtils";
 import { useWriteCommand } from "@/utils/serialUtils";
 

src/utils/serialUtils.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { DataPacket } from "@/components/SerialProvider/SerialProvider";
 import { hexToBytes } from "./fileUtils";
 import { useSerial } from "../components/SerialLoader/SerialLoader";
-import { DataPacket } from "../components/SerialProvider/SerialProvider";
 
 interface DownloadedFile {
   blob: Blob;
@@ -15,20 +15,12 @@ export const useWriteCommand = () => {
   const [disableTransmitAction, setDisableTransmitAction] =
     useState<boolean>(true);
 
-  // ToDo: This stuff below does not seem to be correctly updating, so leavin this in to debug
-  // const disableTransmitAction: boolean = loadingFrame || fileUploadBlocker;
-
   useEffect(() => {
     const disableTransmitActionUpdating = loadingFrame || fileUploadBlocker;
     // Triggers an immediate rerender with updated state
     setDisableTransmitAction(disableTransmitActionUpdating);
   }, [loadingFrame, fileUploadBlocker, disableTransmitAction]);
 
-  // const disableTransmitAction: boolean = useCallback(async () => {
-  //   return loadingFrame || fileUploadBlocker;
-  //   // eslint-disable-next-line react-hooks/exhaustive-deps
-  // }, [loadingFrame || fileUploadBlocker]);
-
   const write = async (
     command: string,
     updateFrame: boolean,
@@ -151,6 +143,8 @@ export const useWriteCommand = () => {
     downloadFile,
     uploadFile,
     disableTransmitAction,
+    loadingFrame,
+    fileUploadBlocker,
     setLoadingFrame,
   };
 };