diff --git a/js/components/PlayoffStages.js b/js/components/PlayoffStages.js new file mode 100644 index 0000000..5387bab --- /dev/null +++ b/js/components/PlayoffStages.js @@ -0,0 +1,18 @@ +import {Stage} from './Stage'; +import React from 'react'; + +export function PlayoffStages(props) { + return (
+ {props.playoffStages.map(stage => )} +
); +} + +function getLevelName(levelNumber) { + const names = ['Finale', 'Halbfinale', 'Viertelfinale', 'Achtelfinale']; + if (levelNumber < names.length) { + return names[levelNumber]; + } else { + return Math.pow(2, levelNumber) + 'tel-Finale'; + } +} diff --git a/js/components/Stage.js b/js/components/Stage.js new file mode 100644 index 0000000..32a128c --- /dev/null +++ b/js/components/Stage.js @@ -0,0 +1,18 @@ +import {Col, Container, Row} from 'reactstrap'; +import {Match} from './Match'; +import React from 'react'; + +export function Stage(props) { + const {isSignedIn, isOwner} = props; + + return (
+ +

{props.level}

+ + {props.matches.map((match => ( + )))} + +
+
); +} diff --git a/pages/tournament.js b/pages/tournament.js index bbe01a0..23878be 100644 --- a/pages/tournament.js +++ b/pages/tournament.js @@ -1,7 +1,7 @@ import Head from 'next/head'; import React from 'react'; import {connect} from 'react-redux'; -import {Col, Container, ListGroup, ListGroupItem, Row} from 'reactstrap'; +import {Container, ListGroup, ListGroupItem} from 'reactstrap'; import {ErrorPageComponent} from '../js/components/ErrorComponents'; import {Footer} from '../js/components/Footer'; @@ -12,8 +12,8 @@ import 'bootstrap/dist/css/bootstrap.min.css'; import '../static/css/everypage.css'; import '../static/css/tournament.css'; -import {Match} from '../js/components/Match'; import {getTournament} from '../js/redux/tournamentApi'; +import {PlayoffStages} from '../js/components/PlayoffStages'; class PrivateTournamentPage extends React.Component { render() { @@ -34,9 +34,8 @@ class PrivateTournamentPage extends React.Component {
- {playoffStages.map(stage => )} +
); } @@ -59,30 +58,6 @@ function EditButton(props) { } } -function getLevelName(levelNumber) { - const names = ['Finale', 'Halbfinale', 'Viertelfinale', 'Achtelfinale']; - if (levelNumber < names.length) { - return names[levelNumber]; - } else { - return Math.pow(2, levelNumber) + 'tel-Finale'; - } -} - -function Stage(props) { - const {isSignedIn, isOwner} = props; - - return (
- -

{props.level}

- - {props.matches.map((match => ( - )))} - -
-
); -} - class Main extends React.Component { static async getInitialProps({query}) { return {query}; diff --git a/static/css/tournament.css b/static/css/tournament.css index b00bdef..63b476a 100644 --- a/static/css/tournament.css +++ b/static/css/tournament.css @@ -6,7 +6,7 @@ text-decoration: line-through; } -.stages > div:nth-child(odd) { +.stages > div > div:nth-child(odd) { background-color: #f8f8f8; } @@ -25,4 +25,4 @@ .scoreInput { width: 11rem; -} \ No newline at end of file +}