feat: board perspective

HelheimLabs · Nov 26, 2023 · 1728987 · 1728987
1 parent f5abca9
commit 1728987
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 11 deletions.
diff --git a/packages/client/src/ui/Chessboard.css b/packages/client/src/ui/Chessboard.css
@@ -7,12 +7,20 @@
   /* box-sizing: content-box; */
   /* margin: 0px auto; */
   background: url(/assets/board.png);
-  background-repeat: no-repeat;
   background-size: 1020px auto;
   background-position: center;
   justify-content: center;
   align-items: flex-start;
   overflow: hidden;
+  perspective: 220px;
+
+  /* transform: rotateX(7deg); */
+}
+
+.squareWrapper {
+  transform: rotateX(6deg);
+  margin-top: -15px;
+  margin-left: 30px;
 }
 
 .handle-area {
@@ -204,6 +212,9 @@
 }
 
 .square {
+  /* border: 1px solid red; */
+  width: 62px;
+  height: 58px;
   float: left;
   border: 4px solid transparent;
   /* border: 4px solid transparent; */

diff --git a/packages/client/src/ui/Chessboard.tsx b/packages/client/src/ui/Chessboard.tsx
@@ -164,7 +164,7 @@ const Chessboard = ({ setAcHeroFn }: { setAcHeroFn: (any) => void }) => {
                   src={src}
                   data-index={i}
                   alt={squares[i]["creatureId"]}
-                  style={{ width: 80 }}
+                  style={{ width: 80, transform: "rotateX(-6deg)" }}
                 />
                 <div className="flex items-center justify-center ">
                   <div className="text-yellow-400  text-sm absolute top-0 -left-0">
@@ -199,15 +199,7 @@ const Chessboard = ({ setAcHeroFn }: { setAcHeroFn: (any) => void }) => {
   return (
     <div className="relative">
       <div className="board" ref={dropRef}>
-        {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 className="squareWrapper">{renderBoard}</div>
       </div>
       {/* <div className="board-bg absolute left-0 top-0"></div> */}
     </div>