@dcrackel/hematournamentui 1.0.707 → 1.0.708

package/src/stories/Organisms/Containers/Tableau/Tableau.vue

@@ -1,9 +1,22 @@
 <template>
   <section v-if="listView" class="flex flex-col items-center">
-    <div v-for="(bouts, roundName) in filteredBouts" :key="bouts[0].BoutId" class="w-full flex-col md:w-3/4 my-4">
-      <BaseText class="my-5" color="primaryHighlight" size="sm" :text="roundName" weight="bold" />
+    <div v-for="section in listSections" :key="section.key" class="my-4 w-full flex-col md:w-3/4">
+      <BaseText class="my-5" color="primaryHighlight" size="sm" :text="section.label" weight="bold" />
 
-      <div v-for="bout in bouts" :key="bout.BoutId" class="mb-4">
+      <div v-for="bout in section.bouts" :key="bout.BoutId" class="mb-4">
+        <div
+          v-if="getPlannedStation(bout)"
+          data-testid="planned-bout-label"
+          class="mb-1 flex items-center gap-2 rounded border-l-4 border-dropdownSelect bg-white px-2 py-1 shadow-sm"
+          :style="{ borderLeftColor: getPlannedStation(bout).Color }"
+        >
+          <span
+            class="h-2.5 w-2.5 flex-none rounded-full"
+            :style="{ backgroundColor: getPlannedStation(bout).Color }"
+            aria-hidden="true"
+          ></span>
+          <BaseText :text="getPlannedStationLabel(bout)" color="quaternary" size="xs" />
+        </div>
         <BoutCard
           :bout="bout"
           :hostingClubColors="hostingClubColors"
@@ -17,165 +30,350 @@
     </div>
   </section>
 
-  <section v-else class="flex w-full overflow-x-auto mt-4 scrollbar-thin">
-    <div class="min-w-full flex">
-      <div v-for="(bouts, roundName) in groupedBouts.winnerBouts" :key="roundName">
+  <section
+    v-else
+    ref="scrollElement"
+    class="mt-4 w-full overflow-x-auto scrollbar-thin"
+    @scroll.passive="scheduleConnectorUpdate"
+  >
+    <div ref="tableauRoot" class="relative min-w-max pb-6">
+      <div class="inline-flex items-start">
         <TableauColumn
-          :bouts="bouts"
+          v-for="([roundName, roundBouts], roundIndex) in winnerRoundEntries"
+          :key="`winner-${roundName}`"
+          :bouts="roundBouts"
           :hostingClubColors="hostingClubColors"
           :roundName="roundName"
           :bracketSize="bracketSize"
-          :largeCards="largeCards"
+          :layout="getRoundLayout(roundIndex)"
           :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+          @register-node-anchor="registerNodeAnchor"
           @action:editBout="handleEditBout"
           @action:directingBout="handleDirectorBout"
         />
       </div>
-    </div>
 
-    <!-- Loser bracket -->
-    <div class="min-w-full flex">
-      <div v-for="(bouts, roundName) in groupedBouts.loserBouts" :key="roundName">
+      <div v-if="placementRoundEntries.length" class="mt-10 flex justify-end pr-10">
         <TableauColumn
-          :bouts="bouts"
+          v-for="[roundName, roundBouts] in placementRoundEntries"
+          :key="`placement-${roundName}`"
+          :bouts="roundBouts"
           :hostingClubColors="hostingClubColors"
           :roundName="roundName"
           :bracketSize="bracketSize"
-          :largeCards="largeCards"
+          :layout="placementLayout"
           :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+          @register-node-anchor="registerNodeAnchor"
           @action:editBout="handleEditBout"
           @action:directingBout="handleDirectorBout"
         />
       </div>
