fix() fix player refresh

immortal-tofu · Dec 8, 2023 · d8a4638 · d8a4638
1 parent dbe6f05
commit d8a4638
Showing 1 changed file with 46 additions and 33 deletions.
diff --git a/src/modules/game/components/Game/Game.tsx b/src/modules/game/components/Game/Game.tsx
@@ -39,7 +39,7 @@ export const Game = ({ account, provider }: GameProps) => {
 
     if (!contractLoading && contractAddress) {
       setContractLoading(true);
-      void getContract(contractAddress!);
+      void getContract(contractAddress);
     }
   }, [contractAddress, provider]);
 
@@ -63,32 +63,6 @@ export const Game = ({ account, provider }: GameProps) => {
       setGameIsRunning(isRunning);
     };
 
-    const onPlayerNameChanged = (player: string, name: string) => {
-      const newPlayers = players.map((p) => {
-        if (p.address === getAddress(player)) {
-          return { ...p, name };
-        }
-        return p;
-      });
-      setPlayers(newPlayers);
-    };
-
-    const onPlayerJoined = async (address: string) => {
-      if (contract) {
-        const name = await getReadContract(contract).name(address);
-        const newPlayers = [...players, { address, name }];
-        console.log(newPlayers);
-        setPlayers(newPlayers);
-      }
-    };
-
-    const onPlayerLeave = (player: string) => {
-      const newPlayers = players.filter(({ address }) => address != player);
-
-      console.log(newPlayers);
-      setPlayers(newPlayers);
-    };
-
     const gameHasStarted = () => {
       onNextBlock(() => {
         void new Audio(begin).play();
@@ -120,9 +94,6 @@ export const Game = ({ account, provider }: GameProps) => {
       void getEventContract(contract).then((gameContract) => {
         void gameContract.on(gameContract.filters.GameOpen, gameHasBeenOpen);
         void gameContract.on(gameContract.filters.GameStart, gameHasStarted);
-        void gameContract.on(gameContract.filters.PlayerNameChanged, onPlayerNameChanged);
-        void gameContract.on(gameContract.filters.PlayerJoined, onPlayerJoined);
-        void gameContract.on(gameContract.filters.PlayerKicked, onPlayerLeave);
         void gameContract.on(gameContract.filters.GoodGuysWin, onGoodGuysWin);
         void gameContract.on(gameContract.filters.BadGuysWin, onBadGuysWin);
       });
@@ -131,16 +102,58 @@ export const Game = ({ account, provider }: GameProps) => {
         void getEventContract(contract).then((gameContract) => {
           void gameContract.off(gameContract.filters.GameOpen, gameHasBeenOpen);
           void gameContract.off(gameContract.filters.GameStart, gameHasStarted);
-          void gameContract.off(gameContract.filters.PlayerNameChanged, onPlayerNameChanged);
-          void gameContract.off(gameContract.filters.PlayerJoined, onPlayerJoined);
-          void gameContract.off(gameContract.filters.PlayerKicked, onPlayerLeave);
           void gameContract.off(gameContract.filters.GoodGuysWin, onGoodGuysWin);
           void gameContract.off(gameContract.filters.BadGuysWin, onBadGuysWin);
         });
       };
     }
   }, [contract]);
 
+  useEffect(() => {
+    const onPlayerNameChanged = (player: string, name: string) => {
+      const newPlayers = players.map((p) => {
+        if (p.address === getAddress(player)) {
+          return { ...p, name };
+        }
+        return p;
+      });
+      setPlayers(newPlayers);
+    };
+
+    const onPlayerJoined = async (address: string) => {
+      if (contract) {
+        const name = await getReadContract(contract).name(address);
+        const newPlayers = [...players, { address, name }];
+        console.log(newPlayers);
+        setPlayers(newPlayers);
+      }
+    };
+
+    const onPlayerLeave = (player: string) => {
+      const newPlayers = players.filter(({ address }) => address != player);
+
+      console.log(newPlayers);
+      setPlayers(newPlayers);
+    };
+
+    if (contract && players.length) {
+      console.log('on players');
+      void getEventContract(contract).then((gameContract) => {
+        void gameContract.on(gameContract.filters.PlayerNameChanged, onPlayerNameChanged);
+        void gameContract.on(gameContract.filters.PlayerJoined, onPlayerJoined);
+        void gameContract.on(gameContract.filters.PlayerKicked, onPlayerLeave);
+      });
+      return () => {
+        console.log('off players');
+        void getEventContract(contract).then((gameContract) => {
+          void gameContract.off(gameContract.filters.PlayerNameChanged, onPlayerNameChanged);
+          void gameContract.off(gameContract.filters.PlayerJoined, onPlayerJoined);
+          void gameContract.off(gameContract.filters.PlayerKicked, onPlayerLeave);
+        });
+      };
+    }
+  }, [contract, players]);
+
   if (!contract || contractLoading) {
     return <div></div>;
   }