Convert Threatbar to TypeScript and fix issues

Signed-off-by: Johannes Loher <[email protected]>

src/client/components/board/board.test.tsx

@@ -22,7 +22,7 @@ const G: GameState = {
   players: [['T3', 'T4', 'T5']],
   scores: [0, 0, 0],
   identifiedThreats: {},
-  selectedDiagram: 0,
+  selectedDiagram: 'diagram1',
   selectedComponent: '',
   threat: {
     modal: false,

src/client/components/board/board.tsx

@@ -46,12 +46,13 @@ const Board: FC<BoardProps> = ({
       ? '/api'
       : `${window.location.protocol}//${window.location.hostname}:${API_PORT}`;
 
-  const updateName = useCallback(
-    (index: number, name: string) => {
-      setNames([...names].splice(index, 1, name));
-    },
-    [setNames, names],
-  );
+  const updateName = useCallback((index: number, name: string) => {
+    setNames((names) => {
+      const newNames = [...names];
+      newNames[index] = name;
+      return newNames;
+    });
+  }, []);
 
   const apiGetRequest = useCallback(
     async (endpoint: string) => {
@@ -88,15 +89,18 @@ const Board: FC<BoardProps> = ({
     const model = modelResponse?.body as Record<string, unknown> | undefined;
 
     setModel(model);
-  }, [apiGetRequest, setModel]);
+  }, [apiGetRequest]);
 
   // consider using react-query instead
   useEffect(() => {
-    updateNames();
     if (G.modelType !== ModelType.IMAGE) {
       updateModel();
     }
-  }, [updateNames, G.modelType, updateModel]);
+  }, [G.modelType, updateModel]);
+
+  useEffect(() => {
+    updateNames();
+  }, [updateNames]);
 
   const current = playerID === ctx.currentPlayer;
 
@@ -134,7 +138,7 @@ const Board: FC<BoardProps> = ({
           matchID={matchID}
         />
       )}
-      {G.modelType === ModelType.THREAT_DRAGON && (
+      {G.modelType === ModelType.THREAT_DRAGON && model !== undefined && (
         <Model
           model={model}
           selectedDiagram={G.selectedDiagram}
@@ -158,7 +162,7 @@ const Board: FC<BoardProps> = ({
               isInThreatStage={isInThreatStage}
             />
           </div>
-          {playerID && G.suit && (
+          {playerID && (
             <Deck
               cards={G.players[Number.parseInt(playerID)]}
               suit={G.suit}

src/client/components/deck/deck.tsx

@@ -4,7 +4,7 @@ import { GameMode, getCardCssClass } from '../../../utils/GameMode';
 import type { Card, Suit } from '../../../utils/cardDefinitions';
 
 interface DeckProps {
-  suit: Suit;
+  suit?: Suit;
   cards: Card[];
   isInThreatStage: boolean;
   round: number;

src/client/components/sidebar/sidebar.test.tsx

@@ -20,7 +20,7 @@ describe('Sidebar', () => {
       scores: [0, 0],
       lastWinner: 0,
       maxRounds: 10,
-      selectedDiagram: 0,
+      selectedDiagram: 'diagram0',
       selectedComponent: 'some-component',
       selectedThreat: 'some-threat',
       threat: {

src/client/components/status/status.test.tsx

@@ -19,7 +19,7 @@ describe('Status', () => {
     numCardsPlayed: 0,
     lastWinner: 0,
     maxRounds: 0,
-    selectedDiagram: 0,
+    selectedDiagram: 'diagram0',
     selectedComponent: '',
     selectedThreat: '',
     threat: {