chs/src-web/components/Board.tsx

import { Accessor, Component, createSignal, For, Show } from "solid-js";
import { Board as BoardData, Coordinate, Move, PieceType, Side } from "../events";
import './Board.css';
import Button, { ButtonContainer } from "./Button";

interface Props {
    board: Accessor<BoardData>;
    moves: Accessor<Move[]>;
    makeMove: (move: Move) => void;
    side: Side;
}

const PIECE_CHARS: Record<PieceType, string> = {
    'king':   '♔',
    'queen':  '♕',
    'rook':   '♜',
    'knight': '♞',
    'bishop': '♝',
    'pawn':   '♙',
};

const Board: Component<Props> = (props) => {
    const [selectedSquare, setSelectedSquare] = createSignal<number | null>(null);
    const [promotionMove, setPromotionMove] = createSignal<Move | null>(null);

    const validMoves = () => {
        const selected = selectedSquare();
        if (selected !== null) {
            return props.moves().filter(move => (move.from.rank * 8 + move.from.file) === selected);
        } else {
            return [];
        }
    };

    const board = () => {
        if (props.side === 'white') {
            return props.board().slice().reverse();
        } else {
            return props.board();
        }
    };

    return <>
        <div class="board">
            {board().map((piece, i_) => {
                const i = props.side === 'white' ? 63 - i_ : i_;
                const coord: Coordinate = {
                    rank: Math.floor(i / 8),
                    file: i % 8,
                };
                const isLight = () => ((i % 8) + Math.floor(i / 8)) % 2 == 0;
                const hasMoves = () => props.moves().find((move) => move.from.rank === coord.rank && move.from.file === coord.file) !== undefined;
                const targetMove = () => validMoves().find(move => move.to.rank === coord.rank && move.to.file === coord.file);
                const isTarget = () => targetMove() !== undefined;

                return <>
                    <div classList={{
                        square: true,
                        light: isLight(),
                        dark: !isLight(),
                        black: piece?.side === 'black',
                        white: piece?.side === 'white',
                        selectable: hasMoves() || isTarget(),
                    }} onClick={() => {
                        if (hasMoves()) {
                            if (selectedSquare() === i) {
                                setSelectedSquare(null);
                            } else {
                                setSelectedSquare(i);
                            }
                        } else {
                            const target = targetMove();
                            console.log(target);
                            if (target) {
                                if (target.promotions) {
                                    setPromotionMove(target);
                                } else {
                                    props.makeMove(target);
                                    setSelectedSquare(null);
                                    setPromotionMove(null);
                                }
                            }
                        }
                    }}>
                        <Show when={selectedSquare() === i}><div class="borderSelected" /></Show>
                        <Show when={isTarget()}><div class="borderTarget" /></Show>
                        <Show when={piece !== null}>{PIECE_CHARS[piece!.ty]}</Show>
                    </div>
                </>
            })}
        </div>
        <Show when={promotionMove() !== null}>
            <ButtonContainer>
                <For each={promotionMove()?.promotions!}>
                    {(promotion, i) => <Button onClick={() => {
                        props.makeMove({
                            ...promotionMove()!,
                            promotions: [promotion],
                        });
                        setSelectedSquare(null);
                        setPromotionMove(null);
                    }}>
                        {promotion.ty}
                    </Button>}
                </For>
            </ButtonContainer>
        </Show>
    </>
}

export default Board;