+
+      <div v-if="loserRoundEntries.length" class="mt-12 border-t border-dropdownSelect pt-6">
+        <BaseText class="mb-4" color="quaternary" size="sm" text="Consolation" weight="bold" />
+        <div class="inline-flex items-start">
+          <TableauColumn
+            v-for="([roundName, roundBouts], roundIndex) in loserRoundEntries"
+            :key="`loser-${roundName}`"
+            :bouts="roundBouts"
+            :hostingClubColors="hostingClubColors"
+            :roundName="roundName"
+            :bracketSize="bracketSize"
+            :layout="getRoundLayout(roundIndex)"
+            :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+            @register-node-anchor="registerNodeAnchor"
+            @action:editBout="handleEditBout"
+            @action:directingBout="handleDirectorBout"
+          />
+        </div>
+      </div>
+
+      <TableauSvgOverlay :size="svgSize" :paths="connectorPaths" />
     </div>
   </section>
 </template>
 
 <script>
-import TableauColumn from '../TableauColumn/TableauColumn.vue';
-import TableauBoutCard from '../../Cards/TableauBoutCard/TableauBoutCard.vue';
-import BoutCard from '../../../Organisms/Cards/BoutCard/BoutCard.vue';
 import BaseText from '../../../Atoms/Text/BaseText.vue';
+import BoutCard from '../../../Organisms/Cards/BoutCard/BoutCard.vue';
+import TableauColumn from '../TableauColumn/TableauColumn.vue';
+import TableauSvgOverlay from './components/TableauSvgOverlay.vue';
+import { buildBracketPaths, createDomAnchorLayout } from './layout/TableauLayoutEngine';
+import {
+  addPlannedStrokesToConnectors,
+  createPlannedStationByBout,
+  getPlannedStationForBout,
+  isBoutSuggestedForViewer
+} from './plannedAssignments';
 
-const isConsolationRound = ([roundName]) => roundName.includes('Consolation');
-const isMainRound = roundEntry => !isConsolationRound(roundEntry);
+const MATCH_HEIGHT_PX = 57;
+const BASE_GAP_PX = 16;
+const BASE_PITCH_PX = MATCH_HEIGHT_PX + BASE_GAP_PX;
+const PLACEMENT_ROUND_NAMES = new Set(['Third Place', 'Third Place Match']);
+const ROUND_ORDER = [
+  'Table of 256',
+  'Table of 128',
+  'Table of 64',
+  'Table of 32',
+  'Table of 16',
+  'Table of 8',
+  'Semifinal',
+  'Final',
+  'Grand Final'
+];
 
