Link color palettes

wyne · Apr 17, 2024 · 0844cb6 · 0844cb6
1 parent a2ead9d
commit 0844cb6
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 38 deletions.
diff --git a/src/components/PlayerListItem.tsx b/src/components/PlayerListItem.tsx
@@ -10,7 +10,7 @@ import { updateGame } from '../../redux/GamesSlice';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { removePlayer, selectPlayerById } from '../../redux/PlayersSlice';
 import { selectCurrentGame } from '../../redux/selectors';
-import { palette } from '../constants';
+import { getPlayerColors } from '../ColorPalette';
 
 interface Props {
     playerId: string;
@@ -96,15 +96,15 @@ const PlayerListItem: React.FunctionComponent<Props> = ({
                 style={[{
                     flexDirection: 'row',
                     alignItems: 'center',
-                }]} >
+                }]}>
 
                 <Text style={styles.playerNumber}>
                     {index + 1}
                 </Text>
 
                 <View style={[
                     styles.colorBadge,
-                    { backgroundColor: '#' + palette[index % palette.length] }
+                    { backgroundColor: getPlayerColors(index)[0] }
                 ]} />
 
                 <Text style={[styles.input]}>

diff --git a/src/components/ScoreLog/PlayerNameColumn.tsx b/src/components/ScoreLog/PlayerNameColumn.tsx
@@ -7,7 +7,8 @@ import { Icon } from 'react-native-elements/dist/icons/Icon';
 import { useAppSelector } from '../../../redux/hooks';
 import { selectCurrentGame } from '../../../redux/selectors';
 import { RootState } from '../../../redux/store';
-import { palette, systemBlue } from '../../constants';
+import { getPlayerColors } from '../../ColorPalette';
+import { systemBlue } from '../../constants';
 
 const selectPlayerEntities = (state: RootState) => state.players.entities;
 
@@ -33,7 +34,7 @@ const PlayerNameColumn: React.FunctionComponent = () => {
                     color='white' />
             </Text>
             {playerNames.map((name, index) => (
-                <View key={index} style={{ paddingLeft: 5, borderLeftWidth: 5, borderColor: '#' + palette[index % palette.length] }}>
+                <View key={index} style={{ paddingLeft: 5, borderLeftWidth: 5, borderColor: getPlayerColors(index)[0] }}>
                     <Text key={index} style={{ color: 'white', maxWidth: 100, fontSize: 20, }}
                         numberOfLines={1}
                     >{name}</Text>

diff --git a/src/constants.ts b/src/constants.ts
@@ -1,14 +1,4 @@
 export const systemBlue = '#0a84ff';
-export const palette = [
-    '#f9d5e5',
-    '#eeac99',
-    '#e06377',
-    '#c83349',
-    '#5b9aa0',
-    '#d1b59b',
-    '#8f3e3f',
-    '#f6416c',
-];
 export const STORAGE_KEY = {
     GAMES_LIST: '@games_list',
 };

diff --git a/src/screens/EditPlayerScreen.tsx b/src/screens/EditPlayerScreen.tsx
@@ -9,7 +9,6 @@ import { Input } from 'react-native-elements';
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 import { updatePlayer } from '../../redux/PlayersSlice';
 import { selectCurrentGame } from '../../redux/selectors';
-import { palette } from '../constants';
 
 type RouteParams = {
     EditPlayer: {
@@ -117,28 +116,6 @@ const EditPlayerScreen: React.FC<EditPlayerScreenProps> = ({
                 value={localPlayerName}
             />
 
-            <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-around',
-                alignItems: 'center',
-                padding: 10,
-                paddingVertical: 20,
-            }}>
-                {
-                    palette.map((color, i) => (
-                        <View style={[
-                            styles.colorBadge,
-                            {
-                                borderWidth: i == index ? 2 : 0,
-                                backgroundColor: '#' + color,
-                                height: i == index ? 30 : 20,
-                                width: i == index ? 30 : 20,
-                            }
-                        ]} />
-                    ))
-                }
-            </View>
-
             <View style={{ margin: 20 }} />
 
             <Text style={{ color: 'white' }}>Local State: {localPlayerName}</Text>