Max Players 20

wyne · Apr 6, 2024 · 63f4c4e · 63f4c4e
1 parent 72b1ec1
commit 63f4c4e
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 23 deletions.
diff --git a/src/components/Buttons/NewGameButton.tsx b/src/components/Buttons/NewGameButton.tsx
@@ -7,7 +7,7 @@ import { Icon } from 'react-native-elements';
 
 import { asyncCreateGame, selectAllGames } from '../../../redux/GamesSlice';
 import { useAppSelector, useAppDispatch } from '../../../redux/hooks';
-import { systemBlue } from '../../constants';
+import { MAX_PLAYERS, systemBlue } from '../../constants';
 
 interface Props {
     navigation: NativeStackNavigationProp<ParamListBase, string, undefined>;
@@ -18,7 +18,7 @@ const NewGameButton: React.FunctionComponent<Props> = ({ navigation }) => {
 
     const gameList = useAppSelector(selectAllGames);
 
-    const playerNumberOptions = [...Array.from(Array(12).keys(), n => n + 1)];
+    const playerNumberOptions = [...Array.from(Array(MAX_PLAYERS).keys(), n => n + 1)];
 
     const menuActions: MenuAction[] = playerNumberOptions.map((number) => {
         return {

diff --git a/src/components/Sheets/AddendModal.tsx b/src/components/Sheets/AddendModal.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { BottomSheetBackdrop, BottomSheetBackdropProps, BottomSheetModal, BottomSheetScrollView } from '@gorhom/bottom-sheet';
+import analytics from '@react-native-firebase/analytics';
 import { Picker } from '@react-native-picker/picker';
 import * as ScreenOrientation from 'expo-screen-orientation';
 import { debounce } from 'lodash';
@@ -57,14 +58,18 @@ const AddendModal: React.FunctionComponent<Props> = ({ }) => {
     const onTapValueChange = useCallback((itemValue: number, itemIndex: number) => {
         dispatch(setMultiplier(addendOptions[itemIndex]));
         dispatch(setAddendOne(addendOptions[itemIndex]));
-        // TODO: analytics
+        analytics().logEvent('addend_two_change', {
+            addendOne: itemValue,
+        });
     }, [addendOne]);
 
     const debouncedTapValueChange = debounce(onTapValueChange, 200);
 
     const onLongTapValueChange = useCallback((itemValue: number) => {
         dispatch(setAddendTwo(itemValue));
-        // TODO: analytics
+        analytics().logEvent('addend_two_change', {
+            addendTwo: itemValue,
+        });
     }, [addendTwo]);
 
     const debouncedLongTapValueChange = debounce(onLongTapValueChange, 200);

diff --git a/src/constants.ts b/src/constants.ts
@@ -12,3 +12,4 @@ export const palette = [
 export const STORAGE_KEY = {
     GAMES_LIST: '@games_list',
 };
+export const MAX_PLAYERS = 20;
diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx
@@ -14,7 +14,7 @@ import { playerAdd } from '../../redux/PlayersSlice';
 import { selectCurrentGame } from '../../redux/selectors';
 import EditGame from '../components/EditGame';
 import PlayerListItem from '../components/PlayerListItem';
-import { systemBlue } from '../constants';
+import { MAX_PLAYERS, systemBlue } from '../constants';
 import logger from '../Logger';
 
 type RouteParams = {
@@ -37,7 +37,6 @@ const SettingsScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     const currentGame = useAppSelector(selectCurrentGame);
     const players = useAppSelector(selectSortedPlayers);
 
-    const maxPlayers = 12;
     const [edit, setEdit] = React.useState(false);
 
     const addPlayerHandler = async () => {
@@ -70,38 +69,35 @@ const SettingsScreen: React.FunctionComponent<Props> = ({ navigation }) => {
         }
     }, [players]);
 
-    const ListHeader = () => (
-        <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
-            <Text style={styles.heading}>Players</Text>
-            {players.length > 1 &&
-                <TouchableOpacity onPress={() => setEdit(!edit)}>
-                    <Text style={[styles.heading, { color: systemBlue }]}>{edit ? 'Done' : 'Edit'}</Text>
-                </TouchableOpacity>
-            }
-        </View>
-    );
-
     const ListFooter = () => (
-        <View style={{ margin: 10, marginBottom: 200 }}>
-            {players.length < maxPlayers &&
+        <View style={{ margin: 10, marginBottom: 200, alignSelf: 'center' }}>
+            {players.length < MAX_PLAYERS &&
                 <Button title="Add Player" type="clear"
                     icon={<Icon name="add" color={systemBlue} />}
-                    disabled={players.length >= maxPlayers}
+                    disabled={players.length >= MAX_PLAYERS}
                     onPress={addPlayerHandler} />
             }
-            {players.length >= maxPlayers &&
+            {players.length >= MAX_PLAYERS &&
                 <Text style={styles.text}>Max players reached.</Text>
             }
         </View>
     );
 
     return (
-        <View>
+        <View style={{ flex: 1 }}>
 
             <Text style={styles.heading}>Game Title</Text>
             <EditGame />
+            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                <Text style={styles.heading}>Players</Text>
+                {players.length > 1 &&
+                    <TouchableOpacity onPress={() => setEdit(!edit)}>
+                        <Text style={[styles.heading, { color: systemBlue }]}>{edit ? 'Done' : 'Edit'}</Text>
+                    </TouchableOpacity>
+                }
+            </View>
+
             <DraggableFlatList
-                ListHeaderComponent={ListHeader}
                 ListFooterComponent={ListFooter}
                 data={players}
                 renderItem={({ item: player, getIndex, drag, isActive }) => (