Pawn Promotion issue

[Pratikdubey7735]

I have create a component where I am try to do pawn promotion and I wanted to refelect the piece on board which user select so what I can do instead of using default promotion to queen please suggest me. Attaching my code below

import React, { useState, useEffect } from 'react'; import { Chessboard } from 'react-chessboard'; import { Chess } from 'chess.js'; import { useLocation } from 'react-router-dom';

function Play() { const location = useLocation(); const initialFen = location.state?.fen || 'start';

const [game] = useState(() => new Chess(initialFen)); const [fen, setFen] = useState(game.fen()); const [gameOutcome, setGameOutcome] = useState(null); const [movesHistory, setMovesHistory] = useState([]); const [currentMoveIndex, setCurrentMoveIndex] = useState(0);

useEffect(() => { // Initialize moves history from the current game state setMovesHistory(game.history()); setFen(game.fen()); }, [game]);

const onDrop = (source, target) => { const move = game.move({ from: source, to: target, promotion: 'q', }); if (move) { setFen(game.fen()); updateMovesHistory(); determineGameOutcome(); return true; } return false; };

const updateMovesHistory = () => { setMovesHistory(game.history()); setCurrentMoveIndex(game.history().length); };

const determineGameOutcome = () => { if (game.in_checkmate()) { setGameOutcome('Checkmate!'); } else if (game.in_draw() || game.in_stalemate() || game.in_threefold_repetition()) { setGameOutcome('The game is a draw!'); } else { setGameOutcome(null); } };

const formatMoves = () => { const formattedMoves = []; for (let i = 0; i < movesHistory.length; i += 2) { const moveNumber = Math.floor(i / 2) + 1; const whiteMove = movesHistory[i]; const blackMove = movesHistory[i + 1] ? movesHistory[i + 1] : ''; formattedMoves.push({ text: ${moveNumber}. ${whiteMove} ${blackMove}, index: i, }); } return formattedMoves; };

const handleMoveClick = (index) => { setCurrentMoveIndex(index + 1); setFen(getFenForMove(index + 1)); };

const getFenForMove = (moveIndex) => { // Retrieve the FEN string for a specific move in history const tempGame = new Chess(initialFen); for (let i = 0; i < moveIndex; i++) { tempGame.move(movesHistory[i]); } return tempGame.fen(); };

const handlePreviousMove = () => { if (currentMoveIndex > 0) { setCurrentMoveIndex(currentMoveIndex - 1); setFen(getFenForMove(currentMoveIndex - 1)); } };

const handleNextMove = () => { if (currentMoveIndex < movesHistory.length) { setCurrentMoveIndex(currentMoveIndex + 1); setFen(getFenForMove(currentMoveIndex + 1)); } };

const formattedMoves = formatMoves();

return (

{/* Left Part: Chessboard */}

{game && (

)} {gameOutcome &&

{gameOutcome}

} {/* Move Navigation Buttons */}

Previous Next

{/* Right Part: Moves History */}

Moves History

{formattedMoves.map((move, index) => (
• handleMoveClick(index)} > {move.text}
))}

); } export default Play;

[Clariity]

onPieceDrop emits a 3rd parameter which is the piece selected, then you can use this in your game.move():

promotion: piece[1].toLowerCase() ?? "q"

[Pratikdubey7735]

I got it sir thanks a lot sir