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

feat(frontend): display stone count in pit

Browse Source
This commit is contained in:
Halit Aksoy 2026-05-26 00:31:59 +03:00
parent bb1c750080
commit ca92b20b59
3 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -19,7 +19,7 @@ const BoardView: FunctionComponent<{
const theme = context.themeManager.theme;
const createPitView = (key: any, pit: Pit, pitViewModel: PitViewModel) => {
return <PitView key={key} pitViewModel={pitViewModel} onClick={() => onPitSelect(pit.index, pit)} />;
return <PitView key={key} pitViewModel={pitViewModel} onClick={() => onPitSelect(pit.index, pit)} context={context} />;
};
const createPitViewList = (pits: Pit[]) => pits.map((pit, index) => createPitView(index, pit, boardViewModel.pits[pit.index]));

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

@ -1,5 +1,7 @@
import * as React from "react";
import { FunctionComponent } from "react";
import { getColorByBrightness } from "@mancala/core";
import { Context } from "../../context/context";
import Util from "../../util/Util";
import { PitViewModel } from "@mancala/core";
import StoneView from "./StoneView";
@ -7,7 +9,13 @@ import StoneView from "./StoneView";
const PitView: FunctionComponent<{
pitViewModel: PitViewModel;
onClick: () => void;
}> = ({ pitViewModel, onClick }) => {
context: Context;
}> = ({ 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} />
));
@ -15,6 +23,7 @@ const PitView: FunctionComponent<{
return (
<div className="pit" onClick={onClick} style={{ background: pitViewModel.pitColor }}>
{stones}
<span className="stone-count">{pitViewModel.stoneCount}</span>
<style jsx>{`
.pit {
margin: 5px;
@ -27,6 +36,19 @@ 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;
color: ${textColor};
pointer-events: none;
}
`}</style>
</div>

8
apps/frontend/yarn.lock
View File

@ -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"