feat: add tier btn

packages/client/src/components/PlayerTier.tsx

@@ -0,0 +1,36 @@
+import { useMUD } from "@/MUDContext";
+import { initEntity } from "@/constant";
+import { useComponentValue } from "@latticexyz/react";
+import { Tooltip } from "antd";
+
+export const PlayerTier = () => {
+  const {
+    network: { playerEntity },
+    components: { Player, GameConfig },
+    systemCalls: { buyExp },
+  } = useMUD();
+
+  const playerData = useComponentValue(Player, playerEntity);
+  const tier = playerData?.tier + 1;
+  const gameConfig = useComponentValue(GameConfig, initEntity);
+
+  console.log("gameConfig?.expUpgrade: ", gameConfig?.expUpgrade);
+  return (
+    <div className="fixed top-[42rem] left-[12rem]">
+      <Tooltip title="EXP +4 , COST 4">
+        <div
+          className=" bg-[url('/assets/up_level.png')] bg-contain bg-no-repeat w-28 h-14"
+          onClick={buyExp}
+        >
+          <div className="relative left-14 top-1">
+            {"Lv. "}
+            {tier}
+            <div className="-mt-1  left-0.5">
+              {playerData?.exp} / {gameConfig?.expUpgrade[tier]}
+            </div>
+          </div>
+        </div>
+      </Tooltip>
+    </div>
+  );
+};

packages/client/src/ui/ChessMain.tsx

@@ -22,6 +22,7 @@ import shopPic from "/assets/shop.jpg";
 import gameBarPic from "/assets/gameBar.jpg";
 import chessPic from "/assets/chess.jpg";
 import { Synergy } from "./Synergy";
+import { PlayerTier } from "@/components/PlayerTier";
 
 export interface boardInterface {
   creatureId?: any;
@@ -165,6 +166,7 @@ const Game = () => {
       </div>
       <Synergy />
       <PlayerList />
+      <PlayerTier />
 
       <HeroInfo hero={acHero as HeroBaseAttr} />
     </div>

packages/client/src/ui/Chessboard.css

@@ -25,7 +25,7 @@
 
 .handle-area {
   height: calc(100vh - 140px);
-  margin-top: 2%;
+  margin-top: 0.5%;
   display: flex;
   justify-content: center;
   align-items: flex-start;