@dcrackel/hematournamentui 1.0.706 → 1.0.708

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>

package/src/stories/Organisms/Containers/Tableau/layout/TableauLayoutEngine.js

@@ -0,0 +1,145 @@
+const toNodeKey = value => String(value);
+
+const snapToPixel = value => Math.round(value) + 0.5;
+
+const getPointRelativeToRoot = (rootElement, element) => {
+  const rootBounds = rootElement.getBoundingClientRect();
+  const elementBounds = element.getBoundingClientRect();
+
+  return {
+    x: snapToPixel(elementBounds.left - rootBounds.left + elementBounds.width / 2),
+    y: snapToPixel(elementBounds.top - rootBounds.top + elementBounds.height / 2)
+  };
+};
+
+export const createDomAnchorLayout = ({ rootElement, getInputAnchor, getOutputAnchor }) => ({
+  size: {
+    width: Math.ceil(rootElement.scrollWidth),
+    height: Math.ceil(rootElement.scrollHeight)
+  },
+  getInputPoint: nodeId => {
+    const element = getInputAnchor(toNodeKey(nodeId));
+    return element ? getPointRelativeToRoot(rootElement, element) : null;
+  },
+  getOutputPoint: nodeId => {
+    const element = getOutputAnchor(toNodeKey(nodeId));
+    return element ? getPointRelativeToRoot(rootElement, element) : null;
+  }
+});
+
+const groupChildrenByParent = bouts => {
+  const childrenByParent = new Map();
+
+  bouts.forEach(bout => {
+    if (!bout?.DEBoutId || !bout?.DENextBoutId) return;
+    const parentId = toNodeKey(bout.DENextBoutId);
+    const childIds = childrenByParent.get(parentId) || [];
+    childrenByParent.set(parentId, [...childIds, toNodeKey(bout.DEBoutId)]);
+  });
+
+  return childrenByParent;
+};
+
+const clamp = (value, minimum, maximum) => Math.max(minimum, Math.min(maximum, value));
+
+const getTrunkX = (childPoints, parentPoint) => {
+  const averageChildX = childPoints.reduce((total, point) => total + point.x, 0) / childPoints.length;
+  const childrenAreRightOfParent = averageChildX > parentPoint.x;
+  const minimumChildX = Math.min(...childPoints.map(point => point.x));
+  const maximumChildX = Math.max(...childPoints.map(point => point.x));
+
+  if (childrenAreRightOfParent) {
+    return clamp(parentPoint.x + 120, parentPoint.x + 6, minimumChildX - 16);
+  }
+
+  return clamp(parentPoint.x - 120, maximumChildX + 16, parentPoint.x - 6);
+};
+
+const createSingleChildPath = ({ childId, childPoint, parentId, parentPoint }) => {
+  const trunkX = getTrunkX([childPoint], parentPoint);
+  return {
+    key: `${childId}->${parentId}`,
+    path: `M ${childPoint.x} ${childPoint.y} L ${trunkX} ${childPoint.y} L ${trunkX} ${parentPoint.y} L ${parentPoint.x} ${parentPoint.y}`,
+    segmentRole: 'single',
+    sourceBoutId: childId,
+    sourceBoutIds: [childId],
+    targetBoutId: parentId
+  };
+};
+
+const createPairedChildPaths = ({ childIds, childPoints, parentId, parentPoint }) => {
+  const trunkX = getTrunkX(childPoints, parentPoint);
+  const [firstPoint, secondPoint] = childPoints;
+  const top = firstPoint.y <= secondPoint.y ? firstPoint : secondPoint;
+  const bottom = firstPoint.y <= secondPoint.y ? secondPoint : firstPoint;
+  const middleY = (top.y + bottom.y) / 2;
+
+  return [
+    {
+      key: `${childIds[0]}->join(${parentId})`,
+      path: `M ${firstPoint.x} ${firstPoint.y} L ${trunkX} ${firstPoint.y}`,
+      segmentRole: 'child',
+      sourceBoutId: childIds[0],
+      sourceBoutIds: [childIds[0]],
+      targetBoutId: parentId
+    },
+    {
+      key: `${childIds[1]}->join(${parentId})`,
+      path: `M ${secondPoint.x} ${secondPoint.y} L ${trunkX} ${secondPoint.y}`,
+      segmentRole: 'child',
+      sourceBoutId: childIds[1],
+      sourceBoutIds: [childIds[1]],
+      targetBoutId: parentId
+    },
+    {
+      key: `trunk(${parentId})`,
+      path: `M ${trunkX} ${top.y} L ${trunkX} ${bottom.y}`,
+      segmentRole: 'merge',
+      sourceBoutIds: [...childIds],
+      targetBoutId: parentId
+    },
+    {
+      key: `join(${parentId})->parent`,
+      path: `M ${trunkX} ${middleY} L ${parentPoint.x} ${middleY} L ${parentPoint.x} ${parentPoint.y}`,
+      segmentRole: 'parent',
+      sourceBoutIds: [...childIds],
+      targetBoutId: parentId
+    }
+  ];
+};
+
+export const buildBracketPaths = ({ bouts, getInputPoint, getOutputPoint }) => {
+  const paths = [];
+
+  groupChildrenByParent(bouts).forEach((childIds, parentId) => {
+    const parentPoint = getInputPoint(parentId);
+    const children = childIds
+      .map(childId => ({ id: childId, point: getOutputPoint(childId) }))
+      .filter(child => child.point);
+    if (!parentPoint || children.length === 0) return;
+
+    if (children.length === 1) {
+      paths.push(
+        createSingleChildPath({
+          childId: children[0].id,
+          childPoint: children[0].point,
+          parentId,
+          parentPoint
+        })
+      );
+      return;
+    }
+
+    const pairedChildren = children.slice(0, 2);
+    paths.push(
+      ...createPairedChildPaths({
+        childIds: pairedChildren.map(child => child.id),
+        childPoints: pairedChildren.map(child => child.point),
+        parentId,
+        parentPoint
+      })
+    );
+  });
+
+  return paths;
+};

