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
);
}