Merge branch 'feat-mvp' of tiankonglan.github.com:Mississippi-Labs/mi…

…ssissippi into feat-mvp

packages/client/src/App.tsx

@@ -1,6 +1,5 @@
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './App.scss';
-import Home from './pages/home';
 import Game from './pages/game';
 
 export const App = () => {
@@ -10,8 +9,7 @@ export const App = () => {
       <BrowserRouter>
         <Routes>
           <Route path="/">
-            <Route index element={<Home />} />
-            <Route path="game" element={<Game />} />
+            <Route index element={<Game />} />
           </Route>
         </Routes>
       </BrowserRouter>

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

@@ -8,7 +8,7 @@
         grid-template-rows: 1fr 1fr 1fr;
     }
 
-    @for $i from 1 through 25 {
+    @for $i from 1 through 28 {
         .mi-wall-#{$i} {
             background: url("/src/assets/wall/wall_#{$i}.png") no-repeat center 100% / cover;
         }

packages/client/src/constants/index.ts

@@ -1,5 +1,5 @@
 export const CellType = {
   immovable: 101,
-  movable: 100,
+  blank: 100,
   delivery: 102,
 }

packages/client/src/index.tsx

@@ -26,23 +26,24 @@ const root = ReactDOM.createRoot(rootElement);
 
 
 // https://vitejs.dev/guide/env-and-mode.html
-// if (import.meta.env.DEV) {
-//   const { mount: mountDevTools } = await import("@latticexyz/dev-tools");
-//   console.log(network.world, 'world');
-//   const s = new Set();
-//   network.world.components.forEach((c, index) => {
-//     s.add(c.id);
-//   })
-//   console.log(s.size, 'set');
-//   mountDevTools({
-//     config: mudConfig,
-//     publicClient: network.publicClient,
-//     walletClient: network.walletClient,
-//     latestBlock$: network.latestBlock$,
-//     blockStorageOperations$: network.blockStorageOperations$,
-//     worldAddress: network.worldContract.address,
-//     worldAbi: network.worldContract.abi,
-//     write$: network.write$,
-//     recsWorld: network.world,
-//   });
-// }
+if (import.meta.env.DEV) {
+  const { mount: mountDevTools } = await import("@latticexyz/dev-tools");
+  const comp = [];
+  network.world.components.forEach((c) => {
+    if (comp.findIndex((item => item.id === c.id)) === -1) {
+      comp.push(c);
+    }
+  });
+  network.world.components = comp;
+  mountDevTools({
+    config: mudConfig,
+    publicClient: network.publicClient,
+    walletClient: network.walletClient,
+    latestBlock$: network.latestBlock$,
+    blockStorageOperations$: network.blockStorageOperations$,
+    worldAddress: network.worldContract.address,
+    worldAbi: network.worldContract.abi,
+    write$: network.write$,
+    recsWorld: network.world,
+  });
+}

packages/client/src/mock/data.ts

@@ -28,7 +28,7 @@ export const PlayersMockData: IPlayer[] = [
   {
     id: 3,
     username: 'Me',
-    x: 4,
+    x: 5,
     y: 4,
   },
   {

packages/client/src/mud/createSystemCalls.ts

@@ -9,7 +9,7 @@ export function createSystemCalls(
   { worldContract, waitForTransaction }: SetupNetworkResult,
   ClientComponents
 ) {
-  const { Counter, GameSystem, PlayerSystem } = ClientComponents;
+  const { Counter, Player } = ClientComponents;
 
   console.log(ClientComponents, 'ClientComponents')
   const increment = async () => {
@@ -19,19 +19,26 @@ export function createSystemCalls(
   };
 
   const move = async (steps) => {
+    console.log(worldContract)
     const tx = await worldContract.write.move([steps]);
     await waitForTransaction(tx);
-    return getComponentValue(GameSystem, singletonEntity);
+    // const result = getComponentValue(Player, singletonEntity)
+    const result = getComponentValue(Player, '0x35be872A3C94Bf581A9DA4c653CE734380b75B7D')
+    console.log(result)
+    return result;
+    // return getComponentValue(Player, singletonEntity);
   };
 
-  const getUserInfo = async () => {
-    const tx = await worldContract.write.move();
-    await waitForTransaction(tx);
-    return getComponentValue(GameSystem, singletonEntity);
+  const getPosition = async (address) => {
+    const tx = await worldContract.read.getPosition([address]);
+    const result = await waitForTransaction(tx);
+    console.log(result);
+    // return getComponentValue(GameSystem, singletonEntity);
   }
 
   return {
     increment,
-    move
+    move,
+    getPosition
   };
 }

packages/client/src/mud/getNetworkConfig.ts

@@ -6,10 +6,10 @@ const worlds = worldsJson as Partial<Record<string, { address: string; blockNumb
 
 export async function getNetworkConfig() {
   const params = new URLSearchParams(window.location.search);
-  // const chainId = Number(params.get("chainId") || params.get("chainid") || import.meta.env.VITE_CHAIN_ID || 31337);
+  const chainId = Number(params.get("chainId") || params.get("chainid") || import.meta.env.VITE_CHAIN_ID || 31337);
   // const chainId = 46508363;
-  const chainId = 421613;
-  console.log(supportedChains);
+  // const chainId = 421613;
+  // console.log(supportedChains);
   const chainIndex = supportedChains.findIndex((c) => c.id === chainId);
   const chain = supportedChains[chainIndex];
   if (!chain) {

packages/client/src/mud/setupNetwork.ts

@@ -71,7 +71,7 @@ export async function setupNetwork() {
   return {
     world,
     components,
-    playerEntity: encodeEntity({ address: "address" }, { address: burnerWalletClient.account.address }),
+    playerEntity: encodeEntity({ addr: "address" }, { addr: burnerWalletClient.account.address }),
     publicClient,
     walletClient: burnerWalletClient,
     latestBlock$,

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

@@ -11,6 +11,7 @@ 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 Fog from '@/components/Fog';
 
 const Game = () => {
@@ -25,7 +26,7 @@ const Game = () => {
 
   const {
     components,
-    systemCalls: { move },
+    systemCalls: { move, getPosition },
     network
   } = useMUD();
 
@@ -72,7 +73,6 @@ const Game = () => {
         clearInterval(interval);
       }
     }, 300);
-    console.log(merkelData, 'm')
     // move(merkelData);
   }
 
@@ -84,7 +84,7 @@ const Game = () => {
 
     const player = players.find((item) => item.id === CurIdMockData);
     setCurPlayer(player as IPlayer);
-
+    // getPosition('0x35be872A3C94Bf581A9DA4c653CE734380b75B7D');
   }, []);
 
   return (