Merge remote-tracking branch 'origin/dev-map' into feat-mvp

# Conflicts:
#	pnpm-lock.yaml

packages/client/package.json

@@ -14,24 +14,33 @@
     "@ethersproject/providers": "^5.7.2",
     "@latticexyz/common": "2.0.0-next.4",
     "@latticexyz/dev-tools": "2.0.0-next.4",
+    "@latticexyz/react": "2.0.0-alpha.1.177",
     "@latticexyz/recs": "2.0.0-next.4",
     "@latticexyz/schema-type": "2.0.0-next.4",
     "@latticexyz/services": "2.0.0-next.4",
     "@latticexyz/store-sync": "2.0.0-next.4",
     "@latticexyz/utils": "2.0.0-next.4",
     "@latticexyz/world": "2.0.0-next.4",
-    "@latticexyz/react": "2.0.0-alpha.1.177",
+    "@openzeppelin/contracts": "^4.9.3",
+    "@types/node": "^18.15.11",
+    "antd": "^5.9.2",
+    "buffer": "^6.0.3",
     "contracts": "workspace:*",
     "ethers": "^5.7.2",
-    "rxjs": "7.5.5",
+    "keccak256": "^1.0.6",
+    "merkletreejs": "^0.3.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.16.0",
+    "rxjs": "7.5.5",
     "sass": "^1.64.1",
     "viem": "1.6.0"
   },
   "devDependencies": {
+    "@nomicfoundation/hardhat-toolbox": "^3.0.0",
     "@types/react": "^18.0.11",
     "@types/react-dom": "^18.0.11",
+    "hardhat": "^2.17.4",
     "vite": "^4.2.1",
     "wait-port": "^1.0.4"
   }

packages/client/src/App.tsx

@@ -1,60 +1,20 @@
-import { loadMapData } from './utils';
-import { useEffect, useState, useRef } from 'react';
-import Map from './components/Map';
-import { MapConfig } from './config';
+import { BrowserRouter, Route, Routes } from 'react-router-dom';
 import './App.scss';
+import Home from './pages/home';
+import Game from './pages/game';
 
 export const App = () => {
 
-  const [renderMapData, setRenderMapData] = useState([]);
-  const [vertexCoordinate, setVertexCoordinate] = useState({
-    x: 0,
-    y: 0
-  });
-
-  const mapDataRef = useRef([]);
-
-  const onKeyDown = (e) => {
-    const mapData = mapDataRef.current;
-    if (mapData.length === 0 || e.keyCode < 37 || e.keyCode > 40) {
-      return;
-    }
-    switch (e.keyCode) {
-      case 37:
-        vertexCoordinate.x = Math.max(0, vertexCoordinate.x - 1);
-        break;
-      case 38:
-        vertexCoordinate.y = Math.max(0, vertexCoordinate.y - 1);
-        break;
-      case 39:
-        vertexCoordinate.x = Math.min(mapData[0].length - 1 - MapConfig.visualWidth, vertexCoordinate.x + 1);
-        break;
-      case 40:
-        vertexCoordinate.y = Math.min(mapData.length - 1 - MapConfig.visualHeight, vertexCoordinate.y + 1);
-        break;
-    }
-    setVertexCoordinate({
-      ...vertexCoordinate
-    });
-  }
-
-  useEffect(() => {
-    loadMapData().then((csv) => {
-      setRenderMapData(csv);
-      mapDataRef.current = csv;
-    });
-
-  }, []);
-
   return (
-    <div className="mi-app" onKeyDown={onKeyDown} tabIndex={0}>
-      <Map
-        width={MapConfig.visualWidth}
-        height={MapConfig.visualHeight}
-        players={[]}
-        data={renderMapData}
-        vertexCoordinate={vertexCoordinate}
-      />
+    <div className="mi-app">
+      <BrowserRouter>
+        <Routes>
+          <Route path="/">
+            <Route index element={<Home />} />
+            <Route path="game" element={<Game />} />
+          </Route>
+        </Routes>
+      </BrowserRouter>
     </div>
   )
 }

packages/client/src/common.scss

@@ -1,8 +1,27 @@
+$avatars: 'elephant', 'hippo', 'panda', 'penguin', 'rabbit', 'giraffe', 'monkey', 'parrot', 'pig', 'snake';
+$avatarsPath: './assets/avatar/';
+
+@for $i from 1 through 10 {
+    .avatar-#{nth($avatars, $i)} {
+        background-image: url("#{$avatarsPath}#{nth($avatars, $i)}.png");
+    }
+}
+
+.avatar-box {
+    background-size: contain;
+    background-position: center;
+    background-repeat: no-repeat;
+}
+
 * {
     margin: 0;
     padding: 0;
 }
 
 body {
     background: #dfc380;
+}
+
+ul, li, ol {
+    list-style: none;
 }

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

