fix: display stone count immediately on board pits

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

@@ -21,18 +21,18 @@ const BoardView: FunctionComponent<{
   // 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) => (
+  const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
-    <PitView
+    return (
-      key={key}
+      <PitView
-      pitViewModel={pitViewModel}
+        key={key}
-      context={context}
+        pitViewModel={pitViewModel}
-      onClick={() => onPitSelect(pit.index, pit)}
+        context={context}
-      fontSize={pitWidth / 6}
+        onClick={() => onPitSelect(pit.index, pit)}
-    />
+        fontSize={pitWidth / 5}
-  );
+      />
-
+    );
-  const createPitViewList = (pits: Pit[]) =>
+  };
-    pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
+  const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
 
   const player1Pits = createPitViewList(mancalaGame?.board.player1Pits);
   const player2Pits = createPitViewList(mancalaGame?.board.player2Pits);
@@ -40,7 +40,6 @@ const BoardView: FunctionComponent<{
   const player2BankIndex = mancalaGame?.board.player2BankIndex();
   const player1BankViewModel = boardViewModel.pits[player1BankIndex];
   const player2BankViewModel = boardViewModel.pits[player2BankIndex];
-
   return (
     <div className="board" style={{ background: theme.boardColor }}>
       <StoreView

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

@@ -1,83 +1,66 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
-import { getColorByBrightness, PitViewModel } from "@mancala/core";
-import { Context } from "../../context/context";
 import Util from "../../util/Util";
+import { PitViewModel, getColorByBrightness } from "@mancala/core";
+import { Context } from "../../context/context";
 import StoneView from "./StoneView";
 
-interface PitViewProps {
+const PitView: FunctionComponent<{
-  pitViewModel: PitViewModel;
+    pitViewModel: PitViewModel;
-  context: Context;
+    context: Context;
-  onClick: () => void;
+    onClick: () => void;
-  fontSize: number;
+    fontSize: number;
-}
+}> = ({ pitViewModel, context, onClick, fontSize }) => {
-
+    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
-const PitView: FunctionComponent<PitViewProps> = ({ pitViewModel, context, onClick, fontSize }) => {
+        <StoneView key={index} color={pitViewModel.stoneColor} />
-  const textColor = getColorByBrightness(
+    ));
-    pitViewModel.pitColor,
+    const textColor = getColorByBrightness(
-    context.themeManager.theme.textColor,
+        pitViewModel.pitColor,
-    context.themeManager.theme.textLightColor
+        context.themeManager.theme.textColor,
-  );
+        context.themeManager.theme.textLightColor
-
+    );
-  const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
+    return (
-    <StoneView key={index} color={pitViewModel.stoneColor} />
+        <div
-  ));
+            className="pit"
-
+            onClick={onClick}
-  return (
+            style={{
-    <div
+                background: pitViewModel.pitColor,
-      className="pit"
+                position: "relative",
-      onClick={onClick}
+            }}
-      style={{
-        background: pitViewModel.pitColor,
-        position: "relative",
-      }}
-    >
-      {stones}
-      {pitViewModel.stoneCount > 0 && (
-        <span
-          className="stone-count"
-          style={{
-            color: textColor,
-            position: "absolute",
-            bottom: fontSize / 2,
-            left: "50%",
-            transform: "translateX(-50%)",
-            fontFamily: "monospace",
-            fontWeight: "bold",
-            fontSize: fontSize,
-            pointerEvents: "none",
-          }}
         >
-          {pitViewModel.stoneCount}
+            {stones}
-        </span>
+            {pitViewModel.stoneCount > 0 && (
-      )}
+                <span
-      <style jsx>{`
+                    style={{
-        .pit {
+                        color: textColor,
-          margin: 5px;
+                        position: "absolute",
-          padding: 5px;
+                        bottom: fontSize / 2,
-          border-radius: 10vw;
+                        left: "50%",
-          transition: background-color 0.5s;
+                        transform: "translateX(-50%)",
-          display: flex;
+                        fontFamily: "monospace",
-          align-items: center;
+                        fontWeight: "bold",
-          align-content: center;
+                        fontSize: fontSize,
-          justify-content: center;
+                    }}
-          justify-items: center;
+                >
-          flex-wrap: wrap;
+                    {pitViewModel.stoneCount}
-          position: relative;
+                </span>
-        }
+            )}
-        .stone-count {
+            <style jsx>{`
-          position: absolute;
+                .pit {
-          bottom: 1.0vw;
+                    margin: 5px;
-          left: 50%;
+                    padding: 5px;
-          transform: translateX(-50%);
+                    border-radius: 10vw;
-          font-family: monospace;
+                    transition: background-color 0.5s;
-          font-size: 1.5vw;
+                    display: flex;
-          font-weight: bold;
+                    align-items: center;
-          pointer-events: none;
+                    align-content: center;
-        }
+                    justify-content: center;
-      `}</style>
+                    justify-items: center;
-    </div>
+                    flex-wrap: wrap;
-  );
+                }
+            `}</style>
+        </div>
+    );
 };
 
 export default PitView;

apps/frontend/yarn.lock

@@ -2019,10 +2019,10 @@ uuid@^10.0.0:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-10.0.0.tgz#5a95aa454e6e002725c79055fd42aaba30ca6294"
   integrity sha512-8XkAphELsDnEGrDxUOHB3RGvXz6TeuYSGEZBOjtTtPm2lwhGBjLgOzLHB63IUWfBpNucQjND6d3AOudO+H3RWQ==
 
-uuid@^11.0.3:
+uuid@^8.3.2:
-  version "11.1.1"
+  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-11.1.1.tgz#f6d81d2e1c65d00762e5e29b16c5d2d995e208ad"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
-  integrity sha512-vIYxrBCC/N/K+Js3qSN88go7kIfNPssr/hHCesKCQNAjmgvYS2oqr69kIufEG+O4+PfezOH4EbIeHCfFov8ZgQ==
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
 v8-compile-cache@^2.0.0:
   version "2.3.0"

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

@@ -17,9 +17,9 @@ 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 windowWidth = Dimensions.get('window').width;
-  const windowHeight = Dimensions.get('window').height; // Currently unused but kept for potential future use
+  const windowHeight = Dimensions.get('window').height;
 
   const boardMargin = 0;
   const boardPadding = 10;
@@ -33,22 +33,19 @@ const BoardView: FunctionComponent<{
 
   const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
     const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
-      <StoneView key={index} color={pitViewModel.stoneColor} style={{ width: pitWidth / 10, height: pitWidth / 10 }} />
+      <StoneView key={index} color={pitViewModel.stoneColor} style={{width: pitWidth / 10, height: pitWidth / 10}}/>
     ));
-    return (
+    return <PitView 
-      <PitView
+    key={key} 
-        key={key}
+    pitViewModel={pitViewModel} 
-        pitViewModel={pitViewModel}
+    context={context}
-        context={context}
+    onClick={() => onPitSelect(pit.index, pit)}
-        onClick={() => onPitSelect(pit.index, pit)}
+    style={{width: pitWidth, height: pitWidth}}
-        style={{ width: pitWidth, height: pitWidth }}
+    fontSize={pitWidth / 5}
-        fontSize={pitWidth / 5} // keep original divisor as per revert request
+  > 
-      >
+      {stones}
-        {stones}
+    </PitView>;
-      </PitView>
-    );
   };
