mancala/apps/frontend/src/components/GameClockView.tsx

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;