Fixed #106

shaack · Apr 20, 2023 · 33d7505 · 33d7505
1 parent ff7b49a
commit 33d7505
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 20 deletions.
diff --git a/examples/extensions/promotion-dialog-extension.html b/examples/extensions/promotion-dialog-extension.html
@@ -36,10 +36,10 @@ <h2>Example of the cm-chessboard PromotionDialog extension</h2>
     chessboard.enableMoveInput((event) => {
         if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
             if (event.squareTo.charAt(1) === "8" && event.piece.charAt(1) === "p") {
-                chessboard.showPromotionDialog(event.squareTo, COLOR.white, (event) => {
-                    console.log("48a99d Piece selected", event.piece)
-                    if (event.piece) {
-                        chessboard.setPiece(event.square, event.piece, true)
+                chessboard.showPromotionDialog(event.squareTo, COLOR.white, (result) => {
+                    console.log("Promotion result", result)
+                    if (result.piece) {
+                        chessboard.setPiece(result.square, result.piece, true)
                     } else {
                         chessboard.setPosition(position)
                     }

diff --git a/examples/validate-moves.html b/examples/validate-moves.html
@@ -7,6 +7,7 @@
     <link rel="stylesheet" href="styles/examples.css"/>
     <link rel="stylesheet" href="../assets/chessboard.css"/>
     <link rel="stylesheet" href="../assets/extensions/markers/markers.css"/>
+    <link rel="stylesheet" href="../assets/extensions/promotion-dialog/promotion-dialog.css"/>
 </head>
 <body>
 <h1><a href="../">cm-chessboard</a></h1>
@@ -25,6 +26,19 @@ <h2>Example: Input enabled, move validation with chess.js</h2>
 
     const chess = new Chess()
 
+    function makeEngineMove(chessboard) {
+        const possibleMoves = chess.moves({verbose: true})
+        if (possibleMoves.length > 0) {
+            const randomIndex = Math.floor(Math.random() * possibleMoves.length)
+            const randomMove = possibleMoves[randomIndex]
+            setTimeout(() => { // smoother with 500ms delay
+                chess.move({from: randomMove.from, to: randomMove.to})
+                chessboard.setPosition(chess.fen(), true)
+                chessboard.enableMoveInput(inputHandler, COLOR.white)
+            }, 500)
+        }
+    }
+
     function inputHandler(event) {
         event.chessboard.removeMarkers(MARKER_TYPE.dot)
         event.chessboard.removeMarkers(MARKER_TYPE.bevel)
@@ -42,30 +56,36 @@ <h2>Example: Input enabled, move validation with chess.js</h2>
             }
             return moves.length > 0
         } else if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
-            const move = {from: event.squareFrom, to: event.squareTo}
+            const move = {from: event.squareFrom, to: event.squareTo, promotion: event.promotion}
             const result = chess.move(move)
             if (result) {
                 event.chessboard.disableMoveInput()
                 this.chessboard.state.moveInputProcess.then(() => { // wait for the move input process has finished
                     this.chessboard.setPosition(chess.fen(), true).then(() => { // update position, maybe castled and wait for animation has finished
-                        const possibleMoves = chess.moves({verbose: true})
-                        if (possibleMoves.length > 0) {
-                            const randomIndex = Math.floor(Math.random() * possibleMoves.length)
-                            const randomMove = possibleMoves[randomIndex]
-                            setTimeout(() => { // smoother with 500ms delay
-                                chess.move({from: randomMove.from, to: randomMove.to})
-                                event.chessboard.enableMoveInput(inputHandler, COLOR.white)
-                                event.chessboard.setPosition(chess.fen(), true)
-                            }, 500)
-                        }
+                        makeEngineMove(event.chessboard)
                     })
                 })
             } else {
-                console.warn("invalid move", move)
+                // promotion?
+                let possibleMoves = chess.moves({square: event.squareFrom, verbose: true})
+                for (const possibleMove of possibleMoves) {
+                    if (possibleMove.promotion && possibleMove.to === event.squareTo) {
+                        event.chessboard.showPromotionDialog(event.squareTo, COLOR.white, (result) => {
+                            console.log("promotion result", result)
+                            if (result) {
+                                chess.move({from: event.squareFrom, to: event.squareTo, promotion: result.piece.charAt(1)})
+                                event.chessboard.setPosition(chess.fen(), true)
+                                makeEngineMove(event.chessboard)
+                            } else {
+                                event.chessboard.setPosition(chess.fen(), true)
+                                event.chessboard.enableMoveInput(inputHandler, COLOR.white)
+                            }
+                        })
+                        return true
+                    }
+                }
             }
             return result
-        } else if (event.type === INPUT_EVENT_TYPE.validateMoveInput) {
-
         }
     }
 

diff --git a/src/cm-chessboard/extensions/promotion-dialog/PromotionDialog.js b/src/cm-chessboard/extensions/promotion-dialog/PromotionDialog.js
@@ -147,14 +147,14 @@ export class PromotionDialog extends Extension {
         if(this.state.displayState === DISPLAY_STATE.shown) {
             event.preventDefault()
             this.setDisplayState(DISPLAY_STATE.hidden)
-            this.state.callback({square: this.state.square, piece: null})
+            this.state.callback(null)
         }
     }
 
     contextMenu(event) {
         event.preventDefault()
         this.setDisplayState(DISPLAY_STATE.hidden)
-        this.state.callback({square: this.state.square, piece: null})
+        this.state.callback(null)
     }
 
     setDisplayState(displayState) {