diff --git a/src/components/Buttons/NewGameButton.tsx b/src/components/Buttons/NewGameButton.tsx index b5f16a5b..5cc7eb2c 100644 --- a/src/components/Buttons/NewGameButton.tsx +++ b/src/components/Buttons/NewGameButton.tsx @@ -16,7 +16,7 @@ interface Props { const NewGameButton: React.FunctionComponent = ({ navigation }) => { const dispatch = useAppDispatch(); - const gameList = useAppSelector(state => selectAllGames(state)); + const gameList = useAppSelector(selectAllGames); const playerNumberOptions = [...Array.from(Array(12).keys(), n => n + 1)]; @@ -28,9 +28,11 @@ const NewGameButton: React.FunctionComponent = ({ navigation }) => { }); const addGameHandler = async (playerCount: number) => { + console.log('games', gameList); + dispatch( asyncCreateGame({ - gameCount: gameList.length + 1, + gameCount: gameList.length, playerCount: playerCount }) ).then(() => { diff --git a/src/components/PlayerTiles/AdditionTile/Helpers.ts b/src/components/PlayerTiles/AdditionTile/Helpers.ts index 292bfb9c..21bcf45d 100644 --- a/src/components/PlayerTiles/AdditionTile/Helpers.ts +++ b/src/components/PlayerTiles/AdditionTile/Helpers.ts @@ -1,4 +1,4 @@ -import { ZoomIn, ZoomOut , Layout, Easing , withTiming } from 'react-native-reanimated'; +import { Easing, LinearTransition, ZoomIn, ZoomOut, withTiming } from 'react-native-reanimated'; /** * The duration of the animation in milliseconds. @@ -18,7 +18,7 @@ export const exitingAnimation = ZoomOut.duration(animationDuration); /** * The easing and duration of the layout animation. */ -export const layoutAnimation = Layout.easing(Easing.ease).duration(animationDuration); +export const layoutAnimation = LinearTransition.easing(Easing.ease).duration(animationDuration); export const singleLineScoreSizeMultiplier = 1.2; diff --git a/src/screens/ListScreen.tsx b/src/screens/ListScreen.tsx index 3cc32b13..bd96d221 100644 --- a/src/screens/ListScreen.tsx +++ b/src/screens/ListScreen.tsx @@ -4,11 +4,11 @@ import { ParamListBase } from '@react-navigation/native'; import { NativeStackNavigationProp } from '@react-navigation/native-stack'; import { BlurView } from 'expo-blur'; import { StyleSheet, Text, View } from 'react-native'; -import Animated, { Layout, Easing } from 'react-native-reanimated'; +import Animated, { Easing, LinearTransition } from 'react-native-reanimated'; import { SafeAreaView } from 'react-native-safe-area-context'; -import { asyncCreateGame, selectAllGames } from '../../redux/GamesSlice'; -import { useAppSelector, useAppDispatch } from '../../redux/hooks'; +import { selectAllGames } from '../../redux/GamesSlice'; +import { useAppDispatch, useAppSelector } from '../../redux/hooks'; import { setOnboardedVersion } from '../../redux/SettingsSlice'; import GameListItem from '../components/GameListItem'; @@ -20,24 +20,21 @@ const ListScreen: React.FunctionComponent = ({ navigation }) => { const gameList = useAppSelector(state => selectAllGames(state)); const dispatch = useAppDispatch(); - // If no games, create one and navigate to it useEffect(() => { dispatch(setOnboardedVersion()); - - if (gameList.length == 0) { - dispatch(asyncCreateGame({ gameCount: gameList.length + 1, playerCount: 2 })).then(() => { - setTimeout(() => { - navigation.navigate("Game"); - }, 500); - }); - } }, [gameList.length]); return ( } - itemLayoutAnimation={Layout.easing(Easing.ease)} + itemLayoutAnimation={LinearTransition.easing(Easing.ease)} + ListEmptyComponent={ + <> + No Games + Tap the + button above to create a new game. + + } style={styles.list} data={gameList} renderItem={({ item, index }) => @@ -50,6 +47,7 @@ const ListScreen: React.FunctionComponent = ({ navigation }) => { position: 'absolute', bottom: 0, left: 0, right: 0, height: 60, justifyContent: 'flex-start', alignItems: 'center', borderTopWidth: 1, borderColor: '#ccc', + display: gameList.length > 0 ? undefined : 'none', }}> Long press for more options.