Halit Aksoy
efe97da0b7
Players beside the board with avatar, online status, store count and clock, the turn between them, a game-over card over the board, and a move list with the newest move first and tags for extra turns, captures and store gains. On phones the bottom player is shown below the board.
24 lines
780 B
TypeScript
24 lines
780 B
TypeScript
import * as React from "react";
|
|
import { FunctionComponent } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
// Shown during a live game while an earlier position is on the board.
|
|
const ReviewBanner: FunctionComponent<{
|
|
moveNumber: number,
|
|
isYourTurn: boolean,
|
|
onBackToLive: () => void,
|
|
}> = ({ moveNumber, isYourTurn, onBackToLive }) => {
|
|
const { t } = useTranslation();
|
|
return (
|
|
<div className="review" role="status">
|
|
<span>
|
|
{t("ViewingMove", { number: moveNumber })}
|
|
{isYourTurn && <strong>{` · ${t("YourTurn")}`}</strong>}
|
|
</span>
|
|
<button className="btn pri" onClick={onBackToLive}>{t("BackToLive")}</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ReviewBanner;
|