@dcrackel/hematournamentui 1.0.714 → 1.0.716

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

@@ -0,0 +1,158 @@
+<template>
+  <article class="overflow-hidden rounded border" :class="cardClass" :aria-label="boutLabel">
+    <header class="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-2 px-2 py-1.5" :class="headerClass">
+      <div class="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs">
+        <span v-if="active || !ready" class="flex items-center gap-1.5 font-semibold text-primary">
+          <span v-if="active" class="h-1.5 w-1.5 rounded-full bg-orange2" aria-hidden="true"></span>
+          {{ stateLabel }}
+        </span>
+        <span class="text-primary/70">{{ boutReference }}</span>
+      </div>
+      <div v-if="active" class="flex flex-wrap items-baseline justify-end gap-x-2">
+        <span class="text-xs text-primary/70">{{ timerLabel }}</span>
+        <span class="font-mono text-2xl font-bold tabular-nums text-primary">{{ displayTime }}</span>
+      </div>
+    </header>
+    <div class="space-y-px p-1">
+      <TableauFencerCard
+        v-for="row in fencerRows"
+        :key="row.key"
+        :fencer="row.fencer"
+        :position="row.position"
+        :score="row.score"
+        :showScore="active"
+        :scoreColor="row.scoreColor"
+        :color="row.color"
+        :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+        large
+        nightMode
+      />
+    </div>
+  </article>
+</template>
+
+<script>
+import TableauFencerCard from '../TableauFencerCard/TableauFencerCard.vue';
+import { hasReadyFencer, isActiveBout, isReadyBout } from '../../../Util/ringBoard.js';
+
+const normalizeTime = value => {
+  if (value == null || value === '') return null;
+  const seconds = Number(value);
+  return Number.isFinite(seconds) ? Math.max(0, Math.floor(seconds)) : null;
+};
+const formatTime = seconds =>
+  seconds == null ? '—' : `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`;
+
+export default {
+  name: 'RingBoutCard',
+  components: { TableauFencerCard },
+  emits: [],
+  props: {
+    bout: { type: Object, required: true },
+    hostingClubColors: { type: Object, default: () => ({}) },
+    isCountingBackwardsMaxScore: { type: Number, default: 0 },
+    connectedToServer: { type: Boolean, default: true }
+  },
+  data() {
+    return { now: Date.now(), receivedAt: Date.now(), interval: null };
+  },
+  computed: {
+    active() {
+      return isActiveBout(this.bout);
+    },
+    ready() {
+      return isReadyBout(this.bout);
+    },
+    cardClass() {
+      return this.active ? 'border-neutral/60 bg-lightgray' : 'border-neutral/20 bg-lightgray';
+    },
+    headerClass() {
+      return this.active ? 'bg-black/10' : 'bg-black/5';
+    },
+    stateLabel() {
+      if (this.active) return 'In progress';
+      return this.ready ? 'Scheduled' : 'Awaiting fencers';
+    },
+    boutReference() {
+      const id = this.bout.DEBoutId ?? this.bout.BoutId;
+      return [this.bout.RoundLabel, id == null ? '' : `Bout ${id}`].filter(Boolean).join(' · ');
+    },
+    boutLabel() {
+      return `${this.stateLabel}: ${this.fencerRows.map(row => row.fencer.DisplayName).join(' versus ')}`;
+    },
+    running() {
+      return this.active && String(this.bout.TimerStatus || '').toLowerCase() === 'running';
+    },
+    remaining() {
+      const seconds = normalizeTime(this.bout.TimeLeft);
+      if (seconds == null || !this.running || !this.connectedToServer) return seconds;
+      return Math.max(0, seconds - Math.floor((this.now - this.receivedAt) / 1000));
+    },
+    displayTime() {
+      return formatTime(this.remaining);
+    },
+    timerLabel() {
+      if (!this.connectedToServer) return 'Last received';
+      if (this.remaining == null) return 'Time unavailable';
+      if (String(this.bout.TimerStatus || '').toLowerCase() === 'paused') return 'Paused';
+      return this.running ? 'Remaining' : 'Stopped';
+    },
+    fencerRows() {
+      return ['1', '2'].map(this.createFencerRow);
+    }
+  },
+  watch: {
+    'bout.TimeLeft': 'resetTimer',
+    'bout.TimerStatus': 'resetTimer',
+    'bout.Status': 'resetTimer',
+    'bout.BoutId': 'resetTimer',
+    'bout.DEBoutId': 'resetTimer',
+    connectedToServer: 'resetTimer'
+  },
+  mounted() {
+    this.resetTimer();
+  },
+  beforeUnmount() {
+    this.stopTimer();
+  },
+  methods: {
+    getDisplayedScore(number) {
+      const score = Number(this.bout[`Score${number}`] ?? 0);
+      if (!Number.isFinite(score)) return null;
+      return this.isCountingBackwardsMaxScore > 0 ? this.isCountingBackwardsMaxScore - score : score;
+    },
+    isLeadingFencer(number) {
+      if (!this.active) return false;
+      const score = this.getDisplayedScore(number);
+      const opponentScore = this.getDisplayedScore(number === '1' ? '2' : '1');
+      return score !== null && opponentScore !== null && score > opponentScore;
+    },
+    createFencerRow(number) {
+      const person = this.bout[`Person${number}`];
+      return {
+        key: number,
+        fencer: hasReadyFencer(person) ? person : { DisplayName: 'Awaiting winner' },
+        position: person?.EventPersons?.[0]?.DEPosition ?? '',
+        score: String(this.bout[`Score${number}`] ?? 0),
+        scoreColor: this.isLeadingFencer(number) ? 'bg-orange2' : 'bg-neutral/50',
+        color: this.hostingClubColors[`Color${number}`] || ''
+      };
+    },
+    resetTimer() {
+      this.stopTimer();
+      this.receivedAt = Date.now();
+      this.now = this.receivedAt;
+      if (!this.running || !this.connectedToServer || !this.remaining) return;
+      this.interval = setInterval(this.tickTimer, 250);
+    },
+    tickTimer() {
+      this.now = Date.now();
+      if (this.remaining === 0) this.stopTimer();
+    },
+    stopTimer() {
+      if (this.interval) clearInterval(this.interval);
+      this.interval = null;
+    }
+  }
+};
+</script>

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

