Say 'your turn' on player's turn

This commit is contained in:
zikaeroh 2020-06-14 11:36:31 -07:00
parent 6c81171a5f
commit efbb29278d
1 changed files with 9 additions and 4 deletions

View File

@ -77,9 +77,10 @@ interface CenterTextProps {
winner: number | undefined | null;
timer: StateTimer | undefined | null;
turn: number;
myTurn: boolean;
}
const CenterText = ({ winner, timer, turn }: DeepReadonly<CenterTextProps>) => {
const CenterText = ({ winner, timer, turn, myTurn }: DeepReadonly<CenterTextProps>) => {
const classes = useCenterStyles();
const [countdown, setCountdown] = React.useState<number | undefined>();
const { now } = useServerTime();
@ -122,14 +123,18 @@ const CenterText = ({ winner, timer, turn }: DeepReadonly<CenterTextProps>) => {
}, [countdown, winner, deadline, now]);
const centerText = React.useMemo(() => {
const text = isDefined(winner) ? `${teamSpecs[winner].name} wins!` : `${teamSpecs[turn].name}'s turn`;
const text = isDefined(winner)
? `${teamSpecs[winner].name} wins!`
: myTurn
? 'Your turn'
: `${teamSpecs[turn].name}'s turn`;
if (!isDefined(countdown) || isDefined(winner)) {
return text;
}
return `${text} [${countdown}s]`;
}, [winner, turn, countdown]);
}, [winner, turn, myTurn, countdown]);
return (
<h1
@ -182,7 +187,7 @@ const Header = React.memo(function Header({
</h1>
</Grid>
<Grid item xs style={{ textAlign: 'center' }}>
<CenterText winner={winner} timer={timer} turn={turn} />
<CenterText winner={winner} timer={timer} turn={turn} myTurn={myTurn} />
</Grid>
<Grid item xs style={{ textAlign: 'right' }}>
<Button