Color Palettes

Contributing.md

@@ -9,10 +9,10 @@ For android, use JDK 17.
 ```zsh
 npx react-native-clean-project
 npx expo prebuild
-eas build --profile development-simulator --platform ios --local
-eas build --profile development-simulator --platform android --local
-eas build:run -p ios # select expo build from above
-eas build:run -p android # select expo build from above
+npx eas build --profile development-simulator --platform ios --local
+npx eas build --profile development-simulator --platform android --local
+npx eas build:run -p ios # select expo build from above
+npx eas build:run -p android # select expo build from above
 npx expo start --dev-client
 ```
 

redux/GamesSlice.ts

@@ -7,7 +7,7 @@ import { getPalette } from '../src/ColorPalette';
 import { SortDirectionKey, SortSelectorKey } from '../src/components/ScoreLog/SortHelper';
 import logger from '../src/Logger';
 
-import { playerAdd, selectPlayerById } from './PlayersSlice';
+import { playerAdd, selectPlayerById, updatePlayer } from './PlayersSlice';
 import { setCurrentGameId } from './SettingsSlice';
 import { RootState } from './store';
 
@@ -34,6 +34,7 @@ const initialState = gamesAdapter.getInitialState({
     locked: false,
     sortSelectorKey: SortSelectorKey.ByIndex,
     sortDirectionKey: SortDirectionKey.Normal,
+    palette: 'original',
 });
 
 const gamesSlice = createSlice({
@@ -98,7 +99,8 @@ const gamesSlice = createSlice({
                     playerIds: action.payload.playerIds,
                 }
             });
-        }
+        },
+
     }
 });
 
@@ -159,6 +161,35 @@ export const asyncRematchGame = createAsyncThunk(
     }
 );
 
