X-Git-Url: https://git.localhorst.tv/?a=blobdiff_plain;ds=sidebyside;f=resources%2Fjs%2Fcomponents%2Ftournament%2FScoreboard.js;h=27bb0873a4d7c75d4de6a3b15f25f1d514a07713;hb=9a4e2305bb37cb8c62e3ad332f4a2bf45f720a18;hp=e142a80e030488f9a96d474d31d390b9a5259617;hpb=9e52cf7a5fc89a89301e00e9595c80b783449bbe;p=alttp.git
diff --git a/resources/js/components/tournament/Scoreboard.js b/resources/js/components/tournament/Scoreboard.js
index e142a80..27bb087 100644
--- a/resources/js/components/tournament/Scoreboard.js
+++ b/resources/js/components/tournament/Scoreboard.js
@@ -1,49 +1,106 @@
import PropTypes from 'prop-types';
import React from 'react';
import { Button, Table } from 'react-bootstrap';
-import { withTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
import Icon from '../common/Icon';
import Box from '../users/Box';
-import { calculateScores } from '../../helpers/Tournament';
-import i18n from '../../i18n';
-
-const Scoreboard = ({ tournament }) =>
-
-
-
- {i18n.t('participants.participant')} |
- {i18n.t('participants.score')} |
-
-
-
- {calculateScores(tournament).map(score =>
-
-
-
-
- {score.participant.user.stream_link ?
-
- : null}
-
- |
- {score.score} |
-
- )}
-
-
;
+import { comparePlacement } from '../../helpers/Participant';
+import { getRunners } from '../../helpers/Tournament';
+import { useUser } from '../../hooks/user';
+
+const getRowClassName = (tournament, participant, user) => {
+ const classNames = ['score'];
+ if (participant && user && participant.user_id == user.id) {
+ classNames.push('is-self');
+ }
+ return classNames.join(' ');
+};
+
+const getPlacementDisplay = participant => {
+ if (participant.placement === 1) {
+ return ;
+ }
+ if (participant.placement === 2) {
+ return ;
+ }
+ if (participant.placement === 3) {
+ return ;
+ }
+ return participant.placement;
+};
+
+const twitchReg = /^https?:\/\/(www\.)?twitch\.tv/;
+const youtubeReg = /^https?:\/\/(www\.)?youtu(\.be|be\.)/;
+
+const getStreamVariant = participant => {
+ if (!participant || !participant.user || !participant.user.stream_link) {
+ return 'outline-secondary';
+ }
+ if (twitchReg.test(participant.user.stream_link)) {
+ return 'outline-twitch';
+ }
+ if (youtubeReg.test(participant.user.stream_link)) {
+ return 'outline-youtube';
+ }
+ return 'outline-secondary';
+};
+
+const getStreamIcon = participant => {
+ const variant = getStreamVariant(participant);
+ if (variant === 'outline-twitch') {
+ return ;
+ }
+ if (variant === 'outline-youtube') {
+ return ;
+ }
+ return ;
+};
+
+const Scoreboard = ({ tournament }) => {
+ const { t } = useTranslation();
+ const { user } = useUser();
+
+ return
+
+
+ {t('participants.placementShort')} |
+ {t('participants.participant')} |
+ {t('participants.scoreShort')} |
+
+
+
+ {getRunners(tournament).sort(comparePlacement).map(participant =>
+
+
+ {getPlacementDisplay(participant)}
+ |
+
+
+
+ {participant.user.stream_link ?
+
+ : null}
+
+ |
+ {participant.score} |
+
+ )}
+
+
;
+};
Scoreboard.propTypes = {
tournament: PropTypes.shape({
}),
};
-export default withTranslation()(Scoreboard);
+export default Scoreboard;