@dcrackel/meyersquaredui 1.0.191 → 1.0.195

package/src/stories/Atoms/BaseText/BaseText.vue

@@ -44,6 +44,11 @@ export default {
         '3xl': 'text-3xl',
         '4xl': 'text-4xl',
         '5xl': 'text-5xl',
+        '6xl': 'text-6xl',
+        '7xl': 'text-7xl',
+        '8xl': 'text-8xl',
+        '9xl': 'text-[12rem]',
+        '10xl': 'text-[20rem]',
       };
 
       const weightClasses = {

package/src/stories/Molecules/ScoreBoardSections/FencerName/FencerName.stories.js

@@ -0,0 +1,40 @@
+import FencerName from './FencerName.vue';
+
+export default {
+    title: 'Molecules/ScoreBoardSections/FencerName',
+    component: FencerName,
+    tags: ['autodocs'],
+    args: {
+        fullName: 'Dave Smith',
+        assignedColor: 'blue',
+    },
+    argTypes: {
+        fullName: {
+            control: 'text',
+        },
+        assignedColor: {
+            control: 'color',
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        fullName: 'Dave Smith',
+        assignedColor: 'blue',
+    },
+};
+
+export const RedBackground = {
+    args: {
+        fullName: 'Melissa Jones',
+        assignedColor: 'red',
+    },
+};
+
+export const GreenBackground = {
+    args: {
+        fullName: 'Sarah Connor',
+        assignedColor: 'green',
+    },
+};

package/src/stories/Molecules/ScoreBoardSections/FencerName/FencerName.vue

@@ -0,0 +1,49 @@
+<template>
+  <div :class="[getBackground, textAlignment]" class="px-5 py-3 w-1/2">
+    <BaseText color="secondary" size="7xl" weight="bold" class="whitespace-nowrap overflow-hidden">{{formattedName}}</BaseText>
+    <BaseText size="2xl" weight="" color="secondary" class="">{{club}}</BaseText>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: 'FencerName',
+  components: {BaseText},
+  props: {
+    fullName: {
+      type: String,
+      required: true,
+    },
+    club: {
+      type: String,
+      required: false,
+    },
+    assignedColor: {
+      type: String,
+      required: true,
+    },
+    fencer1: {
+      type: Boolean,
+      default: true,
+    }
+  },
+  computed: {
+    formattedName() {
+      return this.fullName;
+      // const nameParts = this.fullName.split(' ');
+      // const lastName = nameParts[1];
+      // const firstInitial = nameParts[0].charAt(0) + '.';
+      // return `${lastName} ${firstInitial}`;
+    },
+    getBackground() {
+      return 'bg-' + this.assignedColor;
+    },
+    textAlignment() {
+      return this.fencer1 ? 'text-left' : 'text-right';
+    }
+  },
+};
+</script>
+

package/src/stories/Molecules/ScoreBoardSections/FencerScore/FencerScore.stories.js

@@ -0,0 +1,40 @@
+import FencerScore from './FencerScore.vue';
+
+export default {
+    title: 'Molecules/ScoreBoardSections/FencerScore',
+    component: FencerScore,
+    tags: ['autodocs'],
+    args: {
+        score: 5,
+        assignedColor: 'blue',
+    },
+    argTypes: {
+        score: {
+            control: 'number',
+        },
+        assignedColor: {
+            control: 'color',
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        score: 5,
+        assignedColor: 'blue',
+    },
+};
+
+export const RedBackground = {
+    args: {
+        score: 7,
+        assignedColor: 'red',
+    },
+};
+
+export const GreenBackground = {
+    args: {
+        score: 3,
+        assignedColor: 'green',
+    },
+};

package/src/stories/Molecules/ScoreBoardSections/FencerScore/FencerScore.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="w-1/2 flex justify-center" >
+    <div class="border border-neutral p-4 w-[22rem] h-[24rem] text-center rounded-xl">
+      <BaseText size="10xl" color="secondary"  class="font-sourceCodePro -mt-[4rem]">{{ score }}</BaseText>
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: 'FencerScore',
+  components: { BaseText },
+  props: {
+    score: {
+      type: Number,
+      required: true,
+    },
+    assignedColor: {
+      type: String,
+      required: false,
+    }
+  },
+  computed: {
+  },
+};
+</script>

package/src/stories/Molecules/ScoreBoardSections/ScoreBoardPasses/ScoreBoardPasses.stories.js

@@ -0,0 +1,45 @@
+import ScoreBoardPasses from './ScoreBoardPasses.vue';
+
+export default {
+    title: 'Molecules/ScoreBoardSections/ScoreBoardPasses',
+    component: ScoreBoardPasses,
+    tags: ['autodocs'],
+    args: {
+        ringName: 'Ring 1',
+        currentPass: 3,
+        totalPasses: 5,
+        directorName: 'Dave Smith'
+    },
+    argTypes: {
+        ringName: {
+            control: 'text',
+        },
+        currentPass: {
+            control: 'number',
+        },
+        totalPasses: {
+            control: 'number',
+        },
+        directorName: {
+            control: 'text',
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        ringName: 'Ring 1',
+        currentPass: 3,
+        totalPasses: 5,
+        directorName: 'Dave Smith'
+    },
+};
+
+export const DifferentPasses = {
+    args: {
+        ringName: 'Ring 2',
+        currentPass: 2,
+        totalPasses: 7,
+        directorName: 'John Doe'
+    },
+};

package/src/stories/Molecules/ScoreBoardSections/ScoreBoardPasses/ScoreBoardPasses.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="border rounded-lg px-10 text-center flex flex-col w-[50rem]">
+    <BaseText :text="ringName" size="5xl" weight="bold" color="neutral" class="mt-5" />
+    <BaseText :text="formattedPasses" weight="bold" color="neutral" class="-mt-4" size="9xl" />
+    <BaseText :text="directorName" size="2xl" weight="" color="neutral" class="-mt-4" />
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: 'ScoreBoardPasses',
+  components: { BaseText },
+  props: {
+    ringName: {
+      type: String,
+      required: true
+    },
+    currentPass: {
+      type: Number,
+      required: true
+    },
+    totalPasses: {
+      type: Number,
+      required: true
+    },
+    directorName: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    formattedPasses() {
+      return `${this.currentPass+1}:${this.totalPasses}`;
+    }
+  }
+};
+</script>

package/src/stories/Molecules/ScoreBoardSections/ScoreBoardTimer/ScoreBoardTimer.stories.js

@@ -0,0 +1,43 @@
+import ScoreBoardTimer from './ScoreBoardTimer.vue';
+
+export default {
+    title: 'Molecules/ScoreBoardSections/ScoreBoardTimer',
+    component: ScoreBoardTimer,
+    tags: ['autodocs'],
+    args: {
+        initialTime: 120,
+        timerStatus: 'stopped',
+    },
+    argTypes: {
+        initialTime: {
+            control: 'number',
+        },
+        timerStatus: {
+            control: 'text',
+            options: ['running', 'stopped'],
+        },
+    },
+};
+
+export const Default = {
+    args: {
+        initialTime: 120,
+        ringName: "Ring1",
+        timerStatus: 'stopped',
+    },
+};
+
+export const Running = {
+    args: {
+        initialTime: 60,
+        ringName: "Ring1",
+        timerStatus: 'running',
+    },
+};
+
+export const Stopped = {
+    args: {
+        initialTime: 30,
+        timerStatus: 'stopped',
+    },
+};

package/src/stories/Molecules/ScoreBoardSections/ScoreBoardTimer/ScoreBoardTimer.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="border rounded-lg px-10 text-center flex flex-col justify-between w-[50rem]">
+    <BaseText size="5xl" weight="bold" color="secondary" class="pt-6 font-sourceCodePro">{{ringName}}</BaseText>
+    <BaseText v-if="showClock" weight="simi-bold" color="secondary" class="-mt-4 font-sourceCodePro" size="9xl">{{formattedTime}}</BaseText>
+    <BaseText size="2xl" weight="" color="secondary" class="-mt-4 pb-2">{{directorName}}</BaseText>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: 'ScoreBoard',
+  components: { BaseText },
+  props: {
+    initialTime: {
+      type: Number,
+      default: 120
+    },
+    timerStatus: {
+      type: String,
+      default: 'stopped'
+    },
+    ringName: {
+      type: String,
+      required: true,
+      default: ''
+    },
+    directorName: {
+      type: String,
+      required: true
+    },
+    showClock: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      time: parseInt(this.initialTime),
+      timerInterval: null
+    };
+  },
+  watch: {
+    timerStatus(newStatus) {
+      if (newStatus === 'running') {
+        this.startTimer();
+      } else {
+        this.stopTimer();
+      }
+    },
+    initialTime(newTime) {
+      this.time = parseInt(newTime);
+    }
+  },
+  computed: {
+    formattedTime() {
+      const minutes = Math.floor(this.time / 60);
+      const seconds = this.time % 60;
+      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+    }
+  },
+  methods: {
+    startTimer() {
+      this.stopTimer(); // Ensure no duplicate timers
+      this.timerInterval = setInterval(() => {
+        if (this.time > 0) {
+          this.time--;
+        } else {
+          this.stopTimer();
+        }
+      }, 1000);
+    },
+    stopTimer() {
+      clearInterval(this.timerInterval);
+      this.timerInterval = null;
+    }
+  },
+  mounted() {
+    if (this.timerStatus === 'running') {
+      this.startTimer();
+    }
+  },
+  beforeDestroy() {
+    this.stopTimer();
+  }
+};
+</script>

