mancala/src/components/BoardView.tsx

import { Bank, MancalaGame, Pit } from 'mancala.js';
import * as React from 'react';
import { FunctionComponent, useState } from 'react';

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

const theme: Theme = {
    background : "#EEEEEE",
    boardColor: "#4D606E",
    boardColorWhenPlayerTurn: "#84b8a6",
    storeColor: "#3FBAC2",
    storeColorWhenPlayerTurn: "#6cab94",
    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: Pit, color: string, onClick: () => void }> = ({ hole, color, onClick }) => {
    const balls = [...range(hole.stoneCount)].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: Bank, color: string, gridColumn: string, gridRow: string }> = ({ store, color, gridColumn, gridRow }) => {
        const balls = [...range(store.stoneCount)].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?: MancalaGame, userKey: string, onHoleSelect: (index: number, hole: Pit) => void }> = ({
    game, userKey, onHoleSelect }) => {
        
    const player1Pits = game?.board.player1Pits.map((hole) => (
        <HoleView hole={hole} color={theme.holeColor} onClick={() => {
            if (game.turnPlayerId === game.player1Id) onHoleSelect(game.board.player1Pits.indexOf(hole), hole)
        }} />
    ))

    const player2Pits = game!!.board.player2Pits.map((hole) => (
        <HoleView hole={hole} color={theme.holeColor} onClick={() => {
            if (game.turnPlayerId === game.player2Id) onHoleSelect(game.board.player2Pits.indexOf(hole), hole)
        }} />
    ))

    const isUserTurn = game.checkIsPlayerTurn(userKey)

    const storeColor = isUserTurn ? theme.storeColor : theme.storeColorWhenPlayerTurn;

    return (
        <div style={{
            margin: '10px',
            padding: '20px',
            display: 'grid',
            gridTemplateColumns: 'repeat(8, 11vw)',
            gridTemplateRows: 'repeat(2, 11vw)',
            borderRadius: "3vw",
            background: isUserTurn ? theme.boardColor : theme.boardColorWhenPlayerTurn
        }}>
            {
                userKey === game.player2Id ? (
                    <>
                        <StoreView store={game!!.board.player1Bank} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
                        <StoreView store={game!!.board.player2Bank} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
                        {player1Pits.reverse()}
                        {player2Pits}
                    </>
                ) : (
                    <>
                        <StoreView store={game!!.board.player2Bank} color={storeColor} gridColumn="1 / 2" gridRow="1 / 3" />
                        <StoreView store={game!!.board.player1Bank} color={storeColor} gridColumn="8 / 9" gridRow="1 / 3" />
                        {player2Pits.reverse()}
                        {player1Pits}
                    </>
                )
            }

        </div>
    )
}

export default BoardView