@dcrackel/hematournamentui 1.0.707 → 1.0.708

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

@@ -3,6 +3,7 @@ import { describe, expect, it } from 'vitest';
 import DirectorModal from '../../../Molecules/Modals/DirectorModal/DirectorModal.vue';
 import EditBoutModal from '../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue';
 import Tableau from '../../../Organisms/Containers/Tableau/Tableau.vue';
+import BracketDirectorAssignmentPanel from '../../../Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue';
 import Bracket from './Bracket.vue';
 
 const createBout = (overrides = {}) => ({
@@ -17,13 +18,14 @@ const createBout = (overrides = {}) => ({
   ...overrides
 });
 
-const mountBracket = (bouts = [createBout()]) =>
+const mountBracket = (bouts = [createBout()], optionalProps = {}) =>
   shallowMount(Bracket, {
     props: {
       bouts,
       eventRules: [],
       hostingClubColors: {},
-      connectedToServer: true
+      connectedToServer: true,
+      ...optionalProps
     }
   });
 
@@ -91,6 +93,7 @@ describe('Bracket bout interaction', () => {
 
     expect(wrapper.vm.boutsData[0]).toMatchObject({ Status: 'Active', Score1: 6, Score2: 5 });
     expect(wrapper.emitted('update:bout')).toBeUndefined();
+    expect(wrapper.emitted('close:directing-bout')).toEqual([[bout]]);
     expect(wrapper.findComponent(DirectorModal).props('show')).toBe(false);
   });
 
@@ -113,4 +116,51 @@ describe('Bracket bout interaction', () => {
 
     expect(wrapper.findComponent({ name: 'AssignDirectorModal' }).exists()).toBe(false);
   });
+
+  it('renders optional planned suggestions without changing the directing contract', async () => {
+    const bout = createBout();
+    const plannedDirectingStations = [
+      {
+        RingId: 1,
+        RingName: 'Ring 1',
+        Color: '#2563eb',
+        Director: { PersonId: 1001, DisplayName: 'Alex Morgan' }
+      }
+    ];
+    const plannedBoutAssignments = [{ DEBoutId: bout.DEBoutId, RingId: 1 }];
+    const wrapper = mountBracket([bout], {
+      plannedDirectingStations,
+      plannedBoutAssignments,
+      viewerPersonId: 1001
+    });
+
+    expect(wrapper.findComponent(BracketDirectorAssignmentPanel).props('stations')).toEqual(plannedDirectingStations);
+    expect(wrapper.findComponent(Tableau).props()).toMatchObject({
+      plannedDirectingStations,
+      plannedBoutAssignments,
+      viewerPersonId: 1001
+    });
+
+    wrapper.findComponent(Tableau).vm.$emit('action:directingBout', bout);
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('update:directing-bout')).toEqual([[bout]]);
+    expect(wrapper.emitted('assign:director')).toBeUndefined();
+  });
+
+  it('emits add-planned-director intent from the assignment panel', async () => {
+    const wrapper = mountBracket([], { showPlannedDirectorAssignments: true });
+
+    wrapper.findComponent(BracketDirectorAssignmentPanel).vm.$emit('request:add-planned-director');
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.emitted('request:add-planned-director')).toEqual([[]]);
+  });
+
+  it('does not render planned directing controls when optional behavior is disabled', () => {
+    const wrapper = mountBracket();
+
+    expect(wrapper.findComponent(BracketDirectorAssignmentPanel).exists()).toBe(false);
+    expect(wrapper.findComponent(Tableau).props('plannedDirectingStations')).toEqual([]);
+  });
 });

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

@@ -7,23 +7,34 @@
       firstButtonLabel="List View"
       secondButtonLabel="Tableau"
       :showConnected="true"
-      :showToggle="true"
-      :largeCards="largeCards"
       :connectedToServer="connectedToServer"
       @update:selection="handleViewChange"
-      @update:cardSize="handleCardSizeToggle"
     />
 
