highlight "todo" rounds

diff --git a/resources/js/components/rounds/Item.js b/resources/js/components/rounds/Item.js
index 33394f4140f5873bb2c00d4a4100501796e0e3e0..f85492de8b1e6c9de0c838335e8a49bb9db22dc9 100644 (file)
--- a/resources/js/components/rounds/Item.js
+++ b/resources/js/components/rounds/Item.js
@@ -7,17 +7,39 @@ import SeedButton from './SeedButton';
 import SeedCode from './SeedCode';
 import List from '../results/List';
 import ReportButton from '../results/ReportButton';
-import { isParticipant } from '../../helpers/permissions';
+import { isParticipant, isRunner } from '../../helpers/permissions';
+import { isComplete } from '../../helpers/Round';
 import { findParticipant } from '../../helpers/Tournament';
+import { hasFinishedRound } from '../../helpers/User';
 import { withUser } from '../../helpers/UserContext';
 import i18n from '../../i18n';
 
+const getClassName = (round, tournament, user) => {
+       const classNames = ['round', 'd-flex'];
+       if (round.locked) {
+               classNames.push('is-locked');
+       } else {
+               classNames.push('is-unlocked');
+       }
+       if (isComplete(tournament, round)) {
+               classNames.push('is-complete');
+       } else {
+               classNames.push('is-incomplete');
+       }
+       if (hasFinishedRound(user, round)) {
+               classNames.push('has-finished');
+       } else if (isRunner(user, tournament)) {
+               classNames.push('has-not-finished');
+       }
+       return classNames.join(' ');
+};
+
 const Item = ({
        round,
        tournament,
        user,
 }) =>
-<li className="round d-flex">
+<li className={getClassName(round, tournament, user)}>
        <div className="info">
                <p className="date">
                        {round.number ? `#${round.number} ` : '#?'}

diff --git a/resources/js/components/tournament/Detail.js b/resources/js/components/tournament/Detail.js
index 5b8e7804a5e45e0006c27a4f9bdae44d985bff33..1afcc29f10611a1e434c13f3a035dcfad3da9cee 100644 (file)
--- a/resources/js/components/tournament/Detail.js
+++ b/resources/js/components/tournament/Detail.js
@@ -8,6 +8,7 @@ import Protocol from '../protocol/Protocol';
 import Rounds from '../rounds/List';
 import Box from '../users/Box';
 import {
+       isRunner,
        mayAddRounds,
        mayViewProtocol,
 } from '../../helpers/permissions';
@@ -19,11 +20,24 @@ import {
 import { withUser } from '../../helpers/UserContext';
 import i18n from '../../i18n';
 
+const getClassName = (tournament, user) => {
+       const classNames = ['tournament'];
+       if (tournament.locked) {
+               classNames.push('is-locked');
+       } else {
+               classNames.push('is-active');
+       }
+       if (isRunner(user, tournament)) {
+               classNames.push('is-runner');
+       }
+       return classNames.join(' ');
+};
+
 const Detail = ({
        addRound,
        tournament,
        user,
-}) => <Container fluid>
+}) => <Container className={getClassName(tournament, user)} fluid>
        <Row>
                <Col lg={8} xl={9}>
                        <div className="d-flex align-items-center justify-content-between">

diff --git a/resources/js/helpers/User.js b/resources/js/helpers/User.js
index 8aa839d732fbb174f8b599031de8853baa5a946f..c6a99c9dfe4d60e5918ef93a345615111ecc6316 100644 (file)
--- a/resources/js/helpers/User.js
+++ b/resources/js/helpers/User.js
@@ -1,14 +1,20 @@
-export const getAvatarUrl = user => (user.avatar
-       ? `//cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`
-       : '/default-avatar.png');
-
 export const findResult = (user, round) => {
        if (!user || !user.id) return null;
        if (!round || !round.results || !round.results.length) return null;
-       return round.results.find(result => result.user_id === user.id);
+       return round.results.find(result => result.user_id == user.id);
+};
+
+export const getAvatarUrl = user => user.avatar
+       ? `//cdn.discordapp.com/avatars/${user.id}/${user.avatar}.png`
+       : '/default-avatar.png';
+
+export const hasFinishedRound = (user, round) => {
+       const result = findResult(user, round);
+       return result && result.has_finished;
 };
 
 export default {
        findResult,
        getAvatarUrl,
+       hasFinishedRound,
 };

diff --git a/resources/sass/rounds.scss b/resources/sass/rounds.scss
index 0afc0ae1c5fab82f4fa28c92ad96851d90f40e16..414552363f85ef1d2802924e856eb6aad8e08d5c 100644 (file)
--- a/resources/sass/rounds.scss
+++ b/resources/sass/rounds.scss
@@ -8,6 +8,10 @@
                border-radius: 1ex;
                padding: 1ex;
 
+               &.has-not-finished {
+                       box-shadow: 0 0 0.25rem $primary;
+               }
+
                .info {
                        padding-right: 1rem;
                        min-width: 13em;