@dcrackel/hematournamentui 1.0.707 → 1.0.708

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/TableauColumn.vue

@@ -1,24 +1,22 @@
 <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>
@@ -26,12 +24,11 @@
 <script>
 import TableauBoutCard from '../../Cards/TableauBoutCard/TableauBoutCard.vue';
 import BaseText from '../../../Atoms/Text/BaseText.vue';
-import TableauLines from '../TableauLines/TableauLines.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,
@@ -49,22 +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` };
+    }
   },
-  computed: {},
   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/Templates/EventManagement/Bracket/Bracket.stories.js

@@ -1,39 +1,151 @@
+import { ref, watch } from 'vue';
 import Bracket from './Bracket.vue';
+import {
+  activateStoryBout,
+  canStoryDirectorDirectBout,
+  clearStoryBoutChrome,
+  cloneStoryBouts,
+  getStoryDirectorId,
+  replaceStoryBout
+} from './BracketStoryHarness.js';
+import {
+  plannedBoutAssignments,
+  plannedDirectingStations,
+  plannedSuggestionViewerId
+} from './BracketPlannedSuggestions.js';
 //import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
 import getDEWithBouts6Fencers from '../../../../mocks/getDeBouts-6fencers.js';
 import getDEWithBouts12Fencers from '../../../../mocks/getDeBouts-12fencers.js';
 import getDEWithBouts22Fencers from '../../../../mocks/getDeBouts-22fencers.js';
-import getDEWithBout42Fencers from '../../../../mocks/getDeBouts-42fencers.js';
-import getDEWithBouts67Fencers from '../../../../mocks/getDeBouts-67fencers.js';
-import getDEWithBouts128Fencers from '../../../../mocks/getDeBouts-128fencers.js';
+import getDEWithBout42Fencers from '../../../../mocks/getDEBouts-42Fencers.js';
+import getDEBoutsTableOf64 from '../../../../mocks/getDEBouts-TableOf64.js';
+import getDEBoutsTableOf128 from '../../../../mocks/getDEBouts-TableOf128.js';
 import getDEWithBouts from '../../../../mocks/getDEBouts-DoubleElim.js';
 
+const cloneStations = stations =>
+  (stations || []).map(station => ({ ...station, Director: station.Director ? { ...station.Director } : null }));
+
+const renderInteractiveBracket = args => ({
+  components: { Bracket },
+  setup() {
+    const storyBouts = ref(cloneStoryBouts(args.bouts));
+    const storyStations = ref(cloneStations(args.plannedDirectingStations));
+
+    watch(
+      () => args.bouts,
+      bouts => {
+        storyBouts.value = cloneStoryBouts(bouts);
+      },
+      { deep: true }
+    );
+
+    watch(
+      () => args.plannedDirectingStations,
+      stations => {
+        storyStations.value = cloneStations(stations);
+      },
+      { deep: true }
+    );
+
+    const persistStoryBout = bout => {
+      storyBouts.value = replaceStoryBout(storyBouts.value, bout);
+    };
+
+    const getViewerStation = () =>
+      storyStations.value.find(station => String(station.Director?.PersonId) === String(args.viewerPersonId));
+
+    const handleAddPlannedDirector = () => {
+      const assignedRingIds = new Set(storyStations.value.map(station => String(station.RingId)));
+      const nextStation = plannedDirectingStations.find(station => !assignedRingIds.has(String(station.RingId)));
+      if (!nextStation) return;
+      storyStations.value = [...storyStations.value, ...cloneStations([nextStation])];
+    };
+
+    const handleDirectingBout = bout => {
+      const viewerStation = getViewerStation();
+      if (!canStoryDirectorDirectBout(bout, getStoryDirectorId(viewerStation))) return;
+      persistStoryBout(activateStoryBout(bout, viewerStation));
+    };
+
+    const handleCloseDirectingBout = bout => {
+      persistStoryBout(clearStoryBoutChrome(bout));
+    };
+
+    return {
+      args,
+      storyBouts,
+      storyStations,
+      handleAddPlannedDirector,
+      handleCloseDirectingBout,
+      handleDirectingBout,
+      persistStoryBout
+    };
+  },
+  template: `
+    <Bracket
+      v-bind="args"
+      :connectedToServer="args.connectedToServer"
+      :eventRules="args.eventRules"
+      :hostingClubColors="args.hostingClubColors"
+      :bouts="storyBouts"
+      :plannedDirectingStations="storyStations"
+      @close:directing-bout="handleCloseDirectingBout"
+      @request:add-planned-director="handleAddPlannedDirector"
+      @update:directing-bout="handleDirectingBout"
+      @request:bout-active="handleDirectingBout"
+      @update:bout="persistStoryBout"
+      @submit:bout="persistStoryBout"
+    />
+  `
+});
+
 export default {
   title: 'Templates/EventManagement/Bracket',
   component: Bracket,
   tags: ['Bracket'],
+  render: renderInteractiveBracket,
   args: {
     bouts: getDEWithBouts.pools[0].Bouts,
     eventRules: getDEWithBouts.eventRules,
     hostingClubColors: getDEWithBouts.hostingClubColors,
     connectedToServer: true,
-    role: 'admin'
+    role: 'admin',
+    plannedDirectingStations: [],
+    plannedBoutAssignments: [],
+    viewerPersonId: null,
+    showPlannedDirectorAssignments: false,
+    showAddPlannedDirectorCard: true
   },
   argTypes: {
     bouts: {
-      control: Object
+      control: 'object'
     },
     eventRules: {
-      control: Object
+      control: 'object'
     },
     hostingClubColors: {
-      control: Object
+      control: 'object'
     },
     connectedToServer: {
-      control: Boolean
+      control: 'boolean'
     },
     role: {
-      control: String
+      control: 'text'
+    },
+    plannedDirectingStations: {
+      control: 'object'
+    },
+    plannedBoutAssignments: {
+      control: 'object'
+    },
+    viewerPersonId: {
+      control: 'text'
+    },
+    showPlannedDirectorAssignments: {
+      control: 'boolean'
+    },
+    showAddPlannedDirectorCard: {
+      control: 'boolean'
     }
   }
 };
@@ -79,7 +191,7 @@ export const tableOfThirtyTwo = {
   }
 };
 
-export const tableOfFourtyTwo = {
+export const TableOfFortyTwo = {
   args: {
     bouts: getDEWithBout42Fencers.pools[0].Bouts,
     eventRules: getDEWithBout42Fencers.eventRules,
@@ -89,21 +201,37 @@ export const tableOfFourtyTwo = {
   }
 };
 
-export const tableOfSixtyFour = {
+export const TableOfSixtyFour = {
   args: {
-    bouts: getDEWithBouts67Fencers.pools[0].Bouts,
-    eventRules: getDEWithBouts67Fencers.eventRules,
-    hostingClubColors: getDEWithBouts67Fencers.hostingClubColors,
+    bouts: getDEBoutsTableOf64.pools[0].Bouts,
+    eventRules: getDEBoutsTableOf64.eventRules,
+    hostingClubColors: getDEBoutsTableOf64.hostingClubColors,
     connectedToServer: true,
     status: 'de'
   }
 };
 
-export const tableOfOneHundredTwentyEight = {
+export const PlannedDirectorSuggestions = {
+  args: {
+    bouts: getDEBoutsTableOf64.pools[0].Bouts,
+    eventRules: getDEBoutsTableOf64.eventRules,
+    hostingClubColors: getDEBoutsTableOf64.hostingClubColors,
+    connectedToServer: true,
+    status: 'de',
+    role: 'Admin',
+    plannedDirectingStations: plannedDirectingStations.slice(0, 2),
+    plannedBoutAssignments,
+    viewerPersonId: plannedSuggestionViewerId,
+    showPlannedDirectorAssignments: true,
+    showAddPlannedDirectorCard: true
+  }
+};
+
+export const TableOfOneHundredTwentyEight = {
   args: {
-    bouts: getDEWithBouts128Fencers.pools[0].Bouts,
-    eventRules: getDEWithBouts128Fencers.eventRules,
-    hostingClubColors: getDEWithBouts128Fencers.hostingClubColors,
+    bouts: getDEBoutsTableOf128.pools[0].Bouts,
+    eventRules: getDEBoutsTableOf128.eventRules,
+    hostingClubColors: getDEBoutsTableOf128.hostingClubColors,
     connectedToServer: true,
     status: 'de'
   }