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";
//@ts-ignore
import MancalaIcon from "jsx:../mancala.svg";

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">
            <div className="header-bar-left-panel">
                <div className="header-bar-icon-wrapper">
                    <MancalaIcon className="header-bar-icon" style={{ height: "30px", width: "30px" }} />
                </div>
                <h1 style={{ color: textColor }} className="header-bar-title">
                    {context.texts.Mancala}
                </h1>
            </div>
            <div className="header-bar-right-panel">
                <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} />
                    )}
            </div>
            <style jsx>{`
            .header-bar {
                padding: 0px 4vw;
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
                align-self: stretch;
            }
            .header-bar-title {
                margin: 10px 0px;
            }
            .header-bar-right-panel {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: space-between;
            }
            .header-bar-left-panel {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
            }
            .header-bar-icon-wrapper {
                margin-right: 10px;
                display: flex;
                flex-direction: row;
                align-items: center;
            }
        `}</style>
        </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) => {
        const themeBackground = context.themeManager.theme.background;
        return (
            <MenuItem
                key={index}
                style={{ color: textColor }}
                //@ts-ignore
                onMouseOver={(event) => (event.target.style.background = themeBackground)}
                //@ts-ignore
                onMouseOut={(event) => (event.target.style.background = "transparent")}
                onClick={() => (context.themeManager.theme = theme)}>
                <div style={{ background: theme.boardColor }} className="theme-color-circle" />
                {theme.name}
                <style jsx>{`
                .theme-color-circle {
                    border-radius: 5vw;
                    width: 1vw;
                    height: 1vw;
                    margin-right: 1vw;
                }
                `}</style>
            </MenuItem>
        );
    })
    return (
        <div className="menu-container">
            <Menu
                menuStyle={{ background: context.themeManager.theme.appBarBgColor }}
                menuButton={menuButton}
                transition
                align="end">
                {menuItems}
            </Menu>
            <style jsx>{`
                .menu-container {
                    margin: 0 1vh;
                    display: flex;
                    align-items: center;
                }
            `}</style>
        </div>
    );
}