Merge branch 'develop' of github.com:HelheimLabs/autochessia into pve

packages/client/src/constant/index.ts

@@ -1,4 +1,86 @@
+import { HeroClass, HeroRace } from "@/hooks/useHeroAttr";
 import { Entity } from "@latticexyz/recs";
 
 export const initEntity: Entity =
   "0x0000000000000000000000000000000000000000000000000000000000000000" as Entity;
+
+export const RaceSynergy: Record<
+  HeroRace,
+  {
+    unlockWhen: number[];
+    unlockValue: { [x: number]: number };
+    description: (x: number) => string;
+  }
+> = {
+  [HeroRace.UNKNOWN]: {
+    unlockWhen: [],
+    unlockValue: {},
+    description: (x: number) => "",
+  },
+  [HeroRace.ORC]: {
+    unlockWhen: [2, 4],
+    unlockValue: { 0: 0, 1: 0, 2: 100, 3: 100, 4: 300 },
+    description: (x: number) => `increase HP by ${x}`,
+  },
+  [HeroRace.TROLL]: {
+    unlockWhen: [2],
+    unlockValue: [10],
+    description: (x: number) => `increase the rate of ${x}% to attack twice`,
+  },
+  [HeroRace.PANDAREN]: {
+    unlockWhen: [2, 4],
+    unlockValue: { 0: 0, 1: 0, 2: 20, 3: 20, 4: 30 },
+    description: (x: number) => `increase the rate of evasion by ${x}%`,
+  },
+  [HeroRace.HUMAN]: {
+    unlockWhen: [2, 4],
+    unlockValue: { 0: 0, 1: 0, 2: 15, 3: 15, 4: 30 },
+    description: (x: number) => `all decrease ${x}% damage if it's not alone`,
+  },
+  [HeroRace.GOD]: {
+    unlockWhen: [2],
+    unlockValue: { 0: 0, 1: 0, 2: 20 },
+    description: (x: number) => `increase all attack by ${x}%`,
+  },
+};
+
+export const ClassSynergy: Record<
+  HeroClass,
+  {
+    unlockWhen: number[];
+    unlockValue: { [x: number]: number };
+    description: (x: number) => string;
+  }
+> = {
+  [HeroClass.UNKNOWN]: {
+    unlockWhen: [],
+    unlockValue: {},
+    description: (x: number) => "",
+  },
+  [HeroClass.KNIGHT]: {
+    unlockWhen: [2],
+    unlockValue: { 0: 0, 1: 0, 2: 10, 3: 10 },
+    description: (x: number) => `all have a rate of ${x}% to immune attack`,
+  },
+  [HeroClass.WARRIOR]: {
+    unlockWhen: [2, 4],
+    unlockValue: { 0: 0, 1: 0, 2: 5, 3: 5, 4: 10 },
+    description: (x: number) => `increase all piece defense by ${x}`,
+  },
+  [HeroClass.ASSASSIN]: {
+    unlockWhen: [2, 4],
+    unlockValue: { 0: 0, 1: 0, 2: 10, 3: 10, 4: 20 },
+    description: (x: number) => `increase all rate of critical hit by ${x}%`,
+  },
+  [HeroClass.MAGE]: {
+    unlockWhen: [2, 4],
+    unlockValue: { 0: 0, 1: 0, 2: 20, 3: 20, 4: 40 },
+    description: (x: number) => `decrease enemy defense by ${x}%`,
+  },
+  [HeroClass.WARLOCK]: {
+    unlockWhen: [2],
+    unlockValue: { 0: 0, 1: 0, 2: 10, 3: 10 },
+    description: (x: number) =>
+      `all have a rate ${x}% to dizz enemy for a turn on attack`,
+  },
+};

packages/client/src/hooks/useChessboard.ts

