@dcrackel/meyersquaredui 1.0.259 → 1.0.261

package/src/stories/Organisms/Tableau/components/TableauActiveBoutCard/SpacingConfig.js

@@ -1,71 +0,0 @@
-export const SpacingConfig = {
-    'Semifinal': {
-        large: {
-        },
-        small: {
-            Semifinal: {topSpace: 'mt-[0.7rem] mb-[1.8rem]', cardSpace: 'mt-[2.3rem]', gap: 40},
-            Final: {topSpace: 'mt-[12.2rem]', gap: 50},
-            'Third Place': {topSpace: '-mt-8 -ml-44', gap: 30}
-        }
-    },
-    'Table of 8': {
-        large: {
-        },
-        small: {
-            'Table of 8': { topSpace: 'mt-0 mb-4', leftLine: 'hidden', timeBox: '-right-[35px]', gap: 0},
-            Semifinal: { topSpace: 'mt-[0.7rem] mb-[1.8rem]', leftLine: 'h-[56px] mt-[19px] -ml-[1px]', timeBox: '-right-[35px]', gap: 32,},
-            Final: { topSpace: 'mt-[2.6rem]', getCardSpace: 'mt-1', timeBox: 'mt-[2.3rem] -right-[35px]', gap: 32, leftLine: 'hidden'},
-            'Third Place': { topSpace: '-mt-8 -ml-40', leftLine: 'h-0', timeBox: '-right-[35px] top-[69px]',gap: 0,}
-        }
-    },
-    'Table of 16': {
-        large: {
-        },
-        small: {
-            'Table of 16': { topSpace: 'mt-[0rem] mb-4', getCardSpace: 'mt-1', timeBox: '-right-[35px]', gap: 0, leftLine: 'hidden'},
-            'Table of 8':  { topSpace: 'mt-[0rem] mb-[1.5rem]', getCardSpace: 'mt-[0rem]', timeBox: '-right-[35px]', gap: 50, leftLine: 'mt-[1.2rem] h-[3.56rem]'},
-            Semifinal: { topSpace: 'mt-[2.25rem] mb-[3.63rem]', getCardSpace: 'mt-[0rem]', timeBox: '-right-[35px]', gap: 92, leftLine: 'mt-[2.8rem] h-[7.1rem]'},
-            Final: { topSpace: 'mt-[7rem]', getCardSpace: 'mt-1', timeBox: 'mt-[2.3rem] -right-[35px]', gap: 0, leftLine: 'hidden'},
-            'Third Place': { topSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1'},
-        }
-    },
-    'Table of 32': {
-        large: {
-        },
-        small: {
-            'Table of 32': { topSpace: 'mt-[0rem] mb-4', getCardSpace: 'mt-1', timeBox: '-right-[35px]', gap: 0, leftLine: 'hidden'},
-            'Table of 16': { topSpace: 'mt-[0rem] mb-[1.5rem]', getCardSpace: 'mt-[0rem]', timeBox: '-right-[35px]', gap: 50, leftLine: 'mt-[1.3rem] h-[3.5rem]'},
-            'Table of 8': { topSpace: 'mt-[2.4rem] mb-[3.45rem]', getCardSpace: 'mt-[5.9rem]', timeBox: '-right-[35px]', gap: 92,leftLine: 'mt-[3rem] h-[7rem] '},
-            Semifinal: { topSpace: 'mt-[5.5rem] mb-[7.5rem]', getCardSpace: 'mt-[12.8rem]', timeBox: '-right-[35px]', gap: 200, leftLine: 'mt-[7rem] h-[14rem]'},
-            Final: { topSpace: 'mt-[12.5rem]', getCardSpace: 'mt-1', timeBox: 'mt-[2.3rem] -right-[35px]', gap: 0, leftLine: 'hidden'},
-            'Third Place': { topSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1', timeBox: '-right-[35px]', gap: 0, leftLine: 'mt-[3rem] h-[7rem]'},
-        }
-    },
-    'Table of 64': {
-        large: {
-        },
-        small: {
-            'Table of 64': { topSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1'},
-            'Table of 32': { topSpace: 'mt-[0.7rem] mb-[2.65rem]', getCardSpace: 'mt-[3.4rem]'},
-            'Table of 16': { topSpace: 'mt-[2.9rem] mb-[5rem]', getCardSpace: 'mt-[7.85rem]'},
-            'Table of 8': { topSpace: 'mt-[7rem] mb-[9.95rem]', getCardSpace: 'mt-[16.8rem]'},
-            Semifinal: { topSpace: 'mt-[16.1rem] mb-[18.8rem]', getCardSpace: 'mt-[34.8rem]'},
-            Final: { topSpace: 'mt-[68rem]', getCardSpace: 'mt-1'},
-            'Third Place': { topSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1'},
-        }
-    },
-    'Table of 128': {
-        large: {
-        },
-        small: {
-            'Table of 128': { topSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1'},
-            'Table of 64': { topSpace: 'mt-[0.7rem] mb-[2.65rem]', getCardSpace: 'mt-[3.4rem]'},
-            'Table of 32': { topSpace: 'mt-[2.9rem] mb-[5rem]', getCardSpace: 'mt-[7.85rem]'},
-            'Table of 16': { topSpace: 'mt-[7rem] mb-[9.95rem]', getCardSpace: 'mt-[16.8rem]'},
-            'Table of 8': { topSpace: 'mt-[16.1rem] mb-[18.8rem]', getCardSpace: 'mt-[34.8rem]'},
-            Semifinal: { topSpace: 'mt-[34.3rem] mb-[36.5rem]', getCardSpace: 'mt-[70.8rem]'},
-            Final: { topSpace: 'mt-[140rem]', getCardSpace: 'mt-1'},
-            'Third Place': { topSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1'},
-        }
-    },
-};

package/src/stories/Organisms/Tableau/components/TableauActiveBoutCard/TableauActiveBoutCard.stories.js

@@ -1,98 +0,0 @@
-import TableauActiveBoutCard from './TableauActiveBoutCard.vue';
-import getDEWithBouts from '../../../../../mocks/getDEWithBouts.js';
-
-export default {
-    title: 'Organisms/Tableau/TableauActiveBoutCard',
-    component: TableauActiveBoutCard,
-    tags: ['autodocs'],
-    args: {
-        bout: getDEWithBouts.pools[0].Bouts[0],
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        large: true,
-        roundName: getDEWithBouts.pools[0].Bouts[0].RoundLabel,
-        bracketSize: 'Table of 8',
-        highLight: false
-    },
-    argTypes: {
-        bout: {
-            control: 'object',
-            description: 'Bout object containing fencers and scores'
-        },
-        hostingClubColors: {
-            control: 'object',
-            description: 'Colors for hosting club'
-        },
-        large: {
-            control: 'boolean',
-            description: 'Size of the card'
-        },
-        roundName: {
-            control: 'text',
-            description: 'Name of the round'
-        },
-        bracketSize: {
-            control: 'text',
-            description: 'Size of the bracket'
-        },
-        highLight: {
-            control: 'boolean',
-            description: 'Card is highlighed'
-        }
-    }
-};
-
-export const Default = {
-    args: {
-        bout: getDEWithBouts.pools[0].Bouts[2],
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        large: true,
-        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-        bracketSize: 'Table of 8',
-        highLight: false
-    }
-};
-
-let modifiedBout = { ...getDEWithBouts.pools[0].Bouts[2], Status: 'Active' };
-export const ActiveBout = {
-    args: {
-        bout: modifiedBout,
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        large: true,
-        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-        bracketSize: 'Table of 8',
-        highLight: false
-    }
-};
-
-export const smallCardBout = {
-    args: {
-        bout: getDEWithBouts.pools[0].Bouts[1],
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        large: false,
-        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-        bracketSize: 'Table of 8',
-        highLight: false
-    }
-};
-
-modifiedBout = { ...getDEWithBouts.pools[0].Bouts[2], Status: 'Completed' };
-export const CompletedBout = {
-    args: {
-        bout: modifiedBout,
-        large: true,
-        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-        highLight: false
-    }
-};
-
-modifiedBout = { ...getDEWithBouts.pools[0].Bouts[0], Status: 'Completed' };
-export const ByeBout = {
-    args: {
-        bout: modifiedBout,
-        hostingClubColors: getDEWithBouts.hostingClubColors,
-        large: false,
-        roundName: getDEWithBouts.pools[0].Bouts[1].RoundLabel,
-        bracketSize: 'Table of 8',
-        highLight: false
-    }
-};

package/src/stories/Organisms/Tableau/components/TableauActiveBoutCard/TableauActiveBoutCard.vue

@@ -1,165 +0,0 @@
-<template>
-  <div class="border-l border-primary" :class="leftLine"></div>
-  <div :class="getTopSpace" class="relative flex flex-col justify-center">
-    <!-- Dynamic spacer above to keep the bout centered in the container -->
-    <div :style="{ height: `${computedTopBottomGap / 2}px` }"></div>
-
-    <!-- Bout Round Headers (Third Place / Final) -->
-    <div v-if="roundName === 'Third Place'" class="flex justify-center border-accent border-b mb-4 mt-8"
-         :class="'w-40'">
-      <BaseText size="sm" color="primary">{{ roundName }}</BaseText>
-    </div>
-    <div v-if="roundName === 'Final'" class="flex justify-center border-accent border-b mb-4 mt-0"
-         :class="'w-40'">
-      <BaseText size="sm" color="primary">{{ roundName }}</BaseText>
-    </div>
-    <!-- Fencer 1 Card -->
-    <section>
-      <TableauFencerCard
-          :fencer="person1Display"
-          :score="score1"
-          :position="dePosition1"
-          :color="hostingClubColors.Color1"
-          :scoreColor="getScoreColor(true)"
-          :highlight="highlight"
-      />
-    </section>
-
-    <!-- Fixed separator between fencers -->
-    <div class="pt-1 bg-primary"></div>
-
-    <!-- Timer for Active Bout -->
-    <transition enter-active-class="slideIn" leave-active-class="slideOut">
-      <div class="text-center items-center justify-center flex bg-primary p-1 absolute rounded-r-md h-10 w-9 z-50" :class="timeBox">
-        <BaseText size="xs" color="white" weight="bold" class="font-sourceCodePro">{{ displayTime }}</BaseText>
-      </div>
-    </transition>
-
-    <!-- Fencer 2 Card -->
-    <section>
-      <TableauFencerCard
-          :fencer="person2Display"
-          :score="score2"
-          :position="dePosition2"
-          :color="hostingClubColors.Color2"
-          :scoreColor="getScoreColor(false)"
-      />
-    </section>
-
-    <!-- Dynamic spacer below to keep the bout centered in the container -->
-    <div :style="{ height: `${computedTopBottomGap / 2}px` }"></div>
-  </div>
-</template>
-
-<script>
-import BaseText from "../../../../Atoms/BaseText/BaseText.vue";
-import TableauFencerCard from '../TableauFencerCard/TableauFencerCard.vue';
-import {SpacingConfig} from './SpacingConfig.js';
-
-export default {
-  name: 'TableauBoutCard',
-  components: {BaseText, TableauFencerCard},
-  props: {
-    bout: Object,
-    hostingClubColors: Object,
-    roundName: String,
-    bracketSize: String
-  },
-  data() {
-    return {
-      highlight: false,
-      currentConfig: {},
-      remainingTime: this.bout?.TimeLeft || 0
-    };
-  },
-  mounted() {
-    this.updateConfig();
-    if (this.bout.TimerStatus === 'running') this.startTimer();
-  },
-  beforeDestroy() {
-    this.stopTimer();
-  },
-  watch: {
-    bracketSize: 'updateConfig',
-    bout(newVal) {
-      this.remainingTime = newVal?.TimeLeft || 0;
-      if (newVal.TimerStatus === 'running') this.startTimer();
-      else this.stopTimer();
-    }
-  },
-  methods: {
-    updateConfig() {
-      const size = 'small';
-      this.currentConfig = SpacingConfig[this.bracketSize]?.[size]?.[this.roundName] || {};
-    },
-    getScoreColor(isPerson1) {
-      const {Person1, Person2, Score1, Score2, Status} = this.bout;
-      const winningColor = 'bg-accent';
-      const neutralColor = 'bg-white';
-
-      if (isPerson1) {
-        if (Person2.DisplayName === 'BYE' && Person1.DisplayName !== 'BYE') return winningColor;
-        return Score1 > Score2 ? winningColor : Status === 'Active' ? neutralColor : '';
-      } else {
-        if (Person1.DisplayName === 'BYE' && Person2.DisplayName !== 'BYE') return winningColor;
-        return Score2 > Score1 ? winningColor : Status === 'Active' ? neutralColor : '';
-      }
-    },
-    startTimer() {
-      if (this.interval) clearInterval(this.interval);
-      this.interval = setInterval(() => {
-        if (this.remainingTime > 0) this.remainingTime--;
-        else this.stopTimer();
-      }, 1000);
-    },
-    stopTimer() {
-      if (this.interval) clearInterval(this.interval);
-      this.interval = null;
-    }
-  },
-  computed: {
-    computedTopBottomGap() {
-      return this.currentConfig.gap;
-    },
-    dePosition1() {
-      return this.bout.Person1?.EventPersons?.[0]?.DEPosition || '';
-    },
-    score1() {
-      return `${this.bout.Score1}`;
-    },
-    dePosition2() {
-      return this.bout.Person2?.EventPersons?.[0]?.DEPosition || '';
-    },
-    score2() {
-      return `${this.bout.Score2}`;
-    },
-    timeBox() {
-      return this.currentConfig.timeBox || '';
-    },
-    leftLine() {
-      return this.currentConfig.leftLine || '';
-    },
-    getTopSpace() {
-      return this.currentConfig.topSpace || '';
-    },
-    getCardSpace() {
-      return this.currentConfig.cardSpace || '';
-    },
-    person1Display() {
-      if (this.bout.Status === "Scheduled" && this.bout.Person1.DisplayName === 'BYE')
-        return {...this.bout.Person1, DisplayName: '', Club: {Name: ''}};
-      return this.bout.Person1;
-    },
-    person2Display() {
-      if (this.bout.Status === "Scheduled" && this.bout.Person2.DisplayName === 'BYE')
-        return {...this.bout.Person2, DisplayName: '', Club: {Name: ''}};
-      return this.bout.Person2;
-    },
-    displayTime() {
-      const minutes = Math.floor(this.remainingTime / 60).toString();
-      const seconds = (this.remainingTime % 60).toString().padStart(2, '0');
-      return `${minutes}:${seconds}`;
-    }
-  }
-};
-</script>