From e4c12e29e6893d5d1427e75959f9b0fe7c3cb1d4 Mon Sep 17 00:00:00 2001
From: Epitomaniac <d.mohebi1993@gmail.com>
Date: Thu, 9 Jan 2025 15:21:12 +0330
Subject: [PATCH 1/2] - Fix: vertical promotion dialog no longer overflows out
 of the board on bottom rank promotions

---
 src/chessboard/components/PromotionDialog.tsx | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/src/chessboard/components/PromotionDialog.tsx b/src/chessboard/components/PromotionDialog.tsx
index 9d9e7e0..5b6ee27 100644
--- a/src/chessboard/components/PromotionDialog.tsx
+++ b/src/chessboard/components/PromotionDialog.tsx
@@ -19,14 +19,23 @@ export function PromotionDialog() {
     `${promotePieceColor ?? "w"}B`,
   ];
 
+  // Determines if promotion is happening on the bottom rank
+  const isBottomRank =
+    (boardOrientation === "white" && promoteToSquare?.[1] === "1") ||
+    (boardOrientation === "black" && promoteToSquare?.[1] === "8");
+
   const dialogStyles = {
     default: {
       display: "grid",
       gridTemplateColumns: "1fr 1fr",
-      transform: `translate(${-boardWidth / 8}px, ${-boardWidth / 8}px)`,
+      transform: isBottomRank
+        ? `translate(${-boardWidth / 8}px, ${+boardWidth / 8}px)`
+        : `translate(${-boardWidth / 8}px, ${-boardWidth / 8}px)`,
     },
     vertical: {
-      transform: `translate(${-boardWidth / 16}px, ${-boardWidth / 16}px)`,
+      transform: isBottomRank
+        ? `translate(${-boardWidth / 16}px, ${+boardWidth / 16}px)`
+        : `translate(${-boardWidth / 16}px, ${-boardWidth / 16}px)`,
     },
     modal: {
       display: "flex",
@@ -44,23 +53,32 @@ export function PromotionDialog() {
   const dialogCoords = getRelativeCoords(
     boardOrientation,
     boardWidth,
-    promoteToSquare || "a8"
+    promoteToSquare || "a8",
   );
 
   return (
     <div
       style={{
         position: "absolute",
-        top: `${dialogCoords?.y}px`,
+        // Bottom rank promotion forces the dialog to start from the bottom edge
+        top: isBottomRank ? undefined : `${dialogCoords?.y}px`,
+        bottom: isBottomRank ? `${boardWidth - dialogCoords?.y}px` : undefined,
         left: `${dialogCoords?.x}px`,
         zIndex: 1000,
         ...dialogStyles[promotionDialogVariant],
       }}
       title="Choose promotion piece"
     >
-      {promotionOptions.map((option) => (
-        <PromotionOption key={option} option={option} />
-      ))}
+      {
+        // Reversing the order in which piece icons appear for vertical dialog if promotion occurs on the bottom rank
+        isBottomRank && promotionDialogVariant === "vertical"
+          ? promotionOptions
+              .reverse()
+              .map((option) => <PromotionOption key={option} option={option} />)
+          : promotionOptions.map((option) => (
+              <PromotionOption key={option} option={option} />
+            ))
+      }
     </div>
   );
 }

From 3264cf41649d08cf8b527a94f49507ef7bbef06b Mon Sep 17 00:00:00 2001
From: Epitomaniac <d.mohebi1993@gmail.com>
Date: Sun, 19 Jan 2025 21:25:13 +0330
Subject: [PATCH 2/2] moved reverse logic out of jsx as requested

---
 src/chessboard/components/PromotionDialog.tsx | 19 +++++++++----------
 stories/Chessboard.stories.tsx                | 15 ++++++++-------
 2 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/src/chessboard/components/PromotionDialog.tsx b/src/chessboard/components/PromotionDialog.tsx
index 5b6ee27..16c636f 100644
--- a/src/chessboard/components/PromotionDialog.tsx
+++ b/src/chessboard/components/PromotionDialog.tsx
@@ -56,6 +56,12 @@ export function PromotionDialog() {
     promoteToSquare || "a8",
   );
 
+  // Reversing the order in which piece icons appear for vertical dialog if promotion occurs on the bottom rank
+  const orderedPromotionOptions =
+    isBottomRank && promotionDialogVariant === "vertical"
+      ? promotionOptions.reverse()
+      : promotionOptions;
+
   return (
     <div
       style={{
@@ -69,16 +75,9 @@ export function PromotionDialog() {
       }}
       title="Choose promotion piece"
     >
-      {
-        // Reversing the order in which piece icons appear for vertical dialog if promotion occurs on the bottom rank
-        isBottomRank && promotionDialogVariant === "vertical"
-          ? promotionOptions
-              .reverse()
-              .map((option) => <PromotionOption key={option} option={option} />)
-          : promotionOptions.map((option) => (
-              <PromotionOption key={option} option={option} />
-            ))
-      }
+      {orderedPromotionOptions.map((option) => (
+        <PromotionOption key={option} option={option} />
+      ))}
     </div>
   );
 }
diff --git a/stories/Chessboard.stories.tsx b/stories/Chessboard.stories.tsx
index 8622f6e..f39aae8 100644
--- a/stories/Chessboard.stories.tsx
+++ b/stories/Chessboard.stories.tsx
@@ -309,7 +309,7 @@ export const ClickToMove = () => {
         verbose: true,
       });
       const foundMove = moves.find(
-        (m) => m.from === moveFrom && m.to === square
+        (m) => m.from === moveFrom && m.to === square,
       );
       // not a valid move
       if (!foundMove) {
@@ -833,7 +833,7 @@ export const CustomSquare = () => {
           </div>
         </div>
       );
-    }
+    },
   );
 
   return (
@@ -865,7 +865,7 @@ export const AnalysisBoard = () => {
 
       positionEvaluation &&
         setPositionEvaluation(
-          ((game.turn() === "w" ? 1 : -1) * Number(positionEvaluation)) / 100
+          ((game.turn() === "w" ? 1 : -1) * Number(positionEvaluation)) / 100,
         );
       possibleMate && setPossibleMate(possibleMate);
       depth && setDepth(depth);
@@ -1036,8 +1036,9 @@ export const BoardWithCustomArrows = () => {
 ///////////////////////////////////
 export const ManualBoardEditor = () => {
   const game = useMemo(() => new Chess("8/8/8/8/8/8/8/8 w - - 0 1"), []); // empty board
-  const [boardOrientation, setBoardOrientation] =
-    useState<"white" | "black">("white");
+  const [boardOrientation, setBoardOrientation] = useState<"white" | "black">(
+    "white",
+  );
   const [boardWidth, setBoardWidth] = useState(360);
   const [fenPosition, setFenPosition] = useState(game.fen());
 
@@ -1051,7 +1052,7 @@ export const ManualBoardEditor = () => {
       setFenPosition(game.fen());
     } else {
       alert(
-        `The board already contains ${color === "w" ? "WHITE" : "BLACK"} KING`
+        `The board already contains ${color === "w" ? "WHITE" : "BLACK"} KING`,
       );
     }
 
@@ -1180,7 +1181,7 @@ export const ManualBoardEditor = () => {
             style={buttonStyle}
             onClick={() => {
               setBoardOrientation(
-                boardOrientation === "white" ? "black" : "white"
+                boardOrientation === "white" ? "black" : "white",
               );
             }}
           >