Merge pull request #328 from wyne/particle-settings

Particle settings

package.json

@@ -42,13 +42,11 @@
     "expo-system-ui": "~2.4.0",
     "expo-updates": "~0.18.12",
     "firebase": "^9.17.1",
-    "jest": "^29.2.1",
-    "jest-expo": "^48.0.2",
     "moment": "^2.29.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-moment": "^1.1.3",
-    "react-native": "0.72.4",
+    "react-native": "0.72.5",
     "react-native-animated-pagination-dots": "^0.1.73",
     "react-native-elements": "^3.4.2",
     "react-native-gesture-handler": "~2.12.0",
@@ -87,6 +85,7 @@
     "eslint-plugin-prettier": "^5.0.0",
     "gh-pages": "^4.0.0",
     "jest": "^29.5.0",
+    "jest-expo": "^48.0.2",
     "prettier": "^3.0.1",
     "react-test-renderer": "^18.2.0",
     "redux-mock-store": "^1.5.4"

redux/SettingsSlice.ts

@@ -7,13 +7,15 @@ export interface SettingsState {
     multiplier: number;
     currentGameId: string | undefined;
     onboarded: string | undefined;
+    showPointParticles: boolean;
 };
 
 const initialState: SettingsState = {
     home_fullscreen: false,
     multiplier: 1,
     currentGameId: undefined,
     onboarded: undefined,
+    showPointParticles: false,
 };
 
 const settingsSlice = createSlice({
@@ -26,6 +28,9 @@ const settingsSlice = createSlice({
         toggleHomeFullscreen(state) {
             state.home_fullscreen = !state.home_fullscreen;
         },
+        toggleshowPointParticles(state) {
+            state.showPointParticles = !state.showPointParticles;
+        },
         setMultiplier(state, action: PayloadAction<number>) {
             state.multiplier = action.payload;
         },
@@ -42,6 +47,7 @@ export const {
     toggleHomeFullscreen,
     setMultiplier,
     setOnboardedVersion,
+    toggleshowPointParticles,
 } = settingsSlice.actions;
 
 export default settingsSlice.reducer;

redux/store.ts

@@ -10,7 +10,13 @@ const settingsPersistConfig = {
     key: 'settings',
     version: 0,
     storage: AsyncStorage,
-    whitelist: ['home_fullscreen', 'multiplier', 'currentGameId', 'onboarded'],
+    whitelist: [
+        'home_fullscreen',
+        'multiplier',
+        'currentGameId',
+        'onboarded',
+        'showPointParticles'
+    ],
 };
 
 const gamesPersistConfig = {

src/Navigation.tsx

@@ -48,7 +48,7 @@ export const Navigation = () => {
 
     let onboarded = true;
 
-    if (onboardedSemVer == null || onboardedSemVer?.compare(new SemVer(appVersion)) == -1) {
+    if (onboardedSemVer == null || onboardedSemVer?.compare(new SemVer('2.2.2')) == -1) {
         onboarded = false;
     }
 

src/components/Buttons/FullscreenButton.tsx

@@ -1,15 +1,14 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
 import analytics from '@react-native-firebase/analytics';
 
-import { useAppSelector } from '../../../redux/hooks';
+import { useAppDispatch, useAppSelector } from '../../../redux/hooks';
 import HeaderButton from './HeaderButton';
 import { Icon } from 'react-native-elements/dist/icons/Icon';
 import { systemBlue } from '../../constants';
 import { toggleHomeFullscreen } from '../../../redux/SettingsSlice';
 
 const FullscreenButton: React.FunctionComponent = ({ }) => {
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
     const fullscreen = useAppSelector(state => state.settings.home_fullscreen);
 
     const expandHandler = async () => {

src/components/EditPlayer.tsx

@@ -1,14 +1,13 @@
 import React from 'react';
 import { Text, View, StyleSheet, TouchableOpacity, NativeSyntheticEvent, TextInputEndEditingEventData } from 'react-native';
-import { useDispatch } from 'react-redux';
 import { Icon, Input } from 'react-native-elements';
 
 import { palette, systemBlue } from '../constants';
 import { selectGameById, updateGame } from '../../redux/GamesSlice';
 import { selectPlayerById } from '../../redux/PlayersSlice';
 import { removePlayer, updatePlayer } from '../../redux/PlayersSlice';
 import analytics from '@react-native-firebase/analytics';
-import { useAppSelector } from '../../redux/hooks';
+import { useAppDispatch, useAppSelector } from '../../redux/hooks';
 
 interface Props {
     playerId: string;
@@ -18,7 +17,7 @@ interface Props {
 }
 
 const EditPlayer: React.FunctionComponent<Props> = ({ playerId, index, setPlayerWasAdded, playerWasAdded }) => {
-    const dispatch = useDispatch();
+    const dispatch = useAppDispatch();
     const currentGame = useAppSelector(state => selectGameById(state, state.settings.currentGameId));
     const player = useAppSelector(state => selectPlayerById(state, playerId));
 

src/components/PlayerTiles/AdditionTile/TouchSurface.tsx

@@ -2,9 +2,8 @@ import React from 'react';
 import { StyleSheet, TouchableHighlight, View } from 'react-native';
 import { ScoreParticle } from './ScoreParticle';
 import { useState } from 'react';
-import { useDispatch } from 'react-redux';
 import { playerRoundScoreIncrement } from '../../../../redux/PlayersSlice';
-import { useAppSelector } from '../../../../redux/hooks';
+import { useAppDispatch, useAppSelector } from '../../../../redux/hooks';
 import { selectGameById } from '../../../../redux/GamesSlice';
 import * as Haptics from 'expo-haptics';
 import analytics from '@react-native-firebase/analytics';
@@ -23,7 +22,10 @@ type Props = {
 
 export const TouchSurface: React.FunctionComponent<Props> = (
     { playerIndex, fontColor, playerId, scoreType }: Props) => {
-    const dispatch = useDispatch();
+
+    const showPointParticles = useAppSelector(state => state.settings.showPointParticles);
+    const dispatch = useAppDispatch();
+
     const [particles, setParticles] = useState<ScoreParticleProps[]>([]);
 
     const multiplier = useAppSelector(state => state.settings.multiplier);
@@ -44,7 +46,9 @@ export const TouchSurface: React.FunctionComponent<Props> = (
     };
 
     const scoreChangeHandler = () => {
-        addParticle();
+        if (showPointParticles) {
+            addParticle();
+        }
         Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
         analytics().logEvent('score_change', {
             player_index: playerIndex,

src/screens/AppInfoScreen.tsx

@@ -1,13 +1,15 @@
 import React from 'react';
 import { Text, View, StyleSheet, Alert, ScrollView } from 'react-native';
-import { Platform } from 'react-native';
+import { Platform, Switch } from 'react-native';
 import * as Application from 'expo-application';
 import analytics from '@react-native-firebase/analytics';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { ParamListBase } from '@react-navigation/routers';
 
 import RotatingIcon from '../components/AppInfo/RotatingIcon';
 import { Button } from 'react-native-elements';
+import { useAppDispatch, useAppSelector } from '../../redux/hooks';
+import { toggleshowPointParticles } from '../../redux/SettingsSlice';
 
 interface Props {
     navigation: NativeStackNavigationProp<ParamListBase, string, undefined>;
@@ -17,6 +19,10 @@ const AppInfoScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     const buildNumber = Application.nativeBuildVersion;
     const appVersion = Application.nativeApplicationVersion;
 
+    const showPointParticles = useAppSelector(state => state.settings.showPointParticles);
+    const dispatch = useAppDispatch();
+    const toggleSwitch = () => { dispatch(toggleshowPointParticles()); };
+
     const alertWithVersion = async () => {
         Alert.alert(`ScorePad with Rounds\n` +
             `v${appVersion} (${buildNumber})\n` +
@@ -34,6 +40,16 @@ const AppInfoScreen: React.FunctionComponent<Props> = ({ navigation }) => {
                 </Text>
             </View>
 
+            <View style={styles.paragraph}>
+                <Text style={styles.header}>Settings</Text>
+                <View style={styles.settingElement}>
+                    <Text style={{ fontSize: 20 }}>
+                        Point particle effect
+                    </Text>
+                    <Switch onValueChange={toggleSwitch} value={showPointParticles} />
+                </View>
+            </View>
+
             <View style={styles.paragraph}>
                 <Text style={styles.header}>Instructions</Text>
                 <Text style={styles.text}>
@@ -62,6 +78,12 @@ const styles = StyleSheet.create({
     text: {
         fontSize: 16,
         paddingVertical: 20,
+    },
+    settingElement: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingVertical: 10,
     }
 });