fix: display stone count immediately on board pits

fix(mobile): fix android build issue
Merge pull request 'feature/stone-count-text' (#1 ) from feature/stone-count-text into main
2026-07-04 11:54:31 +03:00 · 2026-07-02 23:44:55 +03:00 · 2026-07-02 21:12:44 +03:00 · 2026-05-26 00:32:20 +03:00 · 2026-05-26 00:31:59 +03:00
5 changed files with 183 additions and 154 deletions
--- a/apps/frontend/src/components/board/BoardView.tsx
+++ b/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) => {
-    return (
+  const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => (
    <PitView
      key={key}
      pitViewModel={pitViewModel}
      context={context}
      onClick={() => onPitSelect(pit.index, pit)}
-        fontSize={pitWidth / 5}
+      fontSize={pitWidth / 6}
    />
  );
-  };
-  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,6 +40,7 @@ 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
--- a/apps/frontend/src/components/board/PitView.tsx
+++ b/apps/frontend/src/components/board/PitView.tsx
@ -1,24 +1,28 @@
 import * as React from "react";
 import { FunctionComponent } from "react";
-import Util from "../../util/Util";
-import { PitViewModel, getColorByBrightness } from "@mancala/core";
+import { getColorByBrightness, PitViewModel } from "@mancala/core";
 import { Context } from "../../context/context";
+import Util from "../../util/Util";
 import StoneView from "./StoneView";

-const PitView: FunctionComponent<{
+interface PitViewProps {
  pitViewModel: PitViewModel;
  context: Context;
  onClick: () => void;
  fontSize: number;
-}> = ({ pitViewModel, context, onClick, fontSize }) => {
-    const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
-        <StoneView key={index} color={pitViewModel.stoneColor} />
-    ));
+}
+
+const PitView: FunctionComponent<PitViewProps> = ({ pitViewModel, context, onClick, fontSize }) => {
  const textColor = getColorByBrightness(
    pitViewModel.pitColor,
    context.themeManager.theme.textColor,
    context.themeManager.theme.textLightColor
  );
+
+  const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
+    <StoneView key={index} color={pitViewModel.stoneColor} />
+  ));
+
  return (
    <div
      className="pit"
@ -31,6 +35,7 @@ const PitView: FunctionComponent<{
      {stones}
      {pitViewModel.stoneCount > 0 && (
        <span
+          className="stone-count"
          style={{
            color: textColor,
            position: "absolute",
@ -40,6 +45,7 @@ const PitView: FunctionComponent<{
            fontFamily: "monospace",
            fontWeight: "bold",
            fontSize: fontSize,
+            pointerEvents: "none",
          }}
        >
          {pitViewModel.stoneCount}
@ -57,6 +63,17 @@ const PitView: FunctionComponent<{
          justify-content: center;
          justify-items: center;
          flex-wrap: wrap;
+          position: relative;
+        }
+        .stone-count {
+          position: absolute;
+          bottom: 1.0vw;
+          left: 50%;
+          transform: translateX(-50%);
+          font-family: monospace;
+          font-size: 1.5vw;
+          font-weight: bold;
+          pointer-events: none;
        }
      `}</style>
    </div>
--- a/apps/frontend/yarn.lock
+++ b/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@^8.3.2:
-  version "8.3.2"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
-  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+uuid@^11.0.3:
+  version "11.1.1"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-11.1.1.tgz#f6d81d2e1c65d00762e5e29b16c5d2d995e208ad"
+  integrity sha512-vIYxrBCC/N/K+Js3qSN88go7kIfNPssr/hHCesKCQNAjmgvYS2oqr69kIufEG+O4+PfezOH4EbIeHCfFov8ZgQ==

 v8-compile-cache@^2.0.0:
  version "2.3.0"
--- a/apps/mobile/src/components/board/BoardView.tsx
+++ b/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: onPitSelect }) => {
+}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect }) => {
  const windowWidth = Dimensions.get('window').width;
-  const windowHeight = Dimensions.get('window').height;
+  const windowHeight = Dimensions.get('window').height; // Currently unused but kept for potential future use

  const boardMargin = 0;
  const boardPadding = 10;
@ -33,19 +33,22 @@ 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 <PitView 
+    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 }}
+        fontSize={pitWidth / 5} // keep original divisor as per revert request
      >
        {stones}
-    </PitView>;
+      </PitView>
+    );
  };
+
  const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));

  const player1Pits = createPitViewList(mancalaGame?.board.player1Pits);
@ -57,52 +60,60 @@ 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 style={{
+    <View
+      style={{
        backgroundColor: theme.boardColor,
        padding: boardPadding,
        borderRadius: 20,
        flexDirection: "row",
        gap: gap,
        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={{
+      <View style={{ flex: 6 }}>
+        <View
+          style={{
            flexDirection: "row",
-          width: '100%',
+            width: "100%",
            flex: 1,
-          gap: gap
-        }}>
+            gap: gap,
+          }}
+        >
          {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
        </View>
-        <View style={{
+        <View
+          style={{
            flexDirection: "row",
-          width: '100%',
+            width: "100%",
            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}
--- a/apps/mobile/src/components/board/PitView.tsx
+++ b/apps/mobile/src/components/board/PitView.tsx
@ -3,45 +3,45 @@ 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";

-const PitView: FunctionComponent<{
+interface PitViewProps {
  pitViewModel: PitViewModel;
  context: Context;
  onClick: () => void;
-    style: ViewStyle,
+  style: ViewStyle;
  fontSize: number;
-    children: React.ReactNode
-}> = ({ pitViewModel, context, onClick, style, fontSize, children }) => {
+}
+
+const PitView: FunctionComponent<PitViewProps> = ({ pitViewModel, context, onClick, style, fontSize }) => {
  const textColor = getColorByBrightness(
    pitViewModel.pitColor,
    context.themeManager.theme.textColor,
    context.themeManager.theme.textLightColor
  );
+
+  const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
+    <StoneView key={index} color={pitViewModel.stoneColor} style={{ width: style.width ? style.width / 10 : 10, height: style.width ? style.width / 10 : 10 }} />
+  ));
+
  return (
-        <View style={[style, { backgroundColor: pitViewModel.pitColor, borderRadius: 100, position: 'relative' }] }>
-            <Pressable onPress={onClick} style={{
-                width: "100%",
-                height: "100%",
-                padding: 5,
-                display: 'flex',
-                alignItems: 'center',
-                alignContent: 'center',
-                justifyContent: 'center',
-                flexDirection: "row",
-                flexWrap: "wrap"
-            }}>
-                {children}
+    <View style={[style, { backgroundColor: pitViewModel.pitColor, borderRadius: 100, position: "relative" }] }>
+      <Pressable onPress={onClick} style={{ width: "100%", height: "100%", padding: 5, display: "flex", alignItems: "center", alignContent: "center", justifyContent: "center", flexDirection: "row", flexWrap: "wrap" }}>
+        {stones}
      </Pressable>
      {pitViewModel.stoneCount > 0 && (
-                <Text style={{
+        <Text
+          style={{
            color: textColor,
-                    position: 'absolute',
+            position: "absolute",
            bottom: fontSize / 2,
-                    alignSelf: 'center',
-                    fontFamily: 'monospace',
-                    fontWeight: 'bold',
-                    fontSize: fontSize
-                }}>
+            alignSelf: "center",
+            fontFamily: "monospace",
+            fontWeight: "bold",
+            fontSize: fontSize,
+          }}
+        >
          {pitViewModel.stoneCount}
        </Text>
      )}
Author	SHA1	Message	Date
Halit Aksoy	0be96a6229	fix: display stone count immediately on board pits	2026-07-04 11:54:31 +03:00
Halit Aksoy	3efc7c5ffe	fix(mobile): fix android build issue	2026-07-02 23:44:55 +03:00
jhalitaksoy	0618527ac7	Merge pull request 'feature/stone-count-text' (#1 ) from feature/stone-count-text into main Reviewed-on: #1	2026-07-02 21:12:44 +03:00
Halit Aksoy	9c95d9dc44	feat(mobile): display stone count in pit	2026-05-26 00:32:20 +03:00
Halit Aksoy	ca92b20b59	feat(frontend): display stone count in pit	2026-05-26 00:31:59 +03:00