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

use styled-jsx in StoreView

Browse Source
This commit is contained in:
Halit Aksoy 2022-07-14 23:28:58 +03:00
parent 5c01be8b2e
commit 3651936497
1 changed files with 48 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/components/board/StoreView.tsx
View File

@ -7,50 +7,52 @@ import PitViewModel from "../../viewmodel/PitViewModel";
import StoneView from "./StoneView";
const StoreView: FunctionComponent<{
context: Context;
pitViewModel: PitViewModel;
gridColumn: string;
gridRow: string;
}> = ({ context, pitViewModel, gridColumn, gridRow }) => {
const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
<StoneView key={index} color={pitViewModel.stoneColor} />
));
const textColor = getColorByBrightness(
pitViewModel.pitColor,
context.themeManager.theme.textColor,
context.themeManager.theme.textLightColor
);
return (
<div
style={{
gridColumn: gridColumn,
gridRow: gridRow,
background: pitViewModel.pitColor,
margin: "5px",
borderRadius: "10vw",
display: "flex",
alignItems: "center",
justifyContent: "center",
alignContent: "center",
flexWrap: "wrap",
position: "relative",
}}
>
{stones}
<span
style={{
position: "absolute",
bottom: "2vw",
fontFamily: "monospace",
fontWeight: "bold",
fontSize: "2vw",
color: textColor,
}}
>
{stones.length}
</span>
</div>
);
};
context: Context;
pitViewModel: PitViewModel;
gridColumn: string;
gridRow: string;
}> = ({ context, pitViewModel, gridColumn, gridRow }) => {
const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
<StoneView key={index} color={pitViewModel.stoneColor} />
));
const textColor = getColorByBrightness(
pitViewModel.pitColor,
context.themeManager.theme.textColor,
context.themeManager.theme.textLightColor
);
return (
<div
className="store"
style={{
background: pitViewModel.pitColor,
gridColumn: gridColumn,
gridRow: gridRow
}}>
{stones}
<span className="store-stone-count-text" style={{ color: textColor }}>
{stones.length}
</span>
<style jsx>{`
.store {
margin: 5px;
border-radius: 10vw;
display: flex;
align-items: center;
justify-content: center;
align-content: center;
flex-wrap: wrap;
position: relative;
}
.store-stone-count-text {
position: absolute;
bottom: 2vw;
font-family: monospace;
font-weight: bold;
font-size: 2vw;
}
`}</style>
</div>
);
};
export default StoreView;
export default StoreView;