diff --git a/src/routes/Home.tsx b/src/routes/Home.tsx index 9592e52..38a45a1 100644 --- a/src/routes/Home.tsx +++ b/src/routes/Home.tsx @@ -52,6 +52,10 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { const [theme, setTheme] = useState(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(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,14 +128,17 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { setGame(undefined); setCrashMessage(undefined); setUserKeyWhoLeave(undefined); + setHasOngoingAction(false); }; const getBoardIndex = (index: number) => { - if(!game) return -1; + if (!game) return -1; if (userKey === game.player2Id) return index + game.board.pits.length / 2; return index; }; + const checkHasAnOngoingAction = () => hasOngoingAction; + React.useEffect(() => { setTheme(context.themeManager.theme); const pitAnimator = new PitAnimator(context, updateBoardViewModel); @@ -158,7 +168,11 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { }; const onPitSelect = (index: number, pit: Pit) => { - if(!boardViewModel) return; + if(checkHasAnOngoingAction()) { + return; + } + setHasOngoingAction(true); + if (!boardViewModel) return; //TODO : stoneCount comes from view model! if (pit.stoneCount === 0) { //TODO : warn user @@ -201,19 +215,19 @@ const Home: FunctionComponent<{ initial?: number }> = ({ initial = 0 }) => { {connectionStateText()} - - - - - - -