Mark advancing teams with success background

js/components/GroupStage.js

@@ -23,8 +23,16 @@ export default class GroupStage extends Component {
                 <ShowMatchesToggleButton show={this.state.showMatches} toggle={this.toggleShowMatches}/>
             </h1>
             <Row className='mt-3'>
-                {this.props.groups.map(group => <Group group={group} key={group.id} isSignedIn={this.props.isSignedIn}
-                    isOwner={this.props.isOwner} showMatches={this.state.showMatches}/>)}
+                {this.props.groups.map(group => (
+                    <Group
+                        group={group}
+                        key={group.id}
+                        isSignedIn={this.props.isSignedIn}
+                        isOwner={this.props.isOwner}
+                        showMatches={this.state.showMatches}
+                        teams={this.props.teams}
+                    />
+                ))}
             </Row>
         </div>);
     }
@@ -64,11 +72,17 @@ export class Group extends Component {
                 <CardBody>
                     <h3 className='custom-font'>Gruppe {this.state.number}</h3>
                     <Collapse isOpen={this.props.showMatches}>
-                        {this.state.matches.sort(sortMatchesByPositionAscending()).map((match => (
-                            <Match match={match} isSignedIn={this.props.isSignedIn} isOwner={this.props.isOwner}
-                                onChange={this.reload} key={match.id}/>)))}
+                        {this.state.matches.sort(sortMatchesByPositionAscending()).map(match => (
+                            <Match
+                                match={match}
+                                isSignedIn={this.props.isSignedIn}
+                                isOwner={this.props.isOwner}
+                                onChange={this.reload}
+                                key={match.id}
+                            />
+                        ))}
                     </Collapse>
-                    <GroupScoresTable scores={this.state.scores}/>
+                    <GroupScoresTable scores={this.state.scores} teams={this.props.teams} />
                 </CardBody>
             </Card>
         </Col>);
@@ -76,7 +90,8 @@ export class Group extends Component {
 }
 
 function GroupScoresTable(props) {
-    return (<Table className='mt-4' striped size='sm' responsive>
+    return (
+        <Table className='mt-4' striped size='sm' responsive>
             <thead>
             <tr>
                 <th>#</th>
@@ -87,18 +102,29 @@ function GroupScoresTable(props) {
             </tr>
             </thead>
             <tbody>
-            {props.scores.map(groupScore => <GroupScoresTableRow score={groupScore} key={groupScore.id}/>)}
+            {props.scores.map(groupScore => (
+                <GroupScoresTableRow
+                    score={groupScore}
+                    key={groupScore.id}
+                    teams={props.teams}
+                />
+            ))}
             </tbody>
-    </Table>);
+        </Table>
+    );
 }
 
-
 function GroupScoresTableRow(props) {
-    return (<tr>
+    const advancingTeam = props.teams?.find(team => team.id === props.score.team.id && team.advancing_from_group_stage);
+    const rowClass = advancingTeam ? 'table-success' : '';
+
+    return (
+        <tr className={rowClass}>
             <td>{props.score.position}</td>
             <td>{props.score.team.name}</td>
             <td>{props.score.group_points}</td>
             <td>{props.score.difference_in_points}</td>
             <td>{props.score.scored_points}</td>
-    </tr>);
+        </tr>
+    );
 }

js/redux/tournamentApi.js

@@ -67,7 +67,8 @@ function convertTournament(apiTournament) {
         isPublic: apiTournament.public,
         ownerUsername: apiTournament.owner_username,
         groupStage: groupStage,
-        playoffStages: playoffStages
+        playoffStages: playoffStages,
+        teams: apiTournament.teams
     };
 }
 

pages/tournament-fullscreen-groups.js

@@ -24,7 +24,7 @@ function FullscreenPage(props) {
     return (<div>
         <Container className='fs-5' fluid>
             <Row className='row-cols-4'>
-                {props.groups.map(group => <Col className='mb-2'><Group group={group} key={group.id}/></Col>)}
+                {props.groups.map(group => <Col className='mb-2'><Group group={group} key={group.id} teams={props.teams}/></Col>)}
                 <Col>
                     <div className="d-flex justify-content-center align-items-center">
                         <QRCodeSVG
@@ -134,7 +134,7 @@ class Main extends React.Component {
                 </Head>
                 <FullscreenPage
                     tournament={tournament} groups={groups} page={page} maxPage={this.pages}
-                    showLogo={showLogo}
+                    showLogo={showLogo} teams={tournament.teams}
                 />
                 <style global jsx>{`
                     body {

pages/tournament.js

@@ -27,8 +27,13 @@ class PrivateTournamentPage extends React.Component {
             <StatusBar tournament={this.props.tournament} isOwner={isOwner} isSignedIn={isSignedIn}/>
             <div className='stages'>
                 {groupStage != null &&
-                <div><GroupStage groups={groupStage.groups} isSignedIn={isSignedIn} isOwner={isOwner}
-                    showMatches={playoffStages !== null}/></div>}
+                <div><GroupStage
+                    groups={groupStage.groups}
+                    isSignedIn={isSignedIn}
+                    isOwner={isOwner}
+                    showMatches={playoffStages !== null}
+                    teams={this.props.tournament.teams}
+                /></div>}
                 <PlayoffStages playoffStages={playoffStages} isSignedIn={isSignedIn}
                     isOwner={isOwner}/>
             </div>