+export const asyncSetGamePalette = createAsyncThunk(
+    'games/setpalette',
+    async (
+        { gameId, palette }: { gameId: string, palette: string; },
+        { dispatch, getState }
+    ) => {
+        // Update game
+        dispatch(updateGame({
+            id: gameId,
+            changes: {
+                palette: palette,
+            }
+        }));
+        // Get palette colors
+        const paletteColors = getPalette(palette);
+
+        const game = selectGameById(getState() as RootState, gameId);
+
+        // Update players
+        game?.playerIds.forEach((playerId) => {
+            const color = paletteColors[game.playerIds.indexOf(playerId) % paletteColors.length];
+            dispatch(updatePlayer({
+                id: playerId,
+                changes: { color: color }
+            }));
+        });
+    }
+);
+
 export const asyncCreateGame = createAsyncThunk(
     'games/create',
     async (
@@ -172,20 +203,24 @@ export const asyncCreateGame = createAsyncThunk(
             playerIds.push(Crypto.randomUUID());
         }
 
-        playerIds.forEach((playerId) => {
+        const paletteName = initialState.palette;
+        const paletteColors = getPalette(paletteName);
+
+        playerIds.forEach((playerId, index) => {
+            const color = paletteColors[index % paletteColors.length];
             dispatch(playerAdd({
                 id: playerId,
                 playerName: `Player ${playerIds.indexOf(playerId) + 1}`,
                 scores: [0],
+                color: color,
             }));
         });
 
         dispatch(gameSave({
+            ...initialState,
             id: newGameId,
             title: `Game ${gameCount + 1}`,
             dateCreated: Date.now(),
-            roundCurrent: 0,
-            roundTotal: 1,
             playerIds: playerIds,
         }));
 
@@ -199,22 +234,60 @@ export const asyncCreateGame = createAsyncThunk(
     }
 );
 
+export const addPlayer = createAsyncThunk(
+    'games/addplayer',
+    async (
+        { gameId, playerName }: { gameId: string, playerName: string; },
+        { dispatch, getState }
+    ) => {
+        const playerId = Crypto.randomUUID();
+        const s = getState() as RootState;
+        const paletteName = s.games.entities[gameId]?.palette;
+        const palette = getPalette(paletteName || 'original');
+        const playerIndex = s.games.entities[gameId]?.playerIds.length || 0;
+        const paletteColor = palette[playerIndex % palette.length];
+
+        dispatch(playerAdd({
+            id: playerId,
+            playerName: playerName,
+            scores: [0],
+            color: paletteColor,
+        }));
+
+        dispatch(updateGame({
+            id: gameId,
+            changes: {
+                playerIds: [...selectGameById(getState() as RootState, gameId)?.playerIds || [], playerId],
+            }
+        }));
+
+        return playerId;
+    }
+);
+
 export const selectSortSelectorKey = (state: RootState, gameId: string) => {
     const key = selectGameById(state, gameId)?.sortSelectorKey;
     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) => {
-        // TODO: Get player color if it exists
+    [
+        (state: RootState, playerId: string) => {
+            const gameId = selectAllGames(state).filter((game) => game.playerIds.includes(playerId))[0].id;
+            const paletteName = state.games.entities[gameId]?.palette;
 
-        const palette = getPalette(paletteName || 'original');
+            const playerColor = state.players.entities[playerId]?.color;
+
+            const playerIndex = state.games.entities[gameId]?.playerIds.indexOf(playerId) || 0;
+
+            return { paletteName, playerColor, playerIndex };
+        },
+    ],
+    ({ paletteName, playerColor, playerIndex }) => {
+        const palette = getPalette(paletteName || 'original') || getPalette('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;

redux/SettingsSlice.ts

@@ -17,6 +17,7 @@ export interface SettingsState {
     showColorPalettes?: boolean;
     interactionType: InteractionType;
     lastStoreReviewPrompt: number;
+    devMenuEnabled?: boolean;
 };
 
 const initialState: SettingsState = {
@@ -26,8 +27,9 @@ const initialState: SettingsState = {
     addendTwo: 10,
     currentGameId: undefined,
     onboarded: undefined,
-    showPointParticles: true,
+    showPointParticles: false,
     showPlayerIndex: false,
+    showColorPalettes: false,
     interactionType: InteractionType.SwipeVertical,
     lastStoreReviewPrompt: 0,
 };
@@ -72,6 +74,9 @@ const settingsSlice = createSlice({
         setLastStoreReviewPrompt(state, action: PayloadAction<number>) {
             state.lastStoreReviewPrompt = action.payload;
         },
+        toggleDevMenuEnabled(state) {
+            state.devMenuEnabled = !state.devMenuEnabled;
+        }
     }
 });
 
@@ -87,6 +92,7 @@ export const {
     toggleShowColorPalettes,
     setInteractionType,
     setLastStoreReviewPrompt,
+    toggleDevMenuEnabled,
 } = settingsSlice.actions;
 
 export default settingsSlice.reducer;

src/ColorPalette.ts

@@ -14,6 +14,20 @@ const palettes: PaletteType = {
         '#755647',
         '#925561',
     ],
+    'c': [
+        '#88498f',
+        '#779fa1',
+        '#e0cba8',
+        '#ff6542',
+        '#564154'
+    ],
+    'd': [
+        '#f8ffe5',
+        '#06d6a0',
+        '#1b9aaa',
+        '#ef476f',
+        '#ffc43d'
+    ],
     'pastel': [
         '#f9d5e5',
         '#eeac99',
@@ -25,13 +39,19 @@ const palettes: PaletteType = {
         '#f6416c',
     ],
     'dark': [
-        '#011627',
         '#fdfffc',
         '#2ec4b6',
         '#e71d36',
         '#ff9f1c',
         '#f3722c',
     ],
+    'f': [
+        '#fcaa67',
+        '#b0413e',
+        '#ffffc7',
+        '#548687',
+        '#473335'
+    ],
     'grey': [
         '#f8f9fa',
         '#e9ecef',
@@ -44,52 +64,6 @@ const palettes: PaletteType = {
         '#212529',
         '#000000',
     ],
-    'a': [
-        '#114b5f',
-        '#456990',
-        '#e4fde1',
-        '#f45b69',
-        '#6b2737'
-    ],
-    'b': [
-        '#c25858',
-        '#01497c',
-    ],
-    'c': [
-        '#88498f',
-        '#779fa1',
-        '#e0cba8',
-        '#ff6542',
-        '#564154'
-    ],
-    'd': [
-        '#f8ffe5',
-        '#06d6a0',
-        '#1b9aaa',
-        '#ef476f',
-        '#ffc43d'
-    ],
-    'e': [
-        '#1f2041',
-        '#4b3f72',
-        '#ffc857',
-        '#119da4',
-        '#19647e'
-    ],
-    'f': [
-        '#fcaa67',
-        '#b0413e',
-        '#ffffc7',
-        '#548687',
-        '#473335'
-    ],
-    'g': [
-        '#ffa400',
-        '#009ffd',
-        '#2a2a72',
-        '#232528',
-        '#eaf6ff'
-    ]
 };
 
 export const getPalettes = (): string[] => {

src/components/AppInfo/RotatingIcon.tsx

@@ -10,7 +10,12 @@ import Animated, {
     withTiming
 } from 'react-native-reanimated';
 
+import { useAppDispatch } from '../../../redux/hooks';
+import { toggleDevMenuEnabled } from '../../../redux/SettingsSlice';
+
 const RotatingIcon: React.FunctionComponent = ({ }) => {
+    const dispatch = useAppDispatch();
+
     const rotation = useSharedValue(0);
     const rotationCount = useSharedValue(1);
     const animatedStyles = useAnimatedStyle(() => {
@@ -21,12 +26,28 @@ const RotatingIcon: React.FunctionComponent = ({ }) => {
         };
     });
 
-    return <TouchableWithoutFeedback onPress={async () => {
-        rotationCount.value = rotationCount.value + 1;
-        rotation.value = withTiming((rotationCount.value * 90), { duration: 1000, easing: Easing.elastic(1) });
+    let holdCallback: NodeJS.Timeout;
+    const onPressIn = () => {
+        holdCallback = setTimeout(() => {
+            dispatch(toggleDevMenuEnabled());
+            // spring expand animate the Animated.View
+        }, 5000);
+    };
+
+    const onPressOut = () => {
+        if (holdCallback == null) return;
+        clearTimeout(holdCallback);
+    };
+
+    return <TouchableWithoutFeedback
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onPress={async () => {
+            rotationCount.value = rotationCount.value + 1;
+            rotation.value = withTiming((rotationCount.value * 90), { duration: 1000, easing: Easing.elastic(1) });
 
-        await analytics().logEvent('app_icon');
-    }}>
+            await analytics().logEvent('app_icon');
+        }}>
         <Animated.View style={[animatedStyles]}>
             <Image source={require('../../../assets/icon.png')}
                 contentFit='contain'

src/components/Boards/FlexboxBoard.tsx

@@ -27,7 +27,7 @@ const FlexboxBoard: React.FC<FlexboxBoardProps> = () => {
 
     const playerCount = playerIds.length;
 
-    const desiredAspectRatio = 0.8;
+    const desiredAspectRatio = 1;
 
     const layoutHandler = (e: LayoutChangeEvent) => {
         const { width, height } = e.nativeEvent.layout;

src/components/Boards/FlexboxTile.tsx

@@ -5,7 +5,7 @@ import Animated, { Easing, FadeIn } from 'react-native-reanimated';
 
 import { selectPlayerColors } from '../../../redux/GamesSlice';
 import { useAppSelector } from '../../../redux/hooks';
-import { selectCurrentGame, selectInteractionType } from '../../../redux/selectors';
+import { selectInteractionType } from '../../../redux/selectors';
 import { interactionComponents } from '../Interactions/InteractionComponents';
 import { InteractionType } from '../Interactions/InteractionType';
 import AdditionTile from '../PlayerTiles/AdditionTile/AdditionTile';
@@ -32,9 +32,8 @@ const FlexboxTile: React.FunctionComponent<Props> = ({
     if (!(width > 0 && height > 0)) return null;
     if (Number.isNaN(width) || Number.isNaN(height)) return null;
 
-    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)}%`;