feat: op render on preparing (#152)

* feat: op render on preparing

buy, merge, sell, place back, change cor

* fix: add import back

* feat: add op render check

packages/client/src/constant/index.ts

@@ -0,0 +1,4 @@
+import { Entity } from "@latticexyz/recs";
+
+export const initEntity: Entity =
+  "0x0000000000000000000000000000000000000000000000000000000000000000" as Entity;

packages/client/src/hooks/useChessboard.ts

@@ -8,6 +8,9 @@ import {
   shortenAddress,
   padAddress,
 } from "../lib/ulits";
+import { useSystemConfig } from "./useSystemConfig";
+import { useCreatureMap } from "./useCreatureMap";
+import { srcObj } from "./useHeroAttr";
 
 export interface boardInterface {
   attack?: number;
@@ -24,14 +27,6 @@ export interface boardInterface {
   owner?: boolean;
 }
 
-export interface srcObjType {
-  ava: string;
-  color: string;
-  mono: string;
-  void: string;
-  perUrl: string;
-}
-
 export interface HeroBaseAttr {
   cost: number;
   lv: number;
@@ -40,31 +35,10 @@ export interface HeroBaseAttr {
   image: string;
 }
 
-const srcObj = {
-  ava: "/avatar.gif",
-  color: "/colorful.png",
-  mono: "/monochrome.png",
-  void: "/void.png",
-  perUrl: "https://autochessia.4everland.store/creatures/",
-};
-
-const initEntity: Entity =
-  "0x0000000000000000000000000000000000000000000000000000000000000000" as Entity;
-
 const useChessboard = () => {
   const {
-    components: {
-      Board,
-      Player,
-      PlayerGlobal,
-      ShopConfig,
-      GameConfig,
-      Hero,
-      Piece,
-      Creature,
-      Game,
-    },
-    systemCalls: { autoBattle, placeToBoard, changeHeroCoordinate },
+    components: { Board, Player, PlayerGlobal, Hero, Piece, Game },
+    systemCalls: { placeToBoard, changeHeroCoordinate },
     network: { localAccount, playerEntity },
   } = useMUD();
 
@@ -73,43 +47,20 @@ const useChessboard = () => {
 
   const BoardList = useComponentValue(Board, playerEntity);
 
-  const _ShopConfig = useComponentValue(ShopConfig, initEntity);
-
-  const _GameConfig = useComponentValue(GameConfig, initEntity);
+  const { gameConfig, shopConfig } = useSystemConfig();
 
   const PieceInBattleList = useEntityQuery([Has(Piece)]).map((row) => ({
     ...getComponentValueStrict(Piece, row),
     key: row,
   }));
 
-  const _Creature = useEntityQuery([Has(Creature)]).map((row) => ({
-    ...getComponentValueStrict(Creature, row),
-    key: row,
-  }));
-
   const currentGameId = useEntityQuery([Has(Game)]).find(
     (row) => (_playerlayerGlobal?.gameId as unknown as Entity) == row
   );
 
   const currentGame = getComponentValueStrict(Game, currentGameId!);
 
-  const tierPrice = _ShopConfig?.tierPrice;
-
-  const creatureMap = useMemo(() => {
-    return new Map(
-      _Creature.map(
-        (c: {
-          key: any;
-          health?: any;
-          attack?: any;
-          range?: any;
-          defense?: any;
-          speed?: any;
-          movement?: any;
-        }) => [Number(c.key), c]
-      )
-    );
-  }, [_Creature]);
+  const tierPrice = shopConfig?.tierPrice;
 
   const getHeroImg = (HeroId: number) => {
     const id = HeroId & 0xff;
@@ -121,6 +72,8 @@ const useChessboard = () => {
     return tier;
   };
 
+  const creatureMap = useCreatureMap();
+
   const decodeHeroFn = (arr: any[]) => {
     const decodeArr = arr?.map((item: any) => decodeHero(item));
 
@@ -145,7 +98,7 @@ const useChessboard = () => {
 
   const BattlePieceList = useMemo(() => {
     if (PieceInBattleList.length > 0) {
-      let battlePieces: any[] = [];
+      const battlePieces: any[] = [];
 
       PieceInBattleList.forEach((piece) => {
         const isOwner = BoardList?.pieces.includes(piece.key);
@@ -170,15 +123,16 @@ const useChessboard = () => {
     return [];
   }, [BoardList, PieceInBattleList]);
 
-  const { heroAltar, inventory } = playerObj!;
+  const inventory = playerObj?.inventory;
 
+  // disable use memo for op render
   const heroList = useMemo(() => {
-    return (tierPrice && decodeHeroFn(heroAltar)) ?? [];
-  }, [tierPrice, heroAltar]);
+    return (tierPrice && decodeHeroFn(playerObj?.heroAltar || [])) ?? [];
+  }, [tierPrice, playerObj?.heroAltar, decodeHeroFn]);
 
   const inventoryList = useMemo(() => {
-    return decodeHeroFn(inventory);
-  }, [inventory, creatureMap]);
+    return decodeHeroFn(inventory || []);
+  }, [inventory, decodeHeroFn]);
 
   const HeroTable = useEntityQuery([Has(Hero)]).map((row) => ({
     ...getComponentValueStrict(Hero, row),
@@ -223,18 +177,15 @@ const useChessboard = () => {
     BattlePieceList,
     BoardList,
     currentBoardStatus: BoardList?.status,
-    srcObj,
-    heroList,
-    inventoryList,
     currentGame,
     currentRoundStartTime: currentGame?.startFrom,
     startFrom: currentGame?.startFrom,
     currentGameStatus: currentGame?.status,
     playerListData,
     localAccount,
     playerObj,
-    roundInterval: _GameConfig?.roundInterval,
-    expUpgrade: _GameConfig?.expUpgrade,
+    roundInterval: gameConfig?.roundInterval,
+    expUpgrade: gameConfig?.expUpgrade,
   };
 };
 

packages/client/src/hooks/useCreatureMap.ts

@@ -0,0 +1,26 @@
+import { useMUD } from "@/MUDContext";
+import { useEntityQuery } from "@latticexyz/react";
+import { Has, getComponentValueStrict } from "@latticexyz/recs";
+import { useEffect, useMemo } from "react";
+
+export function useCreatureMap() {
+  const {
+    components: { Creature },
+  } = useMUD();
+  const _Creature = useEntityQuery([Has(Creature)], {
+    updateOnValueChange: true,
+  });
+
+  const creatureMap = useMemo(() => {
+    return new Map(
+      _Creature
+        .map((row) => ({
+          ...getComponentValueStrict(Creature, row),
+          key: row,
+        }))
+        .map((c) => [Number(c.key), c])
+    );
+  }, [_Creature, Creature]);
+
+  return creatureMap;
+}

packages/client/src/hooks/useHeroAttr.ts

@@ -0,0 +1,56 @@
+import { decodeHero } from "@/lib/ulits";
+import { useSystemConfig } from "./useSystemConfig";
+import { HeroBaseAttr } from "./useChessboard";
+import { useCreatureMap } from "./useCreatureMap";
+import { useEffect, useState } from "react";
+
+export interface srcObjType {
+  ava: string;
+  color: string;
+  mono: string;
+  void: string;
+  perUrl: string;
+}
+
+export const srcObj = {
+  ava: "/avatar.gif",
+  color: "/colorful.png",
+  mono: "/monochrome.png",
+  void: "/void.png",
+  perUrl: "https://autochessia.4everland.store/creatures/",
+};
+
+export function useHeroesAttr(arr: number[]): HeroBaseAttr[] {
+  const creatureMap = useCreatureMap();
+
+  const { shopConfig } = useSystemConfig();
+
+  const [attrs, setAttrs] = useState<HeroBaseAttr[]>([]);
+
+  useEffect(() => {
+    setAttrs(
+      arr
+        ?.map((item: number) => decodeHero(item))
+        ?.map((item: number[]) => {
+          const creature = creatureMap.get(item?.[2]);
+
+          if (creature) {
+            return {
+              cost: shopConfig?.tierPrice?.[item?.[0] - 1],
+              lv: item?.[0],
+              url: item?.[0] > 0 ? srcObj.perUrl + item?.[1] + srcObj.ava : "",
+              image:
+                item?.[0] > 0 ? srcObj.perUrl + item?.[1] + srcObj.color : "",
+              creature: item?.[0],
+              oriHero: item?.[2],
+              ...creature,
+              maxHealth: creature?.health,
+            };
+          }
+          return {};
+        }) as HeroBaseAttr[]
+    );
+  }, [arr, creatureMap, shopConfig?.tierPrice]);
+
+  return attrs;
+}

packages/client/src/hooks/useSystemConfig.ts

@@ -0,0 +1,14 @@
+import { useMUD } from "@/MUDContext";
+import { initEntity } from "@/constant";
+import { useComponentValue } from "@latticexyz/react";
+
+export function useSystemConfig() {
+  const {
+    components: { ShopConfig, GameConfig },
+  } = useMUD();
+
+  const shopConfig = useComponentValue(ShopConfig, initEntity);
+  const gameConfig = useComponentValue(GameConfig, initEntity);
+
+  return { shopConfig, gameConfig };
+}

packages/client/src/lib/ulits.ts

@@ -1,9 +1,13 @@
-function decodeHero(hero: any) {
+function decodeHero(hero: number) {
   const tier = (hero >> 8)+1; 
   const internalIndex = hero & 0xFF;
   return [tier, internalIndex, hero];
 }
 
+function encodeHero(tier: number, internalIndex: number): number{
+  return ((tier-1) << 8) + internalIndex;
+}
+
 function padAddress(address: string) {
   address = address.toLowerCase();
   if(!address.startsWith('0x')) {
@@ -77,8 +81,12 @@ function generateAvatar(address: string): string {
   return canvas.toDataURL();
 }
 
+
+
+
 export {
   decodeHero,
+  encodeHero,
   convertToPos,
   convertToIndex,
   padAddress,

packages/client/src/mud/createClientComponents.ts

@@ -1,10 +1,14 @@
 import { SetupNetworkResult } from "./setupNetwork";
+import { overridableComponent } from "@latticexyz/recs";
 
 export type ClientComponents = ReturnType<typeof createClientComponents>;
 
 export function createClientComponents({ components }: SetupNetworkResult) {
   return {
     ...components,
+    Board: overridableComponent(components.Board),
+    Player: overridableComponent(components.Player),
+    Hero: overridableComponent(components.Hero),
     // add your client components or overrides here
   };
 }