New onboarding for slide gestures

wyne · Mar 19, 2024 · 1c4b09a · 1c4b09a
1 parent c102bc5
commit 1c4b09a
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 63 deletions.
diff --git a/app.config.js b/app.config.js
@@ -98,10 +98,12 @@ export default {
                 },
             },
         ],
-        "expo-av",
-        {
-            microphonePermission: false,
-        },
+        [
+            "expo-av",
+            {
+                microphonePermission: false,
+            },
+        ]
     ],
     hooks: {},
 };
diff --git a/assets/video/gesture-select.mp4 b/assets/video/gesture-select.mp4
diff --git a/assets/video/slide-gesture.mp4 b/assets/video/slide-gesture.mp4
diff --git a/assets/video/slide-powerhold.mp4 b/assets/video/slide-powerhold.mp4
diff --git a/redux/SettingsSlice.ts b/redux/SettingsSlice.ts
@@ -23,7 +23,7 @@ const initialState: SettingsState = {
     currentGameId: undefined,
     onboarded: undefined,
     showPointParticles: true,
-    interactionType: InteractionType.HalfTap,
+    interactionType: InteractionType.SlideVertical,
 };
 
 const settingsSlice = createSlice({

diff --git a/src/components/Onboarding/Onboarding.ts b/src/components/Onboarding/Onboarding.ts
@@ -1,11 +1,18 @@
-import { ImageURISource, } from 'react-native';
+import { AVPlaybackSource } from 'expo-av/build/AV';
+import { ImageURISource } from 'react-native';
 import { SemVer, compare } from 'semver';
 
+
+export type MediaResource = {
+    type: 'image' | 'video';
+    source: ImageURISource | AVPlaybackSource;
+    width?: number;
+    height?: number;
+};
+
 export type OnboardingScreenItem = {
     title: string;
-    image: ImageURISource;
-    imageHeight?: number;
-    imageWidth?: number;
+    media: MediaResource;
     description: string;
     backgroundColor: string;
 };
@@ -16,75 +23,95 @@ const onboardingScreens: OnboardingScreens = {
     '2.2.2': [
         {
             title: "ScorePad\nwith Rounds",
-            image: require('../../../assets/icon.png'),
-            imageHeight: 150,
-            imageWidth: 150,
+            media: {
+                type: 'image',
+                source: require('../../../assets/icon.png'),
+                width: 150,
+                height: 150,
+            },
             description: 'Swipe left to begin.',
             backgroundColor: '#8ca2b8',
         },
         {
-            title: "Add Points",
-            image: require('../../../assets/onboarding/add.png'),
-            description: 'Tap the top half of a player’s tile to add points.',
+            title: "Adding Points",
+            media: {
+                type: 'video',
+                source: require('../../../assets/video/slide-gesture.mp4'),
+            },
+            description: 'Slide up and down to \nchange points.',
             backgroundColor: '#a0c99a',
         },
         {
-            title: "Subtract Points",
-            image: require('../../../assets/onboarding/subtract.png'),
-            description: 'Tap the bottom half of a player’s tile to subtract points.',
+            title: "Hold and Slide",
+            media: {
+                type: 'video',
+                source: require('../../../assets/video/slide-powerhold.mp4'),
+            },
+            description: 'Hold first, then slide \nfor more points.',
             backgroundColor: '#d29898',
         },
         {
-            title: "Adjust Point Values",
-            image: require('../../../assets/onboarding/addend-button.png'),
-            description: 'Adjust the point value by tapping on the point value selector in the top right.',
+            title: "Change Gestures",
+            media: {
+                type: 'video',
+                source: require('../../../assets/video/gesture-select.mp4'),
+            },
+            description: 'Change gesture methods through the point settings in the top right.',
             backgroundColor: '#9896c5',
         },
-        {
-            title: "Swipe Gestures",
-            image: require('../../../assets/onboarding/slide.png'),
-            description: 'Change gestures from the point settings in the top right.',
-            backgroundColor: '#94c49e',
-        },
-        {
-            title: "Change Rounds",
-            image: require('../../../assets/onboarding/rounds.png'),
-            description: 'Use rounds for score history. \nTap the arrows to cycle rounds.',
-            backgroundColor: '#c8b780',
-        },
         {
             title: "Score History",
-            image: require('../../../assets/onboarding/sheet.png'),
+            media: {
+                type: 'image',
+                source: require('../../../assets/onboarding/sheet.png'),
+            },
             description: 'Pull up the bottom sheet to view score history and edit the game.',
             backgroundColor: '#94c49e',
         },
-        {
-            title: "That's it!",
-            image: require('../../../assets/icon.png'),
-            imageHeight: 150,
-            imageWidth: 150,
-            description: 'Return to this tutorial \n at any time.',
-            backgroundColor: '#8ca2b8',
-        },
     ],
     '2.5.0': [
         {
-            title: "New: Swipe Gestures",
-            image: require('../../../assets/onboarding/slide.png'),
-            description: 'Change gesture methods through the point settings in the top right of a game.',
-            backgroundColor: '#94c49e',
+            title: "New Default:\nSwipe Gestures",
+            media: {
+                type: 'video',
+                source: require('../../../assets/video/slide-gesture.mp4'),
+            },
+            description: 'Slide up and down to \nchange points.',
+            backgroundColor: '#a0c99a',
         },
         {
-            title: "That's it!",
-            image: require('../../../assets/icon.png'),
-            imageHeight: 150,
-            imageWidth: 150,
-            description: 'Return to this tutorial \n at any time.',
-            backgroundColor: '#8ca2b8',
+            title: "Hold and Slide",
+            media: {
+                type: 'video',
+                source: require('../../../assets/video/slide-powerhold.mp4'),
+            },
+            description: 'Hold first, then slide \nfor more points.',
+            backgroundColor: '#d29898',
+        },
+        {
+            title: "Change Gestures",
+            media: {
+                type: 'video',
+                source: require('../../../assets/video/gesture-select.mp4'),
+            },
+            description: 'Change gesture methods through the point settings in the top right.',
+            backgroundColor: '#9896c5',
         },
     ]
 };
 
+const finalScreen: OnboardingScreenItem[] = [{
+    title: "That's it!",
+    media: {
+        type: 'image',
+        source: require('../../../assets/icon.png'),
+        width: 150,
+        height: 150,
+    },
+    description: 'Return to this tutorial \n at any time in the settings.',
+    backgroundColor: '#8ca2b8',
+}];
+
 export const getOnboardingSemVer = (onboardedSemVer: SemVer | null): string | undefined => {
     const keys = Object.keys(onboardingScreens)
         .sort((a, b) => compare(new SemVer(a), new SemVer(b)));
@@ -106,8 +133,8 @@ export const getOnboardingScreens = (onboardedSemVer: SemVer): OnboardingScreenI
     const applicableVersion = getOnboardingSemVer(onboardedSemVer);
 
     if (!applicableVersion) {
-        return [];
+        return finalScreen;
     }
 
-    return onboardingScreens[applicableVersion];
+    return onboardingScreens[applicableVersion].concat(finalScreen);
 };
diff --git a/src/screens/OnboardingScreen.tsx b/src/screens/OnboardingScreen.tsx
@@ -2,8 +2,10 @@ import React from 'react';
 
 import { RouteProp } from '@react-navigation/native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { AVPlaybackSource, Video } from 'expo-av';
 import {
     Dimensions,
+    ImageURISource,
     Animated as RNAnimated,
     StyleSheet,
     Text,
@@ -67,22 +69,56 @@ const OnboardingScreen: React.FunctionComponent<Props> = ({ navigation, route })
     const viewConfigRef = React.useRef({ viewAreaCoveragePercentThreshold: 50 });
 
     const renderItem = React.useCallback(({ item, index }: OnboardingScreenItemProps) => {
-        return (
-            <View style={[styles.itemContainer]}>
-                <Animated.View style={[styles.titleContainer]}>
-                    <Text style={[styles.title]}>{item.title}</Text>
-                </Animated.View>
 
-                <Animated.View style={[styles.imageContainer]}>
-                    <RNAnimated.Image source={item.image}
+        let media;
+        switch (item.media.type) {
+            case 'image':
+                media = (
+                    <RNAnimated.Image source={item.media.source as ImageURISource}
                         style={{
-                            width: item.imageWidth || '100%',
-                            height: item.imageHeight || '100%',
+                            width: item.media.width || '100%',
+                            height: item.media.height || '100%',
                             borderRadius: (
                                 index == 0 || index == onboardingScreens.length - 1
                             ) ? 20 : 0,
                             resizeMode: 'contain',
                         }} />
+                );
+                break;
+            case 'video':
+                media = (
+                    <View style={{
+                        backgroundColor: 'black',
+                        padding: 5,
+                        width: item.media.width || '100%',
+                        height: item.media.height || '100%',
+                        borderRadius: 10,
+                    }}>
+                        <Video
+                            source={item.media.source as AVPlaybackSource}
+                            shouldPlay={index == activeIndex}
+                            isLooping={true}
+                            style={{
+                                width: '100%',
+                                height: '100%',
+                                borderRadius: (
+                                    index == 0 || index == onboardingScreens.length - 1
+                                ) ? 20 : 0,
+                            }}
+                        />
+                    </View>
+                );
+                break;
+        }
+
+        return (
+            <View style={[styles.itemContainer]}>
+                <Animated.View style={[styles.titleContainer]}>
+                    <Text style={[styles.title]}>{item.title}</Text>
+                </Animated.View>
+
+                <Animated.View style={[styles.imageContainer]}>
+                    {media}
                 </Animated.View>
 
                 <Animated.View style={[styles.descriptionContainer]}>