Merge pull request #399 from wyne/player-index

Player Index
wyne · Apr 17, 2024 · fefdc3d · fefdc3d
2 parents e303fa2 + 08f8433
commit fefdc3d
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 7 deletions.
diff --git a/redux/SettingsSlice.ts b/redux/SettingsSlice.ts
@@ -13,6 +13,7 @@ export interface SettingsState {
     currentGameId: string | undefined;
     onboarded: string | undefined;
     showPointParticles: boolean;
+    showPlayerIndex: boolean;
     interactionType: InteractionType;
     lastStoreReviewPrompt: number;
 };
@@ -25,6 +26,7 @@ const initialState: SettingsState = {
     currentGameId: undefined,
     onboarded: undefined,
     showPointParticles: true,
+    showPlayerIndex: false,
     interactionType: InteractionType.SwipeVertical,
     lastStoreReviewPrompt: 0,
 };
@@ -40,9 +42,12 @@ const settingsSlice = createSlice({
         toggleHomeFullscreen(state) {
             state.home_fullscreen = !state.home_fullscreen;
         },
-        toggleshowPointParticles(state) {
+        toggleShowPointParticles(state) {
             state.showPointParticles = !state.showPointParticles;
         },
+        toggleShowPlayerIndex(state) {
+            state.showPlayerIndex = !state.showPlayerIndex;
+        },
         setMultiplier(state, action: PayloadAction<number>) {
             state.multiplier = action.payload;
         },
@@ -73,7 +78,8 @@ export const {
     setAddendOne,
     setAddendTwo,
     setOnboardedVersion,
-    toggleshowPointParticles,
+    toggleShowPointParticles,
+    toggleShowPlayerIndex,
     setInteractionType,
     setLastStoreReviewPrompt,
 } = settingsSlice.actions;

diff --git a/redux/store.ts b/redux/store.ts
@@ -18,6 +18,7 @@ const settingsPersistConfig = {
         'currentGameId',
         'onboarded',
         'showPointParticles',
+        'showPlayerIndex',
         'interactionType',
         'lastStoreReviewPrompt',
     ],

diff --git a/src/components/Boards/FlexboxTile.tsx b/src/components/Boards/FlexboxTile.tsx
@@ -8,6 +8,7 @@ import { selectInteractionType } from '../../../redux/selectors';
 import { interactionComponents } from '../Interactions/InteractionComponents';
 import { InteractionType } from '../Interactions/InteractionType';
 import AdditionTile from '../PlayerTiles/AdditionTile/AdditionTile';
+import PlayerIndexLabel from '../PlayerTiles/PlayerIndexLabel';
 
 interface Props {
     index: number;
@@ -34,6 +35,8 @@ const FlexboxTile: React.FunctionComponent<Props> = ({
     if (!(width > 0 && height > 0)) return null;
     if (Number.isNaN(width) || Number.isNaN(height)) return null;
 
+    const playerIndexLabel = useAppSelector(state => state.settings.showPlayerIndex);
+
     const widthPerc: DimensionValue = `${(100 / cols)}%`;
     const heightPerc: DimensionValue = `${(100 / rows)}%`;
 
@@ -49,8 +52,10 @@ const FlexboxTile: React.FunctionComponent<Props> = ({
                 {
                     backgroundColor: color,
                     width: widthPerc,
-                    height: heightPerc
+                    height: heightPerc,
+                    borderBottomLeftRadius: playerIndexLabel ? 7 : undefined,
                 }]}>
+            <PlayerIndexLabel index={index} fontColor={fontColor} enabled={playerIndexLabel} />
             <InteractionComponent index={index} fontColor={fontColor} playerId={playerId}>
                 <AdditionTile
                     playerId={playerId}

diff --git a/src/components/Interactions/Swipe/Swipe.tsx b/src/components/Interactions/Swipe/Swipe.tsx
@@ -48,6 +48,12 @@ const SwipeVertical: React.FC<HalfTapProps> = ({
         powerHoldRef.current = powerHold;
     }, [powerHold]);
 
+    useEffect(() => {
+        return () => {
+            clearTimeout(powerHoldTimer);
+        };
+    }, []);
+
     const scale = holdDuration.interpolate({
         inputRange: [0, powerHoldTime * .9, powerHoldTime],
         outputRange: [1, 1.1, 1.05],

diff --git a/src/components/PlayerTiles/PlayerIndexLabel.tsx b/src/components/PlayerTiles/PlayerIndexLabel.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Text, View } from 'react-native';
+
+interface PlayerIndexLabelProps {
+    index: number;
+    fontColor: string;
+    enabled: boolean;
+}
+
+const PlayerIndexLabel: React.FC<PlayerIndexLabelProps> = ({ index, fontColor, enabled }) => {
+    if (!enabled) return null;
+
+    return (
+        <View style={{ position: 'absolute', bottom: 3, left: 5 }}>
+            <Text style={{ color: fontColor + '80', fontSize: 12 }}>
+                {index + 1}
+            </Text>
+        </View>
+    );
+};
+
+export default PlayerIndexLabel;
diff --git a/src/screens/AppInfoScreen.tsx b/src/screens/AppInfoScreen.tsx
@@ -4,11 +4,11 @@ import analytics from '@react-native-firebase/analytics';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { ParamListBase } from '@react-navigation/routers';
 import * as Application from 'expo-application';
-import { Text, View, StyleSheet, Alert, ScrollView, Linking, Platform, Switch } from 'react-native';
+import { Alert, Linking, Platform, ScrollView, StyleSheet, Switch, Text, View } from 'react-native';
 import { Button } from 'react-native-elements';
 
 import { useAppDispatch, useAppSelector } from '../../redux/hooks';
-import { toggleshowPointParticles } from '../../redux/SettingsSlice';
+import { toggleShowPlayerIndex, toggleShowPointParticles } from '../../redux/SettingsSlice';
 import RotatingIcon from '../components/AppInfo/RotatingIcon';
 
 interface Props {
@@ -40,8 +40,11 @@ const AppInfoScreen: React.FunctionComponent<Props> = ({ navigation }) => {
     const appVersion = Application.nativeApplicationVersion;
 
     const showPointParticles = useAppSelector(state => state.settings.showPointParticles);
+    const showPlayerIndex = useAppSelector(state => state.settings.showPlayerIndex);
+
     const dispatch = useAppDispatch();
-    const toggleSwitch = () => { dispatch(toggleshowPointParticles()); };
+    const toggleParticleSwitch = () => { dispatch(toggleShowPointParticles()); };
+    const togglePlayerIndexSwitch = () => { dispatch(toggleShowPlayerIndex()); };
 
     const alertWithVersion = async () => {
         Alert.alert(`ScorePad with Rounds\n` +
@@ -67,7 +70,11 @@ const AppInfoScreen: React.FunctionComponent<Props> = ({ navigation }) => {
             <Section title="Features">
                 <SectionItem>
                     <SectionItemText text="Point Particle Effect" />
-                    <Switch onValueChange={toggleSwitch} value={showPointParticles} />
+                    <Switch onValueChange={toggleParticleSwitch} value={showPointParticles} />
+                </SectionItem>
+                <SectionItem>
+                    <SectionItemText text="Player Numbers" />
+                    <Switch onValueChange={togglePlayerIndexSwitch} value={showPlayerIndex} />
                 </SectionItem>
             </Section>