style: decorate with new assets

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/index.css

@@ -70,9 +70,9 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background: url(/assets/bg.svg);
-  background-size: 240px;
-  background-repeat: repeat;
+  background: url(/assets/bg.png);
+  background-size: cover;
+  background-repeat: no-repeat;
   background-position: top right;
   background-color: #68829e;
   font-family: brandonGrotesque !important;

packages/client/src/ui/ChessMain.tsx

@@ -21,6 +21,8 @@ import { shallowEqual } from "@/lib/utils";
 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;
@@ -110,7 +112,7 @@ const Game = () => {
   const ref2 = useRef(null);
   const ref3 = useRef(null);
 
-  const [open, setOpen] = useState<boolean>(false);
+  // const [open, setOpen] = useState<boolean>(false);
 
   const steps: TourProps["steps"] = [
     {
@@ -135,16 +137,16 @@ const Game = () => {
 
   return (
     <div className=" text-white relative">
-      <Tour open={open} onClose={() => setOpen(false)} steps={steps} />
+      {/* <Tour open={open} onClose={() => setOpen(false)} steps={steps} />
 
-      <div className="fixed left-4 bottom-40">
+      <div className="fixed left-4 bottom-32">
         <Button type="primary" onClick={() => setOpen(true)}>
           How To Play
         </Button>
-      </div>
+      </div> */}
       <GameStatusBar customRef={ref1} customRef2={ref2} showModal={showModal} />
-      <div className="fixed left-2  top-36 align-text-bottom grid  text-white">
-        <Button className="my-4 text-white-wrap" onClick={autoBattleFn}>
+      <div className="fixed left-2  top-[43rem] align-text-bottom grid  text-white">
+        <Button className="my-2 text-white-wrap" onClick={autoBattleFn}>
           Manual Battle
         </Button>
         <Popconfirm
@@ -154,17 +156,17 @@ const Game = () => {
           okText="Yes"
           cancelText="No"
         >
-          <Button className="my-4 text-white-wrap">Quit</Button>
+          <Button className="my-2 text-white-wrap">Quit</Button>
         </Popconfirm>
       </div>
-      <ShopCom isModalOpen={isModalOpen} handleCancel={handleCancel} />
-      <div className="handle-area ">
-        <div>
-          <Chessboard setAcHeroFn={setAcHeroFn} />
-          <Inventory setAcHeroFn={setAcHeroFn} />
-        </div>
+      <ShopCom />
+      <div className="handle-area">
+        <Chessboard setAcHeroFn={setAcHeroFn} />
+        <Inventory setAcHeroFn={setAcHeroFn} />
       </div>
+      <Synergy />
       <PlayerList />
+      <PlayerTier />
 
       <HeroInfo hero={acHero as HeroBaseAttr} />
     </div>