@@ -67,3 +67,13 @@ export const PendingFencer = {
     showScore: false
   }
 };
+
+export const Large = {
+  args: {
+    large: true,
+    fencer: { DisplayName: 'Alexandra Montgomery-Worthington' },
+    score: '6',
+    position: '12',
+    scoreColor: 'bg-dropdownSelect'
+  }
+};

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

@@ -1,80 +1,140 @@
-<template>
-  <section class="flex h-7 w-40 overflow-hidden border border-poolSetup bg-poolSetup" :class="cornerClass">
-    <div class="flex w-5 shrink-0 items-center justify-center px-1" :class="positionColorClass">
-      <BaseText :text="position" size="xs" color="neutral" />
-    </div>
-
-    <div class="flex min-w-0 flex-1 items-center px-2">
-      <BaseText :text="name" size="xs" color="quaternary" class="truncate whitespace-nowrap" />
-    </div>
-
-    <div class="flex w-7 shrink-0 items-center justify-center border-l border-poolSetup" :class="scoreColor">
-      <BaseText v-if="showScore" :text="displayedScore" size="xs" color="neutral" />
-    </div>
-  </section>
-</template>
-
-<script>
-import BaseText from '../../../Atoms/Text/BaseText.vue';
-
-const cornerClasses = {
-  none: '',
-  top: 'rounded-t',
-  bottom: 'rounded-b'
-};
-
-export default {
-  name: 'TableauFencerCard',
-  components: { BaseText },
-  props: {
-    fencer: {
-      type: Object,
-      required: true
-    },
-    score: {
-      type: String,
-      required: true
-    },
-    position: {
-      type: [String, Number],
-      required: true
-    },
-    color: {
-      type: String,
-      default: ''
-    },
-    scoreColor: {
-      type: String,
-      required: true
-    },
-    showScore: {
-      type: Boolean,
-      default: true
-    },
-    isCountingBackwardsMaxScore: {
-      type: Number,
-      default: 0
-    },
-    corners: {
-      type: String,
-      default: 'none',
-      validator: value => Object.hasOwn(cornerClasses, value)
-    }
-  },
-  computed: {
-    cornerClass() {
-      return cornerClasses[this.corners];
-    },
-    displayedScore() {
-      const score = Number(this.score || 0);
-      return this.isCountingBackwardsMaxScore > 0 ? this.isCountingBackwardsMaxScore - score : score;
-    },
-    name() {
-      return String(this.fencer?.DisplayName || '');
-    },
-    positionColorClass() {
-      return this.color ? `bg-${this.color}` : 'bg-dropdownSelect';
-    }
-  }
-};
-</script>
+<template>
+  <section class="flex overflow-hidden border" :class="[cornerClass, presentation.layout, rowClass]">
+    <div
+      class="flex shrink-0 items-center justify-center px-1"
+      :class="[positionColorClass, presentation.positionWidth]"
+    >
+      <BaseText :text="position" :size="presentation.positionSize" :color="positionTextColor" />
+    </div>
+
+    <div class="flex min-w-0 flex-1 items-center px-2">
+      <BaseText
+        :text="name"
+        :size="presentation.nameSize"
+        :color="presentation.nameColor"
+        :class="presentation.nameClass"
+      />
+    </div>
+
+    <div
+      v-if="showScore || !large"
+      class="flex shrink-0 items-center justify-center border-l"
+      :class="[scoreColor, presentation.scoreWidth, scoreBorderClass]"
+    >
+      <BaseText
+        v-if="showScore"
+        :text="displayedScore"
+        :size="presentation.scoreSize"
+        :color="presentation.scoreTextColor"
+        class="tabular-nums"
+        :class="{ 'text-black': nightMode }"
+        :weight="nightMode ? 'bold' : 'normal'"
+      />
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+const cornerClasses = {
+  none: '',
+  top: 'rounded-t',
+  bottom: 'rounded-b'
+};
+
+export default {
+  name: 'TableauFencerCard',
+  components: { BaseText },
+  props: {
+    large: { type: Boolean, default: false },
+    nightMode: { type: Boolean, default: false },
+    fencer: {
+      type: Object,
+      required: true
+    },
+    score: {
+      type: String,
+      required: true
+    },
+    position: {
+      type: [String, Number],
+      required: true
+    },
+    color: {
+      type: String,
+      default: ''
+    },
+    scoreColor: {
+      type: String,
+      required: true
+    },
+    showScore: {
+      type: Boolean,
+      default: true
+    },
+    isCountingBackwardsMaxScore: {
+      type: Number,
+      default: 0
+    },
+    corners: {
+      type: String,
+      default: 'none',
+      validator: value => Object.hasOwn(cornerClasses, value)
+    }
+  },
+  computed: {
+    presentation() {
+      if (this.large)
+        return {
+          layout: this.nightMode ? 'min-h-12 w-full' : 'min-h-16 w-full',
+          positionWidth: 'w-8',
+          positionSize: 'sm',
+          nameSize: this.nightMode ? '2xl' : 'xl',
+          nameColor: 'primary',
+          nameClass: this.nightMode
+            ? 'break-words py-2 font-semibold leading-tight'
+            : 'break-words py-3 font-semibold leading-tight',
+          scoreWidth: 'w-14',
+          scoreSize: '3xl',
+          scoreTextColor: this.nightMode ? 'none' : 'primary'
+        };
+      return {
+        layout: 'h-7 w-40',
+        positionWidth: 'w-5',
+        positionSize: 'xs',
+        nameSize: 'xs',
+        nameColor: this.nightMode ? 'primary' : 'quaternary',
+        nameClass: 'truncate whitespace-nowrap',
+        scoreWidth: 'w-7',
+        scoreSize: 'xs',
+        scoreTextColor: this.nightMode ? 'none' : 'neutral'
+      };
+    },
+    scoreBorderClass() {
+      return this.nightMode ? 'border-transparent' : 'border-poolSetup';
+    },
+    rowClass() {
+      return this.nightMode ? 'border-black/10 bg-lightgray' : 'border-poolSetup bg-poolSetup';
+    },
+    positionTextColor() {
+      if (this.nightMode) return this.color ? 'neutral' : 'primaryHighlight';
+      return this.large && !this.color ? 'primaryHighlight' : 'neutral';
+    },
+    cornerClass() {
+      return cornerClasses[this.corners];
+    },
+    displayedScore() {
+      const score = Number(this.score || 0);
+      return this.isCountingBackwardsMaxScore > 0 ? this.isCountingBackwardsMaxScore - score : score;
+    },
+    name() {
+      return String(this.fencer?.DisplayName || '');
+    },
+    positionColorClass() {
+      if (this.color) return `bg-${this.color}`;
+      return this.nightMode ? 'bg-black/10' : 'bg-dropdownSelect';
+    }
+  }
+};
+</script>

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

