mancala/mobile/src/components/board/BoardView.tsx

import * as React from "react";
import { FunctionComponent } from "react";
import { Context } from "../../context/context";
import BoardViewModel from "../../viewmodel/BoardViewModel";
import PitViewModel from "../../viewmodel/PitViewModel";
import PitView from "./PitView";
import StoreView from "./StoreView";
import { Game } from "@mancala/core";
import { Pit } from "mancala.js";
import { View, Dimensions } from "react-native";
import StoneView from "./StoneView";
import Util from "../../util/Util";

const BoardView: FunctionComponent<{
  game: Game;
  context: Context;
  boardId: string;
  boardViewModel: BoardViewModel;
  revert: boolean;
  onPitSelect: (index: number, pit: Pit) => void;
}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect: onPitSelect }) => {
  const windowWidth = Dimensions.get('window').width;
  const windowHeight = Dimensions.get('window').height;

  const boardMargin = 0;
  const boardPadding = 10;
  const gap = 5;
  const totalGap = gap * 7;

  const pitWidth = (windowWidth - boardMargin * 2 - boardPadding * 2 - totalGap) / 8;

  const mancalaGame = game?.mancalaGame;
  const theme = context.themeManager.theme;

  const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
      <StoneView key={index} color={pitViewModel.stoneColor} style={{width: pitWidth / 10, height: pitWidth / 10}}/>
    ));
    return <PitView 
    key={key} 
    pitViewModel={pitViewModel} 
    onClick={() => onPitSelect(pit.index, pit)}
    style={{width: pitWidth, height: pitWidth}} > 
      {stones}
    </PitView>;
  };
  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];

  const primaryStoreViewModel = revert ? player1BankViewModel : player2BankViewModel;
  const secondaryStoreViewModel = revert ? player2BankViewModel : player1BankViewModel;
  const stonesPrimaryStore = [...Util.range(primaryStoreViewModel.stoneCount)].map((i, index) => (
    <StoneView key={index} color={primaryStoreViewModel.stoneColor} style={{width: pitWidth / 10, height: pitWidth / 10}}/>
  ));
  const stonesSecondaryStore = [...Util.range(secondaryStoreViewModel.stoneCount)].map((i, index) => (
    <StoneView key={index} color={secondaryStoreViewModel.stoneColor} style={{width: pitWidth / 10, height: pitWidth / 10}} />
  ));

  return (
    <View style={{
      backgroundColor: theme.boardColor,
      padding: boardPadding,
      borderRadius: 20,
      flexDirection: "row",
      gap: gap,
      height: "auto",
    }}>
      <StoreView
        context={context}
        pitViewModel={primaryStoreViewModel}
        style={{width: pitWidth, height: pitWidth * 2 + gap}}
        fontSize={pitWidth / 5}
      >
        {stonesPrimaryStore}
      </StoreView>
      <View style={{flex: 6}}>
        <View style={{
          flexDirection: "row",
          width: '100%',
          flex: 1,
          gap: gap
        }}>
          {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
        </View>
        <View style={{
          flexDirection: "row",
          width: '100%',
          flex: 1,
          gap: gap
        }}>
          {revert ? player2Pits : player1Pits}
        </View>
      </View>
      <StoreView
        context={context}
        pitViewModel={secondaryStoreViewModel}
        style={{width: pitWidth, height: pitWidth * 2 + gap}}
        fontSize={pitWidth / 5}
      >
        {stonesSecondaryStore}
      </StoreView>
    </View>
  );
};

export default BoardView;