rudimentary promotion selection

assets/js/hooks/chessBoard.js

@@ -51,27 +51,71 @@ export const ChessBoard = {
     return dests;
   },
 
-  handleMove(orig, dest) {
-    const { role, color } = this.ground.state.pieces.get(dest);
-    const destRank = dest.split("").pop()
+//   handleMove(orig, dest) {
+//     const { role, color } = this.ground.state.pieces.get(dest);
+//     const destRank = dest.split("").pop()
 
-    const isPromotion = this.isPromotion(role, destRank)
+//     const isPromotion = this.isPromotion(role, destRank)
 
-    if (isPromotion) {
-        console.log("PROMOTION LOGIC")
-        this.executeMove(orig, dest, "q");
-        return
+//     if (isPromotion) {
+//         this.showPromotionDialog()
+//         this.executeMove(orig, dest, "q");
+//         return
+//     }
+
+//     this.executeMove(orig, dest, "q");
+//   },
+
+handleMove(orig, dest) {
+    const piece = this.ground.state.pieces.get(dest);
+    const destRank = dest[1];
+    if (piece?.role === 'pawn' && (destRank === '1' || destRank === '8')) {
+      this.showPromotionDialog(orig, dest);
+      return; // don't execute yet — wait for user choice
     }
-
-    this.executeMove(orig, dest, "q");
+    this.executeMove(orig, dest);
   },
 
   isPromotion(piece, rank) {
     return piece === "pawn" && (rank === "1" || rank === "8");
   },
 
-  showPromotionDialog() {
+  showPromotionDialog(orig, dest) {
     console.log("trigger promotion dialog");
+    this.pendingPromotion = { orig, dest };
+    const color = this.chess.turn() === 'w' ? 'white' : 'black';
+    const overlay = document.createElement('div');
+    overlay.className = 'promotion-overlay';
+    const picker = document.createElement('div');
+    picker.className = 'promotion-picker';
+    const pieces = [
+      { type: 'queen',  symbol: { white: '♕', black: '♛' } },
+      { type: 'rook',   symbol: { white: '♖', black: '♜' } },
+      { type: 'bishop', symbol: { white: '♗', black: '♝' } },
+      { type: 'knight', symbol: { white: '♘', black: '♞' } },
+    ];
+    // chess.js promotion codes
+    const code = { queen: 'q', rook: 'r', bishop: 'b', knight: 'n' };
+    pieces.forEach(({ type, symbol }) => {
+      const btn = document.createElement('button');
+      btn.className = 'promotion-piece';
+      btn.textContent = symbol[color];
+      btn.addEventListener('click', () => this.completePromotion(code[type]));
+      picker.appendChild(btn);
+    });
+    overlay.appendChild(picker);
+    const boardContainer = this.el.closest('.shadow-inner');
+    boardContainer.style.position = 'relative';
+    boardContainer.appendChild(overlay);
+  },
+
+  completePromotion(pieceType) {
+    const { orig, dest } = this.pendingPromotion;
+    this.pendingPromotion = null;
+    const picker = this.el.closest('.shadow-inner')
+      ?.querySelector('.promotion-overlay');
+    if (picker) picker.remove();
+    this.executeMove(orig, dest, pieceType);
   },
 
   executeMove(orig, dest, promotion) {