Added animation to goal dialog and team specific colors.

src/components/GoalDialog/GoalDialog.css

@@ -0,0 +1,47 @@
+.goal span {
+    display: inline-block;
+}
+
+.goal span:nth-child(1) {
+    animation: balance 1.5s linear infinite;
+    transform-origin: bottom left;
+}
+
+.goal span:nth-child(2) {
+    animation: balance 1.5s linear infinite;
+    transform-origin: bottom left;
+    animation-delay: 0.2s;
+
+}
+.goal span:nth-child(3) {
+    animation: balance 1.5s linear infinite;
+    transform-origin: bottom left;
+    animation-delay: 0.4s;
+
+}
+.goal span:nth-child(4) {
+    animation: balance 1.5s linear infinite;
+    transform-origin: bottom left;
+    animation-delay: 0.6s;
+
+}
+.goal span:nth-child(5) {
+    animation: balance 1.5s linear infinite;
+    transform-origin: bottom left;
+    animation-delay: 0.8s;
+}
+
+
+@keyframes balance {
+    0%, 50%, 100% {
+        transform: translateY(0);
+    }
+
+    25% {
+        transform: translateY(-100px);
+    }
+
+    75% {
+        transform: translateY(100px);
+    }
+}

src/components/GoalDialog.tsx → src/components/GoalDialog/GoalDialog.tsx

@@ -1,5 +1,9 @@
 import { useState, useEffect } from "react";
 
+import { Team } from "../../utils/enums";
+
+import "./GoalDialog.css";
+
 const musicUrls = [
   "/scoreboard/music/Kernkraft400-ZombieNation-Sample.mp3",
   "/scoreboard/music/AlienAntFarm-SmoothCriminal-Sample.mp3",
@@ -10,7 +14,11 @@ const musicUrls = [
   "/scoreboard/music/Psy-GangdamStyle-Sample.mp3",
 ];
 
-const GoalDialog = () => {
+interface Props {
+  team: Team;
+}
+
+const GoalDialog = ({ team }: Props) => {
   const [showGoalDialog, setShowGoalDialog] = useState(false);
   const [musicUrl, setMusicUrl] = useState<string>();
 
@@ -28,14 +36,30 @@ const GoalDialog = () => {
     }, 1000);
   }, []);
 
+  console.log(team);
+
   return (
     <>
       <div
         className={`${
           showGoalDialog ? "visible" : "hidden"
-        } h-full w-full absolute z-10 bg-white font-extrabold content-center items-center`}
+        } h-full w-full absolute z-10 font-extrabold content-center items-center ${
+          team === Team.Right ? "bg-red-600" : "bg-white"
+        }`}
       >
-        <h1 className="text-superxl">GOAL!</h1>
+        <h1
+          className={`text-superxl ${
+            team === Team.Right ? "text-white" : "text-black"
+          }`}
+        >
+          <div className="goal">
+            <span>G</span>
+            <span>O</span>
+            <span>A</span>
+            <span>L</span>
+            <span>!</span>
+          </div>
+        </h1>
       </div>
       {musicUrl && (
         <audio id="musicplayer" autoPlay>

src/components/Scoreboard.tsx

@@ -1,14 +1,15 @@
 import { useCallback, useState } from "react";
 
 import BluetoothControlPanel from "./BluetoothControlPanel";
-import GoalDialog from "./GoalDialog";
+import GoalDialog from "./GoalDialog/GoalDialog";
 import { useKeyDown } from "../hooks/useKeyDown";
+import { Team } from "../utils/enums";
 
 const ScoreCounter = () => {
   const [leftScore, setLeftScore] = useState(0);
   const [rightScore, setRightScore] = useState(0);
 
-  const [goalDialogOpen, setGoalDialogOpen] = useState(false);
+  const [goalDialogOpen, setGoalDialogOpen] = useState<Team | undefined>();
 
   const updateScores = useCallback((leftScore: number, rightScore: number) => {
     setLeftScore(leftScore);
@@ -17,9 +18,9 @@ const ScoreCounter = () => {
 
   const incrementLeftScore = () => {
     setLeftScore(leftScore + 1);
-    setGoalDialogOpen(true);
+    setGoalDialogOpen(Team.Left);
     setTimeout(() => {
-      setGoalDialogOpen(false);
+      setGoalDialogOpen(undefined);
     }, 15000);
   };
 
@@ -30,9 +31,9 @@ const ScoreCounter = () => {
 
   const incrementRightScore = () => {
     setRightScore(rightScore + 1);
-    setGoalDialogOpen(true);
+    setGoalDialogOpen(Team.Right);
     setTimeout(() => {
-      setGoalDialogOpen(false);
+      setGoalDialogOpen(undefined);
     }, 15000);
   };
 
@@ -79,7 +80,7 @@ const ScoreCounter = () => {
         handleResetScores={resetScores}
         handleUpdateScores={updateScores}
       />
-      {goalDialogOpen && <GoalDialog />}
+      {goalDialogOpen && <GoalDialog team={goalDialogOpen} />}
       <div className="@container text-4xl flex flex-col grow items-center font-bold">
         <button className="flex items-center z-10" onClick={incrementLeftScore}>
           +

src/utils/enums.ts

@@ -0,0 +1,4 @@
+export enum Team {
+  Right = "RIGHT",
+  Left = "LEFT",
+}