From 52ec34ed45b3de96607df54df039d67cccf2b7ba Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Tue, 30 Apr 2024 00:19:34 -0700 Subject: [PATCH 01/17] Add all colors on edit player screen --- .../ColorPalettes/ColorSelector.tsx | 88 +++++++++++++++++++ .../ColorPalettes/PaletteSelector.tsx | 4 +- src/screens/EditPlayerScreen.tsx | 7 +- 3 files changed, 96 insertions(+), 3 deletions(-) create mode 100644 src/components/ColorPalettes/ColorSelector.tsx diff --git a/src/components/ColorPalettes/ColorSelector.tsx b/src/components/ColorPalettes/ColorSelector.tsx new file mode 100644 index 00000000..363dfcbc --- /dev/null +++ b/src/components/ColorPalettes/ColorSelector.tsx @@ -0,0 +1,88 @@ +import React from 'react'; + +import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'; + +import { useAppDispatch, useAppSelector } from '../../../redux/hooks'; +import { selectCurrentGame } from '../../../redux/selectors'; +import { getPalette, getPalettes } from '../../ColorPalette'; + +interface ColorSelectorProps { + // Add any props you need here +} + +const ColorSelector: React.FC = () => { + const colorPalettes = getPalettes(); + const currentGameId = useAppSelector(state => selectCurrentGame(state)?.id); + const currentPalette = useAppSelector(state => selectCurrentGame(state)?.palette); + + if (!currentGameId) return null; + + return ( + + + + + Current Pallete + + + {currentPalette && + + { + getPalette(currentPalette).map((color, i) => ( + + + + )) + } + + } + + + + Other Palletes + + + {colorPalettes.map((palette) => ( + currentPalette !== palette && ( + + { + getPalette(palette).map((color, i) => ( + + + + )) + } + + ) + ))} + + ); +}; + +export default ColorSelector; + +const styles = StyleSheet.create({ + colorBadge: { + borderColor: '#eee', + borderRadius: 25, + height: 25, + marginHorizontal: 5, + padding: 5, + width: 25, + }, + title: { + color: 'white', + }, + titleContainer: { + flexDirection: 'column', + justifyContent: 'space-between', + marginVertical: 20, + } + +}); diff --git a/src/components/ColorPalettes/PaletteSelector.tsx b/src/components/ColorPalettes/PaletteSelector.tsx index 912485ad..a9cb0632 100644 --- a/src/components/ColorPalettes/PaletteSelector.tsx +++ b/src/components/ColorPalettes/PaletteSelector.tsx @@ -9,7 +9,7 @@ import { getPalette, getPalettes } from '../../ColorPalette'; import PalettePreview from './PalettePreview'; -const MemoizedColorCircle = React.memo(PalettePreview); +const MemoizedPalettePreview = React.memo(PalettePreview); const PaletteSelector: React.FunctionComponent = () => { const colorPalettes = getPalettes(); @@ -39,7 +39,7 @@ const PaletteSelector: React.FunctionComponent = () => { ]} onPress={() => onSelect(palette)} > - + ))} diff --git a/src/screens/EditPlayerScreen.tsx b/src/screens/EditPlayerScreen.tsx index da4ab4f1..c9a21712 100644 --- a/src/screens/EditPlayerScreen.tsx +++ b/src/screens/EditPlayerScreen.tsx @@ -3,12 +3,13 @@ import React, { useState } from 'react'; import analytics from '@react-native-firebase/analytics'; import { ParamListBase, RouteProp } from '@react-navigation/native'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; -import { NativeSyntheticEvent, ScrollView, StyleSheet, TextInput, TextInputEndEditingEventData, View } from 'react-native'; +import { NativeSyntheticEvent, ScrollView, StyleSheet, Text, TextInput, TextInputEndEditingEventData, View } from 'react-native'; import { Input } from 'react-native-elements'; import { useAppDispatch, useAppSelector } from '../../redux/hooks'; import { updatePlayer } from '../../redux/PlayersSlice'; import { selectCurrentGame } from '../../redux/selectors'; +import ColorSelector from '../components/ColorPalettes/ColorSelector'; type RouteParams = { EditPlayer: { @@ -118,6 +119,10 @@ const EditPlayerScreen: React.FC = ({ + Select a color + + + ); }; From d58175719a70a8464f57304a648ce894ec629bf7 Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Tue, 30 Apr 2024 01:05:31 -0700 Subject: [PATCH 02/17] Add dev menu --- redux/SettingsSlice.ts | 5 ++++ src/components/AppInfo/RotatingIcon.tsx | 31 +++++++++++++++++++++---- src/screens/AppInfoScreen.tsx | 21 ++++++++++------- 3 files changed, 44 insertions(+), 13 deletions(-) diff --git a/redux/SettingsSlice.ts b/redux/SettingsSlice.ts index 5ec8f2b1..f9cfd66d 100644 --- a/redux/SettingsSlice.ts +++ b/redux/SettingsSlice.ts @@ -17,6 +17,7 @@ export interface SettingsState { showColorPalettes?: boolean; interactionType: InteractionType; lastStoreReviewPrompt: number; + devMenuEnabled?: boolean; }; const initialState: SettingsState = { @@ -72,6 +73,9 @@ const settingsSlice = createSlice({ setLastStoreReviewPrompt(state, action: PayloadAction) { state.lastStoreReviewPrompt = action.payload; }, + toggleDevMenuEnabled(state) { + state.devMenuEnabled = !state.devMenuEnabled; + } } }); @@ -87,6 +91,7 @@ export const { toggleShowColorPalettes, setInteractionType, setLastStoreReviewPrompt, + toggleDevMenuEnabled, } = settingsSlice.actions; export default settingsSlice.reducer; diff --git a/src/components/AppInfo/RotatingIcon.tsx b/src/components/AppInfo/RotatingIcon.tsx index 06768a0a..dfd21cda 100644 --- a/src/components/AppInfo/RotatingIcon.tsx +++ b/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 { - 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 { + 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'); + }}> = ({ navigation }) => { const showPointParticles = useAppSelector(state => state.settings.showPointParticles); const showPlayerIndex = useAppSelector(state => state.settings.showPlayerIndex); const showColorPalettes = useAppSelector(state => state.settings.showColorPalettes); + const devMenuEnabled = useAppSelector(state => state.settings.devMenuEnabled); const dispatch = useAppDispatch(); const toggleParticleSwitch = () => { dispatch(toggleShowPointParticles()); }; @@ -74,14 +75,18 @@ const AppInfoScreen: React.FunctionComponent = ({ navigation }) => { - - - - - - - - + {devMenuEnabled && ( + <> + + + + + + + + + + )}
From 801a44df061f6f53cdee924ec7b1a92138264dd0 Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Tue, 30 Apr 2024 18:56:41 -0700 Subject: [PATCH 03/17] Color selection styles --- src/components/ColorPalettes/ColorSelector.tsx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/ColorPalettes/ColorSelector.tsx b/src/components/ColorPalettes/ColorSelector.tsx index 363dfcbc..6f10641c 100644 --- a/src/components/ColorPalettes/ColorSelector.tsx +++ b/src/components/ColorPalettes/ColorSelector.tsx @@ -33,7 +33,10 @@ const ColorSelector: React.FC = () => { key={'currentPalette' + i} style={[]} > - + )) } @@ -54,7 +57,13 @@ const ColorSelector: React.FC = () => { key={'TO' + i} style={[]} > - + )) } @@ -69,8 +78,10 @@ export default ColorSelector; const styles = StyleSheet.create({ colorBadge: { - borderColor: '#eee', + borderColor: '#999', + borderWidth: 1, borderRadius: 25, + borderStyle: 'solid', height: 25, marginHorizontal: 5, padding: 5, @@ -84,5 +95,4 @@ const styles = StyleSheet.create({ justifyContent: 'space-between', marginVertical: 20, } - }); 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 04/17] 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 - + ); From ae4503dc0332180389cf791b975743a2bb42473d Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Wed, 1 May 2024 00:30:19 -0700 Subject: [PATCH 05/17] Move palette selector to game settings --- src/components/EditGame.tsx | 10 ++++++++++ src/components/Sheets/GameSheet.tsx | 7 ------- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/components/EditGame.tsx b/src/components/EditGame.tsx index d375df9e..002d0256 100644 --- a/src/components/EditGame.tsx +++ b/src/components/EditGame.tsx @@ -7,6 +7,8 @@ import { updateGame } from '../../redux/GamesSlice'; import { useAppDispatch, useAppSelector } from '../../redux/hooks'; import { selectCurrentGame } from '../../redux/selectors'; +import PaletteSelector from './ColorPalettes/PaletteSelector'; + const UNTITLED = 'Untitled'; const EditGame = ({ }) => { @@ -48,6 +50,8 @@ const EditGame = ({ }) => { })); }; + const showColorPalettes = useAppSelector(state => state.settings.showColorPalettes); + return ( <> @@ -69,6 +73,12 @@ const EditGame = ({ }) => {   {new Date(currentGame.dateCreated).toLocaleTimeString()} + + + {showColorPalettes && + + } + ); }; diff --git a/src/components/Sheets/GameSheet.tsx b/src/components/Sheets/GameSheet.tsx index f4909295..aa660cb7 100644 --- a/src/components/Sheets/GameSheet.tsx +++ b/src/components/Sheets/GameSheet.tsx @@ -13,7 +13,6 @@ import { useAppDispatch, useAppSelector } from '../../../redux/hooks'; import { updatePlayer } from '../../../redux/PlayersSlice'; import { systemBlue } from '../../constants'; import BigButton from '../BigButtons/BigButton'; -import PaletteSelector from '../ColorPalettes/PaletteSelector'; import RematchIcon from '../Icons/RematchIcon'; import Rounds from '../Rounds'; @@ -190,8 +189,6 @@ const GameSheet: React.FunctionComponent = ({ navigation, containerHeight [] ); - const showColorPalettes = useAppSelector(state => state.settings.showColorPalettes); - return ( = ({ navigation, containerHeight - {showColorPalettes && - - } - Tap the player column to toggle sorting by total score and original order. From da2913d0bf569615ba8dda34b8388269a56f4893 Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Wed, 1 May 2024 00:30:37 -0700 Subject: [PATCH 06/17] Fix game settings screen player order --- src/screens/SettingsScreen.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx index 0a1edba6..02d31e04 100644 --- a/src/screens/SettingsScreen.tsx +++ b/src/screens/SettingsScreen.tsx @@ -14,7 +14,6 @@ import { playerAdd } from '../../redux/PlayersSlice'; import { selectCurrentGame } from '../../redux/selectors'; import EditGame from '../components/EditGame'; import PlayerListItem from '../components/PlayerListItem'; -import { selectPlayerIdsByIndex } from '../components/ScoreLog/SortHelper'; import { MAX_PLAYERS, systemBlue } from '../constants'; import logger from '../Logger'; @@ -33,13 +32,13 @@ const SettingsScreen: React.FunctionComponent = ({ navigation }) => { const dispatch = useAppDispatch(); const currentGameId = useAppSelector(state => state.settings.currentGameId); - if (typeof currentGameId == 'undefined') return null; - const currentGame = useAppSelector(selectCurrentGame); - const playerIds = useAppSelector(selectPlayerIdsByIndex); - + const playerIds = useAppSelector(state => selectCurrentGame(state)?.playerIds); const [edit, setEdit] = React.useState(false); + if (typeof currentGameId == 'undefined') return null; + if (typeof playerIds == 'undefined') return null; + const addPlayerHandler = async () => { if (currentGame == undefined) return; From a4664220145d2b11d1598936d693f38dce4c9c64 Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Wed, 1 May 2024 00:39:26 -0700 Subject: [PATCH 07/17] clean up --- src/components/Boards/FlexboxTile.tsx | 3 +-- src/components/ScoreLog/PlayerNameColumn.tsx | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/Boards/FlexboxTile.tsx b/src/components/Boards/FlexboxTile.tsx index cf64b34a..c7a1b3f3 100644 --- a/src/components/Boards/FlexboxTile.tsx +++ b/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,7 +32,6 @@ const FlexboxTile: React.FunctionComponent = ({ 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, playerId)); const [bg, fg] = playerColors; diff --git a/src/components/ScoreLog/PlayerNameColumn.tsx b/src/components/ScoreLog/PlayerNameColumn.tsx index 35516924..984209bd 100644 --- a/src/components/ScoreLog/PlayerNameColumn.tsx +++ b/src/components/ScoreLog/PlayerNameColumn.tsx @@ -17,7 +17,6 @@ interface CellProps { } const PlayerNameCell: React.FunctionComponent = ({ index, playerId }) => { - const currentGameId = useAppSelector(state => selectCurrentGame(state)?.id); const playerColors = useAppSelector(state => selectPlayerColors(state, playerId)); const playerName = useAppSelector(state => selectPlayerById(state, playerId)?.playerName); From 46f263a8132d662ff6c46da1fef663ece3847c2e Mon Sep 17 00:00:00 2001 From: Justin Wyne <1986068+wyne@users.noreply.github.com> Date: Wed, 1 May 2024 01:01:38 -0700 Subject: [PATCH 08/17] Save colors on players when palette changes --- redux/GamesSlice.ts | 36 +++++++++++++++++-- .../ColorPalettes/PaletteSelector.tsx | 12 +++---- src/components/Sheets/GameSheet.tsx | 2 +- 3 files changed, 41 insertions(+), 9 deletions(-) diff --git a/redux/GamesSlice.ts b/redux/GamesSlice.ts index 5a806280..7aaf1b87 100644 --- a/redux/GamesSlice.ts +++ b/redux/GamesSlice.ts @@ -7,9 +7,10 @@ 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'; +import { set } from 'lodash'; export interface GameState { id: string; @@ -98,7 +99,8 @@ const gamesSlice = createSlice({ playerIds: action.payload.playerIds, } }); - } + }, + } }); @@ -159,6 +161,36 @@ 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 ( diff --git a/src/components/ColorPalettes/PaletteSelector.tsx b/src/components/ColorPalettes/PaletteSelector.tsx index a9cb0632..7dcd64c5 100644 --- a/src/components/ColorPalettes/PaletteSelector.tsx +++ b/src/components/ColorPalettes/PaletteSelector.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { ScrollView, StyleSheet, TouchableOpacity } from 'react-native'; -import { updateGame } from '../../../redux/GamesSlice'; +import { asyncSetGamePalette, updateGame } from '../../../redux/GamesSlice'; import { useAppDispatch, useAppSelector } from '../../../redux/hooks'; import { selectCurrentGame } from '../../../redux/selectors'; import { getPalette, getPalettes } from '../../ColorPalette'; @@ -21,12 +21,12 @@ const PaletteSelector: React.FunctionComponent = () => { if (!currentGameId) return null; const onSelect = (palette: string) => { - dispatch(updateGame({ - id: currentGameId, - changes: { + dispatch( + asyncSetGamePalette({ + gameId: currentGameId, palette: palette, - } - })); + }) + ); }; return ( diff --git a/src/components/Sheets/GameSheet.tsx b/src/components/Sheets/GameSheet.tsx index aa660cb7..c604fc4e 100644 --- a/src/components/Sheets/GameSheet.tsx +++ b/src/components/Sheets/GameSheet.tsx @@ -237,7 +237,7 @@ const GameSheet: React.FunctionComponent = ({ navigation, containerHeight {!gameLocked && -