Write and read individual player colors

wyne · May 1, 2024 · 6002c98 · 6002c98
1 parent 801a44d
commit 6002c98
Show file tree

Hide file tree

Showing 6 changed files with 43 additions and 18 deletions.
diff --git 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
@@ -34,7 +34,7 @@ const FlexboxTile: React.FunctionComponent<Props> = ({
 
     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
@@ -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<ColorSelectorProps> = () => {
+const ColorSelector: React.FC<ColorSelectorProps> = ({ 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 (
         <View style={{ flexDirection: 'column' }}>
 
@@ -31,11 +45,13 @@ const ColorSelector: React.FC<ColorSelectorProps> = () => {
                         getPalette(currentPalette).map((color, i) => (
                             <TouchableOpacity
                                 key={'currentPalette' + i}
-                                style={[]}
+                                onPress={() => tapColorHandler(color)}
                             >
                                 <View style={{
                                     ...styles.colorBadge, backgroundColor: color,
-                                    borderColor: i % 5 == 0 ? 'white' : 'transparent',
+                                    borderWidth: color == playerColor ? 2 : 1,
+                                    borderColor: color == playerColor ? 'white' : '#999',
+                                    borderRadius: color == playerColor ? 3 : 25,
                                 }} />
                             </TouchableOpacity>
                         ))
@@ -55,14 +71,14 @@ const ColorSelector: React.FC<ColorSelectorProps> = () => {
                             getPalette(palette).map((color, i) => (
                                 <TouchableOpacity
                                     key={'TO' + i}
-                                    style={[]}
+                                    onPress={() => tapColorHandler(color)}
                                 >
                                     <View style={{
                                         ...styles.colorBadge, backgroundColor: color,
-                                        borderWidth: i % 5 == 0 ? 2 : 1,
-                                        borderColor: i % 5 == 0 ? 'white' : '#999',
+                                        borderWidth: color == playerColor ? 2 : 1,
+                                        borderColor: color == playerColor ? 'white' : '#999',
                                         // TODO: Animated this for fun
-                                        borderRadius: i % 5 == 0 ? 3 : 25,
+                                        borderRadius: color == playerColor ? 3 : 25,
                                     }} />
                                 </TouchableOpacity>
                             ))

diff --git a/src/components/PlayerListItem.tsx b/src/components/PlayerListItem.tsx
@@ -31,7 +31,7 @@ const PlayerListItem: React.FunctionComponent<Props> = ({
     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
@@ -18,7 +18,7 @@ interface CellProps {
 
 const PlayerNameCell: React.FunctionComponent<CellProps> = ({ 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
@@ -121,7 +121,7 @@ const EditPlayerScreen: React.FC<EditPlayerScreenProps> = ({
 
             <Text style={{ color: 'white' }}>Select a color</Text>
 
-            <ColorSelector />
+            <ColorSelector playerId={playerId} />
 
         </ScrollView>
     );