diff --git a/js/components/Timer.js b/js/components/Timer.js new file mode 100644 index 0000000..84a31fb --- /dev/null +++ b/js/components/Timer.js @@ -0,0 +1,33 @@ +import React from 'react'; + +export function Timer({timerEnd}) { + const [timeLeft, setTimeLeft] = React.useState(null); + + React.useEffect(() => { + if (timerEnd) { + const intervalId = setInterval(() => { + const now = new Date(); + const timeLeft = timerEnd - now; + setTimeLeft(timeLeft > 0 ? timeLeft : 0); + }, 1000); + return () => clearInterval(intervalId); + } + }, [timerEnd]); + + const formatTimeLeft = timeLeft => { + if (timeLeft === null) return ''; + const hours = Math.floor(timeLeft / (1000 * 60 * 60)); + const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); + const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); + const formattedSeconds = seconds < 10 ? '0' + seconds : seconds; + + let formattedTimeLeft = ''; + if (hours > 0) { + formattedTimeLeft += hours + 'h '; + } + formattedTimeLeft += minutes + ':' + formattedSeconds; + return formattedTimeLeft; + }; + + return {formatTimeLeft(timeLeft)}; +} diff --git a/pages/tournament-fullscreen.js b/pages/tournament-fullscreen.js index 53c943e..2849c29 100644 --- a/pages/tournament-fullscreen.js +++ b/pages/tournament-fullscreen.js @@ -8,11 +8,13 @@ import { } from 'reactstrap'; import {Match} from '../js/components/Match'; import {sortMatchesByPositionAscending} from '../js/utils/sorting'; +import {Timer} from '../js/components/Timer'; function FullscreenPage(props) { return (
- +
); } @@ -20,20 +22,20 @@ function FullscreenPage(props) { function Matches(props) { let matches; if (props.matches == null) { - matches = (
- - lade Matches + matches = (
+ + lade Matches
); } else if (props.matches.length === 0) { - matches = (
keine Matches
); + matches = (
keine Matches
); } else { matches = ( {props.matches.sort(sortMatchesByPositionAscending()).map( - match => + match => )} ); } - return (
+ return (
{matches}
); } @@ -41,7 +43,7 @@ function Matches(props) { function FilterDropdown(props) { return ( Match-Filter: - + {props.selected.label} @@ -55,39 +57,14 @@ function FilterDropdown(props) { function FullscreenPageHeader(props) { - const [timeLeft, setTimeLeft] = React.useState(null); - - React.useEffect(() => { - if (props.timerEnd) { - const intervalId = setInterval(() => { - const now = new Date(); - const timeLeft = props.timerEnd - now; - setTimeLeft(timeLeft > 0 ? timeLeft : 0); - }, 1000); - return () => clearInterval(intervalId); - } - }, [props.timerEnd]); - - const formatTimeLeft = timeLeft => { - if (timeLeft === null) return ''; - const hours = Math.floor(timeLeft / (1000 * 60 * 60)); - const minutes = Math.floor((timeLeft % (1000 * 60 * 60)) / (1000 * 60)); - const seconds = Math.floor((timeLeft % (1000 * 60)) / 1000); - const formattedSeconds = seconds < 10 ? '0' + seconds : seconds; - - let formattedTimeLeft = ''; - if (hours > 0) { - formattedTimeLeft += hours + 'h '; - } - formattedTimeLeft += minutes + ':' + formattedSeconds; - return formattedTimeLeft; - }; - - return ( - - {props.title} - {props.timerEnd &&
Spielzeit: {formatTimeLeft(timeLeft)}
} -
); + return ( + + + {props.title} + {props.timerEnd && +
Spielzeit:
} +
+ ); } const matchFilters = { @@ -195,9 +172,9 @@ class Main extends React.Component { Vollbild-Ansicht: turnie.re - - - lade Vollbild-Ansicht + + + lade Vollbild-Ansicht
); }