server calculated scoring

[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 cbc73a32620db88204b5fa81f669a5db18c79702..40ad82ff300724acda076a5f7038d1546b723c5e 100644 (file)
--- a/resources/js/components/tournament/Scoreboard.js
+++ b/resources/js/components/tournament/Scoreboard.js
@@ -5,29 +5,30 @@ import { withTranslation } from 'react-i18next';
 
 import Icon from '../common/Icon';
 import Box from '../users/Box';
-import { calculateScores } from '../../helpers/Tournament';
+import { comparePlacement } from '../../helpers/Participant';
+import { getRunners } from '../../helpers/Tournament';
 import { withUser } from '../../helpers/UserContext';
 import i18n from '../../i18n';
 
-const getRowClassName = (tournament, score, user) => {
+const getRowClassName = (tournament, participant, user) => {
        const classNames = ['score'];
-       if (score && user && score.participant && score.participant.user_id == user.id) {
+       if (participant && user && participant.user_id == user.id) {
                classNames.push('is-self');
        }
        return classNames.join(' ');
 };
 
-const getPlacementDisplay = score => {
-       if (score.placement === 1) {
+const getPlacementDisplay = participant => {
+       if (participant.placement === 1) {
                return <Icon.FIRST_PLACE className="text-gold" size="lg" />;
        }
-       if (score.placement === 2) {
+       if (participant.placement === 2) {
                return <Icon.SECOND_PLACE className="text-silver" size="lg" />;
        }
-       if (score.placement === 3) {
+       if (participant.placement === 3) {
                return <Icon.THIRD_PLACE className="text-bronze" size="lg" />;
        }
-       return score.placement;
+       return participant.placement;
 };
 
 const Scoreboard = ({ tournament, user }) =>
@@ -40,17 +41,17 @@ const Scoreboard = ({ tournament, user }) =>
                </tr>
        </thead>
        <tbody>
-       {calculateScores(tournament).map(score =>
-               <tr className={getRowClassName(tournament, score, user)} key={score.participant.id}>
+       {getRunners(tournament).sort(comparePlacement).map(participant =>
+               <tr className={getRowClassName(tournament, participant, user)} key={participant.id}>
                        <td className="text-center">
-                               {getPlacementDisplay(score)}
+                               {getPlacementDisplay(participant)}
                        </td>
                        <td>
                                <div className="d-flex align-items-center justify-content-between">
-                                       <Box user={score.participant.user} />
-                                       {score.participant.user.stream_link ?
+                                       <Box user={participant.user} />
+                                       {participant.user.stream_link ?
                                                <Button
-                                                       href={score.participant.user.stream_link}
+                                                       href={participant.user.stream_link}
                                                        size="sm"
                                                        target="_blank"
                                                        title={i18n.t('users.stream')}
@@ -61,7 +62,7 @@ const Scoreboard = ({ tournament, user }) =>
                                        : null}
                                </div>
                        </td>
-                       <td className="text-end">{score.score}</td>
+                       <td className="text-end">{participant.score}</td>
                </tr>
        )}
        </tbody>