|
@@ -3,7 +3,7 @@ import React, { useEffect, useState } from 'react';
|
|
|
import { dispatch, useRoundSeconds } from '../../../../domain/gameStore';
|
|
|
import styles from './GuessPane.module.css';
|
|
|
|
|
|
-const useRoundTimer = (onTimeout) => {
|
|
|
+export default ({ onTimeout }) => {
|
|
|
const remaining = useRoundSeconds();
|
|
|
useEffect(
|
|
|
() => {
|
|
@@ -26,15 +26,10 @@ const useRoundTimer = (onTimeout) => {
|
|
|
},
|
|
|
[ onTimeout, remaining, called ]
|
|
|
);
|
|
|
- return remaining;
|
|
|
-};
|
|
|
|
|
|
-export default ({ onTimeout }) => {
|
|
|
- const remaining = useRoundTimer(onTimeout);
|
|
|
- const out = remaining <= 0;
|
|
|
- return (
|
|
|
- <span className={`${styles.timer} ${out ? styles['timer--timeout'] : ''}`}>
|
|
|
- {out ? "Time's up!" : `Time: ${ms(remaining * 1000)}`}
|
|
|
- </span>
|
|
|
+ return remaining > 0 ? (
|
|
|
+ <span className={styles.timer}>Time: {ms(remaining * 1000)}</span>
|
|
|
+ ) : (
|
|
|
+ <span className={`${styles.timer} ${styles['timer--timeout']}`}>Time's up!</span>
|
|
|
);
|
|
|
};
|