number rounds and results

diff --git a/resources/js/components/common/Icon.js b/resources/js/components/common/Icon.js
index 66d2ac90bf21ed3443751c2193d334ac93a3f068..003adff91b69a541655e709b28e14884f2122dbd 100644 (file)
--- 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 6127a92958ec1b4769442c5546efe903212a1391..f827f1ab0f9b8409dcbb5f15f5d7f735fefa0cfd 100644 (file)
--- 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 5cdd3be42751c1b678508a1e3800a065b080bf93..2c1b65688416c6639925ef375d5255e7782a9d20 100644 (file)
--- 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 9ad089632c5b6e035c9799646cf3a178fe5c4d8e..8775529493d6d9909ff1cf3fd9674b41ca62edb7 100644 (file)
--- 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 d352cd126263fb49044157ff31b093a1c658609e..1832edb4c13bb5e08f90f1731f1866884ffcd452 100644 (file)
--- 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 2ac8f1701d9074094e705035c928f326dd5522f4..928f7b97eac3bb4f5882ae0b35780f942abe1ba7 100644 (file)
--- 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 6bca83bd27b50d80b2944cd96c0dfbe26333e083..88c2a876ac210a8fb8dd22cbc06e5ed1d29c1843 100644 (file)
--- 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 ba6f9ca88c766aca35df9aa4b7fc6f49d8ef412d..aadcd836691bf6dd8adc6e80714a1229ff3a43be 100644 (file)
--- 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 8266db79bcd5641eefdc303bf7cc3127838d979a..f585be09416b6912a4d7b9efa104d8fe072cbf1d 100644 (file)
--- 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 b83f37bce01b84d25fbf64301169d42fece5de8d..ee38c8237e287b9c139140a5a2a5900fc3ef3774 100644 (file)
--- 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%;
+                       }
                }
        }
 }