Merge pull request #347 from wyne/Styling

Styling

package.json

@@ -20,6 +20,7 @@
     "@react-native-firebase/auth": "^18.3.0",
     "@react-native-firebase/crashlytics": "^18.3.0",
     "@react-native-menu/menu": "^0.8.0",
+    "@react-native-picker/picker": "2.4.10",
     "@react-navigation/drawer": "^6.6.2",
     "@react-navigation/native": "^6.1.4",
     "@react-navigation/native-stack": "^6.9.12",
@@ -69,8 +70,7 @@
     "react-redux": "^8.0.2",
     "redux-persist": "^6.0.0",
     "semver": "^7.5.4",
-    "typescript": "^5.1.6",
-    "@react-native-picker/picker": "2.4.10"
+    "typescript": "^5.1.6"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",
@@ -100,4 +100,4 @@
   "private": true,
   "name": "scorepad",
   "version": "1.0.0"
-}
+}

redux/GamesSlice.test.ts

@@ -39,7 +39,7 @@ describe('games reducer', () => {
             throw new Error('game1 not found');
         }
         expect(state.entities.game1.roundCurrent).toBe(1);
-        expect(state.entities.game1.roundTotal).toBe(1);
+        expect(state.entities.game1.roundTotal).toBe(2);
     });
 
     it('should handle roundPrevious', () => {

redux/GamesSlice.ts

@@ -36,7 +36,7 @@ const gamesSlice = createSlice({
                 id: action.payload,
                 changes: {
                     roundCurrent: game.roundCurrent + 1,
-                    roundTotal: Math.max(game.roundTotal, game.roundCurrent + 1)
+                    roundTotal: Math.max(game.roundTotal, game.roundCurrent + 2)
                 }
             });
         },
@@ -65,30 +65,32 @@ interface GamesSlice {
 
 export const asyncCreateGame = createAsyncThunk(
     'games/create',
-    async (gameCount: number, { dispatch }) => {
-        const player1Id = Crypto.randomUUID();
-        const player2Id = Crypto.randomUUID();
+    async (
+        { gameCount, playerCount }: { gameCount: number, playerCount: number },
+        { dispatch }
+    ) => {
         const newGameId = Crypto.randomUUID();
 
-        dispatch(playerAdd({
-            id: player1Id,
-            playerName: "Player 1",
-            scores: [0],
-        }));
+        const playerIds: string[] = [];
+        for (let i = 0; i < playerCount; i++) {
+            playerIds.push(Crypto.randomUUID());
+        }
 
-        dispatch(playerAdd({
-            id: player2Id,
-            playerName: "Player 2",
-            scores: [0],
-        }));
+        playerIds.forEach((playerId) => {
+            dispatch(playerAdd({
+                id: playerId,
+                playerName: `Player ${playerIds.indexOf(playerId) + 1}`,
+                scores: [0],
+            }));
+        });
 
         dispatch(gameSave({
             id: newGameId,
-            title: `Game ${gameCount}`,
+            title: `Game ${gameCount + 1}`,
             dateCreated: Date.now(),
             roundCurrent: 0,
-            roundTotal: 0,
-            playerIds: [player1Id, player2Id],
+            roundTotal: 1,
+            playerIds: playerIds,
         }));
 
         dispatch(setCurrentGameId(newGameId));

redux/PlayersSlice.ts

@@ -4,7 +4,7 @@ import crashlytics from '@react-native-firebase/crashlytics';
 
 type RoundIndex = number;
 
-interface ScoreState {
+export interface ScoreState {
     id: string;
     playerName: string;
     scores: number[];

redux/SettingsSlice.ts

@@ -19,7 +19,7 @@ const initialState: SettingsState = {
     addendTwo: 10,
     currentGameId: undefined,
     onboarded: undefined,
-    showPointParticles: false,
+    showPointParticles: true,
 };
 
 const settingsSlice = createSlice({

src/Navigation.tsx

@@ -24,7 +24,9 @@ export type OnboardingScreenParamList = {
 export type RootStackParamList = {
     List: undefined;
     Game: undefined;
-    Settings: undefined;
+    Settings: {
+        reason?: string;
+    };
     AppInfo: undefined;
     Share: undefined;
     Onboarding: OnboardingScreenParamList;
@@ -97,13 +99,13 @@ export const Navigation = () => {
                     }}
                 />
                 <Stack.Screen name="Settings" component={SettingsScreen}
-                    options={{
+                    options={({ route }) => ({
                         orientation: 'all',
                         title: "Settings",
                         header: ({ navigation }) => {
-                            return <SettingsHeader navigation={navigation} />;
+                            return <SettingsHeader navigation={navigation} route={route} />;
                         },
-                    }}
+                    })}
                 />
                 <Stack.Screen name="Share" component={ShareScreen}
                     options={{

src/components/BigButtons/BigButton.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import { Icon } from "react-native-elements";
+import Animated, { FadeIn, FadeOut, Layout } from "react-native-reanimated";
 
 interface Props {
     onPress: () => void;
@@ -11,22 +12,24 @@ interface Props {
 
 const BigButton: React.FunctionComponent<Props> = ({ icon, text, color, onPress }) => {
     return (
-        <TouchableOpacity activeOpacity={.5} onPress={onPress}>
-            <View style={[styles.bigButton]}>
-                <Icon name={icon}
-                    type="ionicon" size={30}
-                    color={color}
-                />
-                <Text style={{
-                    color: color,
-                    fontSize: 15,
-                    paddingTop: 5,
-                    textAlign: 'center',
-                }}>
-                    {text}
-                </Text>
-            </View>
-        </TouchableOpacity>
+        <Animated.View layout={Layout.duration(400)} entering={FadeIn.delay(400)} exiting={FadeOut}>
+            <TouchableOpacity activeOpacity={.5} onPress={onPress}>
+                <View style={[styles.bigButton]}>
+                    <Icon name={icon}
+                        type="ionicon" size={30}
+                        color={color}
+                    />
+                    <Text style={{
+                        color: color,
+                        fontSize: 15,
+                        paddingTop: 5,
+                        textAlign: 'center',
+                    }}>
+                        {text}
+                    </Text>
+                </View>
+            </TouchableOpacity>
+        </Animated.View>
     );
 };
 

src/components/Buttons/CheckButton.tsx

@@ -1,26 +1,34 @@
 import React from 'react';
 import analytics from '@react-native-firebase/analytics';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
-import { ParamListBase } from '@react-navigation/native';
+import { ParamListBase, RouteProp } from '@react-navigation/native';
 
 import HeaderButton from './HeaderButton';
-import { Icon } from 'react-native-elements/dist/icons/Icon';
 import { systemBlue } from '../../constants';
+import { Text } from 'react-native';
 
+type RouteParams = {
+    Settings: {
+        reason?: string;
+    };
+};
 interface Props {
     navigation: NativeStackNavigationProp<ParamListBase, string, undefined>;
+    route?: RouteProp<RouteParams, 'Settings'>;
 }
 
-const CheckButton: React.FunctionComponent<Props> = ({ navigation }) => {
+const CheckButton: React.FunctionComponent<Props> = ({ navigation, route }) => {
+
     return (
         <HeaderButton accessibilityLabel='Save Game' onPress={async () => {
             await analytics().logEvent('save_game');
-            navigation.goBack();
+            if (route?.params?.reason === 'new_game') {
+                navigation.navigate("Game");
+            } else {
+                navigation.goBack();
+            }
         }}>
-            <Icon name="check"
-                type="font-awesome-5"
-                size={20}
-                color={systemBlue} />
+            <Text style={{ color: systemBlue, fontSize: 20 }}>Done</Text>
         </HeaderButton>
     );
 };

src/components/Buttons/MenuButton.tsx

@@ -11,10 +11,10 @@ interface Props {
     navigation: NativeStackNavigationProp<ParamListBase, string, undefined>;
 }
 
-const MenuButton: React.FunctionComponent<Props> = ({ navigation }) => {
+const HomeButton: React.FunctionComponent<Props> = ({ navigation }) => {
     return (
         <HeaderButton accessibilityLabel='Home' onPress={async () => {
-            navigation.goBack();
+            navigation.navigate("List");
             await analytics().logEvent('menu');
         }}>
             <Icon name="bars"
@@ -25,4 +25,4 @@ const MenuButton: React.FunctionComponent<Props> = ({ navigation }) => {
     );
 };
 
-export default MenuButton;
+export default HomeButton;

src/components/Buttons/NewGameButton.tsx

@@ -5,8 +5,8 @@ import { ParamListBase } from '@react-navigation/native';
 
 import { useAppSelector, useAppDispatch } from '../../../redux/hooks';
 import { systemBlue } from '../../constants';
-import HeaderButton from './HeaderButton';
 import { asyncCreateGame, selectAllGames } from '../../../redux/GamesSlice';
+import { MenuAction, MenuView } from '@react-native-menu/menu';
 
 interface Props {
     navigation: NativeStackNavigationProp<ParamListBase, string, undefined>;
@@ -17,21 +17,45 @@ const NewGameButton: React.FunctionComponent<Props> = ({ navigation }) => {
 
     const gameList = useAppSelector(state => selectAllGames(state));
 
-    const addGameHandler = async () => {
-        dispatch(asyncCreateGame(gameList.length + 1)).then(() => {
+    const playerNumberOptions = [...Array.from(Array(12).keys(), n => n + 1)];
+
+    const menuActions: MenuAction[] = playerNumberOptions.map((number) => {
+        return {
+            id: number.toString(),
+            title: number.toString() + " Players",
+        };
+    });
+
+    const addGameHandler = async (playerCount: number) => {
+        dispatch(
+            asyncCreateGame({
+                gameCount: gameList.length + 1,
+                playerCount: playerCount
+            })
+        ).then(() => {
             setTimeout(() => {
-                navigation.navigate("Game");
+                navigation.navigate("Settings", { reason: 'new_game' });
             }, 500);
         });
     };
 
     return (
-        <HeaderButton accessibilityLabel='Add Game' onPress={addGameHandler}>
+        <MenuView
+            style={{
+                padding: 10,
+                paddingHorizontal: 15,
+            }}
+
+            onPressAction={async ({ nativeEvent }) => {
+                const playerNumber = parseInt(nativeEvent.event);
+                addGameHandler(playerNumber);
+            }}
+            actions={menuActions}>
             <Icon name="plus"
                 type="font-awesome-5"
                 size={20}
                 color={systemBlue} />
-        </HeaderButton>
+        </MenuView>
     );
 };
 

src/components/EditGame.tsx

@@ -37,41 +37,48 @@ const EditGame = ({ }) => {
     };
 
     return (
-        <View style={styles.container}>
-            <Input
-                containerStyle={{ flex: 1 }}
-                defaultValue={localTitle}
-                maxLength={15}
-                onChangeText={onChangeTextHandler}
-                onEndEditing={onEndEditingHandler}
-                onBlur={onEndEditingHandler}
-                placeholder={UNTITLED}
-                renderErrorMessage={false}
-                selectTextOnFocus={true}
-                style={styles.input}
-            />
-            <Text style={styles.creation}>
-                Created: {new Date(currentGame.dateCreated).toLocaleDateString()}
-                &nbsp; {new Date(currentGame.dateCreated).toLocaleTimeString()}
-            </Text>
-        </View>
+        <>
+            <View style={styles.inputContainer}>
+                <Input
+                    defaultValue={localTitle}
+                    maxLength={15}
+                    onChangeText={onChangeTextHandler}
+                    onEndEditing={onEndEditingHandler}
+                    onBlur={onEndEditingHandler}
+                    placeholder={UNTITLED}
+                    renderErrorMessage={false}
+                    selectTextOnFocus={true}
+                    style={styles.input}
+                    inputContainerStyle={{ borderBottomWidth: 0 }}
+                />
+            </View>
+            <View style={{ marginHorizontal: 20 }}>
+                <Text style={styles.creation}>
+                    Created: {new Date(currentGame.dateCreated).toLocaleDateString()}
+                    &nbsp; {new Date(currentGame.dateCreated).toLocaleTimeString()}
+                </Text>
+            </View>
+        </>
     );
 };
 
 const styles = StyleSheet.create({
-    container: {
+    inputContainer: {
         alignItems: 'flex-start',
         flexDirection: 'column',
         justifyContent: 'flex-start',
-        margin: 10,
+        backgroundColor: '#222',
+        borderRadius: 10,
+        padding: 2,
+        paddingHorizontal: 10,
         marginVertical: 5,
+        marginHorizontal: 10,
     },
     input: {
-        color: '#eee',
+        color: '#EEE',
     },
     creation: {
-        color: '#eee',
-        margin: 10,
+        color: '#999',
     }
 });