Merge pull request #337 from wyne/rounded-tiles

Rounded tiles + Bottom Sheet
wyne · Nov 14, 2023 · 7c5a3b2 · 7c5a3b2
2 parents d6d3efc + ec50f90
commit 7c5a3b2
Show file tree

Hide file tree

Showing 14 changed files with 934 additions and 96 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-16.19.0
+18.18.0
diff --git a/App.tsx b/App.tsx
@@ -5,16 +5,19 @@ import { store, persistor } from './redux/store';
 import { StatusBar } from 'expo-status-bar';
 import { Navigation } from './src/Navigation';
 import { View } from 'react-native';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
 
 export default function App() {
     return (
         <View style={{ flex: 1, backgroundColor: '#fff' }}>
-            <Provider store={store}>
-                <PersistGate loading={null} persistor={persistor}>
-                    <StatusBar />
-                    <Navigation />
-                </PersistGate>
-            </Provider>
+            <GestureHandlerRootView style={{ flex: 1 }}>
+                <Provider store={store}>
+                    <PersistGate loading={null} persistor={persistor}>
+                        <StatusBar />
+                        <Navigation />
+                    </PersistGate>
+                </Provider>
+            </GestureHandlerRootView>
         </View>
     );
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.22.5",
+    "@gorhom/bottom-sheet": "^4",
     "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-native-firebase/analytics": "^18.3.0",
@@ -28,6 +29,7 @@
     "expo": "^49.0.6",
     "expo-application": "~5.3.0",
     "expo-av": "~13.4.1",
+    "expo-blur": "~12.4.1",
     "expo-build-properties": "~0.8.3",
     "expo-constants": "~14.4.2",
     "expo-crypto": "~12.4.1",
@@ -37,6 +39,7 @@
     "expo-image": "~1.3.2",
     "expo-screen-orientation": "~6.0.5",
     "expo-sensors": "~12.3.0",
+    "expo-sharing": "~11.5.0",
     "expo-splash-screen": "~0.20.5",
     "expo-status-bar": "~1.6.0",
     "expo-system-ui": "~2.4.0",
@@ -66,9 +69,7 @@
     "react-redux": "^8.0.2",
     "redux-persist": "^6.0.0",
     "semver": "^7.5.4",
-    "typescript": "^5.1.6",
-    "expo-sharing": "~11.5.0",
-    "expo-blur": "~12.4.1"
+    "typescript": "^5.1.6"
   },
   "devDependencies": {
     "@babel/core": "^7.19.3",

diff --git a/src/components/Headers/GameHeader.tsx b/src/components/Headers/GameHeader.tsx
@@ -11,7 +11,6 @@ import { selectGameById } from '../../../redux/GamesSlice';
 import { systemBlue } from '../../constants';
 import { Button } from 'react-native-elements';
 import MenuButton from '../Buttons/MenuButton';
-import FullscreenButton from '../Buttons/FullscreenButton';
 import MultiplierButton from '../Buttons/MultiplierButton';
 import CustomHeader from './CustomHeader';
 
@@ -92,7 +91,6 @@ const GameHeader: React.FunctionComponent<Props> = ({ navigation }) => {
         <CustomHeader navigation={navigation}
             headerLeft={<>
                 <MenuButton navigation={navigation} />
-                <FullscreenButton />
             </>}
             headerCenter={<>
                 <PrevRoundButton prevRoundHandler={prevRoundHandler} roundCurrent={roundCurrent} />

diff --git a/src/components/PlayerTile.tsx b/src/components/PlayerTile.tsx
@@ -1,11 +1,12 @@
 import React from 'react';
-import { View, StyleSheet, DimensionValue } from 'react-native';
+import { StyleSheet, DimensionValue } from 'react-native';
 
 import AdditionTile from './PlayerTiles/AdditionTile/AdditionTile';
 import { selectGameById } from '../../redux/GamesSlice';
 import { selectPlayerById } from '../../redux/PlayersSlice';
 import { useAppSelector } from '../../redux/hooks';
 import { TouchSurface } from './PlayerTiles/AdditionTile/TouchSurface';
+import Animated, { Easing, FadeIn } from 'react-native-reanimated';
 
 interface Props {
     index: number;
@@ -54,11 +55,18 @@ const PlayerTile: React.FunctionComponent<Props> = ({
     if (Number.isNaN(width) || Number.isNaN(height)) return null;
 
     return (
-        <View style={[
-            styles.playerCard,
-            { backgroundColor: color },
-            { width: widthPerc },
-            { height: heightPerc },]}>
+        <Animated.View
+            entering={FadeIn.delay(100 * index + 200).duration(400).easing(Easing.ease)}
+            style={[
+                styles.playerCard,
+                {
+                    borderRadius: 20,
+                    borderWidth: 3,
+                    padding: 5,
+                    backgroundColor: color,
+                    width: widthPerc,
+                    height: heightPerc
+                }]}>
             <AdditionTile
                 totalScore={scoreTotal}
                 roundScore={scoreRound}
@@ -79,7 +87,7 @@ const PlayerTile: React.FunctionComponent<Props> = ({
                 fontColor={fontColor}
                 playerId={playerId}
                 playerIndex={index} />
-        </View>
+        </Animated.View>
     );
 };
 

diff --git a/src/components/PlayerTiles/AdditionTile/AdditionTile.tsx b/src/components/PlayerTiles/AdditionTile/AdditionTile.tsx
@@ -1,13 +1,8 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 import { StyleSheet } from 'react-native';
-import Animated, {
-    useSharedValue,
-    useAnimatedStyle,
-    withTiming,
-    withDelay,
-} from 'react-native-reanimated';
+import Animated from 'react-native-reanimated';
 
-import { animationDuration, calculateFontSize } from './Helpers';
+import { calculateFontSize } from './Helpers';
 import ScoreBefore from './ScoreBefore';
 import ScoreAfter from './ScoreAfter';
 import ScoreRound from './ScoreRound';
@@ -29,47 +24,10 @@ const AdditionTile: React.FunctionComponent<Props> = ({
     fontColor,
     maxWidth,
     maxHeight,
-    index
 }) => {
 
     if (maxWidth == null || maxHeight == null) return null;
 
-    // Animation values
-    const sharedScale = useSharedValue(1);
-    const sharedOpacity = useSharedValue(0);
-
-    /**
-     * Animation styles for resizing due to text changes
-     */
-    const animatedStyles = useAnimatedStyle(() => {
-        return {
-            opacity: sharedOpacity.value,
-        };
-    });
-
-
-    useEffect(() => {
-        // Delay opacity animation to allow for scale animation to finish
-        // and to allow for the previous tile to finish animating for effect
-        const animationDelay = (index + 1) * animationDuration / 2;
-
-        sharedOpacity.value = withDelay(
-            animationDelay,
-            withTiming(
-                1,
-                { duration: animationDuration * 2 }
-            )
-        );
-        return;
-    }, [
-        playerName,
-        totalScore,
-        roundScore,
-        maxWidth,
-        maxHeight,
-        sharedScale.value
-    ]);
-
     const containerShortEdge = Math.min(maxWidth, maxHeight);
 
     const playerNameFontSize = calculateFontSize(maxWidth);
@@ -80,7 +38,7 @@ const AdditionTile: React.FunctionComponent<Props> = ({
     };
 
     return (
-        <Animated.View style={[animatedStyles, { justifyContent: 'center' }]}>
+        <Animated.View style={[{ justifyContent: 'center' }]}>
             <Animated.Text style={[styles.name, dynamicPlayerStyles]} numberOfLines={1}>
                 {playerName}
             </Animated.Text>

diff --git 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
@@ -1,5 +1,4 @@
 import React, { useEffect, useRef, useState, useCallback } from 'react';
-import { SafeAreaView } from 'react-native-safe-area-context';
 import { View, StyleSheet, ScrollView, Platform, LayoutChangeEvent } from 'react-native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { ParamListBase } from '@react-navigation/native';
@@ -19,7 +18,7 @@ interface RoundScollOffset {
     [key: number]: number;
 }
 
-const Rounds: React.FunctionComponent<Props> = ({ navigation, show }) => {
+const Rounds: React.FunctionComponent<Props> = ({ navigation }) => {
     const [roundScollOffset, setRoundScrollOffset] = useState<RoundScollOffset>({});
 
     const currentGameId = useAppSelector(state => state.settings.currentGameId);
@@ -55,31 +54,28 @@ 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}
                             isCurrentRound={round == roundCurrent} />
                     </View>
                 ))}
             </ScrollView>
-        </SafeAreaView>
+        </View>
     );
 };
 
 const styles = StyleSheet.create({
     scoreTableContainer: {
         flexDirection: 'row',
-        backgroundColor: 'black',
         paddingBottom: 10,
     }
 });

diff --git a/src/components/ScoreLog/PlayerNameColumn.tsx b/src/components/ScoreLog/PlayerNameColumn.tsx
@@ -43,7 +43,7 @@ const PlayerNameColumn: React.FunctionComponent<Props> = ({ navigation, disabled
                     color={disabled ? 'white' : systemBlue} />
             </Text>
             {players.map((player, index) => (
-                <View key={index} style={{ paddingLeft: 2, borderLeftWidth: 5, borderColor: "#" + palette[index] }}>
+                <View key={index} style={{ paddingLeft: 2, borderLeftWidth: 5, borderColor: "#" + palette[index % palette.length] }}>
                     <Text key={index} style={{ color: 'white', maxWidth: 100, fontSize: 20, }}
                         numberOfLines={1}
                     >{player.playerName}</Text>

diff --git a/src/components/ScoreLog/RoundScoreColumn.tsx b/src/components/ScoreLog/RoundScoreColumn.tsx
@@ -40,7 +40,7 @@ const RoundScoreColumn: React.FunctionComponent<Props> = ({ round, isCurrentRoun
         <TouchableWithoutFeedback onPress={onPressHandler}>
             <View style={{
                 padding: 10,
-                backgroundColor: isCurrentRound ? '#111' : 'black'
+                // backgroundColor: isCurrentRound ? '#111' : 'black'
             }}>
                 <Text style={{
                     color: isCurrentRound ? 'red' : 'yellow',