Added goal overlay and song samples, added keypress shortcuts for HID…

… solution for remote control

src/components/GoalDialog.tsx

@@ -0,0 +1,49 @@
+import { useState, useEffect } from "react";
+
+const musicUrls = [
+  "http://localhost:5173/scoreboard/music/Kernkraft400-ZombieNation-Sample.mp3",
+  "http://localhost:5173/scoreboard/music/AlienAntFarm-SmoothCriminal-Sample.mp3",
+  "http://localhost:5173/scoreboard/music/BloodhoundGang-TheBadTouch-Sample.mp3",
+  "http://localhost:5173/scoreboard/music/Blur-Song2-Sample.mp3",
+  "http://localhost:5173/scoreboard/music/Darude-Sandstorm-Sample.mp3",
+  "http://localhost:5173/scoreboard/music/LittleBig-Skibidi-Sample.mp3",
+  "http://localhost:5173/scoreboard/music/Psy-GangdamStyle-Sample.mp3",
+];
+
+const GoalDialog = () => {
+  const [showGoalDialog, setShowGoalDialog] = useState(false);
+  const [musicUrl, setMusicUrl] = useState<string>();
+
+  setTimeout(() => {
+    setShowGoalDialog(true);
+  }, 1000);
+
+  useEffect(() => {
+    const url = musicUrls[Math.floor(Math.random() * musicUrls.length)];
+    console.log(url);
+    setMusicUrl(url);
+
+    setTimeout(() => {
+      setShowGoalDialog(true);
+    }, 1000);
+  }, []);
+
+  return (
+    <>
+      <div
+        className={`${
+          showGoalDialog ? "visible" : "hidden"
+        } h-full w-full absolute z-10 bg-white font-extrabold content-center items-center`}
+      >
+        <h1 className="text-superxl">GOAL!</h1>
+      </div>
+      {musicUrl && (
+        <audio id="musicplayer" autoPlay>
+          <source src={musicUrl} />
+        </audio>
+      )}
+    </>
+  );
+};
+
+export default GoalDialog;

src/components/Scoreboard.tsx

@@ -1,18 +1,26 @@
 import { useCallback, useState } from "react";
 
 import BluetoothControlPanel from "./BluetoothControlPanel";
+import GoalDialog from "./GoalDialog";
+import { useKeyDown } from "../hooks/useKeyDown";
 
 const ScoreCounter = () => {
   const [leftScore, setLeftScore] = useState(0);
   const [rightScore, setRightScore] = useState(0);
 
+  const [goalDialogOpen, setGoalDialogOpen] = useState(false);
+
   const updateScores = useCallback((leftScore: number, rightScore: number) => {
     setLeftScore(leftScore);
     setRightScore(rightScore);
   }, []);
 
   const incrementLeftScore = () => {
     setLeftScore(leftScore + 1);
+    setGoalDialogOpen(true);
+    setTimeout(() => {
+      setGoalDialogOpen(false);
+    }, 15000);
   };
 
   const decrementLeftScore = () => {
@@ -22,6 +30,10 @@ const ScoreCounter = () => {
 
   const incrementRightScore = () => {
     setRightScore(rightScore + 1);
+    setGoalDialogOpen(true);
+    setTimeout(() => {
+      setGoalDialogOpen(false);
+    }, 15000);
   };
 
   const decrementRightScore = () => {
@@ -34,14 +46,40 @@ const ScoreCounter = () => {
     setRightScore(0);
   }, []);
 
-  console.log(leftScore, rightScore);
+  const handleKeyPress = useCallback(
+    (e: KeyboardEvent) => {
+      console.log(e);
+      if (e.key === "z") {
+        decrementLeftScore();
+      } else if (e.key === "x") {
+        incrementLeftScore();
+      } else if (e.key === ",") {
+        decrementRightScore();
+      } else if (e.key === ".") {
+        incrementRightScore();
+      } else if (e.ctrlKey && e.key === "1") {
+        setLeftScore(0);
+      } else if (e.ctrlKey && e.key === "2") {
+        setRightScore(1);
+      }
+    },
+    [
+      decrementLeftScore,
+      incrementLeftScore,
+      decrementRightScore,
+      incrementRightScore,
+    ]
+  );
+
+  useKeyDown(handleKeyPress, ["z", "x", ",", ".", "1", "2"]);
 
   return (
     <div className="@2xl/main:flex-row flex flex-col grow h-full">
       <BluetoothControlPanel
         handleResetScores={resetScores}
         handleUpdateScores={updateScores}
       />
+      {goalDialogOpen && <GoalDialog />}
       <div className="@container text-4xl flex flex-col grow items-center font-bold">
         <button className="flex items-center z-10" onClick={incrementLeftScore}>
           +

src/hooks/useKeyDown.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect } from "react";
+
+export const useKeyDown = (
+  callback: (event: KeyboardEvent) => void,
+  keys: string[]
+) => {
+  const onKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      const wasAnyKeyPressed = keys.some((key) => event.key === key);
+      if (wasAnyKeyPressed) {
+        event.preventDefault();
+        callback(event);
+      }
+    },
+    [callback, keys]
+  );
+  useEffect(() => {
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [onKeyDown]);
+};

src/hooks/useWebBluetooth.ts

@@ -73,7 +73,7 @@ const useWebBluetooth = (incomingDataEventListener: (data: string) => void) => {
   };
 
   useEffect(() => {
-    let reconnect: number | undefined = undefined;
+    let reconnect: number | NodeJS.Timeout | undefined = undefined;
     if (previouslyPairedDevices.length > 0) {
       reconnect = setInterval(() => {
         console.log(isDisconnected);