Halit Aksoy
aa265f7e6c
- Move list under the board with player, pit and what happened (extra turn, capture, stones to the store, game over); collapsed on phones - Selecting a move or using the arrow keys shows that position with a banner and Back to live; pits are locked meanwhile and the banner says when it is your turn - Countdown while the opponent is offline on their turn - on_game_end is handled, so games that end by timeout or inactivity end on the page with the reason
46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
import * as React from "react";
|
|
import { FunctionComponent } from "react";
|
|
import { getColorByBrightness } from "@mancala/core";
|
|
import { useTranslation } from "react-i18next";
|
|
import { Context } from "../../context/context";
|
|
import Button from "../Button";
|
|
|
|
// Shown during a live game while an earlier position is on the board.
|
|
const ReviewBanner: FunctionComponent<{
|
|
context: Context,
|
|
moveNumber: number,
|
|
isYourTurn: boolean,
|
|
onBackToLive: () => void,
|
|
}> = ({ context, moveNumber, isYourTurn, onBackToLive }) => {
|
|
const { t } = useTranslation();
|
|
const theme = context.themeManager.theme;
|
|
const background = isYourTurn ? theme.playerTurnColor : theme.boardColor;
|
|
const textColor = getColorByBrightness(background, theme.textColor, theme.textLightColor);
|
|
return (
|
|
<div className="review-banner" style={{ background, color: textColor }}>
|
|
<span>
|
|
{`⟲ ${t("ViewingMove", { number: moveNumber })}`}
|
|
{isYourTurn && <strong>{` · ${t("YourTurn")}`}</strong>}
|
|
</span>
|
|
<Button context={context} color={theme.pitColor} text={`${t("BackToLive")} ▶|`} onClick={onBackToLive} />
|
|
<style jsx>{`
|
|
.review-banner {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
width: calc(100% - 32px);
|
|
max-width: 640px;
|
|
margin: 0 16px 8px;
|
|
padding: 4px 8px 4px 16px;
|
|
border-radius: 30px;
|
|
box-sizing: border-box;
|
|
transition: background-color 0.5s;
|
|
}
|
|
`}</style>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ReviewBanner;
|