56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { FunctionComponent } from "react";
|
||
|
|
import { Context } from "../../context";
|
||
|
|
import { getColorByBrightness } from "../../util/ColorUtil";
|
||
|
|
import Util from "../../util/Util";
|
||
|
|
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>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default StoreView;
|