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

Compare commits

base: jhalitaksoy:8a485e2db359d4e13c26f97f0e3d4f207329e133
Branches Tags
jhalitaksoy:main
jhalitaksoy:develop
jhalitaksoy:fix/stone-count-text
jhalitaksoy:feature/stone-count-text
..
compare: jhalitaksoy:0618527ac7c772d5561ea1146008884cc2a828cd
Branches Tags
jhalitaksoy:main
jhalitaksoy:develop
jhalitaksoy:fix/stone-count-text
jhalitaksoy:feature/stone-count-text

No commits in common. "8a485e2db359d4e13c26f97f0e3d4f207329e133" and "0618527ac7c772d5561ea1146008884cc2a828cd" have entirely different histories.
8a485e2db3 ... 0618527ac7

6 changed files with 139 additions and 6899 deletions
Show Stats Expand all files Collapse all files

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

@ -14,25 +14,14 @@ 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 }) => { }> = ({ game, context, boardId, boardViewModel, revert, onPitSelect: onPitSelect }) => {
const mancalaGame = game?.mancalaGame; const mancalaGame = game?.mancalaGame;
const theme = context.themeManager.theme; const theme = context.themeManager.theme;
// Compute pit width based on viewport (each column is 11vw) const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
const pitWidth = typeof window !== "undefined" ? window.innerWidth * 0.11 : 100; return <PitView key={key} pitViewModel={pitViewModel} onClick={() => onPitSelect(pit.index, pit)} context={context} />;
};
const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => ( const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));
<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);
@ -40,7 +29,6 @@ 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
@ -48,14 +36,12 @@ 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,83 +1,58 @@
import * as React from "react"; import * as React from "react";
import { FunctionComponent } from "react"; import { FunctionComponent } from "react";
import { getColorByBrightness, PitViewModel } from "@mancala/core"; import { getColorByBrightness } 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";
interface PitViewProps { const PitView: FunctionComponent<{
pitViewModel: PitViewModel; pitViewModel: PitViewModel;
context: Context; onClick: () => void;
onClick: () => void; context: Context;
fontSize: number; }> = ({ pitViewModel, onClick, context }) => {
} 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} />
));
const PitView: FunctionComponent<PitViewProps> = ({ pitViewModel, context, onClick, fontSize }) => { return (
const textColor = getColorByBrightness( <div className="pit" onClick={onClick} style={{ background: pitViewModel.pitColor }}>
pitViewModel.pitColor, {stones}
context.themeManager.theme.textColor, <span className="stone-count">{pitViewModel.stoneCount}</span>
context.themeManager.theme.textLightColor <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;
color: ${textColor};
const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => ( pointer-events: none;
<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;

4
apps/mobile/package.json
View File

@ -21,8 +21,8 @@
"react-i18next": "^14.1.0", "react-i18next": "^14.1.0",
"react-native": "0.82.1", "react-native": "0.82.1",
"react-native-get-random-values": "^1.11.0", "react-native-get-random-values": "^1.11.0",
"react-native-mmkv": "^4.3.2", "react-native-mmkv": "^4.0.0",
"react-native-nitro-modules": "^0.36.1", "react-native-nitro-modules": "^0.31.6",
"react-native-safe-area-context": "^5.5.2", "react-native-safe-area-context": "^5.5.2",
"react-native-screens": "^4.18.0", "react-native-screens": "^4.18.0",
"react-native-snackbar": "^2.6.2", "react-native-snackbar": "^2.6.2",

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 }) => { }> = ({ game, context, boardId, boardViewModel, revert, onPitSelect: onPitSelect }) => {
const windowWidth = Dimensions.get('window').width; 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 boardMargin = 0;
const boardPadding = 10; const boardPadding = 10;
@ -33,22 +33,19 @@ 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 ( return <PitView
<PitView key={key}
key={key} pitViewModel={pitViewModel}
pitViewModel={pitViewModel} onClick={() => onPitSelect(pit.index, pit)}
context={context} style={{width: pitWidth, height: pitWidth}}
onClick={() => onPitSelect(pit.index, pit)} context={context}
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 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);
@ -60,60 +57,52 @@ 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 <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 <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 <View style={{
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 <View style={{
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}

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

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

6715
apps/mobile/yarn.lock
View File

File diff suppressed because it is too large Load Diff