check has an ongoing action on pit select

src/routes/Home.tsx

@@ -52,6 +52,10 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
 
   const [theme, setTheme] = useState<Theme | undefined>(undefined);
 
+  // It is a flag for ongoing action such as send game move.
+  // We have to block future actions if there is an ongoing action.
+  const [hasOngoingAction, setHasOngoingAction] = useState<boolean>(false);
+
   const onConnectionDone = () => {
     setConnetionState("connected");
   };
@@ -89,6 +93,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       setSearchingOpponent(false);
       setGame(mancalaGame);
       pitAnimator.setNewGame(mancalaGame);
+      setHasOngoingAction(false);
     });
 
     context.rtmt.listenMessage(channel_on_game_update, (message: Object) => {
@@ -96,6 +101,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
       const mancalaGame = MancalaGame.createFromMancalaGame(newGame);
       setGame(mancalaGame);
       pitAnimator.setUpdatedGame(mancalaGame);
+      setHasOngoingAction(false);
     });
 
     context.rtmt.listenMessage(channel_on_game_crashed, (message: any) => {
@@ -108,6 +114,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     context.rtmt.listenMessage(channel_on_game_user_leave, (message: any) => {
       const userKeyWhoLeave = message;
       setUserKeyWhoLeave(userKeyWhoLeave);
+      setHasOngoingAction(false);
     });
   };
 
@@ -121,6 +128,7 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     setGame(undefined);
     setCrashMessage(undefined);
     setUserKeyWhoLeave(undefined);
+    setHasOngoingAction(false);
   };
 
   const getBoardIndex = (index: number) => {
@@ -129,6 +137,8 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
     return index;
   };
 
+  const checkHasAnOngoingAction = () => hasOngoingAction;
+
   React.useEffect(() => {
     setTheme(context.themeManager.theme);
     const pitAnimator = new PitAnimator(context, updateBoardViewModel);
@@ -158,6 +168,10 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => {
   };
 
   const onPitSelect = (index: number, pit: Pit) => {
+    if(checkHasAnOngoingAction()) {
+      return;
+    }
+    setHasOngoingAction(true);
     if (!boardViewModel) return;
     //TODO : stoneCount comes from view model!
     if (pit.stoneCount === 0) {