@dcrackel/hematournamentui 1.0.707 → 1.0.708

package/src/stories/Organisms/Cards/TableauBoutCard/TableauBoutCard.vue

@@ -1,215 +1,256 @@
-<template>
-  <section :class="getTopSpace">
-    <div
-      v-if="roundName === 'Third Place'"
-      class="flex justify-center border-b mb-4 mt-8"
-      :class="large ? 'w-72' : 'w-40'"
-    >
-      <BaseText :text="roundName" size="sm" color="quaternary" />
-    </div>
-    <div v-if="roundName === 'Final'" class="flex justify-center border-b mb-4 mt-0" :class="large ? 'w-72' : 'w-40'">
-      <BaseText :text="roundName" size="sm" color="quaternary" />
-    </div>
-    <div v-if="showGrandFinal" class="flex justify-center border-b mb-4 mt-0" :class="large ? 'w-72' : 'w-40'">
-      <BaseText :text="roundName" size="sm" color="quaternary" />
-    </div>
-    <!-- Replacement headers for finals -->
-    <div v-if="roundName !== 'Grand Final' || showGrandFinal">
-      <section @click="handleBoutClick(bout)">
-        <TableauFencerCard
-          :fencer="person1Display"
-          :score="score1"
-          :position="dePosition1"
-          :color="hostingClubColors.Color1"
-          :scoreColor="getScoreColor(true)"
-          :large="large"
-          :highLight="highlight"
-          :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-          :faded="shouldFade(bout, true)"
-          @action:highLight="handleHighlight"
-        />
-      </section>
-      <!-- Card break -->
-      <div :class="getCardSpace"></div>
-      <!-- Card break -->
-      <section @click="handleBoutClick(bout)">
-        <TableauFencerCard
-          :fencer="person2Display"
-          :score="score2"
-          :position="dePosition2"
-          :color="hostingClubColors.Color2"
-          :scoreColor="getScoreColor(false)"
-          :large="large"
-          :highLight="highlight"
-          :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-          :faded="shouldFade(bout, false)"
-          @action:highLight="handleHighlight"
-        />
-      </section>
-    </div>
-  </section>
-</template>
-
-<script>
-import BaseText from '../../../Atoms/Text/BaseText.vue';
-import TableauFencerCard from '../TableauFencerCard/TableauFencerCard.vue';
-import { spacingConfig } from './SpacingConfig';
-
-const scoreColorRulesByFencer = {
-  true: [
-    {
-      matches: bout => bout.Person1.DisplayName !== 'BYE' && bout.Person2.DisplayName === 'BYE',
-      color: 'bg-winGreen'
-    },
-    { matches: bout => bout.Score1 > bout.Score2, color: 'bg-winGreen' },
-    {
-      matches: bout => bout.Score1 < bout.Score2 && bout.Status === 'Active',
-      color: 'bg-lossRed'
-    }
-  ],
-  false: [
-    {
-      matches: bout => bout.Person2.DisplayName !== 'BYE' && bout.Person1.DisplayName === 'BYE',
-      color: 'bg-winGreen'
-    },
-    { matches: bout => bout.Score2 > bout.Score1, color: 'bg-winGreen' },
-    {
-      matches: bout => bout.Score2 < bout.Score1 && bout.Status === 'Active',
-      color: 'bg-lossRed'
-    }
-  ]
-};
-
-const getMatchingScoreColor = (bout, isPerson1) => {
-  const matchingRule = scoreColorRulesByFencer[String(isPerson1)].find(rule => rule.matches(bout));
-  return matchingRule?.color || 'bg-dropdownSelect';
-};
-
-export default {
-  name: 'TableauBoutCard',
-  emits: ['action:directingBout', 'action:editBout'],
-  components: { BaseText, TableauFencerCard },
-  props: {
-    bout: {
-      type: Object,
-      required: true
-    },
-    hostingClubColors: {
-      type: Object,
-      required: true
-    },
-    large: {
-      type: Boolean,
-      default: true
-    },
-    roundName: {
-      type: String,
-      required: true
-    },
-    bracketSize: {
-      type: String,
-      required: true
-    },
-    isCountingBackwardsMaxScore: {
-      type: Number,
-      default: 0
-    }
-  },
-  data() {
-    return {
-      highlight: false,
-      currentConfig: {}
-    };
-  },
-  mounted() {
-    this.updateConfig();
-  },
-  watch: {
-    large(newVal, oldVal) {
-      if (newVal !== oldVal) {
-        this.updateConfig();
-      }
-    },
-    bracketSize(newVal, oldVal) {
-      if (newVal !== oldVal) {
-        this.updateConfig();
-      }
-    }
-  },
-  methods: {
-    updateConfig() {
-      const size = this.large ? 'large' : 'small';
-      this.currentConfig = spacingConfig[this.bracketSize]?.[size]?.[this.roundName] || {};
-    },
-    handleBoutClick(bout) {
-      if (bout.Status === 'Completed') {
-        this.$emit('action:editBout', bout);
-        return;
-      }
-      this.$emit('action:directingBout', bout);
-    },
-    getScoreColor(isPerson1) {
-      return getMatchingScoreColor(this.bout, isPerson1);
-    },
-    handleHighlight(value) {
-      if (this.bout.Person1.DisplayName.length < 1 || this.bout.Person2.DisplayName.length < 1) return;
-      if (this.bout.Person1.DisplayName === 'BYE' || this.bout.Person2.DisplayName === 'BYE') return;
-      this.highlight = value;
-    },
-    shouldFade(bout, person1) {
-      if (this.bout.Person1.DisplayName === 'BYE' && this.bout.Person2.DisplayName === 'BYE') return false;
-
-      if (person1) {
-        if (bout.Person1.DisplayName === 'BYE') return true;
-        if (parseInt(bout.Score1) < parseInt(bout.Score2)) return true;
-      }
-
-      if (!person1) {
-        if (bout.Person2.DisplayName === 'BYE') return true;
-        if (parseInt(bout.Score2) < parseInt(bout.Score1)) return true;
-      }
-
-      return false;
-    }
-  },
-  computed: {
-    dePosition1() {
-      return this.bout.Person1?.EventPersons?.[0]?.DEPosition ?? '';
-    },
-    score1() {
-      return `${this.bout.Score1}`;
-    },
-    dePosition2() {
-      return this.bout.Person2?.EventPersons?.[0]?.DEPosition ?? '';
-    },
-    score2() {
-      return `${this.bout.Score2}`;
-    },
-    getTopSpace() {
-      return this.currentConfig?.getTopSpace || '';
-    },
-    getCardSpace() {
-      return this.currentConfig?.getCardSpace || '';
-    },
-    person1Display() {
-      if (this.bout.Status === 'Scheduled' && this.bout.Person1.DisplayName === 'BYE') {
-        return { ...this.bout.Person1, DisplayName: '', Club: { Name: '' } };
-      }
-      return this.bout.Person1;
-    },
-    person2Display() {
-      if (this.bout.Status === 'Scheduled' && this.bout.Person2.DisplayName === 'BYE') {
-        return { ...this.bout.Person2, DisplayName: '', Club: { Name: '' } };
-      }
-      return this.bout.Person2;
-    },
-    showGrandFinal() {
-      return (
-        this.roundName === 'Grand Final' &&
-        this.bout.Person1.DisplayName !== 'BYE' &&
-        this.bout.Person2.DisplayName !== 'BYE'
-      );
-    }
-  }
-};
-</script>
+<template>
+  <section v-if="showBout" class="relative w-40">
+    <div
+      v-if="showRingLabel"
+      data-testid="active-ring"
+      class="pointer-events-none absolute -top-4 left-0 z-20 flex h-4 w-40 items-center rounded-t bg-primary px-2"
+    >
+      <BaseText :text="ringName" size="xs" color="neutral" weight="bold" class="truncate uppercase" />
+    </div>
+
+    <div class="relative w-40 text-left" :class="{ 'opacity-70': !isSelectable }">
+      <TableauFencerCard
+        :fencer="person1Display"
+        :score="score1"
+        :position="dePosition1"
+        :color="hostingClubColors.Color1"
+        :scoreColor="getScoreColor('person1')"
+        :showScore="showScore1"
+        :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+        corners="top"
+      />
+
+      <div class="relative h-px bg-dropdownSelect">
+        <span
+          :ref="element => registerAnchor('input', element)"
+          class="pointer-events-none absolute left-0 top-1/2 h-px w-px -translate-y-1/2 opacity-0"
+        ></span>
+        <span
+          :ref="element => registerAnchor('output', element)"
+          class="pointer-events-none absolute right-0 top-1/2 h-px w-px -translate-y-1/2 opacity-0"
+        ></span>
+      </div>
+
+      <TableauFencerCard
+        :fencer="person2Display"
+        :score="score2"
+        :position="dePosition2"
+        :color="hostingClubColors.Color2"
+        :scoreColor="getScoreColor('person2')"
+        :showScore="showScore2"
+        :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+        corners="bottom"
+      />
+      <button
+        type="button"
+        data-testid="tableau-bout"
+        class="absolute inset-0 z-10 w-40 rounded text-left shadow-md outline-none ring-1 ring-transparent transition hover:shadow-lg hover:ring-2 hover:ring-bright focus-visible:ring-2 focus-visible:ring-bright disabled:cursor-default"
+        :disabled="!isSelectable"
+        :aria-label="boutLabel"
+        @click="handleBoutClick"
+      ></button>
+    </div>
+
+    <div
+      v-if="showActiveChrome"
+      data-testid="active-time"
+      class="pointer-events-none absolute left-full top-1/2 z-20 flex h-[57px] w-10 -translate-y-1/2 items-center justify-center rounded-r-md bg-primary px-1"
+    >
+      <BaseText :text="displayTime" size="xs" color="neutral" weight="bold" class="font-sourceCodePro" />
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+import TableauFencerCard from '../TableauFencerCard/TableauFencerCard.vue';
+
+const EMPTY_FENCER = { DisplayName: '', Club: { Name: '' }, EventPersons: [] };
+
+const getFencerName = fencer => String(fencer?.DisplayName || '');
+const isByeName = fencer => getFencerName(fencer).toUpperCase() === 'BYE';
+const isMissingFencer = fencer => !fencer?.PersonId || Number(fencer.PersonId) === 0;
+const isUnavailableFencer = fencer => isMissingFencer(fencer) || isByeName(fencer);
+const isCompletedBout = bout => String(bout?.Status || '').toLowerCase() === 'completed';
+const getNumericScore = score => Number(score ?? 0);
+const normalizeSeconds = value => Math.max(0, Number(value) || 0);
+const formatSeconds = value => {
+  const seconds = normalizeSeconds(value);
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
+};
+const isRunningActiveBout = bout =>
+  String(bout?.Status || '').toLowerCase() === 'active' && String(bout?.TimerStatus || '').toLowerCase() === 'running';
+
+const scoreColorRules = {
+  person1: [
+    { matches: bout => !isByeName(bout.Person1) && isByeName(bout.Person2), color: 'bg-winGreen' },
+    { matches: bout => getNumericScore(bout.Score1) > getNumericScore(bout.Score2), color: 'bg-winGreen' },
+    {
+      matches: bout =>
+        getNumericScore(bout.Score1) < getNumericScore(bout.Score2) && String(bout.Status).toLowerCase() === 'active',
+      color: 'bg-lossRed'
+    }
+  ],
+  person2: [
+    { matches: bout => !isByeName(bout.Person2) && isByeName(bout.Person1), color: 'bg-winGreen' },
+    { matches: bout => getNumericScore(bout.Score2) > getNumericScore(bout.Score1), color: 'bg-winGreen' },
+    {
+      matches: bout =>
+        getNumericScore(bout.Score2) < getNumericScore(bout.Score1) && String(bout.Status).toLowerCase() === 'active',
+      color: 'bg-lossRed'
+    }
+  ]
+};
+
+const getMatchingScoreColor = (bout, fencerKey) =>
+  scoreColorRules[fencerKey].find(rule => rule.matches(bout))?.color || 'bg-dropdownSelect';
+
+const getDisplayFencer = (bout, fencer) => {
+  if (!fencer) return EMPTY_FENCER;
+  if (String(bout.Status).toLowerCase() !== 'scheduled' || !isByeName(fencer)) return fencer;
+  return { ...fencer, DisplayName: '', Club: { Name: '' } };
+};
+
+export default {
+  name: 'TableauBoutCard',
+  components: { BaseText, TableauFencerCard },
+  emits: ['action:directingBout', 'action:editBout', 'register-node-anchor'],
+  props: {
+    bout: {
+      type: Object,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    },
+    roundName: {
+      type: String,
+      required: true
+    },
+    bracketSize: {
+      type: String,
+      required: true
+    },
+    isCountingBackwardsMaxScore: {
+      type: Number,
+      default: 0
+    }
+  },
+  data() {
+    return {
+      remainingTime: normalizeSeconds(this.bout.TimeLeft),
+      timerInterval: null
+    };
+  },
+  computed: {
+    boutNodeId() {
+      return this.bout.DEBoutId ?? this.bout.BoutId;
+    },
+    boutLabel() {
+      return `${this.person1Display.DisplayName || 'Unassigned'} versus ${
+        this.person2Display.DisplayName || 'Unassigned'
+      }`;
+    },
+    dePosition1() {
+      return this.bout.Person1?.EventPersons?.[0]?.DEPosition ?? '';
+    },
+    dePosition2() {
+      return this.bout.Person2?.EventPersons?.[0]?.DEPosition ?? '';
+    },
+    displayTime() {
+      return formatSeconds(this.remainingTime);
+    },
+    isActiveBout() {
+      return String(this.bout.Status || '').toLowerCase() === 'active';
+    },
+    isDirectable() {
+      return !isUnavailableFencer(this.bout.Person1) && !isUnavailableFencer(this.bout.Person2);
+    },
+    isSelectable() {
+      return isCompletedBout(this.bout) || this.isDirectable;
+    },
+    person1Display() {
+      return getDisplayFencer(this.bout, this.bout.Person1);
+    },
+    person2Display() {
+      return getDisplayFencer(this.bout, this.bout.Person2);
+    },
+    ringName() {
+      return String(this.bout.RingName || '');
+    },
+    score1() {
+      return String(this.bout.Score1 ?? 0);
+    },
+    score2() {
+      return String(this.bout.Score2 ?? 0);
+    },
+    showBout() {
+      if (this.roundName !== 'Grand Final') return true;
+      return !isUnavailableFencer(this.bout.Person1) && !isUnavailableFencer(this.bout.Person2);
+    },
+    showActiveChrome() {
+      return this.isActiveBout && (this.ringName.length > 0 || this.remainingTime > 0 || this.shouldTickTimer);
+    },
+    showScore1() {
+      return !isUnavailableFencer(this.bout.Person1);
+    },
+    showScore2() {
+      return !isUnavailableFencer(this.bout.Person2);
+    },
+    showRingLabel() {
+      return this.isActiveBout && this.ringName.length > 0;
+    },
+    shouldTickTimer() {
+      return isRunningActiveBout(this.bout) && this.remainingTime > 0;
+    }
+  },
+  watch: {
+    'bout.TimeLeft'(value) {
+      this.remainingTime = normalizeSeconds(value);
+      this.restartTimer();
+    },
+    'bout.TimerStatus'() {
+      this.restartTimer();
+    },
+    'bout.Status'() {
+      this.restartTimer();
+    }
+  },
+  mounted() {
+    this.restartTimer();
+  },
+  beforeUnmount() {
+    this.stopTimer();
+  },
+  methods: {
+    getScoreColor(fencerKey) {
+      return getMatchingScoreColor(this.bout, fencerKey);
+    },
+    handleBoutClick() {
+      if (isCompletedBout(this.bout)) {
+        this.$emit('action:editBout', this.bout);
+        return;
+      }
+      if (this.isDirectable) this.$emit('action:directingBout', this.bout);
+    },
+    restartTimer() {
+      this.stopTimer();
+      if (!this.shouldTickTimer) return;
+      this.timerInterval = setInterval(this.tickTimer, 1000);
+    },
+    registerAnchor(kind, element) {
+      if (this.boutNodeId === null || this.boutNodeId === undefined) return;
+      this.$emit('register-node-anchor', { id: this.boutNodeId, kind, el: element });
+    },
+    stopTimer() {
+      if (this.timerInterval) clearInterval(this.timerInterval);
+      this.timerInterval = null;
+    },
+    tickTimer() {
+      this.remainingTime = Math.max(0, this.remainingTime - 1);
+      if (this.remainingTime === 0) this.stopTimer();
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Cards/TableauFencerCard/TableauFencerCard.stories.js

@@ -1,92 +1,69 @@
-import TableauFencerCard from './TableauFencerCard.vue';
-
-export default {
-  title: 'Organisms/Cards/TableauFencerCard',
-  component: TableauFencerCard,
-  args: {
-    fencer: {
-      DisplayName: 'John Doe',
-      Club: {
-        Name: 'Fencing Club'
-      },
-      Images: [
-        {
-          URL: 'https://randomuser.me/api/portraits/men/91.jpg'
-        }
-      ]
-    },
-    score: '15',
-    position: '1',
-    color: 'blue',
-    scoreColor: 'bg-winGreen',
-    large: true
-  },
-  argTypes: {
-    fencer: {
-      control: 'object',
-      description: 'Object containing fencer details including name, club, and images'
-    },
-    score: {
-      control: 'text',
-      description: 'Score of the fencer'
-    },
-    position: {
-      control: 'text',
-      description: 'Position of the fencer in the bracket'
-    },
-    color: {
-      control: 'color',
-      description: 'Color for the position background'
-    },
-    scoreColor: {
-      control: 'color',
-      description: 'Color for the score background'
-    },
-    large: {
-      control: 'boolean',
-      description: 'Boolean to determine the size of the card'
-    }
-  }
-};
-
-export const Default = {
-  args: {
-    fencer: {
-      DisplayName: 'John Doe',
-      Club: {
-        Name: 'Fencing Club'
-      },
-      Images: [
-        {
-          URL: 'https://randomuser.me/api/portraits/men/50.jpg'
-        }
-      ]
-    },
-    score: '15',
-    position: '1',
-    color: 'blue',
-    scoreColor: 'bg-winGreen',
-    large: true
-  }
-};
-
-export const Small = {
-  args: {
-    fencer: {
-      DisplayName: 'Jane Doe',
-      Club: {
-        Name: 'Fencing Club'
-      },
-      Images: [
-        {
-          URL: 'https://via.placeholder.com/40'
-        }
-      ]
-    },
-    score: '12',
-    position: '2',
-    color: 'red',
-    scoreColor: 'bg-lossRed',
-    large: false
-  }
-};
+import TableauFencerCard from './TableauFencerCard.vue';
+
+export default {
+  title: 'Organisms/Cards/TableauFencerCard',
+  component: TableauFencerCard,
+  tags: ['autodocs'],
+  args: {
+    fencer: { DisplayName: 'John Doe' },
+    score: '15',
+    position: '1',
+    color: 'blue',
+    scoreColor: 'bg-winGreen',
+    showScore: true,
+    corners: 'top'
+  },
+  argTypes: {
+    fencer: {
+      control: 'object',
+      description: 'Fencer displayed in the bracket row'
+    },
+    score: {
+      control: 'text',
+      description: 'Displayed bout score'
+    },
+    position: {
+      control: 'text',
+      description: 'Seed or direct-elimination position'
+    },
+    color: {
+      control: 'text',
+      description: 'Tailwind theme color used for the seed strip'
+    },
+    scoreColor: {
+      control: 'text',
+      description: 'Tailwind background class used for the score cell'
+    },
+    showScore: {
+      control: 'boolean',
+      description: 'Whether the score cell displays a value'
+    },
+    corners: {
+      control: 'select',
+      options: ['none', 'top', 'bottom'],
+      description: 'Rounds the outside corners when used as the top or bottom bout row'
+    }
+  }
+};
+
+export const Default = {};
+
+export const LosingScore = {
+  args: {
+    fencer: { DisplayName: 'Jane Doe' },
+    score: '12',
+    position: '2',
+    color: 'red',
+    scoreColor: 'bg-lossRed',
+    corners: 'bottom'
+  }
+};
+
+export const PendingFencer = {
+  args: {
+    fencer: { DisplayName: '' },
+    score: '0',
+    position: '',
+    showScore: false
+  }
+};