mancala/src/components/HeaderBar.tsx

import * as React from "react";
import { FunctionComponent } from "react";
import { Menu, MenuItem } from "@szhsin/react-menu";
import { MancalaGame } from "mancala.js";
import { Context } from "../context/context";
import { getColorByBrightness } from "../util/ColorUtil";
import Button from "./Button";
import "@szhsin/react-menu/dist/index.css";
import "@szhsin/react-menu/dist/transitions/slide.css";
import HeaderbarIcon from "./headerbar/HeaderbarIcon";
import HeaderbarTitle from "./headerbar/HeaderbarTitle";
import Row from "./Row";
import ThemeSwitchMenu from "./headerbar/ThemeSwitchMenu";

function renderNewGameButton(
    context: Context,
    game: MancalaGame | undefined,
    onNewGameClick: () => void,
    userKeyWhoLeave: string | undefined,
    crashMessage: string | undefined): JSX.Element {
    const newGame = (
        <Button
            context={context}
            text={context.texts.NewGame}
            color={context.themeManager.theme.pitColor}
            onClick={onNewGameClick}
        />
    );
    if (userKeyWhoLeave) {
        return newGame;
    }
    if (crashMessage) {
        return newGame;
    }
    if (!game) {
        return newGame;
    } else if (game.state == "ended") {
        return newGame;
    }
    return <></>;
};

const HeaderBar: FunctionComponent<{
    context: Context,
    game?: MancalaGame,
    userKeyWhoLeave?: string,
    crashMessage?: string,
    onNewGameClick: () => void,
    onLeaveGameClick: () => void
}> = (props) => {
    const { context, game, userKeyWhoLeave, crashMessage, onNewGameClick, onLeaveGameClick } = props;
    const textColor = getColorByBrightness(
        context.themeManager.theme.appBarBgColor,
        context.themeManager.theme.textColor,
        context.themeManager.theme.textLightColor
    );
    return (
        <div style={{ background: context.themeManager.theme.appBarBgColor }} className="header-bar">
            <Row>
                <HeaderbarIcon />
                <HeaderbarTitle title={context.texts.Mancala} color={textColor} />
            </Row>
            <Row>
                <ThemeSwitchMenu context={context} textColor={textColor} />
                {renderNewGameButton(context, game, onNewGameClick, userKeyWhoLeave, crashMessage)}
                {game &&
                    !userKeyWhoLeave &&
                    !crashMessage &&
                    (game?.state === "playing" || game?.state === "initial") && (
                        <Button
                            context={context}
                            color={context.themeManager.theme.pitColor}
                            text={context.texts.Leave}
                            onClick={onLeaveGameClick} />
                    )}
            </Row>
            <style jsx>{`
            .header-bar {
                padding: 0px 4vw;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                align-self: stretch;
            }
            `}</style>
        </div>)
}
export default HeaderBar;