mancala/src/components/BoardView.tsx

import * as React from 'react';
import { FunctionComponent, useState } from 'react';
import { Hole, Store, Game } from '../mancala';

const BallView: FunctionComponent = () => {

    return (<div style={{
        background: "yellow",
        margin: "1px",
        width: "20px",
        height: "20px",
        borderRadius: "50px"
    }} >
    </div>)
}

function range(size: number) {
    var ans = [];
    for (let i = 0; i < size; i++) {
        ans.push(i);
    }
    return ans;
}

const HoleView: FunctionComponent<{ hole: Hole, color: string, onClick: () => void }> = ({ hole, color, onClick }) => {
    const balls = [...range(hole.ballCount)].map((i) => <BallView />)

    return (<div
        onClick={onClick}
        style={{
            background: color,
            margin: "5px",
            padding: "5px",
            borderRadius: "100px",
            display: 'flex',
            alignItems: 'center',
            alignContent: 'center',
            justifyContent: 'center',
            justifyItems: 'center',
            flexWrap: "wrap",
        }} >
        {balls}
    </div>)
}

const StoreView: FunctionComponent<
    { store: Store, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => {
        const balls = [...range(store.ballCount)].map((i) => <BallView />)
        return (<div style={{
            gridColumn: gridColumn,
            gridRow: gridRow,
            background: color,
            margin: "1px",
            borderRadius: "100px",
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            alignContent : 'center',
            flexWrap: "wrap",
        }} >
            {balls}
        </div>)
    }

const BoardView: FunctionComponent<{ game?: Game, userKey: string, onHoleSelect: (index: number, hole: Hole) => void }> = ({
    game, userKey, onHoleSelect }) => {

    const player1Holes = game?.board.player1Holes.map((hole) => (
        <HoleView hole={hole} color="red" onClick={() => {
            if (game.turn == "player1") onHoleSelect(game.board.player1Holes.indexOf(hole), hole)
        }} />
    ))

    const player2Holes = game!!.board.player2Holes.map((hole) => (
        <HoleView hole={hole} color="blue" onClick={() => {
            if (game.turn == "player2") onHoleSelect(game.board.player2Holes.indexOf(hole), hole)
        }} />
    ))

    return (
        <div style={{
            margin: '10px',
            padding: '10px',
            display: 'grid',
            gridTemplateColumns: 'repeat(8, 150px)',
            gridTemplateRows: '150px 150px',
            border: "2px solid black",
            borderRadius: "30px",
        }}>
            {
                game.getPlayerNameByKey(userKey) == "player2" ? (
                    <>
                        <StoreView store={game!!.board.player1Store} color="red" gridColumn="1 / 2" gridRow="1 / 3" />
                        <StoreView store={game!!.board.player2Store} color="blue" gridColumn="8 / 9" gridRow="1 / 3" />
                        {player1Holes.reverse()}
                        {player2Holes}
                    </>
                ) : (
                    <>
                        <StoreView store={game!!.board.player2Store} color="red" gridColumn="1 / 2" gridRow="1 / 3" />
                        <StoreView store={game!!.board.player1Store} color="blue" gridColumn="8 / 9" gridRow="1 / 3" />
                        {player2Holes.reverse()}
                        {player1Holes}
                    </>
                )
            }

        </div>
    )
}

export default BoardView