@@ -0,0 +1,94 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import WaitlistFencerCard from './WaitlistFencerCard.vue';
+import ButtonBar from '../../../Molecules/Buttons/ButtonBar/ButtonBar.vue';
+
+const createPerson = (fields = {}) => ({
+  PersonId: 42,
+  Status: 'Waitlist',
+  CheckedIn: false,
+  Person: {
+    DisplayName: 'Waiting Fencer',
+    Club: { Name: 'Sword Club' },
+    Weaver: { Required: true, Scope: 'Tournament', Signed: true }
+  },
+  ...fields
+});
+
+const findButton = (wrapper, label) => wrapper.findAll('button').find(button => button.text() === label);
+const selectAttendance = (wrapper, label) =>
+  wrapper
+    .getComponent(ButtonBar)
+    .findAll('section')
+    .find(button => button.text() === label)
+    .trigger('click');
+
+describe('Waitlist day-of attendance', () => {
+  it('marks present and absent without changing waitlist status or mutating incoming data', async () => {
+    const person = Object.freeze(createPerson());
+    const wrapper = mount(WaitlistFencerCard, { props: { person, queuePosition: 1 } });
+
+    await selectAttendance(wrapper, 'Present');
+    const present = wrapper.emitted('update:check-in')[0][0];
+    expect(present).toEqual({ ...person, CheckedIn: true });
+    expect(present.Person).not.toBe(person.Person);
+    expect(person.CheckedIn).toBe(false);
+    expect(wrapper.emitted('move:active')).toBeUndefined();
+
+    await wrapper.setProps({ person: present });
+    expect(wrapper.text()).toContain('Checked in');
+    await selectAttendance(wrapper, 'Absent');
+    expect(wrapper.emitted('update:check-in')[1][0]).toEqual({ ...person, CheckedIn: false });
+    wrapper.unmount();
+  });
+
+  it('offers waiver signing before attendance and keeps promotion available', async () => {
+    const person = createPerson();
+    person.Person.Weaver.Signed = false;
+    const wrapper = mount(WaitlistFencerCard, { props: { person, queuePosition: 1 } });
+
+    expect(wrapper.findComponent(ButtonBar).exists()).toBe(false);
+    await findButton(wrapper, 'Sign Waiver').trigger('click');
+    const request = wrapper.emitted('request:weaver-sign')[0][0];
+    expect(request).toEqual(person);
+    expect(request.Person).not.toBe(person.Person);
+    expect(wrapper.emitted('update:check-in')).toBeUndefined();
+    await findButton(wrapper, 'Move to Active').trigger('click');
+    expect(wrapper.emitted('move:active')[0][0]).toEqual(person);
+
+    const signed = createPerson();
+    await wrapper.setProps({ person: signed });
+    expect(findButton(wrapper, 'Sign Waiver')).toBeUndefined();
+    expect(wrapper.getComponent(ButtonBar).props('selected')).toBe('Absent');
+    await selectAttendance(wrapper, 'Present');
+    expect(wrapper.emitted('update:check-in')[0][0].CheckedIn).toBe(true);
+    wrapper.unmount();
+  });
+
+  it('reconciles parent attendance and promotes the checked-in waitlist person unchanged', async () => {
+    const person = createPerson();
+    const wrapper = mount(WaitlistFencerCard, { props: { person, queuePosition: 1, isNextCheckedIn: true } });
+
+    await wrapper.setProps({ person: { ...person, CheckedIn: true } });
+    expect(wrapper.getComponent(ButtonBar).props('selected')).toBe('Present');
+    expect(wrapper.text()).toContain('Next checked in');
+    await findButton(wrapper, 'Move to Active').trigger('click');
+    expect(wrapper.emitted('move:active')[0][0]).toEqual({ ...person, CheckedIn: true });
+    expect(wrapper.emitted('move:active')[0][0].Person).not.toBe(person.Person);
+
+    await wrapper.setProps({ person: { ...person, CheckedIn: false } });
+    expect(wrapper.getComponent(ButtonBar).props('selected')).toBe('Absent');
+    expect(wrapper.text()).not.toContain('Next checked in');
+    wrapper.unmount();
+  });
+
+  it('shows attendance controls when no applicable waiver is required', () => {
+    const person = createPerson();
+    person.Person.Weaver = { Required: true, Scope: 'none', Signed: false };
+    const wrapper = mount(WaitlistFencerCard, { props: { person, queuePosition: 1 } });
+
+    expect(wrapper.findComponent(ButtonBar).exists()).toBe(true);
+    expect(findButton(wrapper, 'Sign Waiver')).toBeUndefined();
+    wrapper.unmount();
+  });
+});