-    <Tableau
-      :bouts="sortedBouts"
-      :hostingClubColors="hostingClubColors"
-      :bracketSize="bracketSize"
-      :largeCards="largeCards"
-      :listView="isListView"
-      :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
-      @action:editBout="editBout"
-      @action:directingBout="directBout"
-    />
+    <div class="flex flex-col gap-4 xl:flex-row">
+      <div class="min-w-0 flex-1">
+        <Tableau
+          :bouts="sortedBouts"
+          :hostingClubColors="hostingClubColors"
+          :bracketSize="bracketSize"
+          :listView="isListView"
+          :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
+          :plannedDirectingStations="plannedDirectingStations"
+          :plannedBoutAssignments="plannedBoutAssignments"
+          :viewerPersonId="viewerPersonId"
+          @action:editBout="editBout"
+          @action:directingBout="directBout"
+        />
+      </div>
+
+      <BracketDirectorAssignmentPanel
+        v-if="showPlannedAssignmentPanel"
+        class="order-first flex-none xl:order-last"
+        :stations="plannedDirectingStations"
+        :showAddCard="showAddPlannedDirectorCard"
+        @request:add-planned-director="$emit('request:add-planned-director')"
+      />
+    </div>
 
     <div v-if="bouts.length < 1" class="w-full flex justify-center items-center">
       <div class="text-center mb-10">
@@ -77,6 +88,7 @@ import BaseText from '../../../Atoms/Text/BaseText.vue';
 import DirectorModal from '../../../Molecules/Modals/DirectorModal/DirectorModal.vue';
 import EditBoutModal from '../../../Molecules/Modals/EditBoutModal/EditBoutModal.vue';
 import Tableau from '../../../Organisms/Containers/Tableau/Tableau.vue';
+import BracketDirectorAssignmentPanel from '../../../Organisms/Containers/Tableau/components/BracketDirectorAssignmentPanel.vue';
 import emptyDesertIcon from '../../../../assets/empty_desert_icon.png';
 import { tabs } from '../../../Util/tabs.js';
 
