create a larger and more central piece promotion selection

assets/js/hooks/chessBoard.js

@@ -51,21 +51,6 @@ export const ChessBoard = {
     return dests;
   },
 
-//   handleMove(orig, dest) {
-//     const { role, color } = this.ground.state.pieces.get(dest);
-//     const destRank = dest.split("").pop()
-
-//     const isPromotion = this.isPromotion(role, destRank)
-
-//     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];
@@ -76,12 +61,7 @@ handleMove(orig, dest) {
     this.executeMove(orig, dest);
   },
 
-  isPromotion(piece, rank) {
-    return piece === "pawn" && (rank === "1" || rank === "8");
-  },
-
   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');
@@ -89,18 +69,15 @@ handleMove(orig, dest) {
     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: '♞' } },
+      { type: 'queen',  code: 'q' },
+      { type: 'rook',   code: 'r' },
+      { type: 'bishop', code: 'b' },
+      { type: 'knight', code: 'n' },
     ];
-    // chess.js promotion codes
-    const code = { queen: 'q', rook: 'r', bishop: 'b', knight: 'n' };
-    pieces.forEach(({ type, symbol }) => {
+    pieces.forEach(({ type, code }) => {
       const btn = document.createElement('button');
-      btn.className = 'promotion-piece';
-      btn.textContent = symbol[color];
-      btn.addEventListener('click', () => this.completePromotion(code[type]));
+      btn.className = `promotion-piece ${type} ${color}`;
+      btn.addEventListener('click', () => this.completePromotion(code));
       picker.appendChild(btn);
     });
     overlay.appendChild(picker);