mancala/mobile/src/components/board/PitView.tsx

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, ViewStyle } from "react-native";

const PitView: FunctionComponent<{
    pitViewModel: PitViewModel;
    onClick: () => void;
    style: ViewStyle,
    children: React.ReactNode
}> = ({ pitViewModel, onClick, style, children }) => {
    return (
        <View style={[style, {
            backgroundColor: pitViewModel.pitColor,
            borderRadius: 100,
            //justifyItems: 'center',
        }]}>
            <Pressable onPress={onClick} style={{
                width: "100%",
                height: "100%",
                padding: 5,
                display: 'flex',
                alignItems: 'center',
                alignContent: 'center',
                justifyContent: 'center',
                flexDirection: "row",
                flexWrap: "wrap"
            }}>
                {children}
            </Pressable>
        </View>

    );
};

export default PitView;