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

import * as React from "react";
import { FunctionComponent } from "react";
import { Context } from "../../context/context";
import { BoardViewModel, PitViewModel } from "@mancala/core";
import PitView from "./PitView";
import StoreView from "./StoreView";
import { Game } from "@mancala/core";
import { Pit } from "mancala.js";

const BoardView: FunctionComponent<{
  game: Game;
  context: Context;
  boardId: string;
  boardViewModel: BoardViewModel;
  revert: boolean;
  onPitSelect: (index: number, pit: Pit) => void;
  // Width in px, e.g. for previews; by default the board is as wide as the viewport.
  width?: number;
}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect, width }) => {
  const mancalaGame = game?.mancalaGame;
  const theme = context.themeManager.theme;

  // The board is 92 units wide (8 columns of 11 plus padding); all board parts are sized in units.
  const unit = width !== undefined ? width / 92 : (typeof window !== "undefined" ? window.innerWidth / 100 : 10);
  const pitWidth = unit * 11;
  const sizeVariables = {
    "--board-unit": width !== undefined ? `${unit}px` : "1vw",
    "--board-spacing": width !== undefined ? `${unit * 0.3}px` : "5px",
  } as React.CSSProperties;

  const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => (
    <PitView
      key={key}
      pitViewModel={pitViewModel}
      context={context}
      onClick={() => onPitSelect(pit.index, pit)}
      fontSize={pitWidth / 6}
    />
  );

  const createPitViewList = (pits: Pit[]) =>
    pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));

  const player1Pits = createPitViewList(mancalaGame?.board.player1Pits);
  const player2Pits = createPitViewList(mancalaGame?.board.player2Pits);
  const player1BankIndex = mancalaGame?.board.player1BankIndex();
  const player2BankIndex = mancalaGame?.board.player2BankIndex();
  const player1BankViewModel = boardViewModel.pits[player1BankIndex];
  const player2BankViewModel = boardViewModel.pits[player2BankIndex];

  return (
    <div className="board" style={{ background: theme.boardColor, ...sizeVariables }}>
      <StoreView
        context={context}
        pitViewModel={revert ? player2BankViewModel : player1BankViewModel}
        gridColumn="8 / 9"
        gridRow="1 / 3"
        fontSize={pitWidth / 6}
      />
      <StoreView
        context={context}
        pitViewModel={revert ? player1BankViewModel : player2BankViewModel}
        gridColumn="1 / 2"
        gridRow="1 / 3"
        fontSize={pitWidth / 6}
      />
      {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
      {revert ? player2Pits : player1Pits}
      <style jsx>{`
        .board {
          padding: calc(2 * var(--board-unit));
          display: grid;
          grid-template-columns: repeat(8, calc(11 * var(--board-unit)));
          grid-template-rows: repeat(2, calc(11 * var(--board-unit)));
          border-radius: calc(3 * var(--board-unit));
          transition: background-color 0.5s;
        }
      `}</style>
    </div>
  );
};

export default BoardView;