jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add key for board list items

Browse Source
This commit is contained in:
Halit Aksoy 2022-07-13 22:39:24 +03:00
parent 9fcb3e8e71
commit 0c8704cf80
1 changed files with 10 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/BoardView.tsx
View File

@ -33,8 +33,8 @@ const HoleView: FunctionComponent<{
pitViewModel: PitViewModel;
onClick: () => void;
}> = ({ pitViewModel, onClick }) => {
const balls = [...range(pitViewModel.stoneCount)].map((i) => (
<BallView color={pitViewModel.stoneColor} />
const balls = [...range(pitViewModel.stoneCount)].map((i, index) => (
<BallView key={index} color={pitViewModel.stoneColor} />
));
return (
@ -65,8 +65,8 @@ const StoreView: FunctionComponent<{
gridColumn: string;
gridRow: string;
}> = ({ context, pitViewModel, gridColumn, gridRow }) => {
const balls = [...range(pitViewModel.stoneCount)].map((i) => (
<BallView color={pitViewModel.stoneColor} />
const balls = [...range(pitViewModel.stoneCount)].map((i, index) => (
<BallView key={index} color={pitViewModel.stoneColor} />
));
const textColor = getColorByBrightness(
pitViewModel.pitColor,
@ -114,24 +114,23 @@ const BoardView: FunctionComponent<{
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 createPitView = (key: any, pitViewModel: PitViewModel, onClick: () => void) => {
return <HoleView key={key} pitViewModel={pitViewModel} onClick={onClick} />;
};
const player1Pits = game?.board.player1Pits.map((pit) => {
const player1Pits = game?.board.player1Pits.map((pit, index) => {
const pitViewModel = boardViewModel.pits[pit.index];
return createPitView(pitViewModel, () => {
return createPitView(index, pitViewModel, () => {
if (game.turnPlayerId === game.player1Id)
onHoleSelect(game.board.player1Pits.indexOf(pit), pit);
});
});
const player2Pits = game!!.board.player2Pits.map((pit) => {
const player2Pits = game!!.board.player2Pits.map((pit, index) => {
const pitViewModel = boardViewModel.pits[pit.index];
return createPitView(pitViewModel, () => {
return createPitView(index, 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()];