package/src/stories/Organisms/Containers/Tableau/layout/TableauLayoutEngine.test.js

@@ -0,0 +1,64 @@
+import { describe, expect, it } from 'vitest';
+import { buildBracketPaths, createDomAnchorLayout } from './TableauLayoutEngine';
+
+const createElement = ({ left, top, width = 0, height = 0 }) => ({
+  getBoundingClientRect: () => ({ left, top, width, height })
+});
+
+describe('createDomAnchorLayout', () => {
+  it('measures anchors relative to the tableau root', () => {
+    const rootElement = {
+      ...createElement({ left: 10, top: 20 }),
+      scrollWidth: 400,
+      scrollHeight: 300
+    };
+    const inputAnchor = createElement({ left: 110, top: 70 });
+    const layout = createDomAnchorLayout({
+      rootElement,
+      getInputAnchor: () => inputAnchor,
+      getOutputAnchor: () => null
+    });
+
+    expect(layout.size).toEqual({ width: 400, height: 300 });
+    expect(layout.getInputPoint('3')).toEqual({ x: 100.5, y: 50.5 });
+    expect(layout.getOutputPoint('3')).toBeNull();
+  });
+});
+
+describe('buildBracketPaths', () => {
+  const bouts = [
+    { DEBoutId: 1, DENextBoutId: 3 },
+    { DEBoutId: 2, DENextBoutId: 3 },
+    { DEBoutId: 3, DENextBoutId: null }
+  ];
+
+  it('joins two child bouts to their next bout', () => {
+    const outputPoints = {
+      1: { x: 160, y: 30 },
+      2: { x: 160, y: 100 }
+    };
+    const paths = buildBracketPaths({
+      bouts,
+      getInputPoint: id => (id === '3' ? { x: 200, y: 65 } : null),
+      getOutputPoint: id => outputPoints[id] || null
+    });
+
+    expect(paths).toHaveLength(4);
+    expect(paths.map(path => path.key)).toEqual(['1->join(3)', '2->join(3)', 'trunk(3)', 'join(3)->parent']);
+    expect(paths.map(path => path.segmentRole)).toEqual(['child', 'child', 'merge', 'parent']);
+    expect(paths[0]).toMatchObject({ sourceBoutId: '1', sourceBoutIds: ['1'], targetBoutId: '3' });
+    expect(paths[2]).toMatchObject({ sourceBoutIds: ['1', '2'], targetBoutId: '3' });
+  });
+
+  it('keeps the correct child id when only one anchor is mounted', () => {
+    const paths = buildBracketPaths({
+      bouts,
+      getInputPoint: id => (id === '3' ? { x: 200, y: 65 } : null),
+      getOutputPoint: id => (id === '2' ? { x: 160, y: 100 } : null)
+    });
+
+    expect(paths).toHaveLength(1);
+    expect(paths[0].key).toBe('2->3');
+    expect(paths[0]).toMatchObject({ segmentRole: 'single', sourceBoutId: '2', targetBoutId: '3' });
+  });
+});