-const roundPriority = {
-  Final: 1,
-  'Third Place Match': 2,
-  Semifinal: 3
+const roundAliases = {
+  Semifinals: 'Semifinal'
 };
 
-const getRoundNumber = roundName => parseInt(roundName.match(/\d+/)?.[0] || 0, 10);
+const normalizeRoundName = roundName => roundAliases[roundName] || roundName;
+const isConsolationRoundName = roundName => roundName.includes('Consolation');
+const isPlacementRoundName = roundName => PLACEMENT_ROUND_NAMES.has(roundName);
+const getRoundNumber = roundName => Number.parseInt(roundName.match(/\d+/)?.[0] || '0', 10);
+const getBoutNodeId = bout => bout.DEBoutId ?? bout.BoutId;
+
+const getRoundOrder = roundName => {
+  const mainRoundIndex = ROUND_ORDER.indexOf(normalizeRoundName(roundName));
+  if (mainRoundIndex >= 0) return mainRoundIndex;
+  if (isConsolationRoundName(roundName)) return ROUND_ORDER.length + getRoundNumber(roundName);
+  return ROUND_ORDER.length * 2;
+};
 
-const sortRoundNames = (roundNameA, roundNameB) => {
-  const priorityA = roundPriority[roundNameA] || 0;
-  const priorityB = roundPriority[roundNameB] || 0;
+const sortRoundEntries = ([roundNameA], [roundNameB]) => getRoundOrder(roundNameA) - getRoundOrder(roundNameB);
+const sortBoutsByNodeId = (boutA, boutB) => Number(getBoutNodeId(boutA)) - Number(getBoutNodeId(boutB));
 
-  if (priorityA || priorityB) return priorityA - priorityB;
-  return getRoundNumber(roundNameB) - getRoundNumber(roundNameA);
+const addBoutToRound = (rounds, bout) => {
+  const roundName = bout.RoundLabel || 'Unknown Round';
+  return { ...rounds, [roundName]: [...(rounds[roundName] || []), bout] };
 };
 
-const isVisibleBout = bout =>
+const groupBoutsByRound = bouts => (bouts || []).reduce(addBoutToRound, {});
+
+const isVisibleListBout = bout =>
   bout.Person1?.DisplayName !== 'BYE' && bout.Person2?.DisplayName !== 'BYE' && bout.Status !== 'Completed';
 
-const createVisibleRoundEntry = ([roundName, bouts]) => {
-  const visibleBouts = bouts.filter(isVisibleBout).sort((boutA, boutB) => boutA.DEBoutId - boutB.DEBoutId);
-  return [roundName, visibleBouts];
-};
+const createVisibleRoundEntry = ([roundName, bouts]) => [
+  roundName,
+  bouts.filter(isVisibleListBout).sort(sortBoutsByNodeId)
+];
 
-const hasVisibleBouts = ([, bouts]) => bouts.length > 0;
+const hasBouts = ([, bouts]) => bouts.length > 0;
 
-const addBoutToRound = (groupedBouts, bout) => {
-  const roundName = bout.RoundLabel || 'Unknown Round';
-  const roundBouts = groupedBouts[roundName] || [];
+const createListSection = ([label, bouts]) => ({ key: label, label, bouts });
 
+const removeSuggestedBouts = (entries, suggestedBoutIds) =>
+  entries
+    .map(([roundName, bouts]) => [roundName, bouts.filter(bout => !suggestedBoutIds.has(String(bout.BoutId)))])
+    .filter(hasBouts);
+
+const createRoundLayout = depth => {
+  const roundMultiplier = 2 ** Math.max(depth, 0);
   return {
-    ...groupedBouts,
-    [roundName]: [...roundBouts, bout]
+    gapPx: BASE_PITCH_PX * roundMultiplier - MATCH_HEIGHT_PX,
+    padTopPx: (BASE_PITCH_PX * (roundMultiplier - 1)) / 2
   };
 };
 
 export default {
   name: 'Tableau',
-  components: { BaseText, BoutCard, TableauBoutCard, TableauColumn },
+  components: { BaseText, BoutCard, TableauColumn, TableauSvgOverlay },
   emits: ['action:editBout', 'action:directingBout'],
   props: {
     bouts: { type: Array, required: true },
     bracketSize: { type: String, required: true },
     hostingClubColors: { type: Object, required: true },
-    largeCards: { type: Boolean, required: true },
-    listView: { type: Boolean, required: false },
-    isCountingBackwardsMaxScore: { type: Number, default: 0 }
+    listView: { type: Boolean, default: false },
+    isCountingBackwardsMaxScore: { type: Number, default: 0 },
+    plannedDirectingStations: { type: Array, default: () => [] },
+    plannedBoutAssignments: { type: Array, default: () => [] },
+    viewerPersonId: { type: [Number, String], default: null }
+  },
+  data() {
+    return {
+      connectorPaths: [],
+      inputAnchors: new Map(),
+      outputAnchors: new Map(),
+      resizeObserver: null,
+      scheduledFrame: null,
+      svgSize: { width: 0, height: 0 }
+    };
   },
   computed: {
-    groupedBouts() {
-      const grouped = this.groupBoutsByRound(this.bouts);
-      const roundEntries = Object.entries(grouped);
-      const winnerBouts = Object.fromEntries(roundEntries.filter(isMainRound));
-      const loserBouts = Object.fromEntries(roundEntries.filter(isConsolationRound));
-
-      return { winnerBouts, loserBouts };
+    roundEntries() {
+      return Object.entries(groupBoutsByRound(this.bouts)).map(([roundName, bouts]) => [
+        roundName,
+        [...bouts].sort(sortBoutsByNodeId)
+      ]);
     },
-
-    combinedBouts() {
-      const combined = {
-        ...this.groupedBouts.winnerBouts,
-        ...this.groupedBouts.loserBouts
-      };
-      return Object.fromEntries(
-        Object.keys(combined)
-          .sort()
-          .map(roundName => [roundName, combined[roundName]])
-      );
+    winnerRoundEntries() {
+      return this.roundEntries
+        .filter(([roundName]) => !isConsolationRoundName(roundName) && !isPlacementRoundName(roundName))
+        .sort(sortRoundEntries);
+    },
+    placementRoundEntries() {
+      return this.roundEntries.filter(([roundName]) => isPlacementRoundName(roundName)).sort(sortRoundEntries);
+    },
+    loserRoundEntries() {
+      return this.roundEntries.filter(([roundName]) => isConsolationRoundName(roundName)).sort(sortRoundEntries);
     },
-
     filteredBouts() {
       return Object.fromEntries(
-        Object.entries(this.combinedBouts)
-          .sort(([roundNameA], [roundNameB]) => sortRoundNames(roundNameA, roundNameB))
-          .map(createVisibleRoundEntry)
-          .filter(hasVisibleBouts)
+        [...this.roundEntries].sort(sortRoundEntries).map(createVisibleRoundEntry).filter(hasBouts)
       );
+    },
+    listSections() {
+      const entries = Object.entries(this.filteredBouts);
+      const suggestedBouts = entries
+        .flatMap(([, bouts]) => bouts)
+        .filter(bout =>
+          isBoutSuggestedForViewer({
+            bout,
+            plannedStationByBout: this.plannedStationByBout,
+            viewerPersonId: this.viewerPersonId
+          })
+        );
+
+      if (!suggestedBouts.length) return entries.map(createListSection);
+
+      const suggestedBoutIds = new Set(suggestedBouts.map(bout => String(bout.BoutId)));
+      const remainingSections = removeSuggestedBouts(entries, suggestedBoutIds).map(createListSection);
+      return [{ key: 'suggested-for-viewer', label: 'Suggested for You', bouts: suggestedBouts }, ...remainingSections];
+    },
+    plannedStationByBout() {
+      return createPlannedStationByBout({
+        assignments: this.plannedBoutAssignments,
+        stations: this.plannedDirectingStations
+      });
+    },
+    placementLayout() {
+      return createRoundLayout(0);
+    }
+  },
+  watch: {
+    bouts: {
+      deep: true,
+      handler() {
+        this.scheduleConnectorUpdate();
+      }
+    },
+    plannedDirectingStations: {
+      deep: true,
+      handler() {
+        this.scheduleConnectorUpdate();
+      }
+    },
+    plannedBoutAssignments: {
+      deep: true,
+      handler() {
+        this.scheduleConnectorUpdate();
+      }
+    },
+    bracketSize() {
+      this.scheduleConnectorUpdate();
+    },
+    listView(value) {
+      if (!value) this.$nextTick(this.observeTableauSize);
+      this.scheduleConnectorUpdate();
+    }
+  },
+  mounted() {
+    this.observeTableauSize();
+    window.addEventListener('resize', this.scheduleConnectorUpdate);
+    document.fonts?.ready?.then(this.scheduleConnectorUpdate);
+    this.scheduleConnectorUpdate();
+  },
+  beforeUnmount() {
+    this.resizeObserver?.disconnect();
+    window.removeEventListener('resize', this.scheduleConnectorUpdate);
+    if (this.scheduledFrame !== null && typeof cancelAnimationFrame === 'function') {
+      cancelAnimationFrame(this.scheduledFrame);
     }
   },
-
   methods: {
-    // --- helpers ---
-    _findBoutByIds(idsOrBout) {
-      // BoutCard emits ids for start/resume/edit; normalize to an actual bout object.
+    findBoutByIds(idsOrBout) {
       if (!idsOrBout) return null;
-      if (idsOrBout.BoutId && idsOrBout.Person1) return idsOrBout; // already a bout-ish object
+      if (idsOrBout.BoutId && idsOrBout.Person1) return idsOrBout;
 
-      const boutId = idsOrBout?.BoutId ?? idsOrBout?.boutId;
-      if (!boutId) return null;
-      return (this.bouts || []).find(b => String(b.BoutId) === String(boutId)) || null;
+      const boutId = idsOrBout.BoutId ?? idsOrBout.boutId;
+      return this.bouts.find(bout => String(bout.BoutId) === String(boutId)) || null;
     },
-
-    // Start/Resume from BoutCard
     handleDirectingFromIds(ids) {
-      const bout = this._findBoutByIds(ids);
-      if (!bout) return;
-      this.$emit('action:directingBout', bout);
+      const bout = this.findBoutByIds(ids);
+      if (bout) this.$emit('action:directingBout', bout);
     },
-
-    // Edit from BoutCard
     handleEditFromIds(ids) {
-      const bout = this._findBoutByIds(ids);
-      if (!bout) return;
-      this.$emit('action:editBout', bout);
+      const bout = this.findBoutByIds(ids);
+      if (bout) this.$emit('action:editBout', bout);
     },
-
-    // TableauColumn / non-list view already emits bout objects
     handleEditBout(bout) {
       this.$emit('action:editBout', bout);
     },
     handleDirectorBout(bout) {
       this.$emit('action:directingBout', bout);
     },
+    getRoundLayout(roundIndex) {
+      return createRoundLayout(roundIndex);
+    },
+    getPlannedStation(bout) {
+      return getPlannedStationForBout(this.plannedStationByBout, bout);
+    },
+    getPlannedStationLabel(bout) {
+      const station = this.getPlannedStation(bout);
+      if (!station) return '';
+      const directorName = station.Director?.DisplayName || 'Director TBD';
+      return `Suggested: ${station.RingName} / ${directorName}`;
+    },
+    registerNodeAnchor({ id, kind, el }) {
+      const anchors = kind === 'input' ? this.inputAnchors : this.outputAnchors;
+      const anchorId = String(id);
+
+      if (el) anchors.set(anchorId, el);
+      if (!el) anchors.delete(anchorId);
+      this.scheduleConnectorUpdate();
+    },
+    observeTableauSize() {
+      if (typeof ResizeObserver === 'undefined' || !this.$refs.tableauRoot) return;
+      this.resizeObserver?.disconnect();
+      this.resizeObserver = new ResizeObserver(this.scheduleConnectorUpdate);
+      this.resizeObserver.observe(this.$refs.tableauRoot);
+    },
+    scheduleConnectorUpdate() {
+      if (this.scheduledFrame !== null) return;
+      this.scheduledFrame = -1;
+
+      const update = () => {
+        this.scheduledFrame = null;
+        this.recomputeConnectors();
+      };
+
+      this.$nextTick(() => {
+        if (typeof requestAnimationFrame === 'function') {
+          this.scheduledFrame = requestAnimationFrame(update);
+          return;
+        }
+        update();
+      });
+    },
+    recomputeConnectors() {
+      const rootElement = this.$refs.tableauRoot;
+      if (this.listView || !rootElement) {
+        this.connectorPaths = [];
+        return;
+      }
+
+      const layout = createDomAnchorLayout({
+        rootElement,
+        getInputAnchor: id => this.inputAnchors.get(String(id)),
+        getOutputAnchor: id => this.outputAnchors.get(String(id))
+      });
 
-    groupBoutsByRound(bouts) {
-      return (bouts || []).reduce(addBoutToRound, {});
+      this.svgSize = layout.size;
+      const paths = buildBracketPaths({
+        bouts: this.bouts,
+        getInputPoint: layout.getInputPoint,
+        getOutputPoint: layout.getOutputPoint
+      });
+      this.connectorPaths = addPlannedStrokesToConnectors(paths, this.plannedStationByBout);
     }
   }
 };

package/src/stories/Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.test.js

@@ -0,0 +1,29 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import BracketDirectorAssignmentCard from '../../../Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
+import BracketDirectorAssignmentPanel from './BracketDirectorAssignmentPanel.vue';
+
+const stations = [
+  { RingId: 1, RingName: 'Ring 1', Director: { PersonId: 10, DisplayName: 'Director One' } },
+  { RingId: 2, RingName: 'Ring 2', Director: { PersonId: 20, DisplayName: 'Director Two' } }
+];
+
+describe('BracketDirectorAssignmentPanel', () => {
+  it('renders assigned directors followed by the add summary card', () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentPanel, { props: { stations } });
+    const cards = wrapper.findAllComponents(BracketDirectorAssignmentCard);
+
+    expect(cards).toHaveLength(3);
+    expect(cards.slice(0, 2).map(card => card.props('station'))).toEqual(stations);
+    expect(cards[2].props('variant')).toBe('add');
+  });
+
+  it('forwards add intent to its parent', async () => {
+    const wrapper = shallowMount(BracketDirectorAssignmentPanel, { props: { stations: [] } });
+
+    wrapper.findComponent(BracketDirectorAssignmentCard).vm.$emit('action:add');
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('request:add-planned-director')).toEqual([[]]);
+  });
+});

package/src/stories/Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue

@@ -0,0 +1,46 @@
+<template>
+  <aside
+    data-testid="bracket-director-assignment-panel"
+    class="w-full rounded-xl border border-dropdownSelect bg-bannerBackground p-4 shadow-lg xl:sticky xl:top-4 xl:w-72"
+  >
+    <div class="mb-4">
+      <BaseText color="primaryHighlight" size="md" text="Director Assignments" weight="bold" />
+      <BaseText
+        class="mt-1"
+        color="quaternary"
+        size="xs"
+        text="Plan ring coverage. Scheduled bouts may still be moved between rings."
+      />
+    </div>
+
+    <div class="space-y-3">
+      <BracketDirectorAssignmentCard v-for="station in stations" :key="station.RingId" :station="station" />
+      <BracketDirectorAssignmentCard
+        v-if="showAddCard"
+        variant="add"
+        @action:add="$emit('request:add-planned-director')"
+      />
+    </div>
+  </aside>
+</template>
+
+<script>
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
+import BracketDirectorAssignmentCard from '../../../Cards/BracketDirectorAssignmentCard/BracketDirectorAssignmentCard.vue';
+
+export default {
+  name: 'BracketDirectorAssignmentPanel',
+  components: { BaseText, BracketDirectorAssignmentCard },
+  emits: ['request:add-planned-director'],
+  props: {
+    stations: {
+      type: Array,
+      default: () => []
+    },
+    showAddCard: {
+      type: Boolean,
+      default: true
+    }
+  }
+};
+</script>

package/src/stories/Organisms/Containers/Tableau/components/TableauSvgOverlay.test.js

@@ -0,0 +1,21 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import TableauSvgOverlay from './TableauSvgOverlay.vue';
+
+describe('TableauSvgOverlay', () => {
+  it('uses the standard connector thickness for neutral and assigned paths', () => {
+    const wrapper = shallowMount(TableauSvgOverlay, {
+      props: {
+        size: { width: 200, height: 100 },
+        paths: [
+          { key: 'neutral', path: 'M 0 0 L 10 0', stroke: null },
+          { key: 'assigned', path: 'M 0 10 L 10 10', stroke: '#2563eb' }
+        ]
+      }
+    });
+    const paths = wrapper.findAll('path');
+
+    expect(paths.map(path => path.attributes('stroke-width'))).toEqual(['1.5', '1.5']);
+    expect(paths.map(path => path.attributes('stroke'))).toEqual(['currentColor', '#2563eb']);
+  });
+});

package/src/stories/Organisms/Containers/Tableau/components/TableauSvgOverlay.vue

@@ -0,0 +1,39 @@
+<template>
+  <svg
+    class="pointer-events-none absolute inset-0 z-0 text-dropdownSelect"
+    :width="size.width"
+    :height="size.height"
+    :viewBox="`0 0 ${size.width} ${size.height}`"
+    shape-rendering="crispEdges"
+    overflow="visible"
+    aria-hidden="true"
+  >
+    <path
+      v-for="connector in paths"
+      :key="connector.key"
+      :d="connector.path"
+      :data-segment-role="connector.segmentRole"
+      fill="none"
+      :stroke="connector.stroke || 'currentColor'"
+      stroke-width="1.5"
+      stroke-linecap="square"
+      stroke-linejoin="miter"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'TableauSvgOverlay',
+  props: {
+    size: {
+      type: Object,
+      required: true
+    },
+    paths: {
+      type: Array,
+      required: true
+    }
+  }
+};
+</script>