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