jhalitaksoy/mancala
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: display stone count immediately on board pits

Browse Source
This commit is contained in:
Halit Aksoy 2026-07-02 23:40:45 +03:00
parent 3efc7c5ffe
commit 0be96a6229
4 changed files with 182 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
apps/frontend/src/components/board/BoardView.tsx
View File

@ -14,14 +14,25 @@ const BoardView: FunctionComponent<{
boardViewModel: BoardViewModel; boardViewModel: BoardViewModel;
revert: boolean; revert: boolean;
onPitSelect: (index: number, pit: Pit) => void; onPitSelect: (index: number, pit: Pit) => void;
}> = ({ game, context, boardId, boardViewModel, revert, onPitSelect: onPitSelect }) => { }> = ({ game, context, boardId, boardViewModel, revert, onPitSelect }) => {
const mancalaGame = game?.mancalaGame; const mancalaGame = game?.mancalaGame;
const theme = context.themeManager.theme; const theme = context.themeManager.theme;
const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => { // Compute pit width based on viewport (each column is 11vw)
return <PitView key={key} pitViewModel={pitViewModel} onClick={() => onPitSelect(pit.index, pit)} context={context} />; const pitWidth = typeof window !== "undefined" ? window.innerWidth * 0.11 : 100;
};
const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index])); const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => (
<PitView
key={key}
pitViewModel={pitViewModel}
context={context}
onClick={() => onPitSelect(pit.index, pit)}
fontSize={pitWidth / 6}
/>
);
const createPitViewList = (pits: Pit[]) =>
pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
const player1Pits = createPitViewList(mancalaGame?.board.player1Pits); const player1Pits = createPitViewList(mancalaGame?.board.player1Pits);
const player2Pits = createPitViewList(mancalaGame?.board.player2Pits); const player2Pits = createPitViewList(mancalaGame?.board.player2Pits);
@ -29,6 +40,7 @@ const BoardView: FunctionComponent<{
const player2BankIndex = mancalaGame?.board.player2BankIndex(); const player2BankIndex = mancalaGame?.board.player2BankIndex();
const player1BankViewModel = boardViewModel.pits[player1BankIndex]; const player1BankViewModel = boardViewModel.pits[player1BankIndex];
const player2BankViewModel = boardViewModel.pits[player2BankIndex]; const player2BankViewModel = boardViewModel.pits[player2BankIndex];
return ( return (
<div className="board" style={{ background: theme.boardColor }}> <div className="board" style={{ background: theme.boardColor }}>
<StoreView <StoreView
@ -36,12 +48,14 @@ const BoardView: FunctionComponent<{
pitViewModel={revert ? player2BankViewModel : player1BankViewModel} pitViewModel={revert ? player2BankViewModel : player1BankViewModel}
gridColumn="8 / 9" gridColumn="8 / 9"
gridRow="1 / 3" gridRow="1 / 3"
fontSize={pitWidth / 6}
/> />
<StoreView <StoreView
context={context} context={context}
pitViewModel={revert ? player1BankViewModel : player2BankViewModel} pitViewModel={revert ? player1BankViewModel : player2BankViewModel}
gridColumn="1 / 2" gridColumn="1 / 2"
gridRow="1 / 3" gridRow="1 / 3"
fontSize={pitWidth / 6}
/> />
{revert ? player1Pits?.reverse() : player2Pits?.reverse()} {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
{revert ? player2Pits : player1Pits} {revert ? player2Pits : player1Pits}

43
apps/frontend/src/components/board/PitView.tsx
View File

@ -1,29 +1,56 @@
import * as React from "react"; import * as React from "react";
import { FunctionComponent } from "react"; import { FunctionComponent } from "react";
import { getColorByBrightness } from "@mancala/core"; import { getColorByBrightness, PitViewModel } from "@mancala/core";
import { Context } from "../../context/context"; import { Context } from "../../context/context";
import Util from "../../util/Util"; import Util from "../../util/Util";
import { PitViewModel } from "@mancala/core";
import StoneView from "./StoneView"; import StoneView from "./StoneView";
const PitView: FunctionComponent<{ interface PitViewProps {
pitViewModel: PitViewModel; pitViewModel: PitViewModel;
onClick: () => void;
context: Context; context: Context;
}> = ({ pitViewModel, onClick, context }) => { onClick: () => void;
fontSize: number;
}
const PitView: FunctionComponent<PitViewProps> = ({ pitViewModel, context, onClick, 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
); );
const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => ( const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
<StoneView key={index} color={pitViewModel.stoneColor} /> <StoneView key={index} color={pitViewModel.stoneColor} />
)); ));
return ( return (
<div className="pit" onClick={onClick} style={{ background: pitViewModel.pitColor }}> <div
className="pit"
onClick={onClick}
style={{
background: pitViewModel.pitColor,
position: "relative",
}}
>
{stones} {stones}
<span className="stone-count">{pitViewModel.stoneCount}</span> {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}
</span>
)}
<style jsx>{` <style jsx>{`
.pit { .pit {
margin: 5px; margin: 5px;
@ -46,8 +73,6 @@ const PitView: FunctionComponent<{
font-family: monospace; font-family: monospace;
font-size: 1.5vw; font-size: 1.5vw;
font-weight: bold; font-weight: bold;
color: ${textColor};
pointer-events: none; pointer-events: none;
} }
`}</style> `}</style>

57
apps/mobile/src/components/board/BoardView.tsx
View File

@ -17,9 +17,9 @@ const BoardView: FunctionComponent<{
boardViewModel: BoardViewModel; boardViewModel: BoardViewModel;
revert: boolean; revert: boolean;
onPitSelect: (index: number, pit: Pit) => void; 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 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 boardMargin = 0;
const boardPadding = 10; const boardPadding = 10;
@ -33,19 +33,22 @@ const BoardView: FunctionComponent<{
const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => { const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => ( 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} key={key}
pitViewModel={pitViewModel} pitViewModel={pitViewModel}
onClick={() => onPitSelect(pit.index, pit)}
style={{width: pitWidth, height: pitWidth}}
context={context} context={context}
fontSize={pitWidth / 5} onClick={() => onPitSelect(pit.index, pit)}
style={{ width: pitWidth, height: pitWidth }}
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 createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
const player1Pits = createPitViewList(mancalaGame?.board.player1Pits); const player1Pits = createPitViewList(mancalaGame?.board.player1Pits);
@ -57,52 +60,60 @@ const BoardView: FunctionComponent<{
const primaryStoreViewModel = revert ? player1BankViewModel : player2BankViewModel; const primaryStoreViewModel = revert ? player1BankViewModel : player2BankViewModel;
const secondaryStoreViewModel = revert ? player2BankViewModel : player1BankViewModel; const secondaryStoreViewModel = revert ? player2BankViewModel : player1BankViewModel;
const stonesPrimaryStore = [...Util.range(primaryStoreViewModel.stoneCount)].map((i, index) => ( 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) => ( 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 ( return (
<View style={{ <View
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 <StoreView
context={context} context={context}
pitViewModel={primaryStoreViewModel} pitViewModel={primaryStoreViewModel}
style={{width: pitWidth, height: pitWidth * 2 + gap}} style={{ width: pitWidth, height: pitWidth * 2 + gap }}
fontSize={pitWidth / 5} fontSize={pitWidth / 5}
> >
{stonesPrimaryStore} {stonesPrimaryStore}
</StoreView> </StoreView>
<View style={{flex: 6}}> <View style={{ flex: 6 }}>
<View style={{ <View
style={{
flexDirection: "row", flexDirection: "row",
width: '100%', width: "100%",
flex: 1, flex: 1,
gap: gap gap: gap,
}}> }}
>
{revert ? player1Pits?.reverse() : player2Pits?.reverse()} {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
</View> </View>
<View style={{ <View
style={{
flexDirection: "row", flexDirection: "row",
width: '100%', width: "100%",
flex: 1, flex: 1,
gap: gap gap: gap,
}}> }}
>
{revert ? player2Pits : player1Pits} {revert ? player2Pits : player1Pits}
</View> </View>
</View> </View>
<StoreView <StoreView
context={context} context={context}
pitViewModel={secondaryStoreViewModel} pitViewModel={secondaryStoreViewModel}
style={{width: pitWidth, height: pitWidth * 2 + gap}} style={{ width: pitWidth, height: pitWidth * 2 + gap }}
fontSize={pitWidth / 5} fontSize={pitWidth / 5}
> >
{stonesSecondaryStore} {stonesSecondaryStore}

51
apps/mobile/src/components/board/PitView.tsx
View File

@ -3,50 +3,45 @@ import { FunctionComponent } from "react";
import { PitViewModel, getColorByBrightness } from "@mancala/core"; import { PitViewModel, getColorByBrightness } from "@mancala/core";
import { Context } from "../../context/context"; import { Context } from "../../context/context";
import { Pressable, View, ViewStyle, Text } from "react-native"; import { Pressable, View, ViewStyle, Text } from "react-native";
import Util from "../../util/Util";
import StoneView from "./StoneView";
const PitView: FunctionComponent<{ interface PitViewProps {
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
); );
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 ( return (
<View style={[style, { <View style={[style, { backgroundColor: pitViewModel.pitColor, borderRadius: 100, position: "relative" }] }>
backgroundColor: pitViewModel.pitColor, <Pressable onPress={onClick} style={{ width: "100%", height: "100%", padding: 5, display: "flex", alignItems: "center", alignContent: "center", justifyContent: "center", flexDirection: "row", flexWrap: "wrap" }}>
borderRadius: 100, {stones}
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}
</Pressable> </Pressable>
{pitViewModel.stoneCount > 0 && ( {pitViewModel.stoneCount > 0 && (
<Text style={{ <Text
style={{
color: textColor, color: textColor,
position: 'absolute', position: "absolute",
bottom: fontSize / 2, bottom: fontSize / 2,
alignSelf: 'center', alignSelf: "center",
fontFamily: 'monospace', fontFamily: "monospace",
fontWeight: 'bold', fontWeight: "bold",
fontSize: fontSize fontSize: fontSize,
}}> }}
>
{pitViewModel.stoneCount} {pitViewModel.stoneCount}
</Text> </Text>
)} )}