package/src/stories/Organisms/Containers/Tableau/plannedAssignments.js

@@ -0,0 +1,57 @@
+const toKey = value => String(value ?? '');
+
+const hasIdentity = value => value !== null && value !== undefined && String(value).length > 0;
+
+export const createStationByRing = stations =>
+  Object.fromEntries(
+    (stations || []).filter(station => hasIdentity(station?.RingId)).map(station => [toKey(station.RingId), station])
+  );
+
+export const createPlannedStationByBout = ({ assignments, stations }) => {
+  const stationByRing = createStationByRing(stations);
+
+  return Object.fromEntries(
+    (assignments || [])
+      .filter(assignment => hasIdentity(assignment?.DEBoutId))
+      .map(assignment => [toKey(assignment.DEBoutId), stationByRing[toKey(assignment.RingId)]])
+      .filter(([, station]) => station)
+  );
+};
+
+export const getPlannedStationForBout = (plannedStationByBout, bout) =>
+  plannedStationByBout[toKey(bout?.DEBoutId ?? bout?.BoutId)] || null;
+
+export const isBoutSuggestedForViewer = ({ bout, plannedStationByBout, viewerPersonId }) => {
+  if (!hasIdentity(viewerPersonId)) return false;
+  const directorId = getPlannedStationForBout(plannedStationByBout, bout)?.Director?.PersonId;
+  return hasIdentity(directorId) && toKey(directorId) === toKey(viewerPersonId);
+};
+
+const getStationColor = (plannedStationByBout, boutId) => plannedStationByBout[toKey(boutId)]?.Color || null;
+
+const getSharedSourceColor = (plannedStationByBout, sourceBoutIds) => {
+  const colors = sourceBoutIds.map(boutId => getStationColor(plannedStationByBout, boutId));
+  if (colors.some(color => !color)) return null;
+  return new Set(colors).size === 1 ? colors[0] : null;
+};
+
+const connectorStrokeRules = [
+  {
+    matches: connector => ['child', 'single'].includes(connector.segmentRole),
+    resolve: (connector, stations) => getStationColor(stations, connector.sourceBoutId)
+  },
+  {
+    matches: connector => connector.segmentRole === 'merge',
+    resolve: (connector, stations) => getSharedSourceColor(stations, connector.sourceBoutIds || [])
+  },
+  {
+    matches: connector => connector.segmentRole === 'parent',
+    resolve: (connector, stations) => getStationColor(stations, connector.targetBoutId)
+  }
+];
+
+export const addPlannedStrokesToConnectors = (connectors, plannedStationByBout) =>
+  connectors.map(connector => ({
+    ...connector,
+    stroke: connectorStrokeRules.find(rule => rule.matches(connector))?.resolve(connector, plannedStationByBout) || null
+  }));

package/src/stories/Organisms/Containers/Tableau/plannedAssignments.test.js

