fix warnings

src/Home.tsx

@@ -26,24 +26,24 @@ import PageContainer from "./components/PageContainer";
 type ConnectionState = "connecting" | "error" | "connected" | "reconnecting";
 
 const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
-  const [userKey, setUserKey] = useState(undefined);
+  const [userKey, setUserKey] = useState<string | undefined>(undefined);
 
   const [connectionState, setConnetionState] =
     useState<ConnectionState>("connecting");
 
   const [searchingOpponent, setSearchingOpponent] = useState<boolean>(false);
 
-  const [game, setGame] = useState<CommonMancalaGame>(undefined);
+  const [game, setGame] = useState<CommonMancalaGame | undefined>(undefined);
 
-  const [crashMessage, setCrashMessage] = useState<string>(undefined);
+  const [crashMessage, setCrashMessage] = useState<string | undefined>(undefined);
 
-  const [userKeyWhoLeave, setUserKeyWhoLeave] = useState<string>(undefined);
+  const [userKeyWhoLeave, setUserKeyWhoLeave] = useState<string | undefined>(undefined);
 
-  const [boardViewModel, setBoardViewModel] = useState<BoardViewModel>(null);
+  const [boardViewModel, setBoardViewModel] = useState<BoardViewModel | undefined>(undefined);
 
-  const [boardId, setBoardId] = useState<string>();
+  const [boardId, setBoardId] = useState<string>("-1");
 
-  const [pitAnimator, setPitAnimator] = useState<PitAnimator>();
+  const [pitAnimator, setPitAnimator] = useState<PitAnimator | undefined>(undefined);
 
   const [theme, setTheme] = useState<Theme | undefined>(undefined);
 
@@ -119,6 +119,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   };
 
   const getBoardIndex = (index: number) => {
+    if(!game) return -1;
     if (userKey === game.player2Id) return index + game.board.pits.length / 2;
     return index;
   };
@@ -137,7 +138,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   React.useEffect(() => {
     context.themeManager.onThemeChange = (theme) => {
       setTheme(theme);
-      pitAnimator && updateBoardViewModel(pitAnimator.getBoardViewModelFromGame(game));
+      pitAnimator && game && updateBoardViewModel(pitAnimator.getBoardViewModelFromGame(game));
     };
   }, [boardViewModel]);
 
