mancala/src/components/BoardView.tsx

import { Bank, MancalaGame, Pit } from "mancala.js";
import * as React from "react";
import { FunctionComponent, useState } from "react";
import { Context } from "../context";
import BoardViewModel from "../viewmodel/BoardViewModel";
import PitViewModel from "../viewmodel/PitViewModel";

const BallView: FunctionComponent<{ color: string }> = ({ color }) => {
  return (
    <div
      style={{
        background: color,
        margin: "1px",
        width: "1vw",
        height: "1vw",
        borderRadius: "10vw",
        transition: "background-color 0.5s",
      }}
    ></div>
  );
};

function range(size: number) {
  var ans = [];
  for (let i = 0; i < size; i++) {
    ans.push(i);
  }
  return ans;
}

const HoleView: FunctionComponent<{
  pitViewModel: PitViewModel;
  onClick: () => void;
}> = ({ pitViewModel, onClick }) => {
  const balls = [...range(pitViewModel.stoneCount)].map((i) => (
    <BallView color={pitViewModel.stoneColor} />
  ));

  return (
    <div
      onClick={onClick}
      style={{
        background: pitViewModel.pitColor,
        margin: "5px",
        padding: "5px",
        borderRadius: "10vw",
        transition: "background-color 0.5s",
        display: "flex",
        alignItems: "center",
        alignContent: "center",
        justifyContent: "center",
        justifyItems: "center",
        flexWrap: "wrap",
      }}
    >
      {balls}
    </div>
  );
};

const StoreView: FunctionComponent<{
  context: Context;
  pitViewModel: PitViewModel;
  gridColumn: string;
  gridRow: string;
}> = ({ context, pitViewModel, gridColumn, gridRow }) => {
  const balls = [...range(pitViewModel.stoneCount)].map((i) => (
    <BallView color={pitViewModel.stoneColor} />
  ));
  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",
      }}
    >
      {balls}
      <span
        style={{
          position: "absolute",
          bottom: "2vw",
          fontFamily: "monospace",
          fontWeight: "bold",
          fontSize: "2vw",
          color: context.themeManager.theme.ballColor,
        }}
      >
        {balls.length}
      </span>
    </div>
  );
};

const BoardView: FunctionComponent<{
  game?: MancalaGame;
  context: Context;
  boardId: string;
  boardViewModel: BoardViewModel;
  userKey: string;
  onHoleSelect: (index: number, hole: Pit) => void;
}> = ({ game, context, boardId, boardViewModel, userKey, onHoleSelect }) => {
  const createPitView = (pitViewModel: PitViewModel, onClick: () => void) => {
    return <HoleView pitViewModel={pitViewModel} onClick={onClick} />;
  };
  const player1Pits = game?.board.player1Pits.map((pit) => {
    const pitViewModel = boardViewModel.pits[pit.index];
    return createPitView(pitViewModel, () => {
      if (game.turnPlayerId === game.player1Id)
        onHoleSelect(game.board.player1Pits.indexOf(pit), pit);
    });
  });
  const player2Pits = game!!.board.player2Pits.map((pit) => {
    const pitViewModel = boardViewModel.pits[pit.index];
    return createPitView(pitViewModel, () => {
      if (game.turnPlayerId === game.player2Id)
        onHoleSelect(game.board.player2Pits.indexOf(pit), pit);
    });
  });
  const isUserTurn = game.checkIsPlayerTurn(userKey);
  const theme = context.themeManager.theme;
  const player1BankViewModel =
    boardViewModel.pits[game.board.player1BankIndex()];
  const player2BankViewModel =
    boardViewModel.pits[game.board.player2BankIndex()];
  const player1Bank = (
    <StoreView
      context={context}
      pitViewModel={player1BankViewModel}
      gridColumn="1 / 2"
      gridRow="1 / 3"
    />
  );
  const player2Bank = (
    <StoreView
      context={context}
      pitViewModel={player2BankViewModel}
      gridColumn="8 / 9"
      gridRow="1 / 3"
    />
  );
  return (
    <div
      style={{
        margin: "10px",
        padding: "20px",
        display: "grid",
        gridTemplateColumns: "repeat(8, 11vw)",
        gridTemplateRows: "repeat(2, 11vw)",
        borderRadius: "3vw",
        transition: "background-color 0.5s",
        background: isUserTurn
          ? theme.boardColor
          : theme.boardColorWhenPlayerTurn,
      }}
    >
      {userKey === game.player2Id ? (
        <>
          <StoreView
            context={context}
            pitViewModel={player1BankViewModel}
            gridColumn="1 / 2"
            gridRow="1 / 3"
          />
          <StoreView
            context={context}
            pitViewModel={player2BankViewModel}
            gridColumn="8 / 9"
            gridRow="1 / 3"
          />
          {player1Pits.reverse()}
          {player2Pits}
        </>
      ) : (
        <>
          <StoreView
            context={context}
            pitViewModel={player1BankViewModel}
            gridColumn="8 / 9"
            gridRow="1 / 3"
          />
          <StoreView
            context={context}
            pitViewModel={player2BankViewModel}
            gridColumn="1 / 2"
            gridRow="1 / 3"
          />
          {player2Pits.reverse()}
          {player1Pits}
        </>
      )}
    </div>
  );
};

export default BoardView;