@@ -0,0 +1,65 @@
+import { describe, expect, it } from 'vitest';
+import {
+  addPlannedStrokesToConnectors,
+  createPlannedStationByBout,
+  isBoutSuggestedForViewer
+} from './plannedAssignments';
+
+const stations = [
+  { RingId: 1, Color: '#2563eb', Director: { PersonId: 10 } },
+  { RingId: 2, Color: '#dc2626', Director: { PersonId: 20 } }
+];
+
+describe('planned directing presentation helpers', () => {
+  it('joins planned bout data to its display station without mutating either input', () => {
+    const assignments = [{ DEBoutId: 101, RingId: 1 }];
+
+    const plannedStationByBout = createPlannedStationByBout({ assignments, stations });
+
+    expect(plannedStationByBout['101']).toBe(stations[0]);
+    expect(assignments).toEqual([{ DEBoutId: 101, RingId: 1 }]);
+    expect(stations[0]).toEqual({ RingId: 1, Color: '#2563eb', Director: { PersonId: 10 } });
+  });
+
+  it('identifies suggestions for the viewer without treating other suggestions as locks', () => {
+    const plannedStationByBout = createPlannedStationByBout({
+      assignments: [
+        { DEBoutId: 101, RingId: 1 },
+        { DEBoutId: 102, RingId: 2 }
+      ],
+      stations
+    });
+
+    expect(isBoutSuggestedForViewer({ bout: { DEBoutId: 101 }, plannedStationByBout, viewerPersonId: '10' })).toBe(
+      true
+    );
+    expect(isBoutSuggestedForViewer({ bout: { DEBoutId: 102 }, plannedStationByBout, viewerPersonId: '10' })).toBe(
+      false
+    );
+  });
+
+  it('colors source and parent segments while leaving mixed merge trunks neutral', () => {
+    const plannedStationByBout = createPlannedStationByBout({
+      assignments: [
+        { DEBoutId: 1, RingId: 1 },
+        { DEBoutId: 2, RingId: 2 },
+        { DEBoutId: 3, RingId: 1 }
+      ],
+      stations
+    });
+    const connectors = [
+      { key: 'child-1', segmentRole: 'child', sourceBoutId: 1 },
+      { key: 'child-2', segmentRole: 'child', sourceBoutId: 2 },
+      { key: 'merge', segmentRole: 'merge', sourceBoutIds: [1, 2] },
+      { key: 'parent', segmentRole: 'parent', targetBoutId: 3 }
+    ];
+
+    expect(addPlannedStrokesToConnectors(connectors, plannedStationByBout).map(path => path.stroke)).toEqual([
+      '#2563eb',
+      '#dc2626',
+      null,
+      '#2563eb'
+    ]);
+    expect(connectors.some(connector => Object.hasOwn(connector, 'stroke'))).toBe(false);
+  });
+});

package/src/stories/Organisms/Containers/TableauColumn/TabeauColumn.stories.js

