diff --git a/package.json b/package.json
index d732053..2c46b03 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
"eslint-config-google": "^0.14.0",
"express": "^4.18.1",
"next": "^12.1.6",
+ "qrcode.react": "^3.1.0",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-notify-toast": "^0.5.1",
diff --git a/pages/tournament-fullscreen-groups.js b/pages/tournament-fullscreen-groups.js
index d494789..b989140 100644
--- a/pages/tournament-fullscreen-groups.js
+++ b/pages/tournament-fullscreen-groups.js
@@ -6,16 +6,23 @@ import {
Col,
Container, Navbar, NavbarBrand, NavItem, Row, Spinner
} from 'reactstrap';
+import {QRCodeSVG} from 'qrcode.react';
import {Group} from '../js/components/GroupStage';
function FullscreenPage(props) {
return (
-
+
{props.groups.map(group => )}
- Hallo Welt
+
+
+
);
@@ -24,9 +31,7 @@ function FullscreenPage(props) {
function FullscreenPageHeader(props) {
return (
{props.title}
-
- turnie.re
-
+ {props.page}/{props.maxPage}
);
}
@@ -38,35 +43,33 @@ class Main extends React.Component {
constructor(props) {
super(props);
- this.maxPage = 2;
+ this.groupsPerPage = 8;
+ this.pages = 3;
this.state = {
groups: [], tournament: null, loadedTournament: false, loadingStatus: null, page: 0
};
this.onTournamentRequestSuccess = this.onTournamentRequestSuccess.bind(this);
this.onTournamentRequestError = this.onTournamentRequestError.bind(this);
- this.updateTournament = this.updateTournament.bind(this);
this.increasePage = this.increasePage.bind(this);
}
componentDidMount() {
this.updateTournament();
- const intervalId = setInterval(this.updateTournament, 3000);
const intervalIdPage = setInterval(this.increasePage, 10000);
- this.setState({intervalId: intervalId});
this.setState({intervalIdPage: intervalIdPage});
}
increasePage() {
- if (this.state.page >= this.maxPage) {
+ if (this.state.page >= this.pages) {
this.setState({page: 0});
} else {
this.setState({page: this.state.page + 1});
}
+ this.updateTournament();
}
componentWillUnmount() {
- clearInterval(this.state.intervalId);
clearInterval(this.state.intervalIdPage);
}
@@ -77,11 +80,12 @@ class Main extends React.Component {
onTournamentRequestSuccess(requestStatus, tournament) {
// filter groups by page
const groups = tournament.groupStage.groups;
- const offset = this.state.page * 12;
+ const start = this.state.page * this.groupsPerPage;
+ const end = (this.state.page + 1) * this.groupsPerPage;
this.setState({
loadingStatus: requestStatus, tournament: tournament,
- groups: groups.slice(offset, offset + 11), loadedTournament: true
+ groups: groups.slice(start, end), loadedTournament: true
});
}
@@ -111,7 +115,7 @@ class Main extends React.Component {
{tournament.name}: turnie.re
-
+
);
} else {
return ;
diff --git a/yarn.lock b/yarn.lock
index b2bd013..2a8a372 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5715,6 +5715,11 @@ punycode@^2.1.0:
resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+qrcode.react@^3.1.0:
+ version "3.1.0"
+ resolved "https://registry.yarnpkg.com/qrcode.react/-/qrcode.react-3.1.0.tgz#5c91ddc0340f768316fbdb8fff2765134c2aecd8"
+ integrity sha512-oyF+Urr3oAMUG/OiOuONL3HXM+53wvuH3mtIWQrYmsXoAq0DkvZp2RYUWFSMFtbdOpuS++9v+WAkzNVkMlNW6Q==
+
qs@6.10.3:
version "6.10.3"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"