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

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

interface PitViewProps {
  pitViewModel: PitViewModel;
  context: Context;
  onClick: () => void;
  fontSize: number;
}

const PitView: FunctionComponent<PitViewProps> = ({ pitViewModel, context, onClick, fontSize }) => {
  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,
        position: "relative",
      }}
    >
      {stones}
      {pitViewModel.stoneCount > 0 && (
        <span
          className="stone-count"
          style={{
            color: textColor,
            position: "absolute",
            bottom: fontSize / 2,
            left: "50%",
            transform: "translateX(-50%)",
            fontFamily: "monospace",
            fontWeight: "bold",
            fontSize: fontSize,
            pointerEvents: "none",
          }}
        >
          {pitViewModel.stoneCount}
        </span>
      )}
      <style jsx>{`
        .pit {
          margin: var(--board-spacing);
          padding: var(--board-spacing);
          border-radius: calc(10 * var(--board-unit));
          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: calc(1.0 * var(--board-unit));
          left: 50%;
          transform: translateX(-50%);
          font-family: monospace;
          font-size: calc(1.5 * var(--board-unit));
          font-weight: bold;
          pointer-events: none;
        }
      `}</style>
    </div>
  );
};

export default PitView;