mancala/apps/mobile/src/components/UserStatus.tsx

import * as React from 'react';
import { FunctionComponent } from 'react';
import { Context } from '../context/context';
import { User } from "@mancala/core";
import { getColorByBrightness } from "@mancala/core";
import Space from './Space';
import { Theme } from "@mancala/core";
import { StyleSheet, Text, View, ViewStyle } from 'react-native';
import { useTranslation } from 'react-i18next';

export type LayoutMode = "right" | "left";

const UserStatus: FunctionComponent<{
    context: Context,
    user: User,
    layoutMode: LayoutMode,
    visible?: boolean,
    style?: ViewStyle,
    // Shown after the online status, e.g. the player's clock.
    accessory?: React.ReactNode,
}> = ({ context, user, layoutMode, visible, style, accessory }) => {
    if (visible === false) return <></>;
    const textColorOnBoard = getColorByBrightness(
        context.themeManager.theme.background,
        context.themeManager.theme.textColor,
        context.themeManager.theme.textLightColor
    );
    const { t } = useTranslation();
    const styles = getDynamicStyles(context.themeManager.theme);
    return (
        <View style={[style, layoutMode === "right" ? styles.flexRtl : styles.flexLtr]}>
            <Text style={[{color: textColorOnBoard}, styles.text]}>{
                user.isAnonymous ? t("Anonymous") : user.name}
            </Text>
            <Space width={5} />
            <View style={[styles.circle, (user.isOnline? styles.online: styles.offline)]} />
            {accessory && <><Space width={6} />{accessory}</>}
        </View>
    );
}

function getDynamicStyles(theme: Theme) {
    return StyleSheet.create({
        online: {
            backgroundColor: theme.boardColor
        },
        offline: {
            backgroundColor: 'transparent'
        },
        circle: {
            width: 15,
            height: 15,
            minWidth: 15,
            minHeight: 15,
            borderRadius: 15,
            borderWidth: 2,
            borderColor: theme.boardColor,
            borderStyle: "solid",
        },
        flexRtl: {
            display: 'flex',
            flexDirection: 'row-reverse',
            alignItems: 'center',
        },
        flexLtr: {
            display: 'flex',
            flexDirection: 'row',
            alignItems: 'center',
        },
        text: {
            fontWeight: 'bold',
            overflow: 'hidden',
        },
        icon: {
            color : "grey",
            width: 32,
            height: 32,
            fontSize: 32,
        }
    });
}

export default UserStatus;