36 lines
1.1 KiB
TypeScript
36 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";
|
||
|
|
import { Pressable, View } from "react-native";
|
||
|
|
|
||
|
|
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 (
|
||
|
|
<Pressable onPress={onClick}>
|
||
|
|
<View style={{
|
||
|
|
backgroundColor: pitViewModel.pitColor,
|
||
|
|
margin: 5,
|
||
|
|
padding: 5,
|
||
|
|
borderRadius: 50,
|
||
|
|
display: 'flex',
|
||
|
|
alignItems: 'center',
|
||
|
|
alignContent: 'center',
|
||
|
|
justifyContent: 'center',
|
||
|
|
//justifyItems: 'center',
|
||
|
|
flexWrap: 'wrap',
|
||
|
|
}}>
|
||
|
|
{stones}
|
||
|
|
</View>
|
||
|
|
</Pressable>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default PitView;
|