Fix size calculation

wyne · Nov 11, 2023 · bba005b · bba005b
1 parent 542c51e
commit bba005b
Show file tree

Hide file tree

Showing 5 changed files with 29 additions and 11 deletions.
diff --git a/src/components/PlayerTiles/AdditionTile/AdditionTile.tsx b/src/components/PlayerTiles/AdditionTile/AdditionTile.tsx
@@ -68,10 +68,10 @@ const AdditionTile: React.FunctionComponent<Props> = ({
         sharedScale.value
     ]);
 
-    const playerNameFontSize = calculateFontSize(maxWidth);
-
     const containerWidth = Math.min(maxWidth, maxHeight);
 
+    const playerNameFontSize = calculateFontSize(maxWidth);
+
     const dynamicPlayerStyles = {
         fontSize: playerNameFontSize,
         color: fontColor,

diff --git a/src/components/PlayerTiles/AdditionTile/ScoreAfter.tsx b/src/components/PlayerTiles/AdditionTile/ScoreAfter.tsx
@@ -29,10 +29,12 @@ const ScoreAfter: React.FunctionComponent<Props> = ({ containerWidth, roundScore
 
     useEffect(() => {
         fontSize.value = withTiming(
-            roundScore == 0 ? 1 : calculateFontSize(containerWidth), { duration: animationDuration },
+            roundScore == 0 ? 1 : calculateFontSize(containerWidth) * 1.1,
+            { duration: animationDuration },
         );
         opacity.value = withTiming(
-            roundScore == 0 ? 0 : 1, { duration: animationDuration },
+            roundScore == 0 ? 0 : 1,
+            { duration: animationDuration },
         );
     }, [roundScore, containerWidth]);
 

diff --git a/src/components/PlayerTiles/AdditionTile/ScoreBefore.tsx b/src/components/PlayerTiles/AdditionTile/ScoreBefore.tsx
@@ -34,7 +34,7 @@ const ScoreBefore: React.FunctionComponent<Props> = ({
         };
     });
 
-    const scaleFactor = roundScore == 0 ? 1 : .7;
+    const scaleFactor = roundScore == 0 ? 1.2 : .7;
 
     useEffect(() => {
         fontSize.value = withTiming(

diff --git a/src/components/PlayerTiles/AdditionTile/ScoreRound.tsx b/src/components/PlayerTiles/AdditionTile/ScoreRound.tsx
@@ -24,15 +24,17 @@ const ScoreRound: React.FunctionComponent<Props> = ({ containerWidth, roundScore
 
     const d = roundScore;
 
+
     useEffect(() => {
+        const scaleFactor = .7;
+
         fontSizeRound.value = withTiming(
-            calculateFontSize(containerWidth) * scaleFactor, { duration: animationDuration }
+            calculateFontSize(containerWidth) * scaleFactor,
+            { duration: animationDuration }
         );
 
     }, [roundScore, containerWidth]);
 
-    const scaleFactor = roundScore == 0 ? 1 : .7;
-
     if (roundScore == 0) {
         return <></>;
     }

diff --git a/src/screens/GameScreen.tsx b/src/screens/GameScreen.tsx
@@ -68,14 +68,28 @@ const ScoreBoardScreen: React.FunctionComponent<Props> = ({ navigation }) => {
         height: number;
     }
 
+    // TODO: In 7 person game portrait, last two are wrong when it should be last one is bigger.
+
     const calculateDimensions: DimensionValue = (index: number, total: number, rows: number, cols: number) => {
         if (width == null || height == null) return { width: 0, height: 0 };
         const h = height / rows;
-        // calculate width based on number of rows
+        //
+        // Calculate width based on number of rows
         // but if the index is in the last row, use the remainder
         let w;
-        if (total % rows > 0 && index >= total - total % rows) {
-            w = width / (total % rows);
+
+        /**
+         * If the last row has fewer columns than the rest
+         **/
+        const offsetLastRow = total % rows > 0;
+
+        /**
+         * First index of last row
+         **/
+        const firstOffsetIndex = total - total % cols;
+
+        if (offsetLastRow && index >= firstOffsetIndex) {
+            w = width / (total % cols);
         } else {
             w = width / cols;
         }