@@ -5,7 +5,6 @@ import {
   getComponentValue,
   getComponentValueStrict,
   Has,
-  Not,
 } from "@latticexyz/recs";
 import { useMUD } from "../MUDContext";
 import {
@@ -16,8 +15,9 @@ import {
   decodeHero,
 } from "../lib/utils";
 import { useSystemConfig } from "./useSystemConfig";
-import { srcObj } from "./useHeroAttr";
+import { HeroClass, HeroRace, srcObj } from "./useHeroAttr";
 import { encodeEntity } from "@latticexyz/store-sync/recs";
+import { numberToHex } from "viem";
 
 export interface boardInterface {
   attack?: number;
@@ -36,6 +36,8 @@ export interface boardInterface {
 
 export interface HeroBaseAttr {
   [x: string]: number | string;
+  race: HeroRace;
+  class: HeroClass;
   attack: number;
   cost: number;
   creature: number;
@@ -68,15 +70,15 @@ const useChessboard = () => {
   const { gameConfig, shopConfig } = useSystemConfig();
 
   const PieceInBattleList = useEntityQuery([Has(Piece)]).map((row) => ({
-    ...getComponentValueStrict(Piece, row),
+    ...getComponentValue(Piece, row),
     key: row,
   }));
 
   const currentGameId = useEntityQuery([Has(Game)]).find(
     (row) => (_playerlayerGlobal?.gameId as unknown as Entity) == row
   );
 
-  const currentGame = getComponentValueStrict(Game, currentGameId!);
+  const currentGame = getComponentValue(Game, currentGameId!);
 
   const getHeroImg = (heroId: number) => {
     const { heroIdString } = decodeHero(heroId);
@@ -129,7 +131,10 @@ const useChessboard = () => {
 
   const PiecesList = playerObj?.heroes.map((row, _index: any) => {
     try {
-      const hero = getComponentValueStrict(Hero, row as Entity);
+      const hero = getComponentValueStrict(
+        Hero,
+        encodeEntity({ id: "bytes32" }, { id: numberToHex(row, { size: 32 }) })
+      );
       const creature = getComponentValue(
         Creature,
         encodeCreatureEntity(hero.creatureId)
@@ -150,7 +155,7 @@ const useChessboard = () => {
   });
 
   const playerListData = currentGame?.players?.map((_player: string) => {
-    const item = getComponentValueStrict(Player, padAddress(_player) as Entity);
+    const item = getComponentValue(Player, padAddress(_player) as Entity);
     return {
       ...item,
       addr: _player,

packages/client/src/hooks/useHeroAttr.ts

@@ -14,6 +14,24 @@ export interface srcObjType {
   perUrl: string;
 }
 
+export enum HeroRace {
+  UNKNOWN = 0,
+  TROLL = 1,
+  PANDAREN = 2,
+  ORC = 3,
+  HUMAN = 4,
+  GOD = 5,
+}
+
+export enum HeroClass {
+  UNKNOWN = 0,
+  KNIGHT = 1,
+  WARLOCK = 2,
+  ASSASSIN = 3,
+  WARRIOR = 4,
+  MAGE = 5,
+}
+
 export const srcObj = {
   perUrl: "https://autochessia.4everland.store/autochess-v0.0.2/hero/",
 };

packages/client/src/lib/utils.ts

@@ -23,6 +23,9 @@ export function encodeHeroIdString(rarity: bigint, internalIndex: bigint): Hex {
   return numberToHex((rarity << 8n) + internalIndex,{size: 2})
 }
 
+export function encodeHeroEntity(heroId: bigint): Entity {
+  return encodeEntity({id: "bytes32"},{id: numberToHex(heroId,{size:32})})
+}
 
 export function encodeCreatureEntity(creatureId: bigint | number): Entity {
   if (typeof creatureId === "number") {
@@ -45,12 +48,15 @@ export function numberArrayToBigIntArray(array: (number | bigint)[] | undefined)
   return array as bigint[];
 }
 
-function decodeHero(creatureId: bigint | number) {
+function decodeHero(creatureId: bigint | number | undefined) {
+  if (!creatureId) {
+    creatureId = 0n
+  }
   if (typeof creatureId === "number") {
     creatureId = BigInt(creatureId)
   }
 
-  const tier = ((creatureId >> 16n)&0xFFn)+1n; 
+  const tier = ((creatureId >> 16n)&0xFFn) + 1n; 
   const rarity = (creatureId>> 8n) & 0xFFn;
   const internalIndex = creatureId & 0xFFn;
   const heroId = encodeHeroId(rarity,internalIndex)

packages/client/src/opRender/buyHero.ts

@@ -6,7 +6,7 @@ import {
 import { ClientComponents } from "../mud/createClientComponents";
 import { SetupNetworkResult } from "../mud/setupNetwork";
 import { uuid } from "@latticexyz/utils";
-import { decodeHero, encodeHero } from "@/lib/utils";
+import { decodeHero, encodeHero, encodeHeroEntity } from "@/lib/utils";
 import { popArrayByIndexes } from "./utils";
 
 /// @note should run override at last step
@@ -64,7 +64,7 @@ export function opRunBuyHero(
     const toMergedOnInventory: number[] = [];
     // search board
     playerData.heroes.forEach((h: string, idx: number) => {
-      const d = getComponentValueStrict(Hero, h as Entity);
+      const d = getComponentValueStrict(Hero, encodeHeroEntity(BigInt(h)));
       const { tier: t, creatureId: c } = decodeHero(BigInt(d.creatureId));
       if (creatureId === c && tier === t) {
         toMergedOnBoard.push(idx);

packages/client/src/opRender/placeBackInventory.ts

@@ -1,8 +1,9 @@
 import { ClientComponents } from "@/mud/createClientComponents";
 import { SetupNetworkResult } from "@/mud/setupNetwork";
-import { Entity, getComponentValueStrict } from "@latticexyz/recs";
+import { getComponentValueStrict } from "@latticexyz/recs";
 import { addElementToArray, popArrayByIndex } from "./utils";
 import { uuid } from "@latticexyz/utils";
+import { encodeHeroEntity } from "@/lib/utils";
 
 export function opRunPlaceBackInventory(
   { playerEntity }: SetupNetworkResult,
@@ -13,7 +14,7 @@ export function opRunPlaceBackInventory(
   const playerData = getComponentValueStrict(Player, playerEntity);
   const heroData = getComponentValueStrict(
     Hero,
-    playerData.heroes[herosIndex] as Entity
+    encodeHeroEntity(BigInt(playerData.heroes[herosIndex]))
   ).creatureId;
 
   // remove hero

packages/client/src/opRender/placeToBoard.ts

@@ -1,11 +1,12 @@
 import { ClientComponents } from "@/mud/createClientComponents";
 import { SetupNetworkResult } from "@/mud/setupNetwork";
-import { Entity, getComponentValueStrict } from "@latticexyz/recs";
+import { getComponentValueStrict } from "@latticexyz/recs";
 import { encodeXY } from "./changeHeroCoordinate";
 import { Hex, hexToNumber, numberToHex } from "viem";
 import { uuid } from "@latticexyz/utils";
 import { encodeEntity } from "@latticexyz/store-sync/recs";
 import { pushToArray, removeElementByIndex } from "./utils";
+import { encodeHeroEntity } from "@/lib/utils";
 
 export function opRunPlaceToBoard(
   { playerEntity }: SetupNetworkResult,
@@ -19,7 +20,10 @@ export function opRunPlaceToBoard(
   if (
     playerData.heroes
       .map((h) => {
-        const heroValue = getComponentValueStrict(Hero, h as Entity);
+        const heroValue = getComponentValueStrict(
+          Hero,
+          encodeHeroEntity(BigInt(h))
+        );
         return encodeXY(heroValue.x, heroValue.y);
       })
       .indexOf(encodeXY(x, y)) !== -1

packages/client/src/ui/ChessMain.tsx

@@ -15,6 +15,7 @@ import { Button, Popconfirm } from "antd";
 import { Inventory } from "./Inventory";
 import HeroInfo from "./HeroInfo";
 import { shallowEqual } from "@/lib/utils";
+import { Synergy } from "./Synergy";
 
 export interface boardInterface {
   creatureId?: any;
@@ -121,6 +122,7 @@ const Game = () => {
       <div className="handle-area">
         <div>
           <Chessboard setAcHeroFn={setAcHeroFn} />
+          <Synergy />
           <Inventory setAcHeroFn={setAcHeroFn} />
         </div>
       </div>

packages/client/src/ui/HeroInfo.tsx

@@ -1,6 +1,7 @@
 import { HeroBaseAttr } from "@/hooks/useChessboard";
 import React from "react";
 import { BG_COLOR } from "./Shop";
+import { getClassImage, getRaceImage } from "./Synergy";
 
 interface HeroInfoProps {
   hero: HeroBaseAttr;
@@ -48,7 +49,7 @@ const HeroInfo: React.FC<HeroInfoProps> = ({ hero }) => {
 
       <div className="flex items-center mt-2 justify-between">
         <span className="font-bold">Cost:</span>
-        <span className="ml-2">{Number(cost || 0) + 1}</span>
+        <span className="ml-2">{Number(lv) || Number(tier)}</span>
       </div>
 
       <div className="flex items-center mt-2 justify-between">
@@ -61,6 +62,20 @@ const HeroInfo: React.FC<HeroInfoProps> = ({ hero }) => {
         <span className="ml-2">{speed}</span>
       </div>
 
+      <div>
+        {/* show class and race */}
+        <div className="flex felx-row">
+          <img
+            className="w-[30px] h-[30px] mx-1"
+            src={getRaceImage(hero.race as number)}
+          ></img>
+          <img
+            className="w-[30px] h-[30px] mx-1"
+            src={getClassImage(hero.class as number)}
+          ></img>
+        </div>
+      </div>
+
       <div className="flex justify-center">
         <img
           src={url || image}

packages/client/src/ui/Inventory.tsx

@@ -3,12 +3,12 @@ import { srcObj, useHeroesAttr } from "@/hooks/useHeroAttr";
 import { useComponentValue } from "@latticexyz/react";
 import PieceImg from "./Piece";
 import { numberArrayToBigIntArray } from "@/lib/utils";
+import { HeroBaseAttr } from "@/hooks/useChessboard";
 
 // eslint-disable-next-line react/prop-types
 export function Inventory({ setAcHeroFn }) {
   const {
     components: { Player },
-    systemCalls: { placeBackInventory, sellHero },
     network: { playerEntity },
   } = useMUD();
 
@@ -22,24 +22,16 @@ export function Inventory({ setAcHeroFn }) {
     <div className="bench-area bg-stone-500  border-cyan-700   text-center  w-[560px]  mx-auto">
       <div className="h-[50px]" />
       <div className="bench-area-hero flex  justify-center">
-        {heroAttrs?.map(
-          (
-            hero: { url: string; creature: number; image: string },
-            index: number
-          ) => (
-            <div key={index} onClick={() => setAcHeroFn(hero)}>
-              <PieceImg
-                placeBackInventory={placeBackInventory}
-                sellHero={sellHero}
-                srcObj={srcObj}
-                index={index}
-                hero={hero}
-                src={hero.image}
-                alt={hero.url}
-              />
-            </div>
-          )
-        )}
+        {heroAttrs?.map((hero: HeroBaseAttr, index: number) => (
+          <div key={index} onClick={() => setAcHeroFn(hero)}>
+            <PieceImg
+              index={index}
+              hero={hero}
+              src={hero.image}
+              alt={hero.url}
+            />
+          </div>
+        ))}
       </div>
     </div>
   );