apps/frontend/src/components/board/BoardView.tsx

@@ -14,23 +14,12 @@ const BoardView: FunctionComponent<{
   boardViewModel: BoardViewModel;
   revert: boolean;
   onPitSelect: (index: number, pit: Pit) => void;
-}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect }) => {
+}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect: onPitSelect }) => {
   const mancalaGame = game?.mancalaGame;
   const theme = context.themeManager.theme;
 
-  // Compute pit width based on viewport (each column is 11vw)
-  const pitWidth = typeof window !== "undefined" ? window.innerWidth * 0.11 : 100;
-
   const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
-    return (
-      <PitView
-        key={key}
-        pitViewModel={pitViewModel}
-        context={context}
-        onClick={() => onPitSelect(pit.index, pit)}
-        fontSize={pitWidth / 5}
-      />
-    );
+    return <PitView key={key} pitViewModel={pitViewModel} onClick={() => onPitSelect(pit.index, pit)} />;
   };
   const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
 
@@ -47,14 +36,12 @@ const BoardView: FunctionComponent<{
         pitViewModel={revert ? player2BankViewModel : player1BankViewModel}
         gridColumn="8 / 9"
         gridRow="1 / 3"
-        fontSize={pitWidth / 6}
       />
       <StoreView
         context={context}
         pitViewModel={revert ? player1BankViewModel : player2BankViewModel}
         gridColumn="1 / 2"
         gridRow="1 / 3"
-        fontSize={pitWidth / 6}
       />
       {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
       {revert ? player2Pits : player1Pits}

apps/frontend/src/components/board/PitView.tsx

@@ -1,50 +1,20 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
 import Util from "../../util/Util";
-import { PitViewModel, getColorByBrightness } from "@mancala/core";
-import { Context } from "../../context/context";
+import { PitViewModel } from "@mancala/core";
 import StoneView from "./StoneView";
 
 const PitView: FunctionComponent<{
     pitViewModel: PitViewModel;
-    context: Context;
     onClick: () => void;
-    fontSize: number;
-}> = ({ pitViewModel, context, onClick, fontSize }) => {
+}> = ({ pitViewModel, onClick }) => {
     const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
         <StoneView key={index} color={pitViewModel.stoneColor} />
     ));
-    const textColor = getColorByBrightness(
-        pitViewModel.pitColor,
-        context.themeManager.theme.textColor,
-        context.themeManager.theme.textLightColor
-    );
+
     return (
-        <div
-            className="pit"
-            onClick={onClick}
-            style={{
-                background: pitViewModel.pitColor,
-                position: "relative",
-            }}
-        >
+        <div className="pit" onClick={onClick} style={{ background: pitViewModel.pitColor }}>
             {stones}
-            {pitViewModel.stoneCount > 0 && (
-                <span
-                    style={{
-                        color: textColor,
-                        position: "absolute",
-                        bottom: fontSize / 2,
-                        left: "50%",
-                        transform: "translateX(-50%)",
-                        fontFamily: "monospace",
-                        fontWeight: "bold",
-                        fontSize: fontSize,
-                    }}
-                >
-                    {pitViewModel.stoneCount}
-                </span>
-            )}
             <style jsx>{`
                 .pit {
                     margin: 5px;

apps/mobile/package.json

@@ -21,8 +21,8 @@
     "react-i18next": "^14.1.0",
     "react-native": "0.82.1",
     "react-native-get-random-values": "^1.11.0",
-    "react-native-mmkv": "^4.3.2",
-    "react-native-nitro-modules": "^0.36.1",
+    "react-native-mmkv": "^4.0.0",
+    "react-native-nitro-modules": "^0.31.6",
     "react-native-safe-area-context": "^5.5.2",
     "react-native-screens": "^4.18.0",
     "react-native-snackbar": "^2.6.2",

apps/mobile/src/components/board/BoardView.tsx

@@ -38,11 +38,8 @@ const BoardView: FunctionComponent<{
     return <PitView 
     key={key} 
     pitViewModel={pitViewModel} 
-    context={context}
     onClick={() => onPitSelect(pit.index, pit)}
-    style={{width: pitWidth, height: pitWidth}}
-    fontSize={pitWidth / 5}
-  > 
+    style={{width: pitWidth, height: pitWidth}} > 
       {stones}
     </PitView>;
   };

apps/mobile/src/components/board/PitView.tsx

@@ -1,24 +1,20 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
-import { PitViewModel, getColorByBrightness } from "@mancala/core";
-import { Context } from "../../context/context";
-import { Pressable, View, ViewStyle, Text } from "react-native";
+import { PitViewModel } from "@mancala/core";
+import { Pressable, View, ViewStyle } from "react-native";
 
 const PitView: FunctionComponent<{
     pitViewModel: PitViewModel;
-    context: Context;
     onClick: () => void;
     style: ViewStyle,
-    fontSize: number;
     children: React.ReactNode
-}> = ({ pitViewModel, context, onClick, style, fontSize, children }) => {
-    const textColor = getColorByBrightness(
-        pitViewModel.pitColor,
-        context.themeManager.theme.textColor,
-        context.themeManager.theme.textLightColor
-    );
+}> = ({ pitViewModel, onClick, style, children }) => {
     return (
-        <View style={[style, { backgroundColor: pitViewModel.pitColor, borderRadius: 100, position: 'relative' }] }>
+        <View style={[style, {
+            backgroundColor: pitViewModel.pitColor,
+            borderRadius: 100,
+            //justifyItems: 'center',
+        }]}>
             <Pressable onPress={onClick} style={{
                 width: "100%",
                 height: "100%",
@@ -32,20 +28,8 @@ const PitView: FunctionComponent<{
             }}>
                 {children}
             </Pressable>
-            {pitViewModel.stoneCount > 0 && (
-                <Text style={{
-                    color: textColor,
-                    position: 'absolute',
-                    bottom: fontSize / 2,
-                    alignSelf: 'center',
-                    fontFamily: 'monospace',
-                    fontWeight: 'bold',
-                    fontSize: fontSize
-                }}>
-                    {pitViewModel.stoneCount}
-                </Text>
-            )}
         </View>
+
     );
 };