From 9c95d9dc4439d6187cb8a09db65d355ec7488974 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Tue, 26 May 2026 00:32:20 +0300
Subject: [PATCH] feat(mobile): display stone count in pit

---
 .../mobile/src/components/board/BoardView.tsx |  5 ++-
 apps/mobile/src/components/board/PitView.tsx  | 31 ++++++++++++++++---
 2 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/apps/mobile/src/components/board/BoardView.tsx b/apps/mobile/src/components/board/BoardView.tsx
index fdb729f..54fb4e1 100644
--- a/apps/mobile/src/components/board/BoardView.tsx
+++ b/apps/mobile/src/components/board/BoardView.tsx
@@ -39,7 +39,10 @@ const BoardView: FunctionComponent<{
     key={key} 
     pitViewModel={pitViewModel} 
     onClick={() => onPitSelect(pit.index, pit)}
-    style={{width: pitWidth, height: pitWidth}} > 
+    style={{width: pitWidth, height: pitWidth}} 
+    context={context}
+    fontSize={pitWidth / 5}
+  > 
       {stones}
     </PitView>;
   };
diff --git a/apps/mobile/src/components/board/PitView.tsx b/apps/mobile/src/components/board/PitView.tsx
index 66a5df8..7a9c004 100644
--- a/apps/mobile/src/components/board/PitView.tsx
+++ b/apps/mobile/src/components/board/PitView.tsx
@@ -1,19 +1,28 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
-import { PitViewModel } from "@mancala/core";
-import { Pressable, View, ViewStyle } from "react-native";
+import { PitViewModel, getColorByBrightness } from "@mancala/core";
+import { Context } from "../../context/context";
+import { Pressable, View, ViewStyle, Text } from "react-native";
 
 const PitView: FunctionComponent<{
     pitViewModel: PitViewModel;
+    context: Context;
     onClick: () => void;
     style: ViewStyle,
+    fontSize: number;
     children: React.ReactNode
-}> = ({ pitViewModel, onClick, style, children }) => {
+}> = ({ pitViewModel, context, onClick, style, fontSize, children }) => {
+    const textColor = getColorByBrightness(
+        pitViewModel.pitColor,
+        context.themeManager.theme.textColor,
+        context.themeManager.theme.textLightColor
+    );
+
     return (
         <View style={[style, {
             backgroundColor: pitViewModel.pitColor,
             borderRadius: 100,
-            //justifyItems: 'center',
+            position: 'relative'
         }]}>
             <Pressable onPress={onClick} style={{
                 width: "100%",
@@ -28,8 +37,20 @@ 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>
-
     );
 };