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}

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

@ -1,58 +1,83 @@
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; onClick: () => void;
}> = ({ pitViewModel, onClick, context }) => { fontSize: number;
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 ( const PitView: FunctionComponent<PitViewProps> = ({ pitViewModel, context, onClick, fontSize }) => {
<div className="pit" onClick={onClick} style={{ background: pitViewModel.pitColor }}> const textColor = getColorByBrightness(
{stones} pitViewModel.pitColor,
<span className="stone-count">{pitViewModel.stoneCount}</span> context.themeManager.theme.textColor,
<style jsx>{` context.themeManager.theme.textLightColor
.pit { );
margin: 5px;
padding: 5px;
border-radius: 10vw;
transition: background-color 0.5s;
display: flex;
align-items: center;
align-content: center;
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;
color: ${textColor};
pointer-events: none; const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
} <StoneView key={index} color={pitViewModel.stoneColor} />
`}</style> ));
</div>
); return (
<div
className="pit"
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}
</span>
)}
<style jsx>{`
.pit {
margin: 5px;
padding: 5px;
border-radius: 10vw;
transition: background-color 0.5s;
display: flex;
align-items: center;
align-content: center;
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>
);
}; };
export default PitView; export default PitView;

87
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 (
key={key} <PitView
pitViewModel={pitViewModel} key={key}
onClick={() => onPitSelect(pit.index, pit)} pitViewModel={pitViewModel}
style={{width: pitWidth, height: pitWidth}} context={context}
context={context} onClick={() => onPitSelect(pit.index, pit)}
fontSize={pitWidth / 5} style={{ width: pitWidth, height: pitWidth }}
> fontSize={pitWidth / 5} // keep original divisor as per revert request
{stones} >
</PitView>; {stones}
</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
backgroundColor: theme.boardColor, style={{
padding: boardPadding, backgroundColor: theme.boardColor,
borderRadius: 20, padding: boardPadding,
flexDirection: "row", borderRadius: 20,
gap: gap, flexDirection: "row",
height: "auto", gap: gap,
}}> 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
flexDirection: "row", style={{
width: '100%', flexDirection: "row",
flex: 1, width: "100%",
gap: gap flex: 1,
}}> gap: gap,
}}
>
{revert ? player1Pits?.reverse() : player2Pits?.reverse()} {revert ? player1Pits?.reverse() : player2Pits?.reverse()}
</View> </View>
<View style={{ <View
flexDirection: "row", style={{
width: '100%', flexDirection: "row",
flex: 1, width: "100%",
gap: gap flex: 1,
}}> 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}

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

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