fix: display stone count immediately on board pits

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

@@ -14,12 +14,23 @@ const BoardView: FunctionComponent<{
   boardViewModel: BoardViewModel;
   revert: boolean;
   onPitSelect: (index: number, pit: Pit) => void;
-}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect: onPitSelect }) => {
+}> = ({ game, context, boardId, boardViewModel, revert, 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} onClick={() => onPitSelect(pit.index, pit)} />;
+    return (
+      <PitView
+        key={key}
+        pitViewModel={pitViewModel}
+        context={context}
+        onClick={() => onPitSelect(pit.index, pit)}
+        fontSize={pitWidth / 5}
+      />
+    );
   };
   const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
 
@@ -36,12 +47,14 @@ 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,20 +1,50 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
 import Util from "../../util/Util";
-import { PitViewModel } from "@mancala/core";
+import { PitViewModel, getColorByBrightness } from "@mancala/core";
+import { Context } from "../../context/context";
 import StoneView from "./StoneView";
 
 const PitView: FunctionComponent<{
     pitViewModel: PitViewModel;
+    context: Context;
     onClick: () => void;
-}> = ({ pitViewModel, onClick }) => {
+    fontSize: number;
+}> = ({ pitViewModel, context, onClick, fontSize }) => {
     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 }}>
+        <div
+            className="pit"
+            onClick={onClick}
+            style={{
+                background: pitViewModel.pitColor,
+                position: "relative",
+            }}
+        >
             {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/src/components/board/BoardView.tsx

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

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

@@ -1,20 +1,24 @@
 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',
-        }]}>
+        <View style={[style, { backgroundColor: pitViewModel.pitColor, borderRadius: 100, position: 'relative' }] }>
             <Pressable onPress={onClick} style={{
                 width: "100%",
                 height: "100%",
@@ -28,8 +32,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>
-
     );
 };