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";

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={{
            padding: "0px 4vw",
            background: context.themeManager.theme.appBarBgColor,
            display: "flex",
            flexDirection: "row",
            alignItems: "center",
            justifyContent: "space-between",
            alignSelf: "stretch",
        }}>
            <h1 style={{ color: textColor, margin: "10px 0px" }}>
                {context.texts.Mancala}
            </h1>
            <div style={{
                display: "flex",
                flexDirection: "row",
                alignItems: "center",
                justifyContent: "space-between",
            }} >
                <div style={{
                    marginRight: "1vw",
                    display: "flex",
                    alignItems: "center",
                }}>
                    <ThemeSwitchMenu context={context} textColor={textColor} />
                </div>
                {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} />
                    )}
            </div>
        </div>)
}
export default HeaderBar;

const ThemeSwitchMenu: FunctionComponent<{ context: Context, textColor: string }> = (props) => {
    const { context, textColor } = props;
    const menuButton = <span
        style={{ color: textColor }}
        className="material-symbols-outlined">
        light_mode
    </span>;
    const menuItems = context.themeManager.themes.map((theme, index) => {
        return (<MenuItem
            key={index}
            style={{ color: textColor }}
            //@ts-ignore
            onMouseOver={(event) => (event.target.style.background =
                context.themeManager.theme.background)}
            //@ts-ignore
            onMouseOut={(event) => (event.target.style.background = "transparent")}
            onClick={() => (context.themeManager.theme = theme)}>
            <div style={{
                borderRadius: "5vw",
                background: theme.boardColor,
                width: "1vw",
                height: "1vw",
                marginRight: "1vw",
            }} />
            {theme.name}
        </MenuItem>);
    })
    return (<Menu
        menuStyle={{
            background: context.themeManager.theme.appBarBgColor,
        }}
        menuButton={menuButton}
        transition
        align="end">
        {menuItems}
    </Menu>);
}