make promotion preview adjustable to board size

franciscoBSalgueiro · Oct 15, 2023 · e40dea8 · e40dea8
1 parent 3c853fa
commit e40dea8
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/src/components/boards/PromotionModal.tsx b/src/components/boards/PromotionModal.tsx
@@ -1,4 +1,4 @@
-import { Stack, ActionIcon } from "@mantine/core";
+import { ActionIcon, SimpleGrid } from "@mantine/core";
 import { useClickOutside } from "@mantine/hooks";
 import { BISHOP, KNIGHT, PieceSymbol, QUEEN, ROOK, Square } from "chess.js";
 import { memo } from "react";
@@ -62,32 +62,33 @@ const PromotionModal = memo(function PromotionModal({
             style={{
               position: "absolute",
               zIndex: 100,
+              width: "12.5%",
+              height: "50%",
               left: `${(file - 1) * 12.5}%`,
               top: rank === 1 ? "50%" : "0%",
               background: "rgba(255,255,255,0.8)",
             }}
           >
-            <Stack spacing={0}>
+            <SimpleGrid cols={1} spacing={0} verticalSpacing={0} h={"100%"}>
               {promotionPieces.map((p) => (
                 <ActionIcon
                   key={p}
                   w="100%"
                   h="100%"
-                  pos="relative"
+                  // pos="relative"
                   onClick={() => {
                     confirmMove(p);
                   }}
                 >
                   <Piece
-                    size={75}
                     piece={{
                       type: p,
                       color: turn === "white" ? "w" : "b",
                     }}
                   />
                 </ActionIcon>
               ))}
-            </Stack>
+            </SimpleGrid>
           </div>
         </>
       )}

diff --git a/src/components/common/Piece.tsx b/src/components/common/Piece.tsx
@@ -12,8 +12,9 @@ export default function PieceComponent({
   piece: Piece;
   boardRef?: React.RefObject<HTMLDivElement>;
   putPiece?: (square: Square, piece: Piece) => void;
-  size: number;
+  size?: number | string;
 }) {
+  size = size ?? "100%";
   const pieceRef = useRef<HTMLDivElement>(null);
   if (!boardRef || !putPiece) {
     return (