feat: add rank list

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

@@ -0,0 +1,53 @@
+import React, { useState } from 'react';
+import './styles.scss';
+
+interface IUser {
+  id: string | number;
+  name: string;
+  score: number;
+}
+
+interface IProps {
+  data: IUser[];
+  curId: number;
+}
+
+const Rank = (props: IProps) => {
+
+  const { data, curId } = props;
+  const curIndex = data.findIndex(item => item.id === curId);
+  const [visible, setVisible] = useState(false);
+
+  const toggleVisible = () => {
+    setVisible(!visible);
+  }
+
+  return (
+    <div className={`mi-c-rank ${visible ? '' : 'hidden'}`}>
+      <div className="rank-title">Rank</div>
+      <ul className="rank-list">
+        {
+          data.map((item, index) => {
+            return (
+              <li className="rank-info">
+                <div className="rank-index">{index + 1}</div>
+                <div className="name">{item.name}</div>
+                <div className="score">{item.score}</div>
+              </li>
+            )
+          })
+        }
+      </ul>
+      <div className="rank-info my-rank-info">
+        <div className="rank-index">{curIndex + 1}</div>
+        <div className="name">ME</div>
+        <div className="score">{data[curIndex].score}</div>
+      </div>
+      <div className="opt">
+        <div className="toggle-visible" onClick={toggleVisible}/>
+      </div>
+    </div>
+  );
+};
+
+export default Rank;

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

@@ -0,0 +1,77 @@
+.mi-c-rank {
+    position: absolute;
+    left: 0;
+    padding: 16px;
+    width: 160px;
+    height: 500px;
+    background: #eee;
+    top: 50%;
+    transform: translate3d(0, -50%, 0);
+    transition: transform 0.3s;
+
+    .rank-title {
+        border-bottom: 2px solid;
+        line-height: 2;
+        text-align: center;
+    }
+
+    .rank-list {
+        padding: 8px 0;
+    }
+
+    .my-rank-info {
+        border-top: 2px solid;
+        padding-top: 8px;
+    }
+
+    .rank-index {
+        width: 30px;
+    }
+
+    .name {
+        flex: 1;
+    }
+
+    .score {
+        width: 50px;
+    }
+
+    .rank-info {
+        display: flex;
+
+        & > div {
+            padding: 0 6px;
+        }
+    }
+
+    .opt {
+        position: absolute;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 24px;
+        height: 60px;
+        left: 100%;
+        top: 50%;
+        transform: translateY(-50%);
+        background: #eee;
+        cursor: pointer;
+
+        .toggle-visible{
+            content: '';
+            display: block;
+            border-width: 28px 16px 28px 0;
+            border-color: transparent blue transparent transparent;
+            border-style: solid;
+        }
+    }
+
+    &.hidden {
+        transform: translate3d(-100%, -50%, 0);
+
+        .opt .toggle-visible {
+            border-width: 28px 0 28px 16px;
+            border-color: transparent transparent transparent blue;
+        }
+    }
+}

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

@@ -5,6 +5,7 @@ import Map from '@/components/Map';
 import UserAvatar from '@/components/UserAvatar';
 import { useLocation } from 'react-router-dom';
 import './styles.scss';
+import Rank from '@/components/Rank';
 
 const Game = () => {
   const [renderMapData, setRenderMapData] = useState([]);
@@ -62,6 +63,32 @@ const Game = () => {
           maxAp={100}
         />
       </div>
+
+      <Rank
+        data={[
+          {
+            name: 'aaaa',
+            score: 100,
+            id: 1
+          },
+          {
+            name: 'aaaa1',
+            score: 99,
+            id: 2
+          },
+          {
+            name: 'aaaa2',
+            score: 50,
+            id: 3
+          },
+          {
+            name: 'aaaa3',
+            score: 5,
+            id: 4
+          },
+        ]}
+        curId={3}
+      />
       <Map
         width={MapConfig.visualWidth}
         height={MapConfig.visualHeight}