Add device connect improvements

Author: rjoken

src/App.css

@@ -6,6 +6,10 @@
   height: 100%;
   padding: env(safe-area-inset-top) env(safe-area-inset-right)
     env(safe-area-inset-bottom) env(safe-area-inset-left);
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
 }
 
 .logo {

src/App.tsx

@@ -4,7 +4,7 @@ import Game from "./components/Game";
 function App() {
   return (
     <div className="app-container">
-      <main>
+      <main style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
         <Game />
       </main>
     </div>

src/components/ConnectDevice.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useEffect } from "react";
 
 export const WOOT_VID = 0x31e3;
 
@@ -15,10 +15,60 @@ declare global {
 }
 
 interface ConnectDeviceProps {
+  device: HIDDevice | null;
   onConnect: (device: HIDDevice) => void;
+  onDisconnect: (device: HIDDevice) => void;
+  showForgetButton?: boolean;
 }
 
-export function ConnectDevice({ onConnect }: ConnectDeviceProps) {
+export async function initDevice(device: HIDDevice) {
+  await device.open();
+  device.addEventListener("inputreport", (event) => {
+    const data = event.data;
+    const analogData = [];
+    for (let i = 0; i < data.byteLength; i += 3) {
+      const key = data.getUint16(i);
+      const value = data.getUint8(i + 2) / 255;
+
+      if (value === 0) break;
+      analogData.push({ key, value });
+    }
+    if (device.onanalogreport) {
+      device.onanalogreport({ data: analogData });
+    } else {
+      console.warn("No onanalogreport event listener");
+    }
+  });
+}
+
+let hasDoneInit = false;
+
+export function ConnectDevice({
+  device,
+  onConnect,
+  onDisconnect,
+  showForgetButton = false,
+}: ConnectDeviceProps) {
+  useEffect(() => {
+    if (hasDoneInit) {
+      return;
+    }
+    hasDoneInit = true;
+    console.log("Init connected devices");
+    navigator.hid.getDevices().then(async (devices) => {
+      const wootDevice = devices.find(
+        (device) =>
+          device.vendorId === WOOT_VID &&
+          device.collections[0].usagePage === WOOT_ANALOG_USAGE
+      );
+      if (wootDevice) {
+        console.log("Found device", wootDevice);
+        await initDevice(wootDevice);
+        onConnect(wootDevice);
+      }
+    });
+  }, [onConnect]);
+
   const onClick = useCallback(async () => {
     const device = await navigator.hid.requestDevice({
       filters: [
@@ -32,42 +82,54 @@ export function ConnectDevice({ onConnect }: ConnectDeviceProps) {
     if (device.length > 0) {
       const useDevice = device[0];
 
-      await useDevice.open();
-
       console.log("Got Device", useDevice);
 
-      useDevice.addEventListener("inputreport", (event) => {
-        // The data structure is that there are pairs of 2 bytes for the hid id and one byte for the analog value repeated over and over
-        const data = event.data;
-        const analogData = [];
-        for (let i = 0; i < data.byteLength; i += 3) {
-          const key = data.getUint16(i);
-          const value = data.getUint8(i + 2) / 255;
-
-          if (value === 0) {
-            break;
-          }
-          analogData.push({
-            key,
-            value,
-          });
-        }
-
-        if (useDevice.onanalogreport) {
-          useDevice.onanalogreport({ data: analogData });
-        } else {
-          console.warn("No onanalogreport event listener");
-        }
-      });
-
+      await initDevice(useDevice);
       onConnect(useDevice);
     }
   }, [onConnect]);
 
+  useEffect(() => {
+    const handler = async (event: HIDConnectionEvent) => {
+      console.log("Device disconnected", event);
+      if (device === event.device) {
+        await device.close();
+        onDisconnect(device);
+      }
+    };
+
+    navigator.hid.addEventListener("disconnect", handler);
+
+    // Cleanup
+    return () => {
+      navigator.hid.removeEventListener("disconnect", handler);
+    };
+  }, [device, onDisconnect]);
+
   return (
-    <button className="bg-blue-500 text-white p-2 rounded-md" onClick={onClick}>
-      Connect Device
-    </button>
+    <div>
+      <button
+        className="bg-blue-500 text-white p-2 rounded-md"
+        onClick={onClick}
+        onKeyDown={(e) => {
+          e.preventDefault();
+        }}
+      >
+        {device ? `${device.productName} Connected` : "Connect Device"}
+      </button>
+      {showForgetButton && device && (
+        <button
+          onClick={async () => {
+            if (device) {
+              await device.forget();
+              onDisconnect(device);
+            }
+          }}
+        >
+          x
+        </button>
+      )}
+    </div>
   );
 }
 

src/components/Game.tsx

@@ -87,20 +87,32 @@ const Game = () => {
     }
   }, []);
 
+  useEffect(() => {
+    if (device) {
+      (gameRef.current?.scene.getScene("GameScene") as GameScene)?.setDevice(
+        device
+      );
+    } else {
+      (
+        gameRef.current?.scene.getScene("GameScene") as GameScene
+      )?.closeDevice();
+    }
+  }, [device, gameRef.current]);
+
   const onDeviceConnect = useCallback((device: HIDDevice) => {
     setDevice((existing) => {
       if (existing) {
         existing.close();
       }
 
-      (gameRef.current?.scene.getScene("GameScene") as GameScene)?.setDevice(
-        device
-      );
-
       return device;
     });
   }, []);
 
+  const onDeviceDisconnect = useCallback(() => {
+    setDevice(null);
+  }, []);
+
   return (
     <div
       style={{
@@ -111,7 +123,11 @@ const Game = () => {
         gap: "1rem",
       }}
     >
-      <ConnectDevice onConnect={onDeviceConnect} />
+      <ConnectDevice
+        onConnect={onDeviceConnect}
+        onDisconnect={onDeviceDisconnect}
+        device={device}
+      />
       <div style={{ width: "100%", height: "100%", position: "relative" }}>
         <div
           ref={containerRef}

src/game/scenes/GameScene.ts

@@ -46,6 +46,13 @@ export class GameScene extends Phaser.Scene {
     };
   }
 
+  closeDevice() {
+    if (this.device) {
+      this.device.onanalogreport = undefined;
+      this.device = undefined;
+    }
+  }
+
   onAnalogReport = (event: AnalogReport) => {
     const { data } = event;
     this.analogL = data.find((d) => d.key === AnalogKey.A)?.value ?? 0;