Refactor scaling constants

wyne · Nov 11, 2023 · 123ee72 · 123ee72
1 parent bba005b
commit 123ee72
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 19 deletions.
diff --git a/src/components/PlayerTiles/AdditionTile/AdditionTile.tsx b/src/components/PlayerTiles/AdditionTile/AdditionTile.tsx
@@ -38,7 +38,9 @@ const AdditionTile: React.FunctionComponent<Props> = ({
     const sharedScale = useSharedValue(1);
     const sharedOpacity = useSharedValue(0);
 
-    // Animation styles for resizing due to text changes
+    /**
+     * Animation styles for resizing due to text changes
+     */
     const animatedStyles = useAnimatedStyle(() => {
         return {
             opacity: sharedOpacity.value,

diff --git a/src/components/PlayerTiles/AdditionTile/Helpers.ts b/src/components/PlayerTiles/AdditionTile/Helpers.ts
@@ -22,20 +22,23 @@ export const exitingAnimation = ZoomOut.duration(animationDuration);
  */
 export const layoutAnimation = Layout.easing(Easing.ease).duration(animationDuration);
 
+export const singleLineScoreSizeMultiplier = 1.2;
+
+export const multiLineScoreSizeMultiplier = 0.7;
+
+export const baseScoreFontSize = 40;
+
+export const scoreMathOpacity = 0.75;
+
 /**
  * Calculates the font size based on the maximum width.
  * @param containerWidth The maximum width of the text.
  * @returns The calculated font size.
  */
 export const calculateFontSize = (containerWidth: number) => {
-    // const baseScale: number = Math.min(1 / stringLength * 200, 100);
-    const baseScale = 40;
-
     let widthFactor: number = containerWidth / 200;
-
     if (Number.isNaN(widthFactor)) { widthFactor = 1; }
-
-    return baseScale * widthFactor;
+    return baseScoreFontSize * widthFactor;
 };
 
 /**

diff --git a/src/components/PlayerTiles/AdditionTile/ScoreBefore.tsx b/src/components/PlayerTiles/AdditionTile/ScoreBefore.tsx
@@ -6,7 +6,7 @@ import {
     withTiming
 } from 'react-native-reanimated';
 
-import { calculateFontSize, animationDuration, enteringAnimation } from './Helpers';
+import { calculateFontSize, animationDuration, enteringAnimation, multiLineScoreSizeMultiplier, singleLineScoreSizeMultiplier, scoreMathOpacity } from './Helpers';
 
 interface Props {
     roundScore: number;
@@ -34,7 +34,7 @@ const ScoreBefore: React.FunctionComponent<Props> = ({
         };
     });
 
-    const scaleFactor = roundScore == 0 ? 1.2 : .7;
+    const scaleFactor = roundScore == 0 ? singleLineScoreSizeMultiplier : multiLineScoreSizeMultiplier;
 
     useEffect(() => {
         fontSize.value = withTiming(
@@ -43,7 +43,7 @@ const ScoreBefore: React.FunctionComponent<Props> = ({
         );
 
         fontOpacity.value = withTiming(
-            roundScore == 0 ? 100 : 75,
+            roundScore == 0 ? 100 : scoreMathOpacity * 100,
             { duration: animationDuration }
         );
     }, [roundScore, containerWidth]);

diff --git a/src/components/PlayerTiles/AdditionTile/ScoreRound.tsx b/src/components/PlayerTiles/AdditionTile/ScoreRound.tsx
@@ -6,7 +6,7 @@ import {
     withTiming
 } from 'react-native-reanimated';
 
-import { calculateFontSize, animationDuration } from './Helpers';
+import { calculateFontSize, animationDuration, multiLineScoreSizeMultiplier, scoreMathOpacity } from './Helpers';
 
 interface Props {
     roundScore: number;
@@ -15,21 +15,19 @@ interface Props {
 }
 
 const ScoreRound: React.FunctionComponent<Props> = ({ containerWidth, roundScore, fontColor }) => {
-    const fontSizeRound = useSharedValue(calculateFontSize(containerWidth));
+    const fontSize = useSharedValue(calculateFontSize(containerWidth));
+
     const animatedStyles = useAnimatedStyle(() => {
         return {
-            fontSize: fontSizeRound.value,
+            fontSize: fontSize.value,
         };
     });
 
     const d = roundScore;
 
-
     useEffect(() => {
-        const scaleFactor = .7;
-
-        fontSizeRound.value = withTiming(
-            calculateFontSize(containerWidth) * scaleFactor,
+        fontSize.value = withTiming(
+            calculateFontSize(containerWidth) * multiLineScoreSizeMultiplier,
             { duration: animationDuration }
         );
 
@@ -44,7 +42,8 @@ const ScoreRound: React.FunctionComponent<Props> = ({ containerWidth, roundScore
             <Animated.Text numberOfLines={1}
                 style={[animatedStyles, {
                     fontVariant: ['tabular-nums'],
-                    color: fontColor, opacity: .75
+                    color: fontColor,
+                    opacity: scoreMathOpacity
                 }]}>
                 {roundScore > 0 && " + "}
                 {roundScore < 0 && " - "}