@@ -93,9 +105,11 @@ const invalidDirectingBoutPredicates = [
 
 export default {
   emits: [
+    'close:directing-bout',
     'penalty:add',
     'penalty:remove',
     'penalty:update',
+    'request:add-planned-director',
     'request:bout-active',
     'submit:bout',
     'tab:menu-click',
@@ -106,6 +120,7 @@ export default {
     Tableau,
     EditBoutModal,
     DirectorModal,
+    BracketDirectorAssignmentPanel,
     BaseText,
     ToggleHeader,
     EditEventsTopMenu
@@ -134,6 +149,26 @@ export default {
     role: {
       type: String,
       default: 'Admin'
+    },
+    plannedDirectingStations: {
+      type: Array,
+      default: () => []
+    },
+    plannedBoutAssignments: {
+      type: Array,
+      default: () => []
+    },
+    viewerPersonId: {
+      type: [Number, String],
+      default: null
+    },
+    showPlannedDirectorAssignments: {
+      type: Boolean,
+      default: false
+    },
+    showAddPlannedDirectorCard: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -144,12 +179,14 @@ export default {
       selectedBout: {},
       tabs,
       viewName: 'Tableau',
-      largeCards: true,
       boutsData: this.cloneBouts(this.bouts),
       isListView: false
     };
   },
   computed: {
+    showPlannedAssignmentPanel() {
+      return this.showPlannedDirectorAssignments || this.plannedDirectingStations.length > 0;
+    },
     isCountingBackwardsMaxScore() {
       // 1) see if PoolScoreDirection exists and is explicitly "false"
       const dirRule = this.eventRules.find(r => r.Rules?.RuleName === 'PoolScoreDirection');
@@ -194,9 +231,11 @@ export default {
   },
   methods: {
     handleCloseModal() {
+      const closedDirectingBout = this.showDirectorModal && this.selectedBout?.BoutId ? { ...this.selectedBout } : null;
       this.showDirectorModal = false;
       this.showEditBoutModal = false;
       this.selectedBout = {};
+      if (closedDirectingBout) this.$emit('close:directing-bout', closedDirectingBout);
     },
     handleTabMenuClick(value) {
       this.$emit('tab:menu-click', value);
@@ -239,9 +278,6 @@ export default {
       this.showEditBoutModal = true;
       this.selectedBout = updatedBout;
     },
-    handleCardSizeToggle(value) {
-      this.largeCards = value;
-    },
     updateViewBasedOnScreenSize() {
       this.isListView = window.innerWidth <= 768;
     },

package/src/stories/Templates/EventManagement/Bracket/BracketPlannedSuggestions.js

@@ -0,0 +1,39 @@
+import portraitUrl from '../../../../assets/portrait1.png';
+
+const createBoutAssignments = (ringId, boutIds) => boutIds.map(DEBoutId => ({ DEBoutId, RingId: ringId }));
+
+export const plannedDirectingStations = [
+  {
+    RingId: 1,
+    RingName: 'Ring 1',
+    Color: '#2563eb',
+    Director: { PersonId: 1001, DisplayName: 'Alex Morgan', PortraitUrl: portraitUrl }
+  },
+  {
+    RingId: 2,
+    RingName: 'Ring 2',
+    Color: '#dc2626',
+    Director: { PersonId: 1002, DisplayName: 'Jordan Lee', PortraitUrl: portraitUrl }
+  },
+  {
+    RingId: 3,
+    RingName: 'Ring 3',
+    Color: '#059669',
+    Director: { PersonId: 1003, DisplayName: 'Sam Rivera', PortraitUrl: portraitUrl }
+  },
+  {
+    RingId: 4,
+    RingName: 'Ring 4',
+    Color: '#d97706',
+    Director: { PersonId: 1004, DisplayName: 'Taylor Quinn', PortraitUrl: portraitUrl }
+  }
+];
+
+export const plannedBoutAssignments = [
+  ...createBoutAssignments(1, [65, 66, 67, 68, 69, 70, 71, 72, 97, 98, 99, 100, 113, 114, 121, 125]),
+  ...createBoutAssignments(2, [73, 74, 75, 76, 77, 78, 79, 80, 101, 102, 103, 104, 115, 116, 122]),
+  ...createBoutAssignments(3, [81, 82, 83, 84, 85, 86, 87, 88, 105, 106, 107, 108, 117, 118, 123, 126]),
+  ...createBoutAssignments(4, [89, 90, 91, 92, 93, 94, 95, 96, 109, 110, 111, 112, 119, 120, 124, 127])
+];
+
+export const plannedSuggestionViewerId = plannedDirectingStations[0].Director.PersonId;

package/src/stories/Templates/EventManagement/Bracket/BracketStoryHarness.js

@@ -0,0 +1,39 @@
+const STORY_DIRECTOR = {
+  PersonId: -1,
+  DisplayName: 'Story Director'
+};
+
+const isSameBout = (bout, selectedBout) => String(bout.BoutId) === String(selectedBout.BoutId);
+const isActiveBout = bout => String(bout?.Status || '').toLowerCase() === 'active';
+const hasSameIdentity = (firstId, secondId) => String(firstId ?? '') === String(secondId ?? '');
+
+export const cloneStoryBouts = bouts => (bouts || []).map(bout => ({ ...bout }));
+
+export const canStoryDirectorDirectBout = (bout, directorId) =>
+  !isActiveBout(bout) || hasSameIdentity(bout.RefereeId, directorId);
+
+export const getStoryDirectorId = station => station?.Director?.PersonId ?? STORY_DIRECTOR.PersonId;
+
+export const activateStoryBout = (bout, station = null) => {
+  const director = station?.Director || STORY_DIRECTOR;
+
+  return {
+    ...bout,
+    Status: 'Active',
+    RefereeId: director.PersonId,
+    RefName: director.DisplayName,
+    RingName: station?.RingName || bout.RingName || 'DE Bracket',
+    TimerStatus: bout.TimerStatus || 'stopped',
+    TimeLeft: Number(bout.TimeLeft) > 0 ? Number(bout.TimeLeft) : 180
+  };
+};
+
+export const clearStoryBoutChrome = bout => ({
+  ...bout,
+  RingName: '',
+  TimerStatus: 'stopped',
+  TimeLeft: 0
+});
+
+export const replaceStoryBout = (bouts, selectedBout) =>
+  bouts.map(bout => (isSameBout(bout, selectedBout) ? { ...selectedBout } : bout));

package/src/stories/Templates/EventManagement/Bracket/BracketStoryHarness.test.js

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+import {
+  activateStoryBout,
+  canStoryDirectorDirectBout,
+  clearStoryBoutChrome,
+  replaceStoryBout
+} from './BracketStoryHarness';
+
+describe('Bracket story parent simulation', () => {
+  it('returns an Active parent-owned bout without mutating the selected bout', () => {
+    const scheduledBout = { BoutId: 42, Status: 'Scheduled', TimeLeft: 0, Score1: 2, Score2: 1 };
+
+    const activeBout = activateStoryBout(scheduledBout);
+
+    expect(activeBout).toMatchObject({
+      Status: 'Active',
+      RefereeId: -1,
+      RefName: 'Story Director',
+      RingName: 'DE Bracket',
+      TimerStatus: 'stopped',
+      TimeLeft: 180,
+      Score1: 2,
+      Score2: 1
+    });
+    expect(scheduledBout).toEqual({ BoutId: 42, Status: 'Scheduled', TimeLeft: 0, Score1: 2, Score2: 1 });
+  });
+
+  it('replaces only the selected bout in the story-owned collection', () => {
+    const bouts = [
+      { BoutId: 41, Status: 'Scheduled' },
+      { BoutId: 42, Status: 'Scheduled' }
+    ];
+    const activeBout = { BoutId: 42, Status: 'Active' };
+
+    expect(replaceStoryBout(bouts, activeBout)).toEqual([bouts[0], activeBout]);
+  });
+
+  it('uses the viewer station when the story simulates pulling a scheduled bout', () => {
+    const scheduledBout = { BoutId: 42, Status: 'Scheduled' };
+    const station = {
+      RingName: 'Ring 1',
+      Director: { PersonId: 1001, DisplayName: 'Alex Morgan' }
+    };
+
+    expect(activateStoryBout(scheduledBout, station)).toMatchObject({
+      Status: 'Active',
+      RefereeId: 1001,
+      RefName: 'Alex Morgan',
+      RingName: 'Ring 1'
+    });
+    expect(scheduledBout).toEqual({ BoutId: 42, Status: 'Scheduled' });
+  });
+
+  it('allows scheduled bouts to move but protects an Active bout owned by another director', () => {
+    expect(canStoryDirectorDirectBout({ Status: 'Scheduled', RefereeId: 2002 }, 1001)).toBe(true);
+    expect(canStoryDirectorDirectBout({ Status: 'Active', RefereeId: 2002 }, 1001)).toBe(false);
+    expect(canStoryDirectorDirectBout({ Status: 'Active', RefereeId: 1001 }, '1001')).toBe(true);
+  });
+
+  it('clears story-only ring and timer fields without resetting status or scores', () => {
+    const activeBout = {
+      BoutId: 42,
+      Status: 'Active',
+      Score1: 5,
+      Score2: 4,
+      RingName: 'Ring 3',
+      TimerStatus: 'running',
+      TimeLeft: 72
+    };
+
+    expect(clearStoryBoutChrome(activeBout)).toEqual({
+      ...activeBout,
+      RingName: '',
+      TimerStatus: 'stopped',
+      TimeLeft: 0
+    });
+    expect(activeBout).toMatchObject({ Status: 'Active', Score1: 5, Score2: 4 });
+  });
+});

package/src/stories/Organisms/Cards/TableauBoutCard/SpacingConfig.js

@@ -1,111 +0,0 @@
-export const spacingConfig = {
-  Semifinal: {
-    large: {
-      Semifinal: { getTopSpace: 'mt-[0rem] mb-4', getCardSpace: 'mt-1' },
-      Final: { getTopSpace: 'mt-[10rem]', getCardSpace: 'mt-1' },
-      'Third Place': { getTopSpace: '-mt-[2rem] -ml-[19.2rem]', getCardSpace: 'mt-1' }
-    },
-    small: {
-      Semifinal: { getTopSpace: 'mt-[0.7rem] mb-[1.8rem]', getCardSpace: 'mt-[2.3rem]' },
-      Final: { getTopSpace: 'mt-[12.2rem]', getCardSpace: 'mt-1' },
-      'Third Place': { getTopSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1' }
-    }
-  },
-  'Table of 8': {
-    large: {
-      'Table of 8': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
-      Semifinal: { getTopSpace: 'mt-[1.34rem] mb-[3.4rem]', getCardSpace: 'mt-[4.5rem]' },
-      Final: { getTopSpace: 'mt-[11rem] ml-10', getCardSpace: 'mt-1' },
-      'Third Place': { getTopSpace: '-mt-[2rem] -ml-[19.2rem]', getCardSpace: 'mt-1' },
-      'Table of 4': { getTopSpace: 'mt-[1.34rem] mb-[3.4rem]', getCardSpace: 'mt-[4.5rem]' },
-      'Table of 2': { getTopSpace: 'mt-[5.8rem] mb-[3.4rem]', getCardSpace: 'mt-[11.5rem]' },
-      'Consolation Round 1': { getTopSpace: 'mt-[3rem] mb-[2rem]', getCardSpace: 'mt-1' },
-      'Consolation Round 2': { getTopSpace: 'mt-[1.5rem] mb-[3.8rem]', getCardSpace: 'mt-1' },
-      'Consolation Round 3': { getTopSpace: 'mt-[2.7rem] mb-[3.8rem]', getCardSpace: 'mt-[8rem]' },
-      'Consolation Round 4': { getTopSpace: 'mt-[5rem] mb-[3.8rem]', getCardSpace: 'mt-1' },
-      'Grand Final': { getTopSpace: 'mt-[11rem] ml-10', getCardSpace: 'mt-1' }
-    },
-    small: {
-      'Table of 8': { getTopSpace: 'mt-[0rem] mb-4', getCardSpace: 'mt-1' },
-      Semifinal: { getTopSpace: 'mt-[0.7rem] mb-[1.8rem]', getCardSpace: 'mt-[2.3rem]' },
-      Final: { getTopSpace: 'mt-[6rem]', getCardSpace: 'mt-1' },
-      'Third Place': { getTopSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1' }
-    }
-  },
-  'Table of 16': {
-    large: {
-      'Table of 16': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
-      'Table of 8': { getTopSpace: 'mt-[1.34rem] mb-[3.4rem]', getCardSpace: 'mt-[4.5rem]' },
-      Semifinal: { getTopSpace: 'mt-[4.6rem] mb-[7rem]', getCardSpace: 'mt-[11.5rem]' },
-      Final: { getTopSpace: 'mt-[22.5rem]', getCardSpace: 'mt-1' },
-      'Third Place': { getTopSpace: '-mt-[2rem] -ml-[19.2rem]', getCardSpace: 'mt-1' }
-    },
-    small: {
-      'Table of 16': { getTopSpace: 'mt-[0rem] mb-4', getCardSpace: 'mt-1' },
-      'Table of 8': { getTopSpace: 'mt-[0.7rem] mb-[1.75rem]', getCardSpace: 'mt-[2.3rem]' },
-      Semifinal: { getTopSpace: 'mt-[2.25rem] mb-[3.63rem]', getCardSpace: 'mt-[5.9rem]' },
-      Final: { getTopSpace: 'mt-[12.1rem]', getCardSpace: 'mt-1' },
-      'Third Place': { getTopSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1' }
-    }
-  },
-  'Table of 32': {
-    large: {
-      'Table of 32': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
-      'Table of 16': { getTopSpace: 'mt-[1.34rem] mb-[3.4rem]', getCardSpace: 'mt-[4.5rem]' },
-      'Table of 8': { getTopSpace: 'mt-[4.6rem] mb-[7.15rem]', getCardSpace: 'mt-[11.5rem]' },
-      Semifinal: { getTopSpace: 'mt-[11.7rem] mb-[14rem]', getCardSpace: 'mt-[25.5rem]' },
-      Final: { getTopSpace: 'mt-[51.5rem] ', getCardSpace: 'mt-1' },
-      'Third Place': { getTopSpace: '-mt-[2rem] -ml-[19.2rem]', getCardSpace: 'mt-1' }
-    },
-    small: {
-      'Table of 32': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
-      'Table of 16': { getTopSpace: 'mt-[0.7rem] mb-[2.65rem]', getCardSpace: 'mt-[3.4rem]' },
-      'Table of 8': { getTopSpace: 'mt-[2.9rem] mb-[5rem]', getCardSpace: 'mt-[7.85rem]' },
-      Semifinal: { getTopSpace: 'mt-[7rem] mb-[10rem]', getCardSpace: 'mt-[16.8rem]' },
-      Final: { getTopSpace: 'mt-[34.1rem]', getCardSpace: 'mt-1' },
-      'Third Place': { getTopSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1' }
-    }
-  },
-  'Table of 64': {
-    large: {
-      'Table of 64': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
-      'Table of 32': { getTopSpace: 'mt-[1.34rem] mb-[3.4rem]', getCardSpace: 'mt-[4.5rem]' },
-      'Table of 16': { getTopSpace: 'mt-[4.6rem] mb-[7.15rem]', getCardSpace: 'mt-[11.5rem]' },
-      'Table of 8': { getTopSpace: 'mt-[11.7rem] mb-[13.78rem]', getCardSpace: 'mt-[25.76rem]' },
-      Semifinal: { getTopSpace: 'mt-[24.45rem] mb-[29rem]', getCardSpace: 'mt-[53.6rem]' },
-      Final: { getTopSpace: 'mt-[110rem] ', getCardSpace: 'mt-1' },
-      'Third Place': { getTopSpace: '-mt-[2rem] -ml-[19.2rem]', getCardSpace: 'mt-1' }
-    },
-    small: {
-      'Table of 64': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
-      'Table of 32': { getTopSpace: 'mt-[0.7rem] mb-[2.65rem]', getCardSpace: 'mt-[3.4rem]' },
-      'Table of 16': { getTopSpace: 'mt-[2.9rem] mb-[5rem]', getCardSpace: 'mt-[7.85rem]' },
-      'Table of 8': { getTopSpace: 'mt-[7rem] mb-[9.95rem]', getCardSpace: 'mt-[16.8rem]' },
-      Semifinal: { getTopSpace: 'mt-[16.1rem] mb-[18.8rem]', getCardSpace: 'mt-[34.8rem]' },
-      Final: { getTopSpace: 'mt-[68rem]', getCardSpace: 'mt-1' },
-      'Third Place': { getTopSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1' }
-    }
-  },
-  'Table of 128': {
-    large: {
-      'Table of 128': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
-      'Table of 64': { getTopSpace: 'mt-[1.34rem] mb-[3.4rem]', getCardSpace: 'mt-[4.5rem]' },
-      'Table of 32': { getTopSpace: 'mt-[4.6rem] mb-[7.15rem]', getCardSpace: 'mt-[11.5rem]' },
-      'Table of 16': { getTopSpace: 'mt-[11.7rem] mb-[13.78rem]', getCardSpace: 'mt-[25.76rem]' },
-      'Table of 8': { getTopSpace: 'mt-[24.45rem] mb-[29rem]', getCardSpace: 'mt-[53.6rem]' },
-      Semifinal: { getTopSpace: 'mt-[47.5rem] mb-[62rem]', getCardSpace: 'mt-[109.5rem]' },
-      Final: { getTopSpace: 'mt-[223rem] ', getCardSpace: 'mt-1' },
-      'Third Place': { getTopSpace: '-mt-[2rem] -ml-[19.2rem]', getCardSpace: 'mt-1' }
-    },
-    small: {
-      'Table of 128': { getTopSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1' },
-      'Table of 64': { getTopSpace: 'mt-[0.7rem] mb-[2.65rem]', getCardSpace: 'mt-[3.4rem]' },
-      'Table of 32': { getTopSpace: 'mt-[2.9rem] mb-[5rem]', getCardSpace: 'mt-[7.85rem]' },
-      'Table of 16': { getTopSpace: 'mt-[7rem] mb-[9.95rem]', getCardSpace: 'mt-[16.8rem]' },
-      'Table of 8': { getTopSpace: 'mt-[16.1rem] mb-[18.8rem]', getCardSpace: 'mt-[34.8rem]' },
-      Semifinal: { getTopSpace: 'mt-[34.3rem] mb-[36.5rem]', getCardSpace: 'mt-[70.8rem]' },
-      Final: { getTopSpace: 'mt-[140rem]', getCardSpace: 'mt-1' },
-      'Third Place': { getTopSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1' }
-    }
-  }
-};

package/src/stories/Organisms/Containers/TableauLines/SpacingConfig.js

@@ -1,162 +0,0 @@
-// spacingConfig.js
-export const spacingConfig = {
-  Semifinal: {
-    large: {
-      Semifinal: { getTopSpace: 'mt-0', getConnectorHeight: 'h-[3rem]', getTopSpaceForLine: 'mt-[1.5rem]' },
-      Final: { getTopSpace: 'h-[8.5rem] mt-[5rem] -ml-[309px]', getBottomLine: 'h-[6.7rem] mt-[2.5rem] -ml-[309px]' },
-      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
-    },
-    small: {
-      Semifinal: { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[3.5rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
-      Final: { getTopSpace: 'h-[6rem] mt-[9.1rem] -ml-[181px]', getBottomLine: 'h-[3rem] mt-[1.4rem] -ml-[181px]' },
-      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
-    }
-  },
-  'Table of 8': {
-    large: {
-      'Table of 8': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-      Semifinal: { getTopSpace: 'mt-[2.5rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-      Final: { getTopSpace: 'h-[6rem] mt-[22rem] -ml-[309px]', getBottomLine: 'h-[6rem] mt-[2.5rem] -ml-[309px]' },
-      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
-      'Table of 4': { getTopSpace: 'mt-[2.5rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-      'Table of 2': { getTopSpace: 'hidden h-[6rem] mt-[22rem]', getBottomLine: 'h-[6rem] mt-[2.5rem] -ml-[309px]' },
-      'Consolation Round 1': {
-        getTopSpace: 'mt-[3rem]',
-        getConnectorHeight: 'h-[2.7rem]',
-        getTopSpaceForLine: 'mt-[1.2rem]'
-      },
-      'Consolation Round 2': {
-        getTopSpace: 'mt-[1.5rem]',
-        getConnectorHeight: 'h-[2.7rem]',
-        getTopSpaceForLine: 'mt-[1.2rem]'
-      },
-      'Consolation Round 3': {
-        getTopSpace: 'mt-[2.7rem]',
-        getConnectorHeight: 'h-[10.5rem]',
-        getTopSpaceForLine: 'mt-[5rem]'
-      },
-      'Consolation Round 4': {
-        getTopSpace: 'hidden mt-[2.7rem]',
-        getConnectorHeight: 'h-[10.5rem]',
-        getTopSpaceForLine: 'mt-[5rem]'
-      },
-      'Grand Final': {
-        getTopSpace: 'hidden h-[6rem] mt-[22rem] -ml-[309px]',
-        getBottomLine: 'h-[6rem] mt-[2.5rem] -ml-[309px]'
-      }
-    },
-    small: {
-      'Table of 8': {
-        getTopSpace: '-mt-[0.6rem]',
-        getConnectorHeight: 'h-[1.5rem]',
-        getTopSpaceForLine: 'mt-[0.6rem]'
-      },
-      Semifinal: { getTopSpace: 'mt-[1.2rem]', getConnectorHeight: 'h-[3.6rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
-      Final: { getTopSpace: 'h-[6rem] mt-[9.1rem] -ml-[181px]', getBottomLine: 'h-[3rem] mt-[1.4rem] -ml-[181px]' },
-      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
-    }
-  },
-  'Table of 16': {
-    large: {
-      'Table of 16': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-      'Table of 8': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-      Semifinal: { getTopSpace: 'mt-[5.8rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
-      Final: { getTopSpace: 'mt-[14rem] h-[12rem] -ml-[309px]', getBottomLine: 'h-[12rem] mt-[2.5rem] -ml-[309px]' },
-      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
-    },
-    small: {
-      'Table of 16': {
-        getTopSpace: '-mt-[0.6rem]',
-        getConnectorHeight: 'h-[1.5rem]',
-        getTopSpaceForLine: 'mt-[0.6rem]'
-      },
-      'Table of 8': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[3.5rem]', getTopSpaceForLine: 'mt-[1.6rem]' },
-      Semifinal: { getTopSpace: 'mt-[2.8rem]', getConnectorHeight: 'h-[7.2rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
-      Final: { getTopSpace: 'h-[8rem] mt-[7rem] -ml-[181px]', getBottomLine: 'h-[8rem] mt-[1.4rem] -ml-[181px]' },
-      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
-    }
-  },
-  'Table of 32': {
-    large: {
-      'Table of 32': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-      'Table of 16': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-      'Table of 8': { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
-      Semifinal: { getTopSpace: 'mt-[12.8rem]', getConnectorHeight: 'h-[28rem]', getTopSpaceForLine: 'mt-[7rem]' },
-      Final: {
-        getTopSpace: 'h-[25.1rem] mt-[30.1rem] -ml-[309px]',
-        getBottomLine: 'h-[25.1rem] mt-[2.5rem] -ml-[309px]'
-      },
-      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
-    },
-    small: {
-      'Table of 32': {
-        getTopSpace: '-mt-[0.6rem]',
-        getConnectorHeight: 'h-[1.5rem]',
-        getTopSpaceForLine: 'mt-[0.65rem]'
-      },
-      'Table of 16': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[4.8rem]', getTopSpaceForLine: 'mt-[2.2rem]' },
-      'Table of 8': { getTopSpace: 'mt-[2.3rem]', getConnectorHeight: 'h-[9.1rem]', getTopSpaceForLine: 'mt-[4rem]' },
-      Semifinal: { getTopSpace: 'mt-[7.5rem]', getConnectorHeight: 'h-[18rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
-      Final: { getTopSpace: 'h-[12.6rem] mt-[24.4rem] -ml-[181px]', getBottomLine: 'h-[8rem] mt-[1.4rem] -ml-[181px]' },
-      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
-    }
-  },
-  'Table of 64': {
-    large: {
-      'Table of 64': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-      'Table of 32': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-      'Table of 16': { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
-      'Table of 8': {
-        getTopSpace: 'mt-[11.7rem]',
-        getConnectorHeight: 'h-[28rem]',
-        getTopSpaceForLine: 'mt-[12.5rem]'
-      },
-      Semifinal: { getTopSpace: 'mt-[25.5rem]', getConnectorHeight: 'h-[56rem]', getTopSpaceForLine: 'mt-[23rem]' },
-      Final: { getTopSpace: 'mt-[148.5rem] h-[81rem] -ml-[309px]', getBottomLine: 'h-[80rem] mt-[2.5rem] -ml-[309px]' },
-      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
-    },
-    small: {
-      'Table of 64': {
-        getTopSpace: '-mt-[0.6rem]',
-        getConnectorHeight: 'h-[1.5rem]',
-        getTopSpaceForLine: 'mt-[0.65rem]'
-      },
-      'Table of 32': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[4.8rem]', getTopSpaceForLine: 'mt-[2.2rem]' },
-      'Table of 16': { getTopSpace: 'mt-[2.3rem]', getConnectorHeight: 'h-[9.1rem]', getTopSpaceForLine: 'mt-[4rem]' },
-      'Table of 8': { getTopSpace: 'mt-[6.4rem]', getConnectorHeight: 'h-[18rem]', getTopSpaceForLine: 'mt-[9rem]' },
-      Semifinal: { getTopSpace: 'mt-[15.6rem]', getConnectorHeight: 'h-[36rem]', getTopSpaceForLine: 'mt-[18rem]' },
-      Final: { getTopSpace: 'h-[256px] mt-[64.8rem] -ml-[181px]', getBottomLine: 'h-[8rem] mt-[1.4rem] -ml-[181px]' },
-      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
-    }
-  },
-  'Table of 128': {
-    large: {
-      'Table of 128': { getTopSpace: 'mt-[0rem]', getConnectorHeight: 'h-[2.7rem]', getTopSpaceForLine: 'mt-[1.2rem]' },
-      'Table of 64': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
-      'Table of 32': { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
-      'Table of 16': {
-        getTopSpace: 'mt-[11.7rem]',
-        getConnectorHeight: 'h-[28rem]',
-        getTopSpaceForLine: 'mt-[12.5rem]'
-      },
-      'Table of 8': { getTopSpace: 'mt-[24.5rem]', getConnectorHeight: 'h-[56rem]', getTopSpaceForLine: 'mt-[23rem]' },
-      Semifinal: { getTopSpace: 'mt-[48.7rem]', getConnectorHeight: 'h-[112rem]', getTopSpaceForLine: '' },
-      Final: { getTopSpace: 'mt-[146.5rem] h-[80rem] -ml-[309px]', getBottomLine: 'h-[80rem] mt-[2.5rem] -ml-[309px]' },
-      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
-    },
-    small: {
-      'Table of 128': {
-        getTopSpace: '-mt-[0.6rem]',
-        getConnectorHeight: 'h-[1.5rem]',
-        getTopSpaceForLine: 'mt-[0.65rem]'
-      },
-      'Table of 64': { getTopSpace: '-mt-[0rem]', getConnectorHeight: 'h-[4.8rem]', getTopSpaceForLine: 'mt-[2.2rem]' },
-      'Table of 32': { getTopSpace: 'mt-[2.3rem]', getConnectorHeight: 'h-[9.1rem]', getTopSpaceForLine: 'mt-[4rem]' },
-      'Table of 16': { getTopSpace: 'mt-[6.4rem]', getConnectorHeight: 'h-[18rem]', getTopSpaceForLine: 'mt-[9rem]' },
-      'Table of 8': { getTopSpace: 'mt-[15.6rem]', getConnectorHeight: 'h-[36rem]', getTopSpaceForLine: 'mt-[18rem]' },
-      Semifinal: { getTopSpace: 'mt-[34.8rem]', getConnectorHeight: 'h-[72rem]', getTopSpaceForLine: 'mt-[3.8rem]' },
-      Final: { getTopSpace: 'h-[700px] mt-[99rem] -ml-[181px]', getBottomLine: 'h-[700px] mt-[1.4rem] -ml-[181px]' },
-      'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' }
-    }
-  }
-};