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"; import StoneView from "./StoneView";
const StoreView: FunctionComponent<{ const StoreView: FunctionComponent<{
context: Context; context: Context;
pitViewModel: PitViewModel; pitViewModel: PitViewModel;
gridColumn: string; gridColumn: string;
gridRow: string; gridRow: string;
}> = ({ context, pitViewModel, gridColumn, gridRow }) => { }> = ({ context, pitViewModel, gridColumn, gridRow }) => {
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} />
)); ));
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
); );
return ( return (
<div <div
style={{ className="store"
gridColumn: gridColumn, style={{
gridRow: gridRow, background: pitViewModel.pitColor,
background: pitViewModel.pitColor, gridColumn: gridColumn,
margin: "5px", gridRow: gridRow
borderRadius: "10vw", }}>
display: "flex", {stones}
alignItems: "center", <span className="store-stone-count-text" style={{ color: textColor }}>
justifyContent: "center", {stones.length}
alignContent: "center", </span>
flexWrap: "wrap", <style jsx>{`
position: "relative", .store {
}} margin: 5px;
> border-radius: 10vw;
{stones} display: flex;
<span align-items: center;
style={{ justify-content: center;
position: "absolute", align-content: center;
bottom: "2vw", flex-wrap: wrap;
fontFamily: "monospace", position: relative;
fontWeight: "bold", }
fontSize: "2vw", .store-stone-count-text {
color: textColor, position: absolute;
}} bottom: 2vw;
> font-family: monospace;
{stones.length} font-weight: bold;
</span> font-size: 2vw;
</div> }
); `}</style>
}; </div>
);
};
export default StoreView; export default StoreView;