From d942d649004fc6bb3942cd3c0f2eea0b789d6f86 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Tue, 24 May 2022 22:25:33 +0300
Subject: [PATCH] add stone count label to store view

---
 src/components/BoardView.tsx | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/BoardView.tsx b/src/components/BoardView.tsx
index 38c7cda..c1706a0 100644
--- a/src/components/BoardView.tsx
+++ b/src/components/BoardView.tsx
@@ -59,10 +59,11 @@ const HoleView: FunctionComponent<{
 };
 
 const StoreView: FunctionComponent<{
+  context: Context;
   pitViewModel: PitViewModel;
   gridColumn: string;
   gridRow: string;
-}> = ({ pitViewModel, gridColumn, gridRow }) => {
+}> = ({ context, pitViewModel, gridColumn, gridRow }) => {
   const balls = [...range(pitViewModel.stoneCount)].map((i) => (
     <BallView color={pitViewModel.stoneColor} />
   ));
@@ -79,9 +80,22 @@ const StoreView: FunctionComponent<{
         justifyContent: "center",
         alignContent: "center",
         flexWrap: "wrap",
+        position: "relative",
       }}
     >
       {balls}
+      <span
+        style={{
+          position: "absolute",
+          bottom: "2vw",
+          fontFamily: "monospace",
+          fontWeight: "bold",
+          fontSize: "2vw",
+          color: context.themeManager.theme.ballColor,
+        }}
+      >
+        {balls.length}
+      </span>
     </div>
   );
 };
@@ -119,6 +133,7 @@ const BoardView: FunctionComponent<{
     boardViewModel.pits[game.board.player2BankIndex()];
   const player1Bank = (
     <StoreView
+      context={context}
       pitViewModel={player1BankViewModel}
       gridColumn="1 / 2"
       gridRow="1 / 3"
@@ -126,6 +141,7 @@ const BoardView: FunctionComponent<{
   );
   const player2Bank = (
     <StoreView
+      context={context}
       pitViewModel={player2BankViewModel}
       gridColumn="8 / 9"
       gridRow="1 / 3"
@@ -149,11 +165,13 @@ const BoardView: FunctionComponent<{
       {userKey === game.player2Id ? (
         <>
           <StoreView
+            context={context}
             pitViewModel={player1BankViewModel}
             gridColumn="1 / 2"
             gridRow="1 / 3"
           />
           <StoreView
+            context={context}
             pitViewModel={player2BankViewModel}
             gridColumn="8 / 9"
             gridRow="1 / 3"
@@ -164,11 +182,13 @@ const BoardView: FunctionComponent<{
       ) : (
         <>
           <StoreView
+            context={context}
             pitViewModel={player1BankViewModel}
             gridColumn="8 / 9"
             gridRow="1 / 3"
           />
           <StoreView
+            context={context}
             pitViewModel={player2BankViewModel}
             gridColumn="1 / 2"
             gridRow="1 / 3"