merge

.gitignore

@@ -1,3 +1,4 @@
 node_modules
 .env
 packages/contracts/src/codegen/
+pnpm-lock.yaml

packages/client/src/components/Battle/index.tsx

@@ -0,0 +1,135 @@
+import duck from "@/assets/img/DarkDuck.svg";
+import info from "@/assets/img/battle/info.png";
+import attackButton from "@/assets/img/battle/attack-button.png";
+import runButton from "@/assets/img/battle/run-button.png";
+import rock from "@/assets/img/battle/rock.png";
+import scissors from "@/assets/img/battle/scissors.png";
+import paper from "@/assets/img/battle/paper.png";
+import attack from "@/assets/img/battle/attack.svg";
+import tactic from "@/assets/img/battle/tactic.svg";
+import "./styles.scss";
+
+export default function Battle() {
+  return (
+    <div className="mi-battle-wrap">
+      <div className="mi-battle">
+        <div className="mi-battle-character">
+          <div className="mi-battle-info-icon">
+            <img
+              src={info}
+              style={{
+                width: "64px",
+                height: "64px",
+                marginTop: "12px",
+                marginLeft: "12px",
+              }}
+              alt=""
+            />
+          </div>
+          <div className="mi-battle-character-card">
+            <div className="mi-battle-character-card-hp">
+              <div
+                className="hp"
+                style={{
+                  position: "absolute",
+                  borderRadius: "4px",
+                  borderTopLeftRadius: 0,
+                  borderBottomLeftRadius: 0,
+                  background: "#FF6161",
+                  width: "60%",
+                  height: "22px",
+                }}
+              ></div>
+            </div>
+            <img
+              src={duck}
+              style={{
+                transform: "scaleX(-1)",
+              }}
+              alt=""
+            />
+          </div>
+          <div className="mi-battle-character-card">
+            <div className="mi-battle-character-card-hp">
+              <div
+                className="hp"
+                style={{
+                  position: "absolute",
+                  borderRadius: "4px",
+                  borderTopLeftRadius: 0,
+                  borderBottomLeftRadius: 0,
+                  background: "#FF6161",
+                  width: "60%",
+                  height: "22px",
+                }}
+              ></div>
+            </div>
+            <img src={duck} alt="" />
+          </div>
+          <div className="mi-battle-character-info">
+            <div className="character-info self">
+              <div>HP: 30/50</div>
+              <div>ATK: 20</div>
+            </div>
+            <div className="character-info opponent">
+              <div>HP: 30/50</div>
+              <div>ATK: 20</div>
+            </div>
+          </div>
+        </div>
+        <div className="mi-battle-action">
+          <div className="action">
+            <div className="action-title">Action</div>
+            <div style={{ display: "flex" }}>
+              <img src={attackButton} alt="" />
+              <img src={runButton} alt="" />
+            </div>
+          </div>
+          <div className="action">
+            <div
+              style={{
+                color: "#fff",
+                fontSize: "24px",
+              }}
+            >
+              Choose your decision
+            </div>
+            <div
+              style={{
+                marginTop: "12px",
+                display: "flex",
+                justifyContent: "center",
+                columnGap: "12px",
+              }}
+            >
+              <img
+                src={attack}
+                style={{
+                  width: "48px",
+                  height: "48px",
+                }}
+                alt=""
+              />
+              <img
+                src={tactic}
+                style={{
+                  width: "48px",
+                  height: "48px",
+                }}
+                alt=""
+              />
+            </div>
+          </div>
+          <div className="action">
+            <div className="action-title">Tactic</div>
+            <div style={{ display: "flex" }}>
+              <img src={rock} alt="" />
+              <img src={scissors} alt="" />
+              <img src={paper} alt="" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

packages/client/src/components/Battle/styles.scss

@@ -0,0 +1,83 @@
+.mi-battle-wrap {
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 999;
+}
+
+.mi-battle {
+  background: rgba(65, 47, 80, 0.95);
+  box-shadow: 5px 4px 4px -1px rgba(0, 0, 0, 0.25);
+  border-radius: 8px;
+  padding: 24px 20px;
+
+  .mi-battle-character {
+    background: #fff;
+    display: flex;
+    column-gap: 180px;
+    position: relative;
+
+    .mi-battle-info-icon {
+      position: absolute;
+    }
+
+    .mi-battle-character-card {
+      display: flex;
+      flex-direction: column;
+      position: relative;
+      align-items: center;
+
+      img {
+        margin-top: 90px;
+        width: 280px;
+      }
+
+      .mi-battle-character-card-hp {
+        position: absolute;
+        width: 160px;
+        height: 30px;
+        border-radius: 6px;
+        border: 4px solid #2d2d2d;
+        top: 120px;
+      }
+    }
+
+    .mi-battle-character-info {
+      display: flex;
+      justify-content: space-between;
+      position: absolute;
+      bottom: 0;
+      width: 100%;
+      padding: 0 12px;
+      padding-bottom: 12px;
+
+      .character-info {
+        color: #000;
+      }
+    }
+  }
+
+  .mi-battle-action {
+    margin-top: 12px;
+    display: flex;
+    justify-content: space-between;
+
+    .action {
+      img {
+        width: 64px;
+        height: 64px;
+      }
+
+      .action-title {
+        background: #fff;
+        font-size: 26px;
+        text-align: center;
+        margin-bottom: 12px;
+      }
+    }
+  }
+}

packages/client/src/pages/game/index.tsx

@@ -1,23 +1,24 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from "react";
 import { useComponentValue } from "@latticexyz/react";
-import { LimitSpace, MapConfig } from '@/config';
-import { loadMapData } from '@/utils';
-import Map from '@/components/Map';
-import UserAvatar from '@/components/UserAvatar';
-import { useLocation } from 'react-router-dom';
-import './styles.scss';
-import Rank from '@/components/Rank';
-import { CurIdMockData, PlayersMockData, RankMockData } from '@/mock/data';
-import { IPlayer } from '@/components/Player';
-import { uploadUserMove } from '@/service/user';
-import { useMUD } from '@/mud/MUDContext';
+import { LimitSpace, MapConfig } from "@/config";
+import { loadMapData } from "@/utils";
+import Map from "@/components/Map";
+import UserAvatar from "@/components/UserAvatar";
+import { useLocation } from "react-router-dom";
+import "./styles.scss";
+import Rank from "@/components/Rank";
+import { CurIdMockData, PlayersMockData, RankMockData } from "@/mock/data";
+import { IPlayer } from "@/components/Player";
+import { uploadUserMove } from "@/service/user";
+import { useMUD } from "@/mud/MUDContext";
 import { getComponentValue } from "@latticexyz/recs";
+import Battle from "@/components/Battle";
 
 const Game = () => {
   const [renderMapData, setRenderMapData] = useState([]);
   const [vertexCoordinate, setVertexCoordinate] = useState({
     x: 0,
-    y: 0
+    y: 0,
   });
 
   const [curPlayer, setCurPlayer] = useState<null | IPlayer>(null);
@@ -26,16 +27,20 @@ const Game = () => {
   const {
     components,
     systemCalls: { move, getPosition },
-    network
+    network,
   } = useMUD();
 
   // console.log(network.playerEntity, components);
   const value = useComponentValue(components.Player, network.playerEntity);
-  console.log(value, 'value')
+  console.log(value, "value");
 
   const mapDataRef = useRef([]);
   const location = useLocation();
-  const { username = '', avatar = 'snake', roomId = '000000' } = location.state ?? {};
+  const {
+    username = "",
+    avatar = "snake",
+    roomId = "000000",
+  } = location.state ?? {};
 
   // const onKeyDown = (e) => {
   //   const mapData = mapDataRef.current;
@@ -60,10 +65,12 @@ const Game = () => {
   //     ...vertexCoordinate
   //   });
   // };
-  
+
   const movePlayer = (paths, merkelData) => {
     let pathIndex = 0;
-    const curPlayerIndex = players.findIndex(item => item.id === curPlayer!.id);
+    const curPlayerIndex = players.findIndex(
+      (item) => item.id === curPlayer!.id
+    );
     const interval = setInterval(() => {
       triggerVertexUpdate(paths[pathIndex], players[curPlayerIndex]);
       Object.assign(players[curPlayerIndex], paths[pathIndex]);
@@ -74,15 +81,16 @@ const Game = () => {
       }
     }, 300);
     // move(merkelData);
-  }
+  };
 
   const triggerVertexUpdate = (cur, before) => {
     const xDegree = cur.x - before.x;
     const yDegree = cur.y - before.y;
     const mapData = mapDataRef.current;
     if (xDegree === 1) {
       const limitExceeded = cur.x - vertexCoordinate.x > LimitSpace.x;
-      const lessBoundary = vertexCoordinate.x + MapConfig.visualWidth < mapData[0].length - 1;
+      const lessBoundary =
+        vertexCoordinate.x + MapConfig.visualWidth < mapData[0].length - 1;
       if (limitExceeded && lessBoundary) {
         vertexCoordinate.x++;
       }
@@ -94,7 +102,8 @@ const Game = () => {
       }
     } else if (yDegree === 1) {
       const limitExceeded = cur.y - vertexCoordinate.y > LimitSpace.y;
-      const lessBoundary = vertexCoordinate.y + MapConfig.visualHeight < mapData.length - 1;
+      const lessBoundary =
+        vertexCoordinate.y + MapConfig.visualHeight < mapData.length - 1;
       if (limitExceeded && lessBoundary) {
         vertexCoordinate.y++;
       }
@@ -107,9 +116,9 @@ const Game = () => {
     }
 
     setVertexCoordinate({
-      ...vertexCoordinate
+      ...vertexCoordinate,
     });
-  }
+  };
 
   useEffect(() => {
     loadMapData().then((csv) => {
@@ -122,7 +131,6 @@ const Game = () => {
     // getPosition('0x35be872A3C94Bf581A9DA4c653CE734380b75B7D');
   }, []);
 
-
   return (
     <div className="mi-game" tabIndex={0}>
       <div className="mi-game-user-avatar">
@@ -137,10 +145,7 @@ const Game = () => {
         />
       </div>
 
-      <Rank
-        data={RankMockData}
-        curId={CurIdMockData}
-      />
+      <Rank data={RankMockData} curId={CurIdMockData} />
       {/*<Fog/>*/}
       <Map
         width={MapConfig.visualWidth}
@@ -151,13 +156,14 @@ const Game = () => {
         vertexCoordinate={vertexCoordinate}
         onPlayerMove={movePlayer}
       />
+      <Battle />
       <div className="opt-wrapper">
         <button className="mi-btn">Rank</button>
         <button className="mi-btn">Help</button>
         <button className="mi-btn">Info</button>
       </div>
     </div>
-  )
+  );
 };
 
-export default Game;
+export default Game;

packages/contracts/mud.config.ts

@@ -33,7 +33,8 @@ export default mudConfig({
     PlayerState: ["Idle", "Preparing", "Exploring", "Attacking"],
     ActionType: ["Attack", "Escape", "Props"],
     Buff: ["None", "Fire", "Water", "Wind"],
-    RandomState:["Inited","Pending","Confirmed"]
+    RandomState:["Inited","Pending","Confirmed"],
+    BattleEndType: ["NotEnd", "NormalEnd", "AllEscape", "RoundEnd"],
   },
   tables: {
     Season: {

packages/contracts/script/GlobalConfigInit.sol

@@ -8,7 +8,7 @@ import { GLOBAL_CONFIG_KEY } from "../src/Constants.sol";
 
 library GlobalConfigInit {
     function initGlobalConfig(IWorld _world) internal {
-        address userContract = 0x09aDeA780C664D100374fcdE48dF82290270f4D2;
+        address userContract = 0x0d9B17c2A22539101797db13EAE7d38A8f8A511F;
         GlobalConfig.setUserContract(
             _world,
             GLOBAL_CONFIG_KEY, //key