show placement on scoreboard

[alttp.git] / resources / js / components / tournament / Scoreboard.js

diff --git a/resources/js/components/tournament/Scoreboard.js b/resources/js/components/tournament/Scoreboard.js
index e142a80e030488f9a96d474d31d390b9a5259617..ea6a6668727385e2165dcc44ab1d2f853e1940d0 100644 (file)
--- 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));