refactor: remaking board

HelheimLabs · Nov 8, 2023 · 01149af · 01149af
1 parent e8dfcb6
commit 01149af
Show file tree

Hide file tree

Showing 5 changed files with 147 additions and 17 deletions.
diff --git a/packages/client/src/index.css b/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;

diff --git a/packages/client/src/ui/Chessboard.css b/packages/client/src/ui/Chessboard.css
@@ -1,13 +1,18 @@
 .board {
   flex-grow: 1;
   width: 560px;
-  height: 480px;
+  height: 500px;
   display: flex;
   flex-wrap: wrap;
-  box-sizing: content-box;
-  margin: 0px auto;
+  /* box-sizing: content-box; */
+  /* margin: 0px auto; */
   background: url(/assets/board.png);
-  background-size: contain;
+  background-repeat: no-repeat;
+  background-size: 1020px auto;
+  background-position: center;
+  justify-content: center;
+  align-items: flex-start;
+  overflow: hidden;
 }
 
 .handle-area {
@@ -54,8 +59,8 @@
   margin: 0 auto;
   /* border-radius: 10px; */
 
-  background: url(/assets/Inventory.png);
-  background-size: contain;
+  /* background: url(/assets/Inventory.png); */
+  /* background-size: contain; */
 }
 
 .bench-area-hero > div {
@@ -88,10 +93,127 @@
   border-radius: 20px;
 }
 
+.line {
+  border: 4px solid transparent;
+  /* border: 4px solid transparent; */
+
+  display: flex;
+  box-sizing: border-box;
+
+  .chess {
+    width: 12.5%;
+    height: 100%;
+  }
+}
+
+.line:nth-child(1) {
+  margin-top: 0px;
+  /* width: 465px; */
+  /* height: 58px; */
+
+  .square {
+    margin-top: unset;
+    /* b-left: 2px; */
+    width: 58px;
+    height: 58px;
+  }
+}
+
+.line:nth-child(2) {
+  margin-top: -30px;
+  /* width: 480px;
+  height: 60px; */
+
+  .square {
+    width: 59px;
+    height: 60px;
+  }
+}
+
+.line:nth-child(3) {
+  margin-top: -35px;
+  /* 
+  width: 495px;
+  height: 62px; */
+
+  .square {
+    margin-top: unset;
+    width: 60px;
+    height: 62px;
+  }
+}
+
+.line:nth-child(4) {
+  /* width: 510px;
+  height: 64px; */
+  margin-top: -30px;
+
+  .square {
+    margin-top: unset;
+    width: 62px;
+    height: 64px;
+  }
+}
+
+.line:nth-child(5) {
+  /* width: 520px;
+  height: 66px; */
+  margin-top: -30px;
+
+  .square {
+    margin-top: unset;
+    width: 64px;
+    height: 66px;
+  }
+}
+
+.line:nth-child(6) {
+  /* width: 530px;
+  height: 68px; */
+  margin-top: -25px;
+
+  .square {
+    margin-top: unset;
+    width: 66px;
+    height: 68px;
+  }
+}
+
+.line:nth-child(7) {
+  /* width: 550px;
+  height: 76px; */
+  margin-top: -30px;
+
+  .square {
+    margin-top: unset;
+    width: 68px;
+    height: 76px;
+  }
+}
+
+.line:nth-child(8) {
+  /* width: 560px;
+  height: 80px; */
+  margin-top: -30px;
+
+  .square {
+    margin-top: unset;
+    width: 70px;
+    height: 80px;
+  }
+}
+
 .square {
-  width: 70px;
-  height: 60px;
   float: left;
+  border: 4px solid transparent;
+  /* border: 4px solid transparent; */
+  /* 需要调试的话,可以打开这里的注释显示边框 */
+  margin: 0px auto 0px auto;
+
+  .chess {
+    width: 12.5%;
+    height: 100%;
+  }
 }
 
 .draging {

diff --git a/packages/client/src/ui/Chessboard.tsx b/packages/client/src/ui/Chessboard.tsx
@@ -114,7 +114,7 @@ const Chessboard = ({ setAcHeroFn }: { setAcHeroFn: (any) => void }) => {
     return newSquares;
   }, [PiecesList, BattlePieceList]);
 
-  const renderSquare = (i) => {
+  const renderSquare = (i: number) => {
     const [x, y] = convertToPos(i);
     const className = dragIng
       ? x < 4
@@ -194,12 +194,20 @@ const Chessboard = ({ setAcHeroFn }: { setAcHeroFn: (any) => void }) => {
     }
 
     return board;
-  }, [squares]);
+  }, [renderSquare]);
 
   return (
     <div className="relative">
       <div className="board" ref={dropRef}>
-        {renderBoard}
+        {Array.from({ length: 8 }).map((v: unknown, i: number) => {
+          return (
+            <div className="line" key={i}>
+              {Array.from({ length: 8 }).map((k: unknown, j: number) => {
+                return renderSquare(i * 8 + j);
+              })}
+            </div>
+          );
+        })}
       </div>
       {/* <div className="board-bg absolute left-0 top-0"></div> */}
     </div>

diff --git a/packages/client/src/ui/Inventory.tsx b/packages/client/src/ui/Inventory.tsx
@@ -20,8 +20,8 @@ export function Inventory({ setAcHeroFn }) {
   );
 
   return (
-    <div className="bench-area bg-stone-500  border-cyan-700   text-center  w-[560px]  mx-auto">
-      <Synergy />
+    <div className="bench-area  text-center  w-[560px]  mx-auto">
+      {/* <Synergy /> */}
 
       <div className="bench-area-hero flex  justify-center">
         {heroAttrs?.map((hero: HeroBaseAttr, index: number) => (

diff --git a/packages/client/src/ui/Piece.tsx b/packages/client/src/ui/Piece.tsx
@@ -110,7 +110,7 @@ function Piece(props: PieceProps) {
             >
               x
             </button>
-            <div className="text-yellow-400  text-sm absolute bottom-0 -left-0">
+            <div className=" text-sm absolute bottom-0 -left-0">
               {Array(Number(hero.lv || 0))
                 .fill(null)
                 ?.map((item, index) => (