fix: front end tick rate (#141)

* fix: front end tick rate

* fix: await tick tx

packages/client/src/hooks/useAutoBattle.ts

@@ -0,0 +1,52 @@
+import dayjs from "dayjs";
+import { useEffect, useState } from "react";
+import { useAutoBattleFn } from "./useAutoBattleFn";
+
+export function useAutoBattle() {
+  const { autoBattleFn } = useAutoBattleFn();
+  const [shouldRun, setShouldRun] = useState<boolean>(false);
+  const [isRunning, setIsRunning] = useState<boolean>(false);
+  const [runningStart, setRunningStart] = useState<number>(0);
+
+  useEffect(() => {
+    if (shouldRun) {
+      if (!isRunning) {
+        // set to now
+        setRunningStart(dayjs().unix());
+        setIsRunning(true);
+
+        // delay 0.5s to avoid on-chain fail and minimal tick interval
+        setTimeout(() => {
+          // run auto battle
+          autoBattleFn()
+            .then(() => {
+              setIsRunning(false);
+            })
+            .catch((e) => {
+              setIsRunning(false);
+              console.error(e);
+            });
+        }, 500);
+      }
+    }
+  }, [shouldRun, isRunning, setIsRunning, autoBattleFn, setRunningStart]);
+
+  // check timeout
+  useEffect(() => {
+    if (shouldRun) {
+      const interval = setInterval(() => {
+        // running timeout 10s
+        if (dayjs().unix() - runningStart > 10) {
+          setIsRunning(false);
+          console.log("running tick timeout");
+        }
+        // check every seconds:
+      }, 1000);
+      return () => {
+        clearInterval(interval);
+      };
+    }
+  }, [runningStart, shouldRun]);
+
+  return { setShouldRun, shouldRun, isRunning };
+}

packages/client/src/hooks/useAutoBattleFn.ts

@@ -0,0 +1,24 @@
+import { useMUD } from "@/MUDContext";
+import { useComponentValue } from "@latticexyz/react";
+import { useCallback } from "react";
+
+export function useAutoBattleFn() {
+  const {
+    components: { PlayerGlobal },
+    systemCalls: { autoBattle },
+    network: { localAccount, playerEntity },
+  } = useMUD();
+
+  const _playerGlobal = useComponentValue(PlayerGlobal, playerEntity);
+
+  const autoBattleFn = useCallback(async () => {
+    if (!_playerGlobal) {
+      console.log("unknown player");
+      return false;
+    }
+    await autoBattle(_playerGlobal.gameId, localAccount);
+    return true;
+  }, [_playerGlobal, autoBattle, localAccount]);
+
+  return { autoBattleFn };
+}

packages/client/src/hooks/useBoardStatus.ts

@@ -0,0 +1,19 @@
+import { useMUD } from "@/MUDContext";
+import { useComponentValue } from "@latticexyz/react";
+import { useEffect, useState } from "react";
+
+export function useBoardStatus() {
+  const {
+    components: { Board },
+    network: { playerEntity },
+  } = useMUD();
+
+  const BoardList = useComponentValue(Board, playerEntity);
+
+  const [currentBoardStatus, setCurrentBoardStatus] = useState(0);
+  useEffect(() => {
+    setCurrentBoardStatus(BoardList?.status || 0);
+  }, [BoardList, BoardList?.status]);
+
+  return { currentBoardStatus };
+}

packages/client/src/hooks/useChessboard.ts

@@ -45,7 +45,7 @@ const srcObj = {
 const useChessboard = () => {
   const {
     components: { Board, Player, PlayerGlobal },
-    systemCalls: { autoBattle, placeToBoard, changeHeroCoordinate },
+    systemCalls: { placeToBoard, changeHeroCoordinate },
     network: { localAccount, playerEntity, storeCache, getCurrentBlockNumber },
   } = useMUD();
 
@@ -202,10 +202,6 @@ const useChessboard = () => {
 
   const { heroAltar, inventory } = playerObj!;
 
-  const autoBattleFn = async () => {
-    await autoBattle(_playerlayerGlobal!.gameId, localAccount);
-  };
-
   const heroList = useMemo(() => {
     return (tierPrice && decodeHeroFn(heroAltar)) ?? [];
   }, [tierPrice, heroAltar]);
@@ -220,7 +216,6 @@ const useChessboard = () => {
     PiecesList,
     BattlePieceList,
     BoardList,
-    currentBoardStatus: BoardList?.status,
     srcObj,
     heroList,
     inventoryList,
@@ -234,7 +229,6 @@ const useChessboard = () => {
     getCurrentBlockNumber,
     roundInterval: GameConfig?.value.roundInterval,
     expUpgrade: GameConfig?.value.expUpgrade,
-    autoBattleFn,
   };
 };
 

packages/client/src/hooks/useTick.ts

@@ -1,6 +1,8 @@
 import { useState, useEffect } from "react";
 import useChessboard from "./useChessboard";
 import dayjs from "dayjs";
+import { useAutoBattle } from "./useAutoBattle";
+import { useBoardStatus } from "./useBoardStatus";
 
 // const BoardStatus = ["PREPARING", "INBATTLE", "FINISHED"];
 const BoardStatus = ["Preparing", "In Progress", "Awaiting Opponent"];
@@ -12,13 +14,14 @@ const useTick = () => {
     startFrom,
     autoBattleFn,
     currentRoundStartTime,
-    currentBoardStatus = 0,
     expUpgrade,
   } = useChessboard();
+  const { currentBoardStatus } = useBoardStatus();
 
   // console.log(status, "status", currentGameStatus);
   const [width, setWidth] = useState(100);
   const [timeLeft, setTimeLeft] = useState<number>(Infinity);
+  const { shouldRun, setShouldRun, isRunning } = useAutoBattle();
 
   // reduce progress bar and time
   useEffect(() => {
@@ -51,31 +54,15 @@ const useTick = () => {
   }, [currentBoardStatus, roundInterval, currentRoundStartTime]);
 
   useEffect(() => {
-    const interval = setInterval(async () => {
-      const number = await getCurrentBlockNumber();
-      const startTime = Number(startFrom);
-
-      if (timeLeft <= 0 && currentBoardStatus == 0) {
-        // First tick
-        console.log("first tick");
-        await autoBattleFn();
-      } else if (currentBoardStatus == 1) {
-        // Running tick
-        console.log("Running tick");
-        await autoBattleFn();
-      }
-    }, 1000);
-    return () => {
-      clearInterval(interval);
-    };
-  }, [
-    startFrom,
-    roundInterval,
-    getCurrentBlockNumber,
-    currentBoardStatus,
-    timeLeft,
-    autoBattleFn,
-  ]);
+    if (
+      (timeLeft <= 0 && currentBoardStatus === 0) ||
+      currentBoardStatus === 1
+    ) {
+      setShouldRun(true);
+    } else {
+      setShouldRun(false);
+    }
+  }, [timeLeft, currentBoardStatus, setShouldRun]);
 
   return {
     roundInterval,

packages/client/src/mud/createSystemCalls.ts

@@ -10,15 +10,14 @@ export type SystemCalls = ReturnType<typeof createSystemCalls>;
 export function createSystemCalls({
   worldSend,
   txReduced$,
-  singletonEntity,
 }: SetupNetworkResult) {
   // { Board, Game,  Piece, Creatures, CreatureConfig, Player, ShopConfig, GameConfig }: ClientComponents
   const autoBattle = async (
     gameId: PromiseOrValue<BigNumberish>,
     player: PromiseOrValue<string>
   ) => {
     const tx = await worldSend("tick", [gameId, player]);
-    await awaitStreamValue(txReduced$, (txHash) => txHash === tx.hash);
+    awaitStreamValue(txReduced$, (txHash) => txHash === tx.hash);
   };
 
   const createRoom = async (

packages/client/src/mud/setup.ts

@@ -7,7 +7,7 @@ export type SetupResult = Awaited<ReturnType<typeof setup>>;
 export async function setup() {
   const network = await setupNetwork();
   const components = createClientComponents(network);
-  const systemCalls = createSystemCalls(network, components);
+  const systemCalls = createSystemCalls(network);
   return {
     network,
     components,