Add dev menu

wyne · Apr 30, 2024 · d581757 · d581757
1 parent 8a02e13
commit d581757
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 13 deletions.
diff --git a/redux/SettingsSlice.ts b/redux/SettingsSlice.ts
@@ -17,6 +17,7 @@ export interface SettingsState {
     showColorPalettes?: boolean;
     interactionType: InteractionType;
     lastStoreReviewPrompt: number;
+    devMenuEnabled?: boolean;
 };
 
 const initialState: SettingsState = {
@@ -72,6 +73,9 @@ const settingsSlice = createSlice({
         setLastStoreReviewPrompt(state, action: PayloadAction<number>) {
             state.lastStoreReviewPrompt = action.payload;
         },
+        toggleDevMenuEnabled(state) {
+            state.devMenuEnabled = !state.devMenuEnabled;
+        }
     }
 });
 
@@ -87,6 +91,7 @@ export const {
     toggleShowColorPalettes,
     setInteractionType,
     setLastStoreReviewPrompt,
+    toggleDevMenuEnabled,
 } = settingsSlice.actions;
 
 export default settingsSlice.reducer;
diff --git a/src/components/AppInfo/RotatingIcon.tsx b/src/components/AppInfo/RotatingIcon.tsx
@@ -10,7 +10,12 @@ import Animated, {
     withTiming
 } from 'react-native-reanimated';
 
+import { useAppDispatch } from '../../../redux/hooks';
+import { toggleDevMenuEnabled } from '../../../redux/SettingsSlice';
+
 const RotatingIcon: React.FunctionComponent = ({ }) => {
+    const dispatch = useAppDispatch();
+
     const rotation = useSharedValue(0);
     const rotationCount = useSharedValue(1);
     const animatedStyles = useAnimatedStyle(() => {
@@ -21,12 +26,28 @@ const RotatingIcon: React.FunctionComponent = ({ }) => {
         };
     });
 
-    return <TouchableWithoutFeedback onPress={async () => {
-        rotationCount.value = rotationCount.value + 1;
-        rotation.value = withTiming((rotationCount.value * 90), { duration: 1000, easing: Easing.elastic(1) });
+    let holdCallback: NodeJS.Timeout;
+    const onPressIn = () => {
+        holdCallback = setTimeout(() => {
+            dispatch(toggleDevMenuEnabled());
+            // spring expand animate the Animated.View
+        }, 5000);
+    };
+
+    const onPressOut = () => {
+        if (holdCallback == null) return;
+        clearTimeout(holdCallback);
+    };
+
+    return <TouchableWithoutFeedback
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        onPress={async () => {
+            rotationCount.value = rotationCount.value + 1;
+            rotation.value = withTiming((rotationCount.value * 90), { duration: 1000, easing: Easing.elastic(1) });
 
-        await analytics().logEvent('app_icon');
-    }}>
+            await analytics().logEvent('app_icon');
+        }}>
         <Animated.View style={[animatedStyles]}>
             <Image source={require('../../../assets/icon.png')}
                 contentFit='contain'

diff --git a/src/screens/AppInfoScreen.tsx b/src/screens/AppInfoScreen.tsx
@@ -42,6 +42,7 @@ const AppInfoScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     const showPointParticles = useAppSelector(state => state.settings.showPointParticles);
     const showPlayerIndex = useAppSelector(state => state.settings.showPlayerIndex);
     const showColorPalettes = useAppSelector(state => state.settings.showColorPalettes);
+    const devMenuEnabled = useAppSelector(state => state.settings.devMenuEnabled);
 
     const dispatch = useAppDispatch();
     const toggleParticleSwitch = () => { dispatch(toggleShowPointParticles()); };
@@ -74,14 +75,18 @@ const AppInfoScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                     <SectionItemText text="Point Particle Effect" />
                     <Switch onValueChange={toggleParticleSwitch} value={showPointParticles} />
                 </SectionItem>
-                <SectionItem>
-                    <SectionItemText text="Player Numbers" />
-                    <Switch onValueChange={togglePlayerIndexSwitch} value={showPlayerIndex} />
-                </SectionItem>
-                <SectionItem>
-                    <SectionItemText text="Color Palettes" />
-                    <Switch onValueChange={toggleColorPalettesSwitch} value={showColorPalettes} />
-                </SectionItem>
+                {devMenuEnabled && (
+                    <>
+                        <SectionItem>
+                            <SectionItemText text="Player Numbers" />
+                            <Switch onValueChange={togglePlayerIndexSwitch} value={showPlayerIndex} />
+                        </SectionItem>
+                        <SectionItem>
+                            <SectionItemText text="Change Colors (Beta)" />
+                            <Switch onValueChange={toggleColorPalettesSwitch} value={showColorPalettes} />
+                        </SectionItem>
+                    </>
+                )}
             </Section>
 
             <Section title="Help">