@dcrackel/hematournamentui 1.0.706 → 1.0.708

package/src/stories/Organisms/Cards/TableauBoutCard/TableauBoutCard.test.js

@@ -0,0 +1,143 @@
+import { mount, shallowMount } from '@vue/test-utils';
+import { describe, expect, it, vi } from 'vitest';
+import TableauFencerCard from '../TableauFencerCard/TableauFencerCard.vue';
+import TableauBoutCard from './TableauBoutCard.vue';
+
+const createBout = status => ({
+  BoutId: 42,
+  DEBoutId: 7,
+  Status: status,
+  Score1: 4,
+  Score2: 3,
+  Person1: { PersonId: 1, DisplayName: 'Fencer One', EventPersons: [] },
+  Person2: { PersonId: 2, DisplayName: 'Fencer Two', EventPersons: [] }
+});
+
+const mountCard = bout =>
+  shallowMount(TableauBoutCard, {
+    props: {
+      bout,
+      hostingClubColors: {},
+      roundName: 'Final',
+      bracketSize: 'Final'
+    }
+  });
+
+describe('TableauBoutCard selection', () => {
+  it('keeps the fencer layout outside the native selection button', () => {
+    const wrapper = mount(TableauBoutCard, {
+      props: {
+        bout: createBout('Scheduled'),
+        hostingClubColors: {},
+        roundName: 'Final',
+        bracketSize: 'Final'
+      }
+    });
+    const button = wrapper.find('[data-testid="tableau-bout"]');
+
+    expect(button.element.tagName).toBe('BUTTON');
+    expect(button.attributes('aria-label')).toBe('Fencer One versus Fencer Two');
+    expect(button.find('div, section').exists()).toBe(false);
+    expect(wrapper.findAllComponents(TableauFencerCard)).toHaveLength(2);
+  });
+
+  it('emits directing intent for a scheduled bout', async () => {
+    const bout = createBout('Scheduled');
+    const wrapper = mountCard(bout);
+
+    await wrapper.find('[data-testid="tableau-bout"]').trigger('click');
+
+    expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
+    expect(wrapper.emitted('action:editBout')).toBeUndefined();
+  });
+
+  it('does not draw planned-assignment color over the fencer card', () => {
+    const wrapper = mountCard(createBout('Scheduled'));
+
+    expect(wrapper.find('[data-testid="planned-assignment-indicator"]').exists()).toBe(false);
+  });
+
+  it('emits editing intent for a completed bout', async () => {
+    const bout = createBout('Completed');
+    const wrapper = mountCard(bout);
+
+    await wrapper.find('[data-testid="tableau-bout"]').trigger('click');
+
+    expect(wrapper.emitted('action:editBout')).toEqual([[bout]]);
+    expect(wrapper.emitted('action:directingBout')).toBeUndefined();
+  });
+
+  it('emits directing intent for an active bout', async () => {
+    const bout = createBout('Active');
+    const wrapper = mountCard(bout);
+
+    await wrapper.find('[data-testid="tableau-bout"]').trigger('click');
+
+    expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
+  });
+
+  it('does not emit directing intent for a BYE bout', async () => {
+    const bout = {
+      ...createBout('Scheduled'),
+      Person2: { PersonId: 0, DisplayName: 'BYE', EventPersons: [] }
+    };
+    const wrapper = mountCard(bout);
+
+    await wrapper.find('[data-testid="tableau-bout"]').trigger('click');
+
+    expect(wrapper.emitted('action:directingBout')).toBeUndefined();
+    expect(wrapper.find('[data-testid="tableau-bout"]').attributes('disabled')).toBeDefined();
+  });
+
+  it('rounds the outside corners and highlights the whole bout on hover', () => {
+    const wrapper = mountCard(createBout('Scheduled'));
+    const fencerRows = wrapper.findAllComponents(TableauFencerCard);
+    const boutButton = wrapper.find('[data-testid="tableau-bout"]');
+
+    expect(fencerRows.map(row => row.props('corners'))).toEqual(['top', 'bottom']);
+    expect(boutButton.classes()).toContain('hover:ring-bright');
+    expect(boutButton.classes()).toContain('hover:ring-2');
+  });
+
+  it('shows the assigned ring and time for an active bout', () => {
+    const wrapper = mountCard({
+      ...createBout('Active'),
+      RingName: 'Ring 3',
+      TimeLeft: 95,
+      TimerStatus: 'stopped'
+    });
+
+    expect(wrapper.find('[data-testid="active-ring"]').exists()).toBe(true);
+    expect(wrapper.find('[data-testid="active-ring"] base-text-stub').attributes('text')).toBe('Ring 3');
+    expect(wrapper.find('[data-testid="active-time"] base-text-stub').attributes('text')).toBe('1:35');
+  });
+
+  it('hides active chrome after its ring and timer display fields are cleared', () => {
+    const wrapper = mountCard({
+      ...createBout('Active'),
+      RingName: '',
+      TimeLeft: 0,
+      TimerStatus: 'stopped'
+    });
+
+    expect(wrapper.find('[data-testid="active-ring"]').exists()).toBe(false);
+    expect(wrapper.find('[data-testid="active-time"]').exists()).toBe(false);
+  });
+
+  it('ticks the presentation timer without mutating the bout prop', async () => {
+    vi.useFakeTimers();
+    const bout = { ...createBout('Active'), TimeLeft: 90, TimerStatus: 'running' };
+    const wrapper = mountCard(bout);
+
+    try {
+      vi.advanceTimersByTime(1000);
+      await wrapper.vm.$nextTick();
+
+      expect(wrapper.vm.displayTime).toBe('1:29');
+      expect(bout.TimeLeft).toBe(90);
+    } finally {
+      wrapper.unmount();
+      vi.useRealTimers();
+    }
+  });
+});

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

@@ -1,202 +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';
-
-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);
-      } else {
-        this.$emit('action:directingBout', bout);
-      }
-    },
-    getScoreColor(isPerson1) {
-      if (isPerson1) {
-        if (this.bout.Person2.DisplayName === 'BYE' && !((this.bout.Person1.DisplayName === 'BYE') && (this.bout.Person2.DisplayName === 'BYE'))) return 'bg-winGreen'
-
-        if (this.bout.Score1 > this.bout.Score2) {
-          return 'bg-winGreen';
-        }
-
-        if (this.bout.Score1 < this.bout.Score2 && this.bout.Status === 'Active') {
-          return 'bg-lossRed';
-        }
-      }
-
-      if (!isPerson1) {
-        if (this.bout.Person1.DisplayName === 'BYE' && !((this.bout.Person1.DisplayName === 'BYE') && (this.bout.Person2.DisplayName === 'BYE'))) return 'bg-winGreen'
-
-        if (this.bout.Score1 < this.bout.Score2) {
-          return 'bg-winGreen';
-        }
-
-        if (this.bout.Score1 > this.bout.Score2 && this.bout.Status === 'Active') {
-          return 'bg-lossRed';
-        }
-      }
-      return 'bg-dropdownSelect';
-    },
-    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>