mancala/apps/frontend/src/components/board/PitView.tsx

import * as React from "react";
import { FunctionComponent } from "react";
import { getColorByBrightness } from "@mancala/core";
import { Context } from "../../context/context";
import Util from "../../util/Util";
import { PitViewModel } from "@mancala/core";
import StoneView from "./StoneView";

const PitView: FunctionComponent<{
    pitViewModel: PitViewModel;
    onClick: () => void;
    context: Context;
}> = ({ pitViewModel, onClick, context }) => {
    const textColor = getColorByBrightness(
        pitViewModel.pitColor,
        context.themeManager.theme.textColor,
        context.themeManager.theme.textLightColor
    );
    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
        <StoneView key={index} color={pitViewModel.stoneColor} />
    ));

    return (
        <div className="pit" onClick={onClick} style={{ background: pitViewModel.pitColor }}>
            {stones}
            <span className="stone-count">{pitViewModel.stoneCount}</span>
            <style jsx>{`
                .pit {
                    margin: 5px;
                    padding: 5px;
                    border-radius: 10vw;
                    transition: background-color 0.5s;
                    display: flex;
                    align-items: center;
                    align-content: center;
                    justify-content: center;
                    justify-items: center;
                    flex-wrap: wrap;
                    position: relative;
                }
                .stone-count {
                    position: absolute;
                    bottom: 1.0vw;
                    left: 50%;
                    transform: translateX(-50%);
                    font-family: monospace;
                    font-size: 1.5vw;
                    font-weight: bold;
                    color: ${textColor};

                    pointer-events: none;
                }
            `}</style>
        </div>
    );
};

export default PitView;