@@ -152,6 +153,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   };
 
   const onPitSelect = (index: number, pit: Pit) => {
+    if(!boardViewModel) return;
     //TODO : stoneCount comes from view model!
     if (pit.stoneCount === 0) {
       //TODO : warn user
@@ -201,17 +203,15 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
         crashMessage={crashMessage}
         userKey={userKey}
         userKeyWhoLeave={userKeyWhoLeave}
-        searchingOpponent={searchingOpponent}
+        searchingOpponent={searchingOpponent} />
-      />
+      {game && boardViewModel && userKey && (
-      {game && boardViewModel && (
         <BoardView
           userKey={userKey}
           game={game}
           boardId={boardId}
           boardViewModel={boardViewModel}
           context={context}
-          onPitSelect={onPitSelect}
+          onPitSelect={onPitSelect} />
-        />
       )}
     </PageContainer>
   );

src/components/HeaderBar.tsx

@@ -8,7 +8,12 @@ import Button from "./Button";
 import "@szhsin/react-menu/dist/index.css";
 import "@szhsin/react-menu/dist/transitions/slide.css";
 
-function renderNewGameButton(context: Context, game: MancalaGame, onNewGameClick: () => void, userKeyWhoLeave: string, crashMessage: string): JSX.Element {
+function renderNewGameButton(
+    context: Context, game:
+        MancalaGame | undefined,
+    onNewGameClick: () => void,
+    userKeyWhoLeave: string | undefined,
+    crashMessage: string | undefined): JSX.Element {
     const newGame = (
         <Button
             context={context}
@@ -33,9 +38,9 @@ function renderNewGameButton(context: Context, game: MancalaGame, onNewGameClick
 
 const HeaderBar: FunctionComponent<{
     context: Context,
-    game: MancalaGame,
+    game?: MancalaGame,
-    userKeyWhoLeave: string,
+    userKeyWhoLeave?: string,
-    crashMessage: string,
+    crashMessage?: string,
     onNewGameClick: () => void,
     onLeaveGameClick: () => void
 }> = (props) => {
@@ -98,8 +103,10 @@ const ThemeSwitchMenu: FunctionComponent<{ context: Context, textColor: string }
         return (<MenuItem
             key={index}
             style={{ color: textColor }}
+            //@ts-ignore
             onMouseOver={(event) => (event.target.style.background =
                 context.themeManager.theme.background)}
+            //@ts-ignore
             onMouseOut={(event) => (event.target.style.background = "transparent")}
             onClick={() => (context.themeManager.theme = theme)}>
             <div style={{

src/components/InfoPanel.tsx

@@ -6,10 +6,10 @@ import { getColorByBrightness } from "../util/ColorUtil";
 
 function getInfoPanelTextByGameState(params: {
   context: Context;
-  game: MancalaGame;
+  game?: MancalaGame;
-  crashMessage: string;
+  crashMessage?: string;
-  userKey: string;
+  userKey?: string;
-  userKeyWhoLeave: string;
+  userKeyWhoLeave?: string;
   searchingOpponent: boolean;
 }): string | undefined {
   const {
@@ -42,9 +42,9 @@ function getInfoPanelTextByGameState(params: {
     return context.texts.GameEnded + " " + whoWon;
   } else {
     if (game) {
-      return game.checkIsPlayerTurn(userKey)
+      return userKey ? game.checkIsPlayerTurn(userKey)
         ? context.texts.YourTurn
-        : context.texts.OpponentTurn;
+        : context.texts.OpponentTurn : undefined;
     }
   }
   return undefined;
@@ -70,10 +70,10 @@ const InfoPanelContainer: FunctionComponent<{
 
 const InfoPanel: FunctionComponent<{
   context: Context;
-  game: MancalaGame;
+  game?: MancalaGame;
-  crashMessage: string;
+  crashMessage?: string;
-  userKey: string;
+  userKey?: string;
-  userKeyWhoLeave: string;
+  userKeyWhoLeave?: string;
   searchingOpponent: boolean;
 }> = ({
   context,
@@ -83,7 +83,7 @@ const InfoPanel: FunctionComponent<{
   userKeyWhoLeave,
   searchingOpponent,
 }) => {
-    const isUserTurn = game?.checkIsPlayerTurn(userKey);
+    const isUserTurn = userKey ? game?.checkIsPlayerTurn(userKey) : false;
     const containerColor = isUserTurn
       ? context.themeManager.theme.playerTurnColor
       : context.themeManager.theme.boardColor;

src/components/board/BoardView.tsx

@@ -1,6 +1,6 @@
-import { Bank, MancalaGame, Pit } from "mancala.js";
 import * as React from "react";
-import { FunctionComponent, useState } from "react";
+import { MancalaGame, Pit } from "mancala.js";
+import { FunctionComponent } from "react";
 import { Context } from "../../context";
 import BoardViewModel from "../../viewmodel/BoardViewModel";
 import PitViewModel from "../../viewmodel/PitViewModel";
@@ -8,7 +8,7 @@ import PitView from "./PitView";
 import StoreView from "./StoreView";
 
 const BoardView: FunctionComponent<{
-  game?: MancalaGame;
+  game: MancalaGame;
   context: Context;
   boardId: string;
   boardViewModel: BoardViewModel;
@@ -37,22 +37,7 @@ const BoardView: FunctionComponent<{
     boardViewModel.pits[game.board.player1BankIndex()];
   const player2BankViewModel =
     boardViewModel.pits[game.board.player2BankIndex()];
-  const player1Bank = (
+  const isPlayer2 = userKey === game?.player2Id;
-    <StoreView
-      context={context}
-      pitViewModel={player1BankViewModel}
-      gridColumn="1 / 2"
-      gridRow="1 / 3"
-    />
-  );
-  const player2Bank = (
-    <StoreView
-      context={context}
-      pitViewModel={player2BankViewModel}
-      gridColumn="8 / 9"
-      gridRow="1 / 3"
-    />
-  );
   return (
     <div
       style={{
@@ -66,41 +51,20 @@ const BoardView: FunctionComponent<{
         background: theme.boardColor,
       }}
     >
-      {userKey === game?.player2Id ? (
-        <>
       <StoreView
         context={context}
-            pitViewModel={player1BankViewModel}
+        pitViewModel={isPlayer2 ? player2BankViewModel : player1BankViewModel}
-            gridColumn="1 / 2"
-            gridRow="1 / 3"
-          />
-          <StoreView
-            context={context}
-            pitViewModel={player2BankViewModel}
-            gridColumn="8 / 9"
-            gridRow="1 / 3"
-          />
-          {player1Pits?.reverse()}
-          {player2Pits}
-        </>
-      ) : (
-        <>
-          <StoreView
-            context={context}
-            pitViewModel={player1BankViewModel}
         gridColumn="8 / 9"
         gridRow="1 / 3"
       />
       <StoreView
         context={context}
-            pitViewModel={player2BankViewModel}
+        pitViewModel={isPlayer2 ? player1BankViewModel : player2BankViewModel}
         gridColumn="1 / 2"
         gridRow="1 / 3"
       />
-          {player2Pits?.reverse()}
+      {isPlayer2 ? player1Pits?.reverse() : player2Pits?.reverse()}
-          {player1Pits}
+      {isPlayer2 ? player2Pits : player1Pits}
-        </>
-      )}
     </div>
   );
 };

src/components/board/StoneView.tsx

@@ -12,7 +12,7 @@ const StoneView: FunctionComponent<{ color: string }> = ({ color }) => {
           borderRadius: "10vw",
           transition: "background-color 0.5s",
         }}
-      ></div>
+      />
     );
   };
 

src/util/Util.ts

@@ -1,7 +1,7 @@
 
 export default class Util {
     public static range(size: number) {
-        var ans = [];
+        var ans : number[] = [];
         for (let i = 0; i < size; i++) {
             ans.push(i);
         }