@@ -2,36 +2,35 @@ import TableauColumn from './TableauColumn.vue';
 import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
 
 export default {
-    title: 'Organisms/Containers/TableauColumn',
-    component: TableauColumn,
-    args: {
-        bouts: getDEWithBouts.pools[0].Bouts.filter(bout => bout.RoundLabel === 'Table of 8'),
-        roundName: 'Table of 8',
-        bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
-        hostingClubColors: getDEWithBouts.hostingClubColors
+  title: 'Organisms/Containers/TableauColumn',
+  component: TableauColumn,
+  args: {
+    bouts: getDEWithBouts.pools[0].Bouts.filter(bout => bout.RoundLabel === 'Table of 8'),
+    roundName: 'Table of 8',
+    bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
+    hostingClubColors: getDEWithBouts.hostingClubColors
+  },
+  argTypes: {
+    bouts: {
+      control: 'array',
+      description: 'Array of bracket objects to display',
+      bracketSize: 'Table of 8'
     },
-    argTypes: {
-        bouts: {
-            control: 'array',
-            description: 'Array of bracket objects to display',
-            bracketSize: 'Table of 8',
-        },
-        bracketSize: {
-            control: 'text',
-            description: 'Sets spacing for connector lines',
-        },
-        hostingClubColors: {
-            control: 'object'
-        }
+    bracketSize: {
+      control: 'text',
+      description: 'Sets spacing for connector lines'
+    },
+    hostingClubColors: {
+      control: 'object'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        bouts: getDEWithBouts.pools[0].Bouts.filter(bout => bout.RoundLabel === 'Table of 8'),
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
-        roundName: 'Table of 8'
-    }
+  args: {
+    bouts: getDEWithBouts.pools[0].Bouts.filter(bout => bout.RoundLabel === 'Table of 8'),
+    hostingClubColors: getDEWithBouts.hostingClubColors,
+    bracketSize: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
+    roundName: 'Table of 8'
+  }
 };
-

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

@@ -1,33 +1,34 @@
 <template>
-  <section>
-    <div v-if="roundName !== 'Third Place' && roundName !== 'Final' && roundName !== 'Grand Final'" class="flex justify-center mb-4 border-b" :class="largeCards ? 'w-72' : 'w-40' ">
+  <section class="relative z-10 w-[200px] flex-none">
+    <div class="mb-4 flex w-40 justify-center border-b border-dropdownSelect">
       <BaseText :text="roundName" size="sm" color="quaternary" />
     </div>
-    <div v-for="(bout, index) in bouts" :key="index" class="flex">
-      <TableauBoutCard :bout="bout"
-                       :hostingClubColors="hostingClubColors"
-                       :roundName="roundName"
-                       :large="largeCards"
-                       :bracketSize="bracketSize"
-                       :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-                       @action:editBout="handleEditBout"
-                       @action:directingBout="handleDirectorBout"
-                      />
-      <TableauLines :roundName="roundName" :large="largeCards"  :bracketSize="bracketSize"/>
 
+    <div :style="columnStyle">
+      <div v-for="(bout, index) in bouts" :key="bout.DEBoutId ?? bout.BoutId" :style="getBoutStyle(index)">
+        <TableauBoutCard
+          :bout="bout"
+          :hostingClubColors="hostingClubColors"
+          :roundName="roundName"
+          :bracketSize="bracketSize"
+          :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+          @register-node-anchor="registerNodeAnchor"
+          @action:editBout="handleEditBout"
+          @action:directingBout="handleDirectorBout"
+        />
+      </div>
     </div>
   </section>
 </template>
 
 <script>
-import TableauBoutCard from "../../Cards/TableauBoutCard/TableauBoutCard.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
-import TableauLines from "../TableauLines/TableauLines.vue";
+import TableauBoutCard from '../../Cards/TableauBoutCard/TableauBoutCard.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'TableauColumn',
-  emits: ['action:directingBout', 'action:editBout'],
-  components: { TableauLines, BaseText, TableauBoutCard },
+  emits: ['action:directingBout', 'action:editBout', 'register-node-anchor'],
+  components: { BaseText, TableauBoutCard },
   props: {
     bouts: {
       type: Array,
@@ -45,23 +46,27 @@ export default {
       type: String,
       required: true
     },
-    largeCards: {
-      type: Boolean,
-      required: true
+    layout: {
+      type: Object,
+      default: () => ({ gapPx: 16, padTopPx: 0 })
     },
     isCountingBackwardsMaxScore: {
       type: Number,
       default: 0
     }
   },
-  data() {
-    return {
-      finalLineShown: true
-    };
-  },
   computed: {
+    columnStyle() {
+      return { paddingTop: `${this.layout.padTopPx}px` };
+    }
   },
   methods: {
+    getBoutStyle(index) {
+      return { marginBottom: index < this.bouts.length - 1 ? `${this.layout.gapPx}px` : '0' };
+    },
+    registerNodeAnchor(anchor) {
+      this.$emit('register-node-anchor', anchor);
+    },
     handleEditBout(bout) {
       this.$emit('action:editBout', bout);
     },

package/src/stories/Organisms/Form/AddDisplay/AddDisplay.stories.js

@@ -1,36 +1,36 @@
 import AddDisplay from './AddDisplay.vue';
-import getEventByTournamentId from "../../../../mocks/getEventByTournamentId.js"
+import getEventByTournamentId from '../../../../mocks/getEventByTournamentId.js';
 
 export default {
-    title: 'Organisms/Forms/AddDisplay',
-    component: AddDisplay,
-    args: {
-        clubs: getEventByTournamentId,
-        userClub: { text: 'Club A', link: '1' },
-        isAdmin: true
-    },
-    argTypes: {
-        clubs: { control: 'object' },
-        userClub: { control: 'object' },
-        isAdmin: { control: 'boolean' }
-    },
+  title: 'Organisms/Forms/AddDisplay',
+  component: AddDisplay,
+  args: {
+    clubs: getEventByTournamentId,
+    userClub: { text: 'Club A', link: '1' },
+    isAdmin: true
+  },
+  argTypes: {
+    clubs: { control: 'object' },
+    userClub: { control: 'object' },
+    isAdmin: { control: 'boolean' }
+  }
 };
 
 export const Default = {
-    args: {
-        clubs: [
-            { text: 'Club A', link: '1' },
-            { text: 'Club B', link: '2' }
-        ],
-        userClub: { text: 'Club A', link: '1' },
-        isAdmin: true
-    }
+  args: {
+    clubs: [
+      { text: 'Club A', link: '1' },
+      { text: 'Club B', link: '2' }
+    ],
+    userClub: { text: 'Club A', link: '1' },
+    isAdmin: true
+  }
 };
 
 export const ClubLevelUser = {
-    args: {
-        clubs: getEventByTournamentId,
-        userClub: { text: 'Club A', link: '1' },
-        isAdmin: false
-    }
+  args: {
+    clubs: getEventByTournamentId,
+    userClub: { text: 'Club A', link: '1' },
+    isAdmin: false
+  }
 };