From 63f4c4ef623f16f38030877eadcb70372476d149 Mon Sep 17 00:00:00 2001
From: Justin Wyne <1986068+wyne@users.noreply.github.com>
Date: Sat, 6 Apr 2024 01:41:42 -0700
Subject: [PATCH] Max Players 20

---
 src/components/Buttons/NewGameButton.tsx |  4 +--
 src/components/Sheets/AddendModal.tsx    |  9 +++++--
 src/constants.ts                         |  1 +
 src/screens/SettingsScreen.tsx           | 34 +++++++++++-------------
 4 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/src/components/Buttons/NewGameButton.tsx b/src/components/Buttons/NewGameButton.tsx
index 92b1b7c3..26c28053 100644
--- 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
index db1c3948..143be820 100644
--- 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
index 8ed27ef1..e239a644 100644
--- 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
index 9dd0e473..123900c1 100644
--- 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 }) => (