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.
19 lines
611 B
TypeScript
19 lines
611 B
TypeScript
import * as React from 'react';
|
|
import { FunctionComponent } from 'react';
|
|
import { CLOCK_LOW_TIME_MS, formatClock } from "@mancala/core";
|
|
|
|
// One player's clock: highlighted while it runs, in a warning colour when the running clock is low.
|
|
const GameClockView: FunctionComponent<{
|
|
timeMs: number,
|
|
running: boolean,
|
|
}> = ({ timeMs, running }) => {
|
|
const lowTime = running && timeMs < CLOCK_LOW_TIME_MS;
|
|
return (
|
|
<span className={"clock" + (lowTime ? " low" : running ? " run" : "")} role="timer">
|
|
{formatClock(timeMs)}
|
|
</span>
|
|
);
|
|
}
|
|
|
|
export default GameClockView;
|