115 lines
3.9 KiB
TypeScript
115 lines
3.9 KiB
TypeScript
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";
|
|
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}}
|
|
context={context}
|
|
fontSize={pitWidth / 5}
|
|
>
|
|
{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;
|