51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { FunctionComponent } from "react";
|
||
|
|
import { getColorByBrightness, getPlayerDisplayName, LiveGameSummary } from "@mancala/core";
|
||
|
|
import { useTranslation } from "react-i18next";
|
||
|
|
import { Context } from "../../context/context";
|
||
|
|
import Button from "../Button";
|
||
|
|
|
||
|
|
// Shown at the top of the home page while the user has a game in progress.
|
||
|
|
const ActiveGameBanner: FunctionComponent<{
|
||
|
|
context: Context,
|
||
|
|
game: LiveGameSummary,
|
||
|
|
userId: string,
|
||
|
|
onContinue: () => void,
|
||
|
|
}> = ({ context, game, userId, onContinue }) => {
|
||
|
|
const { t } = useTranslation();
|
||
|
|
const theme = context.themeManager.theme;
|
||
|
|
const textColor = getColorByBrightness(theme.boardColor, theme.textColor, theme.textLightColor);
|
||
|
|
const opponent = game.player1.userId === userId ? game.player2 : game.player1;
|
||
|
|
const turn = game.turnPlayerId === userId ? t("YourTurn") : t("OpponentTurn");
|
||
|
|
return (
|
||
|
|
<div className="banner" style={{ background: theme.boardColor, color: textColor }}>
|
||
|
|
<div>
|
||
|
|
<div className="title">{t("GameInProgress")}</div>
|
||
|
|
<div>{`${t("Versus")} ${getPlayerDisplayName(opponent, t) ?? t("Anonymous")} · ${turn}`}</div>
|
||
|
|
</div>
|
||
|
|
<Button context={context} color={theme.pitColor} text={t("Continue")} onClick={onContinue} />
|
||
|
|
<style jsx>{`
|
||
|
|
.banner {
|
||
|
|
width: calc(100% - 32px);
|
||
|
|
max-width: 868px;
|
||
|
|
margin: 16px 16px 0;
|
||
|
|
padding: 12px 16px;
|
||
|
|
border-radius: 16px;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
gap: 12px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
transition: background-color 0.5s;
|
||
|
|
}
|
||
|
|
.title {
|
||
|
|
font-weight: bold;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ActiveGameBanner;
|