38 lines
1.1 KiB
TypeScript
38 lines
1.1 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { FunctionComponent } from "react";
|
||
|
|
import Util from "../../util/Util";
|
||
|
|
import PitViewModel from "../../viewmodel/PitViewModel";
|
||
|
|
import StoneView from "./StoneView";
|
||
|
|
|
||
|
|
|
||
|
|
const PitView: FunctionComponent<{
|
||
|
|
pitViewModel: PitViewModel;
|
||
|
|
onClick: () => void;
|
||
|
|
}> = ({ pitViewModel, onClick }) => {
|
||
|
|
const stones = [...Util.range(pitViewModel.stoneCount)].map((i, index) => (
|
||
|
|
<StoneView key={index} color={pitViewModel.stoneColor} />
|
||
|
|
));
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
onClick={onClick}
|
||
|
|
style={{
|
||
|
|
background: pitViewModel.pitColor,
|
||
|
|
margin: "5px",
|
||
|
|
padding: "5px",
|
||
|
|
borderRadius: "10vw",
|
||
|
|
transition: "background-color 0.5s",
|
||
|
|
display: "flex",
|
||
|
|
alignItems: "center",
|
||
|
|
alignContent: "center",
|
||
|
|
justifyContent: "center",
|
||
|
|
justifyItems: "center",
|
||
|
|
flexWrap: "wrap",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{stones}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PitView;
|