-
   const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
 
   const player1Pits = createPitViewList(mancalaGame?.board.player1Pits);
@@ -60,60 +57,52 @@ const BoardView: FunctionComponent<{
 
   const primaryStoreViewModel = revert ? player1BankViewModel : player2BankViewModel;
   const secondaryStoreViewModel = revert ? player2BankViewModel : player1BankViewModel;
-
   const stonesPrimaryStore = [...Util.range(primaryStoreViewModel.stoneCount)].map((i, index) => (
-    <StoneView key={index} color={primaryStoreViewModel.stoneColor} style={{ width: pitWidth / 10, height: pitWidth / 10 }} />
+    <StoneView key={index} color={primaryStoreViewModel.stoneColor} style={{width: pitWidth / 10, height: pitWidth / 10}}/>
   ));
-
   const stonesSecondaryStore = [...Util.range(secondaryStoreViewModel.stoneCount)].map((i, index) => (
-    <StoneView key={index} color={secondaryStoreViewModel.stoneColor} style={{ width: pitWidth / 10, height: pitWidth / 10 }} />
+    <StoneView key={index} color={secondaryStoreViewModel.stoneColor} style={{width: pitWidth / 10, height: pitWidth / 10}} />
   ));
 
   return (
-    <View
+    <View style={{
-      style={{
+      backgroundColor: theme.boardColor,
-        backgroundColor: theme.boardColor,
+      padding: boardPadding,
-        padding: boardPadding,
+      borderRadius: 20,
-        borderRadius: 20,
+      flexDirection: "row",
-        flexDirection: "row",
+      gap: gap,
-        gap: gap,
+      height: "auto",
-        height: "auto",
+    }}>
-      }}
-    >
       <StoreView
         context={context}
         pitViewModel={primaryStoreViewModel}
-        style={{ width: pitWidth, height: pitWidth * 2 + gap }}
+        style={{width: pitWidth, height: pitWidth * 2 + gap}}
         fontSize={pitWidth / 5}
       >
         {stonesPrimaryStore}
       </StoreView>
-      <View style={{ flex: 6 }}>
+      <View style={{flex: 6}}>
-        <View
+        <View style={{
-          style={{
+          flexDirection: "row",
-            flexDirection: "row",
+          width: '100%',
-            width: "100%",
+          flex: 1,
-            flex: 1,
+          gap: gap
-            gap: gap,
+        }}>
-          }}
-        >
           {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
         </View>
-        <View
+        <View style={{
-          style={{
+          flexDirection: "row",
-            flexDirection: "row",
+          width: '100%',
-            width: "100%",
+          flex: 1,
-            flex: 1,
+          gap: gap
-            gap: gap,
+        }}>
-          }}
-        >
           {revert ? player2Pits : player1Pits}
         </View>
       </View>
       <StoreView
         context={context}
         pitViewModel={secondaryStoreViewModel}
-        style={{ width: pitWidth, height: pitWidth * 2 + gap }}
+        style={{width: pitWidth, height: pitWidth * 2 + gap}}
         fontSize={pitWidth / 5}
       >
         {stonesSecondaryStore}

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

@@ -3,50 +3,50 @@ import { FunctionComponent } from "react";
 import { PitViewModel, getColorByBrightness } from "@mancala/core";
 import { Context } from "../../context/context";
 import { Pressable, View, ViewStyle, Text } from "react-native";
-import Util from "../../util/Util";
-import StoneView from "./StoneView";
 
-interface PitViewProps {
+const PitView: FunctionComponent<{
-  pitViewModel: PitViewModel;
+    pitViewModel: PitViewModel;
-  context: Context;
+    context: Context;
-  onClick: () => void;
+    onClick: () => void;
-  style: ViewStyle;
+    style: ViewStyle,
-  fontSize: number;
+    fontSize: number;
-}
+    children: React.ReactNode
-
+}> = ({ pitViewModel, context, onClick, style, fontSize, children }) => {
-const PitView: FunctionComponent<PitViewProps> = ({ pitViewModel, context, onClick, style, fontSize }) => {
+    const textColor = getColorByBrightness(
-  const textColor = getColorByBrightness(
+        pitViewModel.pitColor,
-    pitViewModel.pitColor,
+        context.themeManager.theme.textColor,
-    context.themeManager.theme.textColor,
+        context.themeManager.theme.textLightColor
-    context.themeManager.theme.textLightColor
+    );
-  );
+    return (
-
+        <View style={[style, { backgroundColor: pitViewModel.pitColor, borderRadius: 100, position: 'relative' }] }>
-  const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
+            <Pressable onPress={onClick} style={{
-    <StoneView key={index} color={pitViewModel.stoneColor} style={{ width: style.width ? style.width / 10 : 10, height: style.width ? style.width / 10 : 10 }} />
+                width: "100%",
-  ));
+                height: "100%",
-
+                padding: 5,
-  return (
+                display: 'flex',
-    <View style={[style, { backgroundColor: pitViewModel.pitColor, borderRadius: 100, position: "relative" }] }>
+                alignItems: 'center',
-      <Pressable onPress={onClick} style={{ width: "100%", height: "100%", padding: 5, display: "flex", alignItems: "center", alignContent: "center", justifyContent: "center", flexDirection: "row", flexWrap: "wrap" }}>
+                alignContent: 'center',
-        {stones}
+                justifyContent: 'center',
-      </Pressable>
+                flexDirection: "row",
-      {pitViewModel.stoneCount > 0 && (
+                flexWrap: "wrap"
-        <Text
+            }}>
-          style={{
+                {children}
-            color: textColor,
+            </Pressable>
-            position: "absolute",
+            {pitViewModel.stoneCount > 0 && (
-            bottom: fontSize / 2,
+                <Text style={{
-            alignSelf: "center",
+                    color: textColor,
-            fontFamily: "monospace",
+                    position: 'absolute',
-            fontWeight: "bold",
+                    bottom: fontSize / 2,
-            fontSize: fontSize,
+                    alignSelf: 'center',
-          }}
+                    fontFamily: 'monospace',
-        >
+                    fontWeight: 'bold',
-          {pitViewModel.stoneCount}
+                    fontSize: fontSize
-        </Text>
+                }}>
-      )}
+                    {pitViewModel.stoneCount}
-    </View>
+                </Text>
-  );
+            )}
+        </View>
+    );
 };
 
 export default PitView;