From 6002c989e3369e4074a0d4097e6b8fd2fb2846f6 Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Wed, 1 May 2024 00:21:10 -0700 Subject: [PATCH] Write and read individual player colors --- redux/GamesSlice.ts | 21 ++++++++---- src/components/Boards/FlexboxTile.tsx | 2 +- .../ColorPalettes/ColorSelector.tsx | 32 ++++++++++++++----- src/components/PlayerListItem.tsx | 2 +- src/components/ScoreLog/PlayerNameColumn.tsx | 2 +- src/screens/EditPlayerScreen.tsx | 2 +- 6 files changed, 43 insertions(+), 18 deletions(-) diff --git a/redux/GamesSlice.ts b/redux/GamesSlice.ts index 8253d4d4..5a806280 100644 --- a/redux/GamesSlice.ts +++ b/redux/GamesSlice.ts @@ -204,17 +204,26 @@ export const selectSortSelectorKey = (state: RootState, gameId: string) => { return key !== undefined ? key : SortSelectorKey.ByScore; }; -const selectPaletteName = (state: RootState, gameId: string) => state.games.entities[gameId]?.palette; -const selectPlayerIndex = (_: RootState, __: string, playerIndex: number) => playerIndex; - export const selectPlayerColors = createSelector( - [selectPaletteName, selectPlayerIndex], - (paletteName, playerIndex) => { + [ + (state: RootState, playerId: string) => { + const gameId = selectAllGames(state).filter((game) => game.playerIds.includes(playerId))[0].id; + const paletteName = state.games.entities[gameId]?.palette; + + const playerColor = state.players.entities[playerId]?.color; + + const playerIndex = state.games.entities[gameId]?.playerIds.indexOf(playerId) || 0; + + return { paletteName, playerColor, playerIndex }; + }, + ], + ({ paletteName, playerColor, playerIndex }) => { // TODO: Get player color if it exists const palette = getPalette(paletteName || 'original'); + const paletteBG = palette[playerIndex % palette.length]; - const bg = palette[playerIndex % palette.length]; + const bg = playerColor || paletteBG; const blackContrast = getContrastRatio(bg, '#000').number; const whiteContrast = getContrastRatio(bg, '#fff').number; diff --git a/src/components/Boards/FlexboxTile.tsx b/src/components/Boards/FlexboxTile.tsx index 3b890616..cf64b34a 100644 --- a/src/components/Boards/FlexboxTile.tsx +++ b/src/components/Boards/FlexboxTile.tsx @@ -34,7 +34,7 @@ const FlexboxTile: React.FunctionComponent = ({ const currentGameId = useAppSelector(state => selectCurrentGame(state)?.id); const playerIndexLabel = useAppSelector(state => state.settings.showPlayerIndex); - const playerColors = useAppSelector(state => selectPlayerColors(state, currentGameId || '', index || 0)); + const playerColors = useAppSelector(state => selectPlayerColors(state, playerId)); const [bg, fg] = playerColors; const widthPerc: DimensionValue = `${(100 / cols)}%`; diff --git a/src/components/ColorPalettes/ColorSelector.tsx b/src/components/ColorPalettes/ColorSelector.tsx index 6f10641c..db66688c 100644 --- a/src/components/ColorPalettes/ColorSelector.tsx +++ b/src/components/ColorPalettes/ColorSelector.tsx @@ -3,20 +3,34 @@ import React from 'react'; import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; import { useAppDispatch, useAppSelector } from '../../../redux/hooks'; +import { updatePlayer } from '../../../redux/PlayersSlice'; import { selectCurrentGame } from '../../../redux/selectors'; import { getPalette, getPalettes } from '../../ColorPalette'; interface ColorSelectorProps { - // Add any props you need here + playerId: string; } -const ColorSelector: React.FC = () => { +const ColorSelector: React.FC = ({ playerId }) => { const colorPalettes = getPalettes(); const currentGameId = useAppSelector(state => selectCurrentGame(state)?.id); const currentPalette = useAppSelector(state => selectCurrentGame(state)?.palette); + const playerColor = useAppSelector(state => state.players.entities[playerId]?.color); + + console.log('player color: ', playerColor); if (!currentGameId) return null; + const dispatch = useAppDispatch(); + + const tapColorHandler = (color: string) => { + console.log('ColorSelector.tsx tapColorHandler color:', color); + dispatch(updatePlayer({ + id: playerId, + changes: { color: color } + })); + }; + return ( @@ -31,11 +45,13 @@ const ColorSelector: React.FC = () => { getPalette(currentPalette).map((color, i) => ( tapColorHandler(color)} > )) @@ -55,14 +71,14 @@ const ColorSelector: React.FC = () => { getPalette(palette).map((color, i) => ( tapColorHandler(color)} > )) diff --git a/src/components/PlayerListItem.tsx b/src/components/PlayerListItem.tsx index ed03e192..581ca685 100644 --- a/src/components/PlayerListItem.tsx +++ b/src/components/PlayerListItem.tsx @@ -31,7 +31,7 @@ const PlayerListItem: React.FunctionComponent = ({ const currentGameId = useAppSelector(state => selectCurrentGame(state)?.id); const playerIds = useAppSelector(state => selectGameById(state, currentGameId || '')?.playerIds); const player = useAppSelector(state => selectPlayerById(state, playerId)); - const playerColors = useAppSelector(state => selectPlayerColors(state, currentGameId || '', index || 0)); + const playerColors = useAppSelector(state => selectPlayerColors(state, playerId)); if (currentGameId == '' || currentGameId === undefined) return null; if (playerIds === undefined) return null; diff --git a/src/components/ScoreLog/PlayerNameColumn.tsx b/src/components/ScoreLog/PlayerNameColumn.tsx index 525f0fc8..35516924 100644 --- a/src/components/ScoreLog/PlayerNameColumn.tsx +++ b/src/components/ScoreLog/PlayerNameColumn.tsx @@ -18,7 +18,7 @@ interface CellProps { const PlayerNameCell: React.FunctionComponent = ({ index, playerId }) => { const currentGameId = useAppSelector(state => selectCurrentGame(state)?.id); - const playerColors = useAppSelector(state => selectPlayerColors(state, currentGameId || '', index || 0)); + const playerColors = useAppSelector(state => selectPlayerColors(state, playerId)); const playerName = useAppSelector(state => selectPlayerById(state, playerId)?.playerName); return ( diff --git a/src/screens/EditPlayerScreen.tsx b/src/screens/EditPlayerScreen.tsx index c9a21712..d9829ffe 100644 --- a/src/screens/EditPlayerScreen.tsx +++ b/src/screens/EditPlayerScreen.tsx @@ -121,7 +121,7 @@ const EditPlayerScreen: React.FC = ({ Select a color - + );