mancala/src/components/BoardView.tsx

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

type Theme = {
    background : string,
    boardColor: string
    storeColor: string
    holeColor: string
    ballColor: string
}

const theme: Theme = {
    background : "#EEEEEE",
    boardColor: "#4D606E",
    storeColor: "#3FBAC2",
    holeColor: "#D3D4D8",
    ballColor: "#393E46",
}

const BallView: FunctionComponent<{color : string}> = ({color}) => {

    return (<div style={{
        background: color,
        margin: "1px",
        width: "1vw",
        height: "1vw",
        borderRadius: "10vw"
    }} >
    </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 color={theme.ballColor}/>)

    return (<div
        onClick={onClick}
        style={{
            background: color,
            margin: "5px",
            padding: "5px",
            borderRadius: "10vw",
            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 color={theme.ballColor}/>)
        return (<div style={{
            gridColumn: gridColumn,
            gridRow: gridRow,
            background: color,
            margin: "5px",
            borderRadius: "10vw",
            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={theme.holeColor} onClick={() => {
            if (game.turn == "player1") onHoleSelect(game.board.player1Holes.indexOf(hole), hole)
        }} />
    ))

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

    return (
        <div style={{
            margin: '10px',
            padding: '20px',
            display: 'grid',
            gridTemplateColumns: 'repeat(8, 11vw)',
            gridTemplateRows: 'repeat(2, 11vw)',
            borderRadius: "3vw",
            background: theme.boardColor
        }}>
            {
                game.getPlayerNameByKey(userKey) == "player2" ? (
                    <>
                        <StoreView store={game!!.board.player1Store} color={theme.storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
                        <StoreView store={game!!.board.player2Store} color={theme.storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
                        {player1Holes.reverse()}
                        {player2Holes}
                    </>
                ) : (
                    <>
                        <StoreView store={game!!.board.player2Store} color={theme.storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
                        <StoreView store={game!!.board.player1Store} color={theme.storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
                        {player2Holes.reverse()}
                        {player1Holes}
                    </>
                )
            }

        </div>
    )
}

export default BoardView