Fix leave game not working on slow connection

web/src/App.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { Button } from '@material-ui/core';
 import * as SecretJS from 'secretjs';
 import * as bip39 from 'bip39';
-import { useInterval, useLocalStorage } from './utils';
+import { useLocalStorage } from './utils';
 import * as Msg from './msg';
 import Config from './config';
 import * as Game from './game';
@@ -12,6 +12,7 @@ import Wallet from './Wallet';
 import Banner from './Banner';
 import Grid from '@material-ui/core/Grid';
 import CircularProgress from '@material-ui/core/CircularProgress';
+import GameTicker from './components/GameTicker';
 
 const config = Config();
 
@@ -22,10 +23,6 @@ export const App: React.FC = () => {
   useEffect(() => {
     initClient(setClient);
   }, []);
-  useInterval(async () => {
-    if (!client || !game) return;
-    setGame(await Game.tick(client, game));
-  }, 1000 * 2);
 
   return (
     <div>
@@ -37,22 +34,22 @@ export const App: React.FC = () => {
           <Wallet client={client} />
         </Grid>
       </Grid>
-      {game && (
-        <div>
+      {client && game && (
+        <GameTicker client={client} game={game} setGame={setGame}>
           <p>Game contract {game.contract}</p>
           <Button variant="contained" color="primary" onClick={() => leaveGame(setGame)}>
             Leave game
           </Button>
           {game?.stage === Game.Stage.Lobby && <p>Waiting for Player 2 to join</p>}
-          {client && game?.stage !== Game.Stage.Lobby && (
+          {game?.stage !== Game.Stage.Lobby && (
             <GamePlaying
               game={game}
               playHandsign={(handsign: Msg.Handsign) =>
                 playHandsign(client, game, handsign, setGame, enqueueSnackbar)
               }
             />
           )}
-        </div>
+        </GameTicker>
       )}
       {game === null && <CircularProgress />}
       {game === undefined && client && (

web/src/components/GameTicker.tsx

@@ -0,0 +1,31 @@
+import React, { useEffect, useState } from 'react';
+import * as SecretJS from 'secretjs';
+import * as Game from '../game';
+
+interface Props {
+  client: SecretJS.SigningCosmWasmClient;
+  game: Game.Game;
+  setGame: Function;
+}
+
+export default (props: React.PropsWithChildren<Props>) => {
+  const { children, client, game, setGame } = props;
+  const [tickGame, setTickGame] = useState<Game.Game | undefined>();
+
+  useEffect(() => {
+    if (!client || !game) return;
+    const timer = setInterval(async () => {
+      const updatedGame = await Game.tick(client, game);
+      if (game) {
+        setTickGame(updatedGame);
+      }
+    }, 2000);
+    return () => clearInterval(timer);
+  });
+  useEffect(() => {
+    if (!game || !tickGame) return;
+    setGame(tickGame);
+  }, [tickGame]);
+
+  return <div>{children}</div>;
+};

web/src/utils.ts

@@ -1,23 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
-
-export const useInterval = (callback: Function, delay: number) => {
-  const savedCallback = useRef<Function>();
-
-  useEffect(() => {
-    savedCallback.current = callback;
-  }, [callback]);
-
-  useEffect(() => {
-    function tick() {
-      if (!savedCallback.current) return;
-      savedCallback.current();
-    }
-    if (delay !== null) {
-      const id = setInterval(tick, delay);
-      return () => clearInterval(id);
-    }
-  }, [delay]);
-};
+import { useState } from 'react';
 
 export const useLocalStorage = <T>(key: string, initialValue: T) => {
   const [storedValue, setStoredValue] = useState(() => {
@@ -31,6 +12,7 @@ export const useLocalStorage = <T>(key: string, initialValue: T) => {
   const setValue = (value: T, store: boolean = true) => {
     try {
       const valueToStore = value instanceof Function ? value(storedValue) : value;
+      console.log('set value to', valueToStore);
       setStoredValue(valueToStore);
       if (store) {
         window.localStorage.setItem(key, JSON.stringify(valueToStore));