From 6c3125ca01833f7cec3659353840dbe1ddfb0fc6 Mon Sep 17 00:00:00 2001
From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Wed, 23 Mar 2022 16:46:54 +0100
Subject: [PATCH] show placement on scoreboard

---
 .../js/components/tournament/Scoreboard.js    | 40 ++++++++++++++++---
 resources/js/helpers/Tournament.js            | 16 +++++++-
 resources/js/i18n/de.js                       |  3 ++
 resources/js/i18n/en.js                       |  3 ++
 resources/sass/app.scss                       |  1 +
 resources/sass/tournaments.scss               |  7 ++++
 6 files changed, 63 insertions(+), 7 deletions(-)
 create mode 100644 resources/sass/tournaments.scss

diff --git a/resources/js/components/tournament/Scoreboard.js b/resources/js/components/tournament/Scoreboard.js
index e142a80..ea6a666 100644
--- a/resources/js/components/tournament/Scoreboard.js
+++ b/resources/js/components/tournament/Scoreboard.js
@@ -6,19 +6,45 @@ import { withTranslation } from 'react-i18next';
 import Icon from '../common/Icon';
 import Box from '../users/Box';
 import { calculateScores } from '../../helpers/Tournament';
+import { withUser } from '../../helpers/UserContext';
 import i18n from '../../i18n';
 
-const Scoreboard = ({ tournament }) =>
-<Table striped className="scoreboard">
+const getRowClassName = (tournament, score, user) => {
+	const classNames = ['score'];
+	if (score && user && score.participant && score.participant.user_id == user.id) {
+		classNames.push('is-self');
+	}
+	return classNames.join(' ');
+};
+
+const getPlacementDisplay = score => {
+	if (score.placement === 1) {
+		return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
+	}
+	if (score.placement === 2) {
+		return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
+	}
+	if (score.placement === 3) {
+		return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
+	}
+	return score.placement;
+};
+
+const Scoreboard = ({ tournament, user }) =>
+<Table striped className="scoreboard align-middle">
 	<thead>
 		<tr>
+			<th>{i18n.t('participants.placementShort')}</th>
 			<th>{i18n.t('participants.participant')}</th>
-			<th className="text-end">{i18n.t('participants.score')}</th>
+			<th className="text-end">{i18n.t('participants.scoreShort')}</th>
 		</tr>
 	</thead>
 	<tbody>
 	{calculateScores(tournament).map(score =>
-		<tr className="score" key={score.participant.id}>
+		<tr className={getRowClassName(tournament, score, user)} key={score.participant.id}>
+			<td className="text-center">
+				{getPlacementDisplay(score)}
+			</td>
 			<td>
 				<div className="d-flex align-items-center justify-content-between">
 					<Box user={score.participant.user} />
@@ -35,7 +61,7 @@ const Scoreboard = ({ tournament }) =>
 					: null}
 				</div>
 			</td>
-			<td className="text-end text-lg">{score.score}</td>
+			<td className="text-end">{score.score}</td>
 		</tr>
 	)}
 	</tbody>
@@ -44,6 +70,8 @@ const Scoreboard = ({ tournament }) =>
 Scoreboard.propTypes = {
 	tournament: PropTypes.shape({
 	}),
+	user: PropTypes.shape({
+	}),
 };
 
-export default withTranslation()(Scoreboard);
+export default withTranslation()(withUser(Scoreboard));
diff --git a/resources/js/helpers/Tournament.js b/resources/js/helpers/Tournament.js
index 38750e7..7dffebb 100644
--- a/resources/js/helpers/Tournament.js
+++ b/resources/js/helpers/Tournament.js
@@ -32,7 +32,21 @@ export const calculateScores = tournament => {
 			}
 		}
 	});
-	return scores.sort(compareScore).reverse();
+	const sorted = scores.sort(compareScore);
+	let placement = scores.length;
+	let skipped = 0;
+	let lastScore = sorted[0].score;
+	for (let i = 0; i < sorted.length; ++i) {
+		if (sorted[i].score > lastScore) {
+			placement -= skipped;
+			skipped = 1;
+			lastScore = sorted[i].score;
+		} else {
+			++skipped;
+		}
+		sorted[i].placement = placement;
+	}
+	return sorted.reverse();
 };
 
 export const compareScore = (a, b) => {
diff --git a/resources/js/i18n/de.js b/resources/js/i18n/de.js
index 79bc221..9a7bb04 100644
--- a/resources/js/i18n/de.js
+++ b/resources/js/i18n/de.js
@@ -109,6 +109,8 @@ export default {
 			empty: 'Noch keine Teilnehmer eingetragen',
 			heading: 'Teilnehmer',
 			participant: 'Teilnehmer',
+			placement: 'Platzierung',
+			placementShort: '#',
 			roleNames: {
 				admin: 'Administrator',
 				runner: 'Runner',
@@ -116,6 +118,7 @@ export default {
 			roles: 'Teilnahme als',
 			tournament: 'Turnier',
 			score: 'Punktzahl',
+			scoreShort: 'Punkte',
 		},
 		protocol: {
 			description: {
diff --git a/resources/js/i18n/en.js b/resources/js/i18n/en.js
index 8cf2806..9f64901 100644
--- a/resources/js/i18n/en.js
+++ b/resources/js/i18n/en.js
@@ -109,6 +109,8 @@ export default {
 			empty: 'No participants on record',
 			heading: 'Participants',
 			participant: 'Participant',
+			placement: 'Placement',
+			placementShort: '#',
 			roleNames: {
 				admin: 'Administrator',
 				runner: 'Runner',
@@ -116,6 +118,7 @@ export default {
 			roles: 'Participated as',
 			tournament: 'Tournament',
 			score: 'Score',
+			scoreShort: 'Score',
 		},
 		protocol: {
 			description: {
diff --git a/resources/sass/app.scss b/resources/sass/app.scss
index b19f13e..8cd0fb1 100644
--- a/resources/sass/app.scss
+++ b/resources/sass/app.scss
@@ -16,4 +16,5 @@
 @import 'participants';
 @import 'results';
 @import 'rounds';
+@import 'tournaments';
 @import 'users';
diff --git a/resources/sass/tournaments.scss b/resources/sass/tournaments.scss
new file mode 100644
index 0000000..617125f
--- /dev/null
+++ b/resources/sass/tournaments.scss
@@ -0,0 +1,7 @@
+.scoreboard {
+	.score {
+		&.is-self {
+			outline: medium double $secondary;
+		}
+	}
+}
-- 
2.39.2