Don't join new game if game in local storage

lindlof · Dec 13, 2020 · 4c835a6 · 4c835a6
1 parent 466756a
commit 4c835a6
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 14 deletions.
diff --git a/web/src/App.tsx b/web/src/App.tsx
@@ -18,11 +18,15 @@ const config = envConfig();
 
 export const App: React.FC = () => {
   const [client, setClient] = useState<SecretJS.SigningCosmWasmClient | undefined>();
-  const [game, setGame] = useLocalStorage<Game.Game | undefined>('game', undefined, Game.defaults);
+  const [game, setGame, loadGame] = useLocalStorage<Game.Game | undefined>(
+    'game',
+    undefined,
+    Game.defaults,
+  );
   const account = useAccount(client, game);
   const lowBalance = account && account.balance < 11;
   const { enqueueSnackbar } = useSnackbar();
-  routeUrl(client, setGame, enqueueSnackbar);
+  routeUrl(client, setGame, loadGame, enqueueSnackbar);
 
   return (
     <div>
@@ -75,7 +79,9 @@ export const App: React.FC = () => {
               color="primary"
               size="large"
               disabled={lowBalance}
-              onClick={() => playGame(client, config.contract, true, setGame, enqueueSnackbar)}
+              onClick={() =>
+                playGame(client, config.contract, true, setGame, loadGame, enqueueSnackbar)
+              }
             >
               Play with Friend
             </Button>
@@ -85,7 +91,9 @@ export const App: React.FC = () => {
               variant="contained"
               color="primary"
               disabled={lowBalance}
-              onClick={() => playGame(client, config.contract, false, setGame, enqueueSnackbar)}
+              onClick={() =>
+                playGame(client, config.contract, false, setGame, loadGame, enqueueSnackbar)
+              }
             >
               Play with Anyone
             </Button>
@@ -101,9 +109,15 @@ const playGame = async (
   contract: string,
   privateGame: boolean,
   setGame: Function,
+  loadGame: Function,
   enqueueSnackbar: Function,
   locator?: string,
 ) => {
+  const currentGame = loadGame();
+  if (currentGame !== undefined) {
+    setGame(currentGame);
+    return;
+  }
   const game = Game.create(contract, privateGame, locator);
   setGame(game);
   const method = privateGame ? 'private_game' : 'join_game';
@@ -136,12 +150,15 @@ const playGame = async (
 const routeUrl = (
   client: SecretJS.SigningCosmWasmClient | undefined,
   setGame: Function,
+  loadGame: Function,
   enqueueSnackbar: Function,
 ) => {
   const url = new URL(window.location.href);
   const joinLocator = url.searchParams.get('game');
   if (client && joinLocator) {
-    playGame(client, config.contract, true, setGame, enqueueSnackbar, joinLocator);
+    setTimeout(() => {
+      playGame(client, config.contract, true, setGame, loadGame, enqueueSnackbar, joinLocator);
+    }, 500);
     window.history.pushState('', '', document.location.origin);
   }
 };

diff --git a/web/src/utils.ts b/web/src/utils.ts
@@ -1,20 +1,27 @@
 import { useState } from 'react';
 
-export const useLocalStorage = <T>(key: string, initialValue: T, defaults?: T) => {
-  const [storedValue, setStoredValue] = useState(() => {
+export const useLocalStorage = <T>(
+  key: string,
+  initialValue: T,
+  defaults?: T,
+): [T, (value: T | Function, store?: boolean) => void, () => T | undefined] => {
+  const loadValue = (): T | undefined => {
     try {
       const itemStr = window.localStorage.getItem(key);
-      if (!itemStr) return initialValue;
+      if (!itemStr) return;
       const item = JSON.parse(itemStr);
       if (typeof item === 'object') {
         return { ...defaults, ...item };
       }
       return item;
-    } catch {
-      return initialValue;
-    }
+    } catch {}
+  };
+  const [storedValue, setStoredValue] = useState(() => {
+    const item = loadValue();
+    if (item === undefined) return initialValue;
+    return item;
   });
-  const setValue = (value: T, store: boolean = true) => {
+  const setValue = (value: T | Function, store: boolean = true) => {
     try {
       setStoredValue((current: T) => {
         const valueToStore = value instanceof Function ? value(current) : value;
@@ -28,5 +35,5 @@ export const useLocalStorage = <T>(key: string, initialValue: T, defaults?: T) =
     }
   };
 
-  return [storedValue, setValue];
+  return [storedValue, setValue, loadValue];
 };
diff --git a/web/src/wallet/Wallet.tsx b/web/src/wallet/Wallet.tsx
@@ -54,7 +54,7 @@ const Wallet = (props: Props) => {
       <Card className={classes.card}>
         <CardContent>
           <Typography variant="h5" color="textPrimary" gutterBottom>
-            {`${walletTypeName.get(walletType) || ''} Wallet`}
+            {walletType !== undefined && `${walletTypeName.get(walletType) || ''} Wallet`}
           </Typography>
           {client ? (
             <span>