From bca748e559ebad8846433f5cc6cfd1dcca83d84f Mon Sep 17 00:00:00 2001
From: Justin Wyne <1986068+wyne@users.noreply.github.com>
Date: Mon, 13 Nov 2023 18:06:39 -0800
Subject: [PATCH] SafeAreaView for landscape game

---
 .../PlayerTiles/AdditionTile/Helpers.ts         |  6 +++++-
 src/components/Rounds.tsx                       | 10 ++++------
 src/screens/GameScreen.tsx                      | 17 +++++++++--------
 src/screens/ShareScreen.tsx                     |  1 +
 4 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/PlayerTiles/AdditionTile/Helpers.ts b/src/components/PlayerTiles/AdditionTile/Helpers.ts
index 7f819257..fd0a7214 100644
--- a/src/components/PlayerTiles/AdditionTile/Helpers.ts
+++ b/src/components/PlayerTiles/AdditionTile/Helpers.ts
@@ -36,9 +36,13 @@ export const scoreMathOpacity = 0.75;
  * @returns The calculated font size.
  */
 export const calculateFontSize = (containerWidth: number) => {
+    return baseScoreFontSize * widthFactor(containerWidth);
+};
+
+export const widthFactor = (containerWidth: number) => {
     let widthFactor: number = containerWidth / 200;
     if (Number.isNaN(widthFactor)) { widthFactor = 1; }
-    return baseScoreFontSize * widthFactor;
+    return widthFactor;
 };
 
 /**
diff --git a/src/components/Rounds.tsx b/src/components/Rounds.tsx
index 64d9b393..b3b6ee01 100644
--- a/src/components/Rounds.tsx
+++ b/src/components/Rounds.tsx
@@ -55,16 +55,14 @@ const Rounds: React.FunctionComponent<Props> = ({ navigation, show }) => {
     const roundsIterator = [...Array(roundTotal + 1).keys()];
 
     return (
-        <SafeAreaView edges={['right', 'left']}
-            style={[styles.scoreTableContainer, { height: show ? 'auto' : 0, }]}>
+        <View style={[styles.scoreTableContainer]}>
             <PlayerNameColumn navigation={navigation} />
             <TotalScoreColumn />
             <ScrollView horizontal={true}
                 contentContainerStyle={{ flexDirection: 'row' }}
-                ref={roundsScrollViewEl} >
+                ref={roundsScrollViewEl}>
                 {roundsIterator.map((item, round) => (
-                    <View key={round}
-                        onLayout={e => onLayoutHandler(e, round)}>
+                    <View key={round} onLayout={e => onLayoutHandler(e, round)}>
                         <RoundScoreColumn
                             round={round}
                             key={round}
@@ -72,7 +70,7 @@ const Rounds: React.FunctionComponent<Props> = ({ navigation, show }) => {
                     </View>
                 ))}
             </ScrollView>
-        </SafeAreaView>
+        </View>
     );
 };
 
diff --git a/src/screens/GameScreen.tsx b/src/screens/GameScreen.tsx
index 7beb767e..d1f943dc 100644
--- a/src/screens/GameScreen.tsx
+++ b/src/screens/GameScreen.tsx
@@ -98,7 +98,7 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     const bottomSheetRef = useRef<BottomSheet>(null);
 
     // variables
-    const snapPoints = useMemo(() => [75, '60%', '100%'], []);
+    const snapPoints = useMemo(() => [73, '60%', '100%'], []);
 
     // callbacks
     const handleSheetChanges = useCallback((index: number) => {
@@ -110,9 +110,9 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     }, []);
 
     return (
-        <SafeAreaView style={{ flex: 1 }}>
+        <View style={{ flex: 1 }}>
             <View style={[StyleSheet.absoluteFillObject]}>
-                <View style={styles.contentStyle} onLayout={layoutHandler} >
+                <SafeAreaView edges={['left', 'right']} style={styles.contentStyle} onLayout={layoutHandler} >
                     {playerIds.map((id, index) => (
                         width != null && height != null && rows != 0 && cols != 0 &&
                         <PlayerTile
@@ -127,7 +127,7 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                             index={index}
                         />
                     ))}
-                </View>
+                </SafeAreaView>
 
                 <BottomSheet
                     ref={bottomSheetRef}
@@ -138,7 +138,8 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                     handleIndicatorStyle={{ backgroundColor: 'white' }}
                 >
                     <BottomSheetScrollView>
-                        <View style={styles.contentContainer}>
+                        <SafeAreaView edges={['right', 'left']}>
+
                             <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
                                 <Text style={{ color: 'white', fontSize: 20, padding: 20, paddingTop: 0, fontWeight: 'bold' }} onPress={() => handleSnapPress(1)}>
                                     {currentGame.title}
@@ -148,14 +149,14 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                                 </Text>
                             </View>
                             <Rounds navigation={navigation} show={!fullscreen} />
-                            <Text style={{ color: 'white', paddingHorizontal: 10 }}>
+                            <Text style={{ color: 'white', padding: 10 }}>
                                 Tap on a column to set the current round.
                             </Text>
-                        </View>
+                        </SafeAreaView>
                     </BottomSheetScrollView>
                 </BottomSheet>
             </View>
-        </SafeAreaView >
+        </View>
     );
 };
 
diff --git a/src/screens/ShareScreen.tsx b/src/screens/ShareScreen.tsx
index 7ff66326..694b7477 100644
--- a/src/screens/ShareScreen.tsx
+++ b/src/screens/ShareScreen.tsx
@@ -75,6 +75,7 @@ const ShareScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                     borderStyle: 'solid',
                 }}>
                     <ScrollView horizontal={true}
+                        showsHorizontalScrollIndicator={false}
                         contentContainerStyle={{
                             backgroundColor: 'black',
                             flexDirection: 'column',