41 lines
1.6 KiB
TypeScript
41 lines
1.6 KiB
TypeScript
|
import * as React from 'react';
|
||
|
|
import { FunctionComponent } from 'react';
|
||
|
|
import { CLOCK_LOW_TIME_MS, formatClock, getColorByBrightness } from "@mancala/core";
|
||
|
|
import { Context } from '../context/context';
|
||
|
|
|
||
|
|
// Readable on every theme; the themes have no warning color of their own.
|
||
|
|
const LOW_TIME_COLOR = "#b3261e";
|
||
|
|
const LOW_TIME_TEXT_COLOR = "#ffffff";
|
||
|
|
|
||
|
|
// One player's clock: highlighted while it runs, in a warning color when the running clock is low.
|
||
|
|
const GameClockView: FunctionComponent<{
|
||
|
|
context: Context,
|
||
|
|
timeMs: number,
|
||
|
|
running: boolean,
|
||
|
|
}> = ({ context, timeMs, running }) => {
|
||
|
|
const theme = context.themeManager.theme;
|
||
|
|
const lowTime = running && timeMs < CLOCK_LOW_TIME_MS;
|
||
|
|
const background = lowTime ? LOW_TIME_COLOR : running ? theme.playerTurnColor : "transparent";
|
||
|
|
const color = lowTime ? LOW_TIME_TEXT_COLOR : running
|
||
|
|
? getColorByBrightness(theme.playerTurnColor, theme.textColor, theme.textLightColor)
|
||
|
|
: getColorByBrightness(theme.background, theme.textColor, theme.textLightColor);
|
||
|
|
return (
|
||
|
|
<span className="clock" style={{ background, color }} role="timer">
|
||
|
|
{formatClock(timeMs)}
|
||
|
|
<style jsx>{`
|
||
|
|
.clock {
|
||
|
|
padding: 2px 10px;
|
||
|
|
border-radius: 30px;
|
||
|
|
border: 2px solid ${theme.boardColor};
|
||
|
|
font-weight: bold;
|
||
|
|
font-variant-numeric: tabular-nums;
|
||
|
|
white-space: nowrap;
|
||
|
|
transition: background-color 0.5s, color 0.5s;
|
||
|
|
}
|
||
|
|
`}</style>
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default GameClockView;
|