From 0f171dfffd9c0c2cc895c9f282c5f4550844cc5a Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Sun, 13 Mar 2022 23:41:12 +0100
Subject: [PATCH] number rounds and results

---
 resources/js/components/common/Icon.js   |  3 +++
 resources/js/components/protocol/Item.js |  1 +
 resources/js/components/results/Item.js  | 24 +++++++++++++++++++-----
 resources/js/components/results/List.js  |  3 ++-
 resources/js/components/rounds/Item.js   |  7 ++++++-
 resources/js/components/rounds/List.js   |  3 ++-
 resources/js/i18n/de.js                  |  3 +++
 resources/sass/_variables.scss           |  8 +++++++-
 resources/sass/common.scss               | 10 ++++++++++
 resources/sass/rounds.scss               |  4 ++++
 10 files changed, 57 insertions(+), 9 deletions(-)

diff --git a/resources/js/components/common/Icon.js b/resources/js/components/common/Icon.js
index 66d2ac9..003adff 100644
--- a/resources/js/components/common/Icon.js
+++ b/resources/js/components/common/Icon.js
@@ -62,8 +62,11 @@ const makePreset = (presetDisplayName, presetName) => {
 Icon.DISCORD = makePreset('DiscordIcon', ['fab', 'discord']);
 Icon.EDIT = makePreset('EditIcon', 'edit');
 Icon.FINISHED = makePreset('FinishedIcon', 'square-check');
+Icon.FIRST_PLACE = makePreset('FirstPlaceIcon', 'trophy');
 Icon.LOGOUT = makePreset('LogoutIcon', 'sign-out-alt');
 Icon.PENDING = makePreset('PendingIcon', 'clock');
 Icon.PROTOCOL = makePreset('ProtocolIcon', 'file-alt');
+Icon.SECOND_PLACE = makePreset('SecondPlaceIcon', 'medal');
+Icon.THIRD_PLACE = makePreset('ThirdPlaceIcon', 'award');
 
 export default Icon;
diff --git a/resources/js/components/protocol/Item.js b/resources/js/components/protocol/Item.js
index 6127a92..f827f1a 100644
--- a/resources/js/components/protocol/Item.js
+++ b/resources/js/components/protocol/Item.js
@@ -16,6 +16,7 @@ const getEntryDate = entry => {
 
 const getEntryDescription = entry => {
 	switch (entry.type) {
+		case 'result.report':
 		case 'round.create':
 			return i18n.t(
 				`protocol.description.${entry.type}`,
diff --git a/resources/js/components/results/Item.js b/resources/js/components/results/Item.js
index 5cdd3be..2c1b656 100644
--- a/resources/js/components/results/Item.js
+++ b/resources/js/components/results/Item.js
@@ -9,7 +9,24 @@ import { findResult } from '../../helpers/Participant';
 import { maySeeResults } from '../../helpers/permissions';
 import { withUser } from '../../helpers/UserContext';
 
+const getIcon = (result, index) => {
+	if (!result || !result.has_finished) {
+		return <Icon.PENDING className="text-muted" size="lg" />;
+	}
+	if (index === 0) {
+		return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
+	}
+	if (index === 1) {
+		return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
+	}
+	if (index === 2) {
+		return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
+	}
+	return <Icon.FINISHED className="text-success" size="lg" />;
+};
+
 const Item = ({
+	index,
 	participant,
 	round,
 	tournament,
@@ -25,17 +42,14 @@ const Item = ({
 						formatTime(result)
 					: null}
 				</span>
-				{result && result.has_finished ?
-					<Icon.FINISHED className="text-success" size="lg" />
-				:
-					<Icon.PENDING size="lg" />
-				}
+				{getIcon(result, index)}
 			</div>
 		</div>
 	);
 };
 
 Item.propTypes = {
+	index: PropTypes.number,
 	participant: PropTypes.shape({
 		user: PropTypes.shape({
 		}),
diff --git a/resources/js/components/results/List.js b/resources/js/components/results/List.js
index 9ad0896..8775529 100644
--- a/resources/js/components/results/List.js
+++ b/resources/js/components/results/List.js
@@ -5,8 +5,9 @@ import Item from './Item';
 import { sortByResult } from '../../helpers/Participant';
 
 const List = ({ round, tournament }) => <div className="results d-flex flex-wrap">
-	{sortByResult(tournament.participants, round).map(participant =>
+	{sortByResult(tournament.participants, round).map((participant, index) =>
 		<Item
+			index={index}
 			key={participant.id}
 			participant={participant}
 			round={round}
diff --git a/resources/js/components/rounds/Item.js b/resources/js/components/rounds/Item.js
index d352cd1..1832edb 100644
--- a/resources/js/components/rounds/Item.js
+++ b/resources/js/components/rounds/Item.js
@@ -12,13 +12,17 @@ import { withUser } from '../../helpers/UserContext';
 import i18n from '../../i18n';
 
 const Item = ({
+	index,
 	round,
 	tournament,
 	user,
 }) =>
 <li className="round d-flex">
 	<div className="info">
-		<p className="date">{i18n.t('rounds.date', { date: new Date(round.created_at) })}</p>
+		<p className="date">
+			{`#${index + 1} `}
+			{i18n.t('rounds.date', { date: new Date(round.created_at) })}
+		</p>
 		<p className="seed">
 			<SeedButton
 				round={round}
@@ -39,6 +43,7 @@ const Item = ({
 </li>;
 
 Item.propTypes = {
+	index: PropTypes.number,
 	round: PropTypes.shape({
 		created_at: PropTypes.string,
 		seed: PropTypes.string,
diff --git a/resources/js/components/rounds/List.js b/resources/js/components/rounds/List.js
index 2ac8f17..928f7b9 100644
--- a/resources/js/components/rounds/List.js
+++ b/resources/js/components/rounds/List.js
@@ -11,8 +11,9 @@ const List = ({
 	tournament,
 }) => rounds && rounds.length ?
 	<ol className="rounds">
-		{rounds.map(round =>
+		{rounds.map((round, index) =>
 			<Item
+				index={index}
 				key={round.id}
 				round={round}
 				tournament={tournament}
diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index 6bca83b..88c2a87 100644
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -31,6 +31,9 @@ export default {
 		},
 		protocol: {
 			description: {
+				result: {
+					report: 'Ergebnis eingetragen',
+				},
 				round: {
 					create: 'Runde hinzugefügt',
 				},
diff --git a/resources/sass/_variables.scss b/resources/sass/_variables.scss
index ba6f9ca..aadcd83 100644
--- a/resources/sass/_variables.scss
+++ b/resources/sass/_variables.scss
@@ -6,7 +6,13 @@ $font-family-sans-serif: 'Nunito', sans-serif;
 $font-size-base: 0.9rem;
 $line-height-base: 1.6;
 
+// Colors
+$bronze: #ad8a56;
+$discord: #5865f2;
+$gold: #c9b037;
+$silver: #b4b4b4;
+
 // Custom variant
 $custom-colors: (
-	"discord": #5865f2
+	"discord": $discord
 );
diff --git a/resources/sass/common.scss b/resources/sass/common.scss
index 8266db7..f585be0 100644
--- a/resources/sass/common.scss
+++ b/resources/sass/common.scss
@@ -10,3 +10,13 @@ h1 {
 	margin-top: 2.5rem;
 	margin-bottom: 2rem;
 }
+
+.text-gold {
+	color: $gold;
+}
+.text-silver {
+	color: $silver;
+}
+.text-bronze {
+	color: $bronze;
+}
diff --git a/resources/sass/rounds.scss b/resources/sass/rounds.scss
index b83f37b..ee38c82 100644
--- a/resources/sass/rounds.scss
+++ b/resources/sass/rounds.scss
@@ -11,6 +11,10 @@
 		.info {
 			padding-right: 1rem;
 			min-width: 13em;
+
+			.date {
+				font-size: 125%;
+			}
 		}
 	}
 }
-- 
2.39.2