@dcrackel/meyersquaredui 1.0.129 → 1.0.130

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/meyersquaredui",
   "private": false,
-  "version": "1.0.129",
+  "version": "1.0.130",
   "type": "module",
   "main": "dist/meyersquaredui.cjs.js",
   "module": "dist/meyersquaredui.esm.js",

package/src/stories/Organisms/Cards/BoutCard/BoutCard.stories.js

@@ -1,4 +1,4 @@
-import BoutCard from '../BoutCardMobile/BoutCardMobile.vue';
+import BoutCard from './BoutCard.vue';
 import getPoolsWithBouts from '../../../../mocks/getPoolsWithBouts.js';
 
 export default {

package/src/stories/Organisms/Cards/BoutCard/BoutCard.vue

@@ -1,5 +1,9 @@
 <template>
   <section>
+    <!-- Custom Status -->
+    <div v-if="bout.customStatus && status !== 'Active'" class="text-left">
+      <BaseText size="sm" color="primary">{{ bout.customStatus }}</BaseText>
+    </div>
     <div class="flex items-center justify-between rounded-lg w-full">
       <!-- Fencer 1 -->
       <div class="w-5/12 flex justify-between border-l border-t border-b p-2 bg-poolBox rounded-l-xl"
@@ -42,11 +46,6 @@
         </div>
       </div>
     </div>
-
-    <!-- Custom Status -->
-    <div v-if="bout.customStatus && status !== 'Active'" class="text-left">
-      <BaseText size="sm" color="primary">{{ bout.customStatus }}</BaseText>
-    </div>
   </section>
 </template>
 
@@ -93,6 +92,15 @@ export default {
   beforeDestroy() {
     this.stopTimer();
   },
+  watch: {
+    timerStatus(newStatus) {
+      if (newStatus === 'running') {
+        this.startTimer();
+      } else {
+        this.stopTimer();
+      }
+    }
+  },
   computed: {
     status() {
       return this.isWaiting ? 'waiting' : this.bout.Status;

package/src/stories/Organisms/Cards/BoutCardMobile/BoutCardMobile.vue

@@ -85,6 +85,15 @@ export default {
   beforeDestroy() {
     this.stopTimer();
   },
+  watch: {
+    timerStatus(newStatus) {
+      if (newStatus === 'running') {
+        this.startTimer();
+      } else {
+        this.stopTimer();
+      }
+    }
+  },
   computed: {
     status() {
       return this.isWaiting ? 'waiting' : this.bout.Status;

package/src/stories/Organisms/Grids/GridLivePool/GridLivePool.vue

@@ -10,8 +10,8 @@
         <BoutCardMobile v-if="isMobile" :bout="{}" :hostingClubColors="hostingClubColors" :isWaiting="true"/>
       </div>
       <div v-for="bout in activeBouts" :key="bout.BoutId" class="w-full md:w-3/4 md:my-4">
-        <BoutCard v-if="!isMobile" :bout="bout" :hostingClubColors="hostingClubColors" />
-        <BoutCardMobile v-if="isMobile" :bout="bout" :hostingClubColors="hostingClubColors" />
+        <BoutCard v-if="!isMobile" :bout="bout" :hostingClubColors="hostingClubColors" :timerStatus="bout.TimerStatus" />
+        <BoutCardMobile v-if="isMobile" :bout="bout" :hostingClubColors="hostingClubColors" :timerStatus="bout.TimerStatus" />
       </div>
     </div>
   </section>

package/src/stories/Organisms/Headers/TabHeader/TabHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full rounded-lg">
+  <div class="w-full rounded-t-lg">
     <!-- Tabs for Pools -->
     <div class="max-w-[1200px] md:w-full flex mx-2 md:mx-auto pl-4 bg-white rounded-tr-lg rounded-tl-lg">
       <span v-for="(tab, index) in tabs" :key="index">

package/src/stories/Organisms/HeroBanners/HomePage/HeroBanner.vue

@@ -6,7 +6,7 @@
     <!-- Center Content -->
     <div class="relative w-full md:border-b md:border-l md:border-r border-lineGrey">
       <!-- Non-Mobile Image -->
-      <img v-if="!isMobile" :src="imageSrc" alt="Hero Image" class="w-full h-full object-cover" />
+      <img v-if="!isMobile" :src="imageSrc" alt="Hero Image" class="w-full h-full object-cover" loading="lazy" />
 
       <!-- Text Overlay for Desktop -->
       <section class="hidden md:flex absolute inset-0 items-center justify-start px-8 mt-40">

package/src/stories/Organisms/HeroBanners/TournamentDetails/TournamentDetailsBanner.vue

@@ -6,7 +6,7 @@
     <!-- Main Content -->
     <div class="relative w-full md:border-b md:border-l md:border-r border-lineGrey">
       <!-- Background Image -->
-      <img v-if="!isMobile" :src="imageSrc" alt="Hero Image" class="w-full h-full object-cover object-top max-h-96"/>
+      <img v-if="!isMobile" :src="imageSrc" alt="Hero Image" class="w-full h-full object-cover object-top max-h-96" loading="lazy"/>
 
       <!-- Text Overlay for Desktop -->
       <section class="hidden w-full md:flex absolute inset-0 justify-between items-end">

package/src/stories/Organisms/HeroBanners/Tournaments/TournamentBanner.vue

@@ -3,7 +3,7 @@
     <div class="hidden md:block w-[150px] bg-primary border-b border-lineGrey flex-shrink-0"></div>
 
     <div class="relative w-full md:border-b md:border-l md:border-r border-lineGrey">
-      <img v-if="!isMobile" :src="imageSrc" alt="Hero Image" class="w-full h-full object-cover object-top max-h-96" />
+      <img v-if="!isMobile" :src="imageSrc" alt="Hero Image" class="w-full h-full object-cover object-top max-h-96" loading="lazy" />
 
       <section class="hidden md:flex absolute inset-0 items-center justify-start px-8 pt-32">
         <div class="text-left text-white max-w-lg">