package/src/stories/Organisms/ScoreBoardParts/FencerNameBar/FencerNameBar.stories.js

@@ -0,0 +1,43 @@
+import FencerNameBar from './FencerNameBar.vue';
+import getPoolsWithBouts from '../../../../mocks/getPoolsWithBouts.js';
+
+export default {
+    title: 'Organisms/ScoreBoardParts/FencerNameBar',
+    component: FencerNameBar,
+    tags: ['autodocs'],
+    args: {
+        bout: getPoolsWithBouts[0],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+    },
+    argTypes: {
+        bout: {
+            control: 'object'
+        },
+        hostingClubColors: {
+            control: 'object'
+        },
+    }
+};
+
+export const Default = {
+    args: {
+        bout: getPoolsWithBouts[1],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+};
+
+export const BlueAndGreen = {
+    args: {
+        bout: { "updateBout": { "TimerStatus": "stopped", "BoutId": 1944, "PoolId": 139, "EventId": 6, "Person1Id": 1, "Person2Id": 10, "Status": "Active", "Score1": 2, "Score2": 0, "Started": "2024-07-16T15:50:26.000Z", "Ended": null, "TimeLeft": 90, "CurrentPass": 3, "RoundLabel": null, "DEBoutId": null, "DENextBoutId": null, "RefereeId": null, "createdAt": "2024-07-16T15:49:16.000Z", "updatedAt": "2024-07-16T23:20:19.000Z", "Person1": { "PersonId": 1, "DisplayName": "Dave Smith", "ClubId": 4, "Images": [ { "ImageId": 7, "URL": "https://randomuser.me/api/portraits/men/22.jpg" } ], "Club": { "Name": "Guardians of the Guard", "Color1": "purple", "Color2": "orange" }, "EventPersons": [ { "DEPosition": null } ] }, "Person2": { "PersonId": 10, "DisplayName": "Melissa Jones", "ClubId": 4, "Images": [ { "ImageId": 21, "URL": "https://randomuser.me/api/portraits/women/9.jpg" } ], "Club": { "Name": "Guardians of the Guard" }, "EventPersons": [ { "DEPosition": null } ] } } },
+        hostingClubColors: {
+            Color1: 'blue',
+            Color2: 'green'
+        }
+    }
+};

package/src/stories/Organisms/ScoreBoardParts/FencerNameBar/FencerNameBar.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="flex w-full">
+    <FencerName
+        :fullName="bout.Person1.DisplayName"
+        :club="bout.Person1.Club.Name"
+        :assignedColor="hostingClubColors.Color1"
+        :fencer1="true"
+    />
+    <FencerName
+        :fullName="bout.Person2.DisplayName"
+        :club="bout.Person2.Club.Name"
+        :assignedColor="hostingClubColors.Color2"
+        :fencer1="false"
+    />
+  </div>
+</template>
+
+<script>
+import FencerName from '../../../Molecules/ScoreBoardSections/FencerName/FencerName.vue';
+
+export default {
+  name: 'FencerNameBar',
+  components: {
+    FencerName
+  },
+  props: {
+    bout: {
+      type: Object,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>

package/src/stories/Organisms/ScoreBoardParts/FencerPit/FencerPit.stories.js

@@ -0,0 +1,52 @@
+import FencerPit from './FencerPit.vue';
+import getPoolsWithBoutsByPoolId from '../../../../mocks/getPoolsWithBoutsByPoolId.js';
+
+export default {
+    title: 'Organisms/ScoreBoardParts/FencerPit',
+    component: FencerPit,
+    tags: ['autodocs'],
+    args: {
+        nextBouts: getPoolsWithBoutsByPoolId,
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    },
+    argTypes: {
+        fencer1FullName: {
+            control: 'text',
+        },
+        fencer2FullName: {
+            control: 'text',
+        },
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        nextBouts: getPoolsWithBoutsByPoolId,
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    },
+    parameters: {
+        backgrounds: {
+            default: 'dark'
+        }
+    }
+};
+
+// export const GreenAndOrange = {
+//     args: {
+//         bout: getPoolsWithBoutsByPoolId[0],
+//         hostingClubColors: {
+//             Color1: 'red',
+//             Color2: 'blue'
+//         }
+//     },
+// };

package/src/stories/Organisms/ScoreBoardParts/FencerPit/FencerPit.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="fencer-pit flex flex-col gap-4">
+    <div v-for="(bout, index) in limitedBouts" :key="index" class="flex justify-between">
+      <div class="flex flex-col w-1/2">
+        <div class="pl-2 -mt-4">
+          <BaseText size="md" color="secondary">{{pitText(index)}}</BaseText>
+        </div>
+        <div :class="getBackgroundColor(hostingClubColors.Color1)">
+          <BaseText size="4xl" weight="bold" color="secondary" class="p-2">{{bout.Person1?.DisplayName}}</BaseText>
+        </div>
+      </div>
+
+      <div class="flex flex-col w-1/2 text-right">
+        <div class="pr-2 -mt-4">
+          <BaseText size="md" color="secondary">{{pitText(index)}}</BaseText>
+        </div>
+        <div :class="getBackgroundColor(hostingClubColors.Color2)">
+          <BaseText size="4xl" weight="bold" color="secondary" class="p-2">{{bout.Person2?.DisplayName}}</BaseText>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: 'FencerPit',
+  components: {BaseText},
+  props: {
+    nextBouts: {
+      type: Array,
+      required: true,
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true,
+    }
+  },
+  computed: {
+    limitedBouts() {
+      return this.nextBouts.slice(0, 3);
+    },
+  },
+  methods: {
+    pitText(index) {
+      switch(index) {
+        case 0:
+          return 'On Deck';
+        case 1:
+          return 'In the Hole';
+        case 2:
+          return 'Preparing';
+        default:
+          return '';
+      }
+    },
+    getBackgroundColor(color) {
+      return `bg-${color}`;
+    },
+  },
+};
+</script>

package/src/stories/Organisms/ScoreBoardParts/ScoreBar/ScoreBar.stories.js

@@ -0,0 +1,58 @@
+import ScoreBar from './ScoreBar.vue';
+import getPoolsWithBoutsByPoolId from "../../../../mocks/getPoolsWithBoutsByPoolId.js";
+
+export default {
+    title: 'Organisms/ScoreBoardParts/ScoreBar',
+    component: ScoreBar,
+    tags: ['autodocs'],
+    args: {
+        bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+    },
+    argTypes: {
+        bout: {
+            control: 'object'
+        },
+        hostingClubColors: {
+            control: 'object'
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: 'dark'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: 'dark'
+        }
+    }
+};
+
+export const SecondCase = {
+    args: {
+        bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[1],
+        hostingClubColors: {
+            Color1: 'blue',
+            Color2: 'green'
+        },
+    },
+    parameters: {
+        backgrounds: {
+            default: 'black'
+        }
+    }
+};