Bug fixes

src/components/Headers/GameHeader.tsx

@@ -92,7 +92,6 @@ const GameHeader: React.FunctionComponent<Props> = ({ navigation }) => {
         <CustomHeader navigation={navigation}
             headerLeft={<>
                 <MenuButton navigation={navigation} />
-                <FullscreenButton />
             </>}
             headerCenter={<>
                 <PrevRoundButton prevRoundHandler={prevRoundHandler} roundCurrent={roundCurrent} />

src/screens/GameScreen.tsx

@@ -1,16 +1,17 @@
-import React, { useCallback, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { View, StyleSheet, LayoutChangeEvent, Text } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { getContrastRatio } from 'colorsheet';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { ParamListBase } from '@react-navigation/native';
-import BottomSheet from '@gorhom/bottom-sheet';
+import BottomSheet, { BottomSheetScrollView } from '@gorhom/bottom-sheet';
 
 import { useAppSelector } from '../../redux/hooks';
 import PlayerTile from '../components/PlayerTile';
 import Rounds from '../components/Rounds';
 import { selectGameById } from '../../redux/GamesSlice';
-import { ScrollView } from 'react-native-gesture-handler';
+import { Button, Icon } from 'react-native-elements';
+import { systemBlue } from '../constants';
 
 interface Props {
     navigation: NativeStackNavigationProp<ParamListBase, string, undefined>;
@@ -21,8 +22,8 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     if (typeof currentGameId == 'undefined') return null;
 
     const palette = ["01497c", "c25858", "f5c800", "275436", "dc902c", "62516a", "755647", "925561"];
-    const [rows, setRows] = useState<number>(1);
-    const [cols, setCols] = useState<number>(1);
+    const [rows, setRows] = useState<number>(0);
+    const [cols, setCols] = useState<number>(0);
     const fullscreen = useAppSelector(state => state.settings.home_fullscreen);
     const currentGame = useAppSelector(state => selectGameById(state, state.settings.currentGameId));
 
@@ -33,17 +34,24 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
 
     const playerIds = currentGame.playerIds;
 
+    const playerCount = playerIds.length;
+
     const desiredAspectRatio = 0.8;
 
     const layoutHandler = (e: LayoutChangeEvent) => {
         const { width, height } = e.nativeEvent.layout;
 
         setWidth(Math.round(width));
         setHeight(Math.round(height));
+        calcGrid();
+    };
 
+    const calcGrid = () => {
         let closestAspectRatio = Number.MAX_SAFE_INTEGER;
         let bestRowCount = 1;
 
+        if (width == null || height == null) return;
+
         for (let rows = 1; rows <= playerIds.length; rows++) {
             const cols = Math.ceil(playerIds.length / rows);
 
@@ -65,18 +73,25 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
         setCols(Math.ceil(playerIds.length / bestRowCount));
     };
 
+    useEffect(() => {
+        if (width == null || height == null) return;
+        calcGrid();
+    }, [playerCount, width, height]);
+
     type DimensionValue = (rows: number, cols: number) => {
         width: number;
         height: number;
     }
 
-    const calculateDimensions: DimensionValue = (rows: number, cols: number) => {
+    const calculateTileDimensions: DimensionValue = (rows: number, cols: number) => {
         if (width == null || height == null) return { width: 0, height: 0 };
 
-        return {
+        const dims = {
             width: Math.round(width / cols),
             height: Math.round(height / rows)
         };
+
+        return dims;
     };
 
     // ref
@@ -90,21 +105,25 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
         console.log('handleSheetChanges', index);
     }, []);
 
+    const handleSnapPress = useCallback((index: number) => {
+        bottomSheetRef.current?.snapToIndex(index);
+    }, []);
+
     return (
         <SafeAreaView style={{ flex: 1 }}>
             <View style={[StyleSheet.absoluteFillObject]}>
                 <View style={styles.contentStyle} onLayout={layoutHandler} >
                     {playerIds.map((id, index) => (
-                        width != null && height != null &&
+                        width != null && height != null && rows != 0 && cols != 0 &&
                         <PlayerTile
                             key={id}
                             playerId={id}
                             color={'#' + palette[index % palette.length]}
                             fontColor={getContrastRatio('#' + palette[index % palette.length], '#000').number > 7 ? "#000000" : "#FFFFFF"}
-                            cols={(rows != 0 && cols != 0) ? cols : 0}
-                            rows={(rows != 0 && cols != 0) ? rows : 0}
-                            width={calculateDimensions(rows, cols).width}
-                            height={calculateDimensions(rows, cols).height}
+                            cols={cols}
+                            rows={rows}
+                            width={calculateTileDimensions(rows, cols).width}
+                            height={calculateTileDimensions(rows, cols).height}
                             index={index}
                         />
                     ))}
@@ -118,15 +137,25 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                     backgroundStyle={{ backgroundColor: 'rgb(30,40,50)' }}
                     handleIndicatorStyle={{ backgroundColor: 'white' }}
                 >
-                    <View style={styles.contentContainer}>
-                        <Text style={{ color: 'white', fontSize: 20, padding: 20, paddingTop: 0, fontWeight: 'bold' }}>History</Text>
-                        <ScrollView>
+                    <BottomSheetScrollView>
+                        <View style={styles.contentContainer}>
+                            <View style={{ flexDirection: 'row', justifyContent: 'space-between' }}>
+                                <Text style={{ color: 'white', fontSize: 20, padding: 20, paddingTop: 0, fontWeight: 'bold' }} onPress={() => handleSnapPress(1)}>
+                                    {currentGame.title}
+                                </Text>
+                                <Text style={{ paddingHorizontal: 20, fontSize: 20, color: systemBlue }} onPress={() => navigation.navigate('Settings')}>
+                                    Edit
+                                </Text>
+                            </View>
                             <Rounds navigation={navigation} show={!fullscreen} />
-                        </ScrollView>
-                    </View>
+                            <Text style={{ color: 'white', paddingHorizontal: 10 }}>
+                                Tap on a column to set the current round.
+                            </Text>
+                        </View>
+                    </BottomSheetScrollView>
                 </BottomSheet>
             </View>
-        </SafeAreaView>
+        </SafeAreaView >
     );
 };
 

src/screens/SettingsScreen.tsx

@@ -136,7 +136,7 @@ const SettingsScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                     <Text style={styles.text}>Max players reached.</Text>
                 }
             </View>
-            <View style={{ height: 100 }}></View>
+            <View style={{ height: 200 }}></View>
         </KeyboardAwareScrollView>
     );
 };