From 33cc4da565ffb07ee4f8d9cbafb248629b85e65a Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 23 Mar 2022 15:41:37 +0100
Subject: [PATCH] highlight "todo" rounds

---
 resources/js/components/rounds/Item.js       | 26 ++++++++++++++++++--
 resources/js/components/tournament/Detail.js | 16 +++++++++++-
 resources/js/helpers/User.js                 | 16 ++++++++----
 resources/sass/rounds.scss                   |  4 +++
 4 files changed, 54 insertions(+), 8 deletions(-)

diff --git a/resources/js/components/rounds/Item.js b/resources/js/components/rounds/Item.js
index 33394f4..f85492d 100644
--- 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 5b8e780..1afcc29 100644
--- 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 8aa839d..c6a99c9 100644
--- 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 0afc0ae..4145523 100644
--- 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;
-- 
2.39.2