@dcrackel/hematournamentui 1.0.714 → 1.0.716

package/src/stories/Templates/EventManagement/RingBoard/README.md

@@ -0,0 +1,29 @@
+# RingBoard
+
+Read-only kiosk display for a single event. Uses a white page with black page and ring headers, light-gray bout cards, and dark names. The higher displayed active score is highlighted in orange; tied scores stay neutral. Orange is also used for small active-bout indicators and interrupted updates. The event title, counts, and connection state share a compact header; ring names and directors share a line, and clocks sit alongside bout details. The consuming application selects the event, loads its data, and supplies live updates.
+
+```vue
+<RingBoard
+  :eventName="event.Name"
+  :bouts="bouts"
+  :plannedDirectingStations="plannedDirectingStations"
+  :plannedBoutAssignments="plannedBoutAssignments"
+  :hostingClubColors="hostingClubColors"
+  :connectedToServer="connectedToServer"
+/>
+```
+
+Uses the same planned station and assignment shapes as Bracket:
+
+- Stations: `{ RingId, RingName, Color?, Director?: { PersonId, DisplayName } }`.
+- Assignments: `{ DEBoutId, RingId }`.
+- Bouts: existing DE bout objects with `Person1`, `Person2`, `Status`, `RoundLabel`, `Score1`, `Score2`, `TimeLeft` (seconds), and `TimerStatus`. Active bouts supply their actual `RingId` or `RingName` and `RefName`.
+- Optional `isCountingBackwardsMaxScore` matches the bracket's score display convention.
+
+Scheduled bouts use planned assignments. Active bouts use their actual ring, overriding any old plan; missing actual rings remain unassigned. Active rings outside the current station plan receive a column. Station order stays as supplied. Within each section, bout order stays as supplied; “Scheduled” does not promise a fencing order.
+
+Completed bouts and BYEs are omitted. Unresolved matchups are collapsed under “Awaiting fencers”. Unassigned bouts remain visible. Ring availability is described as “No active bout”, since this UI cannot determine whether a ring is otherwise occupied.
+
+The board emits no workflow actions and changes no bout data. Running active clocks are a local display estimate from the supplied sample; new samples reconcile the display. Disconnection shows the last supplied time and stops counting. The parent owns clock synchronisation, freshness, socket recovery, and all tournament decisions.
+
+Preview: Storybook → Templates / EventManagement / RingBoard. Default shows opening-round traffic; FullTableOf64 also includes the later planned rounds.

package/src/stories/Templates/EventManagement/RingBoard/RingBoard.stories.js

@@ -0,0 +1,118 @@
+import RingBoard from './RingBoard.vue';
+import tableOf64 from '../../../../mocks/getDEBouts-TableOf64.js';
+import { distributeStoryAssignments } from '../Bracket/BracketStoryAssignments.js';
+import { isReadyBout } from '../../../Util/ringBoard.js';
+
+const stations = [
+  { RingId: 1, RingName: 'Ring 1', Color: '#375085', Director: { PersonId: 101, DisplayName: 'Bob Morgan' } },
+  { RingId: 2, RingName: 'Ring 2', Color: '#427958', Director: { PersonId: 102, DisplayName: 'Frank Lee' } },
+  { RingId: 3, RingName: 'Ring 3', Color: '#C78544', Director: { PersonId: 103, DisplayName: 'Alex Rivera' } },
+  { RingId: 4, RingName: 'Ring 4', Color: '#4B3A89', Director: { PersonId: 104, DisplayName: 'Jamie Quinn' } }
+];
+
+const createTableOf64 = () => {
+  const bouts = structuredClone(tableOf64.pools[0].Bouts);
+  const assignments = distributeStoryAssignments({ bouts, stations });
+  const activeIds = new Map();
+  for (const station of stations.slice(0, 3)) {
+    const assigned = new Set(
+      assignments.filter(assignment => assignment.RingId === station.RingId).map(assignment => assignment.DEBoutId)
+    );
+    const bout = bouts.find(bout => assigned.has(bout.DEBoutId) && isReadyBout(bout));
+    if (bout) activeIds.set(bout.DEBoutId, station);
+  }
+  return {
+    bouts: bouts.map(bout => {
+      const station = activeIds.get(bout.DEBoutId);
+      if (!station) return bout;
+      return {
+        ...bout,
+        Status: 'Active',
+        RingId: station.RingId,
+        RingName: station.RingName,
+        RefereeId: station.Director.PersonId,
+        RefName: station.Director.DisplayName,
+        Score1: 6 - station.RingId,
+        Score2: 3 + station.RingId,
+        TimeLeft: [0, 92, 48, 125][station.RingId],
+        TimerStatus: station.RingId === 2 ? 'paused' : 'running'
+      };
+    }),
+    plannedBoutAssignments: assignments,
+    plannedDirectingStations: stations
+  };
+};
+
+const fullBoard = createTableOf64();
+const openingRound = {
+  ...fullBoard,
+  bouts: fullBoard.bouts.filter(bout => bout.RoundLabel === 'Table of 64')
+};
+
+export default {
+  title: 'Templates/EventManagement/RingBoard',
+  component: RingBoard,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Compact scoreboard display for a single-event kiosk, with a white page, black headers, and light-gray bout cards. Horizontal headers and inline clocks leave more room for readable fencer names; light-gray cards use orange to highlight the higher displayed active score, with neutral ties. Scheduled bouts use the supplied ring plans; active bouts use their actual ring. Input order is retained within each section and does not promise a fencing queue. Scores and timer samples remain parent-owned.'
+      }
+    }
+  },
+  args: {
+    eventName: 'Open Longsword · Direct elimination',
+    connectedToServer: true,
+    hostingClubColors: { Color1: 'blue', Color2: 'red' },
+    ...openingRound
+  },
+  argTypes: {
+    eventName: { control: 'text' },
+    bouts: { control: 'object' },
+    plannedDirectingStations: { control: 'object' },
+    plannedBoutAssignments: { control: 'object' },
+    hostingClubColors: { control: 'object' },
+    connectedToServer: { control: 'boolean' },
+    isCountingBackwardsMaxScore: { control: 'number' }
+  }
+};
+
+export const Default = { args: { ...openingRound } };
+export const FullTableOf64 = { args: { ...fullBoard } };
+export const TwoRings = {
+  args: {
+    plannedDirectingStations: stations.slice(0, 2),
+    bouts: openingRound.bouts.filter(bout =>
+      openingRound.plannedBoutAssignments.some(
+        assignment => assignment.DEBoutId === bout.DEBoutId && assignment.RingId <= 2
+      )
+    ),
+    plannedBoutAssignments: openingRound.plannedBoutAssignments.filter(assignment => assignment.RingId <= 2)
+  }
+};
+export const UnassignedBouts = {
+  args: {
+    ...openingRound,
+    plannedBoutAssignments: openingRound.plannedBoutAssignments.filter(assignment => assignment.RingId !== 4)
+  }
+};
+export const EmptyRings = { args: { bouts: [], plannedDirectingStations: stations, plannedBoutAssignments: [] } };
+export const NoPlans = { args: { bouts: [], plannedDirectingStations: [], plannedBoutAssignments: [] } };
+export const Disconnected = { args: { ...openingRound, connectedToServer: false } };
+export const LongNames = {
+  args: {
+    plannedDirectingStations: stations.slice(0, 1),
+    plannedBoutAssignments: [{ DEBoutId: 1, RingId: 1 }],
+    bouts: [
+      {
+        DEBoutId: 1,
+        Status: 'Scheduled',
+        RoundLabel: 'Table of 64',
+        Person1: { PersonId: 1, DisplayName: 'Alexandra Montgomery-Worthington' },
+        Person2: { PersonId: 2, DisplayName: 'Christopher van der Westhuizen' }
+      }
+    ]
+  }
+};

package/src/stories/Templates/EventManagement/RingBoard/RingBoard.test.js

@@ -0,0 +1,208 @@
+import { mount } from '@vue/test-utils';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import RingBoard from './RingBoard.vue';
+import RingBoutCard from '../../../Organisms/Cards/RingBoutCard/RingBoutCard.vue';
+import TableauFencerCard from '../../../Organisms/Cards/TableauFencerCard/TableauFencerCard.vue';
+import { createRingBoardColumns } from '../../../Util/ringBoard.js';
+
+const stations = [
+  { RingId: 1, RingName: 'Ring 1', Director: { DisplayName: 'Bob' } },
+  { RingId: 2, RingName: 'Ring 2', Director: { DisplayName: 'Frank' } }
+];
+const createBout = (id, fields = {}) => ({
+  DEBoutId: id,
+  BoutId: 100 + id,
+  Status: 'Scheduled',
+  RoundLabel: 'Table of 64',
+  Person1: { PersonId: 1, DisplayName: 'Dave Smith' },
+  Person2: { PersonId: 2, DisplayName: 'John Wilson' },
+  ...fields
+});
+const columnsFor = (bouts, assignments = []) => createRingBoardColumns({ bouts, stations, assignments });
+
+afterEach(() => {
+  vi.useRealTimers();
+});
+
+describe('Ring board grouping', () => {
+  it('uses planned rings for scheduled bouts and actual rings for active bouts without mutating inputs', () => {
+    const bouts = Object.freeze([
+      Object.freeze(createBout(1)),
+      Object.freeze(createBout(2, { Status: 'Active', RingName: 'Ring 2' }))
+    ]);
+    const columns = columnsFor(bouts, [
+      { DEBoutId: 1, RingId: '1' },
+      { DEBoutId: 2, RingId: 1 }
+    ]);
+    expect(columns[0].scheduled.map(bout => bout.DEBoutId)).toEqual([1]);
+    expect(columns[0].active).toEqual([]);
+    expect(columns[1].active.map(bout => bout.DEBoutId)).toEqual([2]);
+    expect(bouts[1].Status).toBe('Active');
+  });
+
+  it('preserves ring and supplied bout order and separates unresolved matchups', () => {
+    const bouts = [createBout(4), createBout(2), createBout(3, { Person2: null })];
+    const columns = columnsFor(
+      bouts,
+      bouts.map(bout => ({ DEBoutId: bout.DEBoutId, RingId: 1 }))
+    );
+    expect(columns.map(column => column.ringName)).toEqual(['Ring 1', 'Ring 2']);
+    expect(columns[0].scheduled.map(bout => bout.DEBoutId)).toEqual([4, 2]);
+    expect(columns[0].awaiting.map(bout => bout.DEBoutId)).toEqual([3]);
+  });
+
+  it('keeps unknown plans and active bouts with no actual ring visible as unassigned', () => {
+    const columns = columnsFor(
+      [createBout(1), createBout(2, { Status: 'Active' })],
+      [
+        { DEBoutId: 1, RingId: 999 },
+        { DEBoutId: 2, RingId: 1 }
+      ]
+    );
+    expect(columns[2].key).toBe('unassigned');
+    expect(columns[2].scheduled).toHaveLength(1);
+    expect(columns[2].active).toHaveLength(1);
+  });
+
+  it('retains active bouts at rings outside the current plan and excludes completed and BYE bouts', () => {
+    const columns = columnsFor([
+      createBout(1, { Status: 'Active', RingId: 8, RingName: 'Practice ring', RefName: 'Sam' }),
+      createBout(2, { Status: 'Completed' }),
+      createBout(3, { Status: 'BYE' }),
+      createBout(4, { Person2: { PersonId: 0, DisplayName: 'BYE' } }),
+      null
+    ]);
+    expect(columns).toHaveLength(3);
+    expect(columns[2].ringName).toBe('Practice ring');
+    expect(columns[2].active.map(bout => bout.DEBoutId)).toEqual([1]);
+    expect(columns[2].directorName).toBe('Sam');
+  });
+});
+
+describe('Ring board data edge cases', () => {
+  it('treats BYE placeholders fed by earlier bouts as awaiting fencers', () => {
+    const columns = columnsFor(
+      [
+        createBout(1, { DENextBoutId: 3 }),
+        createBout(2, { DENextBoutId: 3 }),
+        createBout(3, { Person1: { PersonId: 0, DisplayName: 'BYE' }, Person2: { PersonId: 0, DisplayName: 'BYE' } })
+      ],
+      [{ DEBoutId: 3, RingId: 1 }]
+    );
+    expect(columns[0].awaiting.map(bout => bout.DEBoutId)).toEqual([3]);
+  });
+
+  it('handles null collections and malformed entries without crashing', () => {
+    expect(createRingBoardColumns({ bouts: null, stations: null, assignments: null })).toEqual([]);
+    expect(createRingBoardColumns({ bouts: [null], stations: [null, {}], assignments: [null, {}] })).toEqual([]);
+  });
+});
+
+describe('Ring board presentation', () => {
+  it('reconciles parent completion, reassignment, and rollback while remaining read-only', async () => {
+    const bout = createBout(1, {
+      Status: 'Active',
+      RingName: 'Ring 1',
+      TimeLeft: 92,
+      TimerStatus: 'paused',
+      Score1: 6,
+      Score2: 4
+    });
+    const wrapper = mount(RingBoard, {
+      props: {
+        bouts: [bout],
+        plannedDirectingStations: stations,
+        connectedToServer: true,
+        plannedBoutAssignments: [{ DEBoutId: 1, RingId: 1 }]
+      }
+    });
+    expect(wrapper.text()).toContain('Dave Smith');
+    expect(wrapper.text()).toContain('1:32');
+    expect(wrapper.text()).toContain('Paused');
+    expect(wrapper.find('button').exists()).toBe(false);
+    await wrapper.setProps({ bouts: [{ ...bout, Status: 'Completed' }] });
+    expect(wrapper.findAllComponents(RingBoutCard)).toHaveLength(0);
+    expect(wrapper.findAll('h2').map(heading => heading.text())).toEqual(['Ring 1', 'Ring 2']);
+    await wrapper.setProps({ bouts: [createBout(1)], plannedBoutAssignments: [{ DEBoutId: 1, RingId: 2 }] });
+    expect(wrapper.find('[aria-label="Ring 2"]').text()).toContain('Dave Smith');
+    expect(wrapper.emitted()).toEqual({});
+    wrapper.unmount();
+  });
+
+  it('renders empty and disconnected states and expands future matchups', async () => {
+    const wrapper = mount(RingBoard);
+    expect(wrapper.text()).toContain('No rings planned yet');
+    expect(wrapper.text()).toContain('Updates paused');
+    await wrapper.setProps({
+      bouts: [createBout(1, { Person2: null })],
+      plannedDirectingStations: stations,
+      plannedBoutAssignments: [{ DEBoutId: 1, RingId: 1 }]
+    });
+    expect(wrapper.find('summary').text()).toContain('Awaiting fencers');
+    expect(wrapper.text()).toContain('Awaiting winner');
+    wrapper.unmount();
+  });
+});
+
+describe('Ring bout score highlights', () => {
+  it('moves the highlight with live scores and leaves a tie neutral', async () => {
+    const bout = createBout(1, { Status: 'Active', Score1: 6, Score2: 4 });
+    const wrapper = mount(RingBoutCard, { props: { bout } });
+    const scoreColors = () => wrapper.findAllComponents(TableauFencerCard).map(row => row.props('scoreColor'));
+    expect(scoreColors()).toEqual(['bg-orange2', 'bg-neutral/50']);
+    await wrapper.setProps({ bout: { ...bout, Score1: 6, Score2: 7 } });
+    expect(scoreColors()).toEqual(['bg-neutral/50', 'bg-orange2']);
+    await wrapper.setProps({ bout: { ...bout, Score1: 7, Score2: 7 } });
+    expect(scoreColors()).toEqual(['bg-neutral/50', 'bg-neutral/50']);
+    wrapper.unmount();
+  });
+
+  it('highlights the higher displayed score when counting backwards', () => {
+    const wrapper = mount(RingBoutCard, {
+      props: {
+        bout: createBout(1, { Status: 'Active', Score1: 2, Score2: 6 }),
+        isCountingBackwardsMaxScore: 10
+      }
+    });
+    const rows = wrapper.findAllComponents(TableauFencerCard);
+    expect(rows.map(row => row.text())).toEqual(['Dave Smith8', 'John Wilson4']);
+    expect(rows.map(row => row.props('scoreColor'))).toEqual(['bg-orange2', 'bg-neutral/50']);
+    wrapper.unmount();
+  });
+});
+describe('Ring bout clocks', () => {
+  it('counts down only a running active bout, reconciles a paused sample, and cleans up', async () => {
+    vi.useFakeTimers();
+    const bout = Object.freeze(createBout(1, { Status: 'Active', TimeLeft: 92, TimerStatus: 'running' }));
+    const wrapper = mount(RingBoutCard, { props: { bout } });
+    await vi.advanceTimersByTimeAsync(3000);
+    expect(wrapper.text()).toContain('1:29');
+    expect(bout.TimeLeft).toBe(92);
+    await wrapper.setProps({ bout: { ...bout, Score1: 7 } });
+    expect(wrapper.text()).toContain('1:29');
+    await wrapper.setProps({ bout: { ...bout, TimeLeft: 48, TimerStatus: 'paused' } });
+    await vi.advanceTimersByTimeAsync(3000);
+    expect(wrapper.text()).toContain('0:48');
+    expect(wrapper.text()).toContain('Paused');
+    expect(wrapper.emitted()).toEqual({});
+    wrapper.unmount();
+    expect(vi.getTimerCount()).toBe(0);
+  });
+
+  it('does not count down disconnected or scheduled bouts and distinguishes missing time from zero', async () => {
+    vi.useFakeTimers();
+    const bout = createBout(1, { Status: 'Active', TimeLeft: 92, TimerStatus: 'running' });
+    const wrapper = mount(RingBoutCard, { props: { bout, connectedToServer: false } });
+    await vi.advanceTimersByTimeAsync(4000);
+    expect(wrapper.text()).toContain('1:32');
+    expect(wrapper.text()).toContain('Last received');
+    await wrapper.setProps({ connectedToServer: true, bout: { ...bout, TimeLeft: null } });
+    expect(wrapper.text()).toContain('Time unavailable');
+    await wrapper.setProps({ bout: { ...bout, TimeLeft: 0 } });
+    expect(wrapper.text()).toContain('0:00');
+    await wrapper.setProps({ bout: createBout(1) });
+    expect(wrapper.text()).not.toContain('Remaining');
+    expect(vi.getTimerCount()).toBe(0);
+    wrapper.unmount();
+  });
+});

package/src/stories/Templates/EventManagement/RingBoard/RingBoard.vue

@@ -0,0 +1,170 @@
+<template>
+  <section class="min-h-screen w-full bg-neutral font-sans text-primary" aria-label="Event ring board">
+    <header
+      class="flex flex-wrap items-center gap-x-6 gap-y-2 border-b border-neutral/20 bg-black px-4 py-3 text-neutral"
+    >
+      <h1 class="text-2xl font-bold uppercase tracking-wide">Ring board</h1>
+      <p v-if="eventName" class="text-base font-medium text-neutral/75">{{ eventName }}</p>
+      <div class="flex flex-wrap items-center gap-x-4 gap-y-2 text-sm text-neutral/65 md:ml-auto">
+        <span
+          ><strong class="text-neutral">{{ ringCount }}</strong> rings</span
+        >
+        <span
+          ><strong class="text-neutral">{{ activeCount }}</strong> in progress</span
+        >
+        <span
+          ><strong class="text-neutral">{{ scheduledCount }}</strong> scheduled</span
+        >
+        <span v-if="unassignedCount" class="font-semibold text-neutral">{{ unassignedCount }} unassigned</span>
+        <span class="flex items-center gap-2 border-l border-neutral/20 pl-4" :class="connectionClass" role="status">
+          <span class="h-1.5 w-1.5 rounded-full" :class="connectedToServer ? 'bg-neutral/60' : 'bg-orange2'"></span>
+          {{ connectedToServer ? 'Connected' : 'Updates paused' }}
+        </span>
+      </div>
+    </header>
+
+    <div v-if="!connectedToServer" class="border-b border-lightgray bg-poolBox px-4 py-2 text-sm text-primary/80">
+      Showing the last received scores and times. Confirm ring availability before sending fencers.
+    </div>
+
+    <div
+      v-if="columns.length"
+      class="grid grid-cols-1 items-start gap-4 overflow-x-auto p-4 md:grid-flow-col md:auto-cols-[minmax(18rem,1fr)] md:grid-cols-none"
+    >
+      <section
+        v-for="column in columns"
+        :key="column.key"
+        class="min-w-0 overflow-hidden rounded border border-lightgray bg-neutral"
+        :aria-label="column.ringName"
+      >
+        <header
+          class="grid grid-cols-[auto_minmax(0,1fr)_auto] items-center gap-3 border-b border-neutral/20 bg-black px-3 py-3 text-neutral"
+        >
+          <h2 class="text-2xl font-bold uppercase tracking-tight">{{ column.ringName }}</h2>
+          <p class="min-w-0 break-words text-base font-medium text-neutral/75">{{ directorLabel(column) }}</p>
+          <span class="rounded px-2 py-1 text-xs font-semibold" :class="ringStateClass(column)">{{
+            ringStateLabel(column)
+          }}</span>
+        </header>
+        <div class="space-y-3 p-2">
+          <div v-if="column.active.length" class="space-y-2">
+            <RingBoutCard
+              v-for="bout in column.active"
+              :key="bout.DEBoutId ?? bout.BoutId"
+              :bout="bout"
+              v-bind="cardProps"
+            />
+          </div>
+          <p
+            v-if="!column.active.length && !column.scheduled.length && column.key !== 'unassigned'"
+            class="rounded border border-dashed border-lightgray px-3 py-4 text-sm text-primary/60"
+          >
+            No ready bouts scheduled
+          </p>
+          <div v-if="column.scheduled.length" class="space-y-2">
+            <h3
+              class="flex items-center justify-between px-1 text-xs font-semibold uppercase tracking-wider text-primary/60"
+            >
+              <span>Scheduled</span><span>{{ column.scheduled.length }}</span>
+            </h3>
+            <RingBoutCard
+              v-for="bout in column.scheduled"
+              :key="bout.DEBoutId ?? bout.BoutId"
+              :bout="bout"
+              v-bind="cardProps"
+            />
+          </div>
+          <details v-if="column.awaiting.length" class="rounded border border-lightgray bg-poolBox px-3 py-2">
+            <summary class="cursor-pointer text-sm font-medium text-primary/60">
+              Awaiting fencers · {{ column.awaiting.length }}
+            </summary>
+            <div class="mt-2 space-y-2">
+              <RingBoutCard
+                v-for="bout in column.awaiting"
+                :key="bout.DEBoutId ?? bout.BoutId"
+                :bout="bout"
+                v-bind="cardProps"
+              />
+            </div>
+          </details>
+          <p
+            v-if="!column.scheduled.length && !column.awaiting.length && column.active.length"
+            class="px-1 py-2 text-sm text-primary/60"
+          >
+            No further bouts scheduled
+          </p>
+        </div>
+      </section>
+    </div>
+    <div v-else class="px-4 py-16 text-center">
+      <h2 class="text-2xl font-semibold">No rings planned yet</h2>
+      <p class="mt-2 text-base text-primary/60">Rings and upcoming bouts will appear when plans are provided.</p>
+    </div>
+  </section>
+</template>
+
+<script>
+import RingBoutCard from '../../../Organisms/Cards/RingBoutCard/RingBoutCard.vue';
+import { createRingBoardColumns } from '../../../Util/ringBoard.js';
+
+export default {
+  name: 'RingBoard',
+  components: { RingBoutCard },
+  emits: [],
+  props: {
+    eventName: { type: String, default: '' },
+    bouts: { type: Array, default: () => [] },
+    plannedDirectingStations: { type: Array, default: () => [] },
+    plannedBoutAssignments: { type: Array, default: () => [] },
+    hostingClubColors: { type: Object, default: () => ({}) },
+    isCountingBackwardsMaxScore: { type: Number, default: 0 },
+    connectedToServer: { type: Boolean, default: false }
+  },
+  computed: {
+    columns() {
+      return createRingBoardColumns({
+        bouts: this.bouts,
+        stations: this.plannedDirectingStations,
+        assignments: this.plannedBoutAssignments
+      });
+    },
+    ringCount() {
+      return this.columns.filter(column => column.key !== 'unassigned').length;
+    },
+    activeCount() {
+      return this.columns.reduce((count, column) => count + column.active.length, 0);
+    },
+    scheduledCount() {
+      return this.columns.reduce((count, column) => count + column.scheduled.length + column.awaiting.length, 0);
+    },
+    unassignedCount() {
+      const column = this.columns.find(column => column.key === 'unassigned');
+      return column ? column.active.length + column.scheduled.length + column.awaiting.length : 0;
+    },
+    connectionClass() {
+      return this.connectedToServer ? 'text-neutral/60' : 'text-orange2';
+    },
+    cardProps() {
+      return {
+        hostingClubColors: this.hostingClubColors,
+        isCountingBackwardsMaxScore: this.isCountingBackwardsMaxScore,
+        connectedToServer: this.connectedToServer
+      };
+    }
+  },
+  methods: {
+    directorLabel(column) {
+      const names = [...new Set(column.active.map(bout => bout.RefName).filter(Boolean))];
+      return names.join(' / ') || column.directorName;
+    },
+    ringStateLabel(column) {
+      if (column.key === 'unassigned') return 'Needs a ring';
+      return column.active.length ? 'In progress' : 'No active bout';
+    },
+    ringStateClass(column) {
+      if (column.key === 'unassigned') return 'border border-neutral/30 text-neutral';
+      return column.active.length ? 'bg-neutral/20 text-neutral' : 'border border-neutral/20 text-neutral/60';
+    }
+  }
+};
+</script>

package/src/stories/Util/ringBoard.js

@@ -0,0 +1,103 @@
+const getStatus = bout => String(bout?.Status || '').toLowerCase();
+const asArray = value => (Array.isArray(value) ? value : []);
+const hasIdentity = value => value != null && String(value).trim() !== '';
+const getBoutKey = bout => String(bout?.DEBoutId ?? bout?.BoutId ?? '');
+const getRingKey = ring => `ring:${ring.RingId}`;
+const getRingName = ring => ring.RingName || `Ring ${ring.RingId}`;
+
+export const isActiveBout = bout => getStatus(bout) === 'active';
+export const hasReadyFencer = person =>
+  hasIdentity(person?.PersonId) &&
+  Number(person.PersonId) !== 0 &&
+  Boolean(String(person.DisplayName || '').trim()) &&
+  String(person.DisplayName).trim().toUpperCase() !== 'BYE';
+export const isReadyBout = bout => hasReadyFencer(bout?.Person1) && hasReadyFencer(bout?.Person2);
+const isBye = bout =>
+  [bout?.Person1, bout?.Person2].some(
+    person =>
+      String(person?.DisplayName || '')
+        .trim()
+        .toUpperCase() === 'BYE'
+  );
+const isVisibleBout = (bout, awaitingBoutIds) => {
+  if (!bout || !['scheduled', 'active'].includes(getStatus(bout))) return false;
+  // Future bracket slots also use BYE placeholders until a feeder bout supplies a fencer.
+  return !isBye(bout) || awaitingBoutIds.has(getBoutKey(bout));
+};
+
+const createColumn = station => ({
+  key: getRingKey(station),
+  ringName: getRingName(station),
+  directorName: station.Director?.DisplayName || 'No director listed',
+  color: station.Color || '',
+  active: [],
+  scheduled: [],
+  awaiting: []
+});
+
+const findActualRing = (bout, stations) => {
+  if (hasIdentity(bout.RingId)) return stations.find(station => String(station.RingId) === String(bout.RingId));
+  if (!bout.RingName) return null;
+  return stations.find(station => getRingName(station) === bout.RingName);
+};
+
+const getActiveColumn = (bout, stations, columns) => {
+  const station = findActualRing(bout, stations);
+  if (station) return columns.get(getRingKey(station));
+  if (!hasIdentity(bout.RingId) && !bout.RingName) return null;
+  if (!hasIdentity(bout.RingId)) {
+    const existing = [...columns.values()].find(column => column.ringName === bout.RingName);
+    if (existing) return existing;
+  }
+  const key = hasIdentity(bout.RingId) ? getRingKey(bout) : `name:${bout.RingName}`;
+  if (!columns.has(key))
+    columns.set(key, {
+      ...createColumn(bout),
+      key,
+      directorName: bout.RefName || 'No director listed'
+    });
+  return columns.get(key);
+};
+
+const addBoutToColumn = (column, bout) => {
+  if (isActiveBout(bout)) return column.active.push(bout);
+  if (isReadyBout(bout)) return column.scheduled.push(bout);
+  column.awaiting.push(bout);
+};
+
+export const createRingBoardColumns = ({ bouts, stations, assignments } = {}) => {
+  const validBouts = asArray(bouts);
+  const validAssignments = asArray(assignments);
+  const awaitingBoutIds = new Set(
+    validBouts
+      .flatMap(bout => [bout?.DENextBoutId, bout?.LoserNextBoutId])
+      .filter(hasIdentity)
+      .map(String)
+  );
+  const validStations = asArray(stations).filter(station => hasIdentity(station?.RingId));
+  const columns = new Map(validStations.map(station => [getRingKey(station), createColumn(station)]));
+  const assignmentByBout = new Map(
+    validAssignments
+      .filter(assignment => hasIdentity(assignment?.DEBoutId))
+      .map(assignment => [String(assignment.DEBoutId), assignment])
+  );
+  const unassigned = {
+    key: 'unassigned',
+    ringName: 'Unassigned',
+    directorName: 'Ring to be confirmed',
+    color: '',
+    active: [],
+    scheduled: [],
+    awaiting: []
+  };
+  for (const bout of validBouts.filter(bout => isVisibleBout(bout, awaitingBoutIds))) {
+    const assignment = assignmentByBout.get(getBoutKey(bout));
+    const column = isActiveBout(bout)
+      ? getActiveColumn(bout, validStations, columns)
+      : assignment && columns.get(getRingKey(assignment));
+    addBoutToColumn(column || unassigned, bout);
+  }
+  if (unassigned.active.length + unassigned.scheduled.length + unassigned.awaiting.length)
+    columns.set(unassigned.key, unassigned);
+  return [...columns.values()];
+};

package/src/stories/Util/waitlistAttendance.js

@@ -0,0 +1,8 @@
+export const isWaitlistCheckedIn = person => person?.CheckedIn === true;
+
+export const needsAttendanceWaiver = person => {
+  const waiver = person?.Person?.Weaver;
+  if (!waiver?.Required) return false;
+  if (String(waiver.Scope ?? 'none').toLowerCase() === 'none') return false;
+  return waiver.Signed !== true;
+};