mancala/src/components/board/StoreView.tsx

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

const StoreView: FunctionComponent<{
    context: Context;
    pitViewModel: PitViewModel;
    gridColumn: string;
    gridRow: string;
  }> = ({ context, pitViewModel, gridColumn, gridRow }) => {
    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
      <StoneView key={index} color={pitViewModel.stoneColor} />
    ));
    const textColor = getColorByBrightness(
      pitViewModel.pitColor,
      context.themeManager.theme.textColor,
      context.themeManager.theme.textLightColor
    );
    return (
      <div
        style={{
          gridColumn: gridColumn,
          gridRow: gridRow,
          background: pitViewModel.pitColor,
          margin: "5px",
          borderRadius: "10vw",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          alignContent: "center",
          flexWrap: "wrap",
          position: "relative",
        }}
      >
        {stones}
        <span
          style={{
            position: "absolute",
            bottom: "2vw",
            fontFamily: "monospace",
            fontWeight: "bold",
            fontSize: "2vw",
            color: textColor,
          }}
        >
          {stones.length}
        </span>
      </div>
    );
  };

  export default StoreView;