<script lang="ts"> 
        import Chessboard, { type ChessboardConfig } from '@powchess/chessboard';
		import { Chess, type Move } from 'chess.js';

		const chess = new Chess();

        const config: ChessboardConfig = {
		    board: {
		        resizible: true
		    },
		    legal: true,
		    callbacks: {
			afterMove: (move) =>
				chess.move({
					from: move.substring(0, 2),
					to: move.substring(2, 4),
					...(move.length > 4 && { promotion: move[4] })
				}),
			getLegalMoves: () =>
				(<Move[]>chess.moves({ verbose: true })).map((move) => {
					return move.from + move.to + (move.promotion ?? '');
				}),
			getWhiteToMove: () => chess.turn() === 'w',
			getInCheck: () => chess.inCheck(),
			getLastMove: () => {
				const lastMove = chess.history({ verbose: true }).pop() as Move;
				if (!lastMove) return '';
				return lastMove.from + lastMove.to + (lastMove.promotion ?? '');
			}
		}
		};
    </script>

    <Chessboard {config} className="rounded-md" />