@@ -0,0 +1,57 @@
+import React, { useEffect, useState } from 'react';
+import { Button } from 'antd';
+import './styles.scss';
+
+const Avatars = ['elephant', 'hippo', 'panda', 'penguin', 'rabbit', 'giraffe', 'monkey', 'parrot', 'pig', 'snake'];
+
+interface IProps {
+  onChange: (avatar: string | null) => void;
+}
+
+const AvatarSelector = (props: IProps) => {
+
+  const [avatarsVisible, setAvatarsVisible] = useState(false);
+  const [avatar, setAvatar] = useState<null | string>(null);
+
+  useEffect(() => {
+    props.onChange(avatar);
+  }, [avatar])
+
+  const toggleAvatars = () => {
+    setAvatarsVisible(!avatarsVisible);
+  }
+
+  return (
+    <div className="mi-c-avatars-wrap">
+      {
+        avatar ?
+          <div className={`avatar-selected avatar-box avatar-${avatar}`} onClick={toggleAvatars} />
+          :
+          <Button onClick={toggleAvatars}>Choose avatar</Button>
+      }
+      {
+        avatarsVisible && (
+          <ul className="avatars">
+            {
+              Avatars.map((avatar) => {
+                return (
+                  <li
+                    key={avatar}
+                    className={`avatar-item avatar-box avatar-${avatar}`}
+                    onClick={() => {
+                      setAvatar(avatar);
+                      setAvatarsVisible(false);
+                    }}
+                  />
+                )
+              })
+            }
+          </ul>
+        )
+      }
+
+    </div>
+  );
+};
+
+export default AvatarSelector;

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

@@ -0,0 +1,25 @@
+
+.mi-c-avatars-wrap {
+    position: relative;
+    width: 100px;
+    height: 100px;
+
+    .avatars {
+        position: absolute;
+        top: 100%;
+        display: grid;
+        width: 400px;
+        grid-template-columns: repeat(5, 1fr);
+        background: #fff;
+
+        .avatar-item {
+            height: 80px;
+        }
+    }
+
+    .avatar-selected {
+        width: 100px;
+        height: 100px;
+    }
+
+}

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

@@ -1,28 +1,52 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { IPlayer } from '../Player';
-import MapCell from '../MapCell';
+import MapCell, { ICellClassCache, ICoordinate } from '../MapCell';
 import './styles.scss';
+import { bfs, simplifyMapData } from '@/utils/map';
+import useMerkel from '@/hooks/useMerkel';
 
 interface IProps {
   width: number;
   height: number;
   players: IPlayer[];
   data: number[][];
+  curId: number;
   vertexCoordinate: {
     x: number,
     y: number,
-  }
+  };
+  onPlayerMove: (paths: ICoordinate[], simpleMapData: number[][]) => void;
 }
 
 const Map = (props: IProps) => {
-  const { width, height, vertexCoordinate, data } = props;
+  const { width, height, vertexCoordinate, data = [], players, curId, onPlayerMove } = props;
   const { x: startX, y: startY } = vertexCoordinate;
 
   const staticData = useMemo(() => {
-    return Array(height).fill(0).map(_ => Array(width).fill(0));
+    return Array(height).fill(0).map(() => Array(width).fill(0));
   }, [width, height]);
 
-  const cellClassCache = useRef({});
+  const simpleMapData = useMemo(() => {
+    return simplifyMapData(data);
+  }, [data]);
+
+  const formatMovePath = useMerkel(simpleMapData);
+
+  const playerData = useMemo(() => {
+    const obj = {};
+    players.forEach((player) => {
+      obj[`${player.x}-${player.y}`] = player;
+    });
+    return obj;
+  }, [players]);
+
+  const cellClassCache = useRef<ICellClassCache>({});
+
+  const onMoveTo = (coordinate) => {
+    const { x, y} = players.find((player) => player.id === curId);
+    const paths = bfs(simpleMapData, { x, y }, coordinate).slice(1);
+    onPlayerMove(paths, formatMovePath(paths));
+  }
 
 
   if (data.length === 0) {
@@ -34,19 +58,23 @@ const Map = (props: IProps) => {
       <div className="mi-map-content">
       {
         staticData.map((row, rowIndex) => {
+          const y = startY + rowIndex
           return (
-            <div className="mi-map-row" key={startY + rowIndex}>
+            <div className="mi-map-row" key={y}>
               {
                 row.map((_, colIndex) => {
+                  const x = startX + colIndex;
                   return (
                     <MapCell
                       key={startX + colIndex}
                       coordinate={{
-                        x: startX + colIndex,
-                        y: startY + rowIndex
+                        x,
+                        y
                       }}
                       mapData={data}
-                      cellClassCache={cellClassCache}
+                      cellClassCache={cellClassCache.current}
+                      player={playerData[`${x}-${y}`]}
+                      onMoveTo={onMoveTo}
                     />
                   )
                 })

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

@@ -9,7 +9,6 @@
     .mi-map-content {
         border: 1px solid;
         width: $cellSize * 24;
-        font-size: 0;
     }
 
     .mi-map-row {