@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Molecules/Boxes/BoutBoxes/ScoreBox/ScoreBox.stories.js

@@ -1,113 +1,113 @@
 import ScoreBox from './ScoreBox.vue';
-import getPoolsWithBouts from "../../../../../mocks/getPoolsWithBouts.js";
+import getPoolsWithBouts from '../../../../../mocks/getPoolsWithBouts.js';
 
 export default {
-    title: 'Molecules/Boxes/BoutBoxes/ScoreBox',
-    component: ScoreBox,
-    tags: ['autodocs'],
-    args: {
-        fencer1: true,
-        bout: getPoolsWithBouts[0],
-        screenHeight: 800,
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        maxScore: 7
+  title: 'Molecules/Boxes/BoutBoxes/ScoreBox',
+  component: ScoreBox,
+  tags: ['autodocs'],
+  args: {
+    fencer1: true,
+    bout: getPoolsWithBouts[0],
+    screenHeight: 800,
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
     },
-    argTypes: {
-        fencer1: {
-            control: 'boolean'
-        },
-        bout: {
-            control: 'object'
-        },
-        screenHeight: {
-            control: 'number'
-        },
-        hostingClubColors: {
-            control: 'object'
-        },
-        maxScore: {
-            control: 'number'
-        }
+    maxScore: 7
+  },
+  argTypes: {
+    fencer1: {
+      control: 'boolean'
+    },
+    bout: {
+      control: 'object'
+    },
+    screenHeight: {
+      control: 'number'
+    },
+    hostingClubColors: {
+      control: 'object'
+    },
+    maxScore: {
+      control: 'number'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        fencer1: true,
-        bout: getPoolsWithBouts[0],
-        screenHeight: 800,
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        maxScore: 7
-    }
+  args: {
+    fencer1: true,
+    bout: getPoolsWithBouts[0],
+    screenHeight: 800,
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
+    },
+    maxScore: 7
+  }
 };
 
 export const Fencer2 = {
-    args: {
-        fencer1: false,
-        match: getPoolsWithBouts[0],
-        screenHeight: 800,
-        hostingClubColors: {
-            Color1: 'red',
-            Color2: 'blue'
-        },
-        maxScore: 7
-    }
+  args: {
+    fencer1: false,
+    match: getPoolsWithBouts[0],
+    screenHeight: 800,
+    hostingClubColors: {
+      Color1: 'red',
+      Color2: 'blue'
+    },
+    maxScore: 7
+  }
 };
 
 export const Fencer1green = {
-    args: {
-        fencer1: true,
-        match: getPoolsWithBouts[1],
-        screenHeight: 800,
-        hostingClubColors: {
-            Color1: 'green',
-            Color2: 'purple'
-        },
-        maxScore: 7
-    }
+  args: {
+    fencer1: true,
+    match: getPoolsWithBouts[1],
+    screenHeight: 800,
+    hostingClubColors: {
+      Color1: 'green',
+      Color2: 'purple'
+    },
+    maxScore: 7
+  }
 };
 
 export const Fencer2purple = {
-    args: {
-        fencer1: false,
-        match: getPoolsWithBouts[1],
-        screenHeight: 800,
-        hostingClubColors: {
-            Color1: 'green',
-            Color2: 'purple'
-        },
-        maxScore: 7
-    }
+  args: {
+    fencer1: false,
+    match: getPoolsWithBouts[1],
+    screenHeight: 800,
+    hostingClubColors: {
+      Color1: 'green',
+      Color2: 'purple'
+    },
+    maxScore: 7
+  }
 };
 
 export const CufcRose = {
-    args: {
-        fencer1: true,
-        match: getPoolsWithBouts[2],
-        screenHeight: 800,
-        hostingClubColors: {
-            Color1: 'rose',
-            Color2: 'navy'
-        },
-        maxScore: 7
-    }
+  args: {
+    fencer1: true,
+    match: getPoolsWithBouts[2],
+    screenHeight: 800,
+    hostingClubColors: {
+      Color1: 'rose',
+      Color2: 'navy'
+    },
+    maxScore: 7
+  }
 };
 
 export const CufcNavy = {
-    args: {
-        fencer1: false,
-        match: getPoolsWithBouts[3],
-        screenHeight: 800,
-        hostingClubColors: {
-            Color1: 'rose',
-            Color2: 'navy'
-        },
-        maxScore: 7
-    }
-};
+  args: {
+    fencer1: false,
+    match: getPoolsWithBouts[3],
+    screenHeight: 800,
+    hostingClubColors: {
+      Color1: 'rose',
+      Color2: 'navy'
+    },
+    maxScore: 7
+  }
+};

package/src/stories/Molecules/Boxes/BoutBoxes/ScoreBox/ScoreBox.vue

@@ -1,8 +1,8 @@
 <template>
   <section class="w-full">
     <div
-        class="w-full md:w-11/12 flex flex-col bg-neutral mx-auto rounded-xl shadow-lg drop-shadow border-2"
-        :class="[
+      class="w-full md:w-11/12 flex flex-col bg-neutral mx-auto rounded-xl shadow-lg drop-shadow border-2"
+      :class="[
         fencer1
           ? `border-${hostingClubColors.Color1.toLowerCase()}`
           : `border-${hostingClubColors.Color2.toLowerCase()}`,
@@ -11,12 +11,16 @@
     >
       <div class="w-full rounded-t-xl flex flex-row justify-between pt-2">
         <div class="absolute left-0 flex ml-2">
-          <BaseIcon v-for="index in countYellowCards" icon-name="fa-circle-small" size="md" color="gold" class="mr-1"/>
-          <BaseIcon v-for=" index in countRedCards" icon-name="fa-circle-small" size="md" color="red" class="mr-1"/>
+          <BaseIcon v-for="index in countYellowCards" icon-name="fa-circle-small" size="md" color="gold" class="mr-1" />
+          <BaseIcon v-for="index in countRedCards" icon-name="fa-circle-small" size="md" color="red" class="mr-1" />
         </div>
         <div class="w-full text-center">
-          <BaseText :text="fencer1 ? bout.Person1.DisplayName : bout.Person2.DisplayName" size="xl" weight="bold"
-                    color="primaryHighlight"/>
+          <BaseText
+            :text="fencer1 ? bout.Person1.DisplayName : bout.Person2.DisplayName"
+            size="xl"
+            weight="bold"
+            color="primaryHighlight"
+          />
         </div>
         <div class="text-quaternary text-sm pr-3 pt-0.5 flex" @click="$emit('open-report')">
           <i class="fa-solid fa-cards-blank pr-2" @click="openPenaltyModal"></i>
@@ -24,43 +28,58 @@
         </div>
       </div>
       <div class="flex flex-row w-full justify-center">
-        <BaseText :text="lastNote" size="sm" color="primaryHighlight"/>
+        <BaseText :text="lastNote" size="sm" color="primaryHighlight" />
       </div>
       <div class="w-full flex flex-row justify-around text-center px-4 pt-2">
         <div class="pt-1 w-1/4" @click="minus">
-          <BaseIcon :icon-name="isCountingUp ? 'fa-square-minus' : 'fa-square-plus'" size="5xl" :color="computedColor"
-                    hover="quaternary" :disabled="baseScore <= 0"/>
+          <BaseIcon
+            :icon-name="isCountingUp ? 'fa-square-minus' : 'fa-square-plus'"
+            size="5xl"
+            :color="computedColor"
+            hover="quaternary"
+            :disabled="baseScore <= 0"
+          />
         </div>
         <div class="flex flex-row w-1/2 justify-center">
           <div class="text-5xl text-bluegray font-bold">
-            <BaseText :text="currentScore" size="5xl" weight="bold" color="primary"/>
+            <BaseText :text="currentScore" size="5xl" weight="bold" color="primary" />
           </div>
         </div>
         <div class="pt-1 w-1/4" @click="plus">
-          <BaseIcon :icon-name="isCountingUp ? 'fa-square-plus' : 'fa-square-minus'" size="5xl" :color="computedColor"
-                    hover="quaternary" :disabled="baseScore >= maxScore"/>
+          <BaseIcon
+            :icon-name="isCountingUp ? 'fa-square-plus' : 'fa-square-minus'"
+            size="5xl"
+            :color="computedColor"
+            hover="quaternary"
+            :disabled="baseScore >= maxScore"
+          />
         </div>
       </div>
       <div class="w-full flex flex-col justify-around text-center px-4 pb-6">
         <div v-if="screenHeight > 740" class="mt-2">
-          <BaseText :text="fencer1 ? bout.Person1.Club.Name : bout.Person2.Club.Name" size="md" color="quinary"/>
+          <BaseText :text="fencer1 ? bout.Person1.Club.Name : bout.Person2.Club.Name" size="md" color="quinary" />
         </div>
       </div>
-      <HandshotCounterBox v-if="showHandShotCounterBox" :handShotValue="getHandShotValue" :fencer1="fencer1"
-                          :hostingClubColors="hostingClubColors" @update:HandShotValue="emitHandShotValue"/>
+      <HandshotCounterBox
+        v-if="showHandShotCounterBox"
+        :handShotValue="getHandShotValue"
+        :fencer1="fencer1"
+        :hostingClubColors="hostingClubColors"
+        @update:HandShotValue="emitHandShotValue"
+      />
     </div>
   </section>
 </template>
 
 <script>
-import BaseText from "../../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../../Atoms/Icon/BaseIcon.vue";
-import HandshotCounterBox from "../../../../Molecules/Boxes/BoutBoxes/HandshotCounterBox/HandshotCounterBox.vue";
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../../Atoms/Icon/BaseIcon.vue';
+import HandshotCounterBox from '../../../../Molecules/Boxes/BoutBoxes/HandshotCounterBox/HandshotCounterBox.vue';
 
 export default {
   name: 'ScoreBox',
-  components: {BaseIcon, BaseText, HandshotCounterBox},
-  emits: ['penalty:open', 'update:Score', 'update:HandShotValue','open-report'],
+  components: { BaseIcon, BaseText, HandshotCounterBox },
+  emits: ['penalty:open', 'update:Score', 'update:HandShotValue', 'open-report'],
   props: {
     fencer1: {
       type: Boolean,
@@ -103,15 +122,15 @@ export default {
   data() {
     return {
       baseScore: this.fencer1 ? this.bout.Score1 : this.bout.Score2
-    }
+    };
   },
   computed: {
     lastNote() {
       const eventPersons = this.fencer1 ? this.bout.Person1?.EventPersons : this.bout.Person2?.EventPersons;
       if (eventPersons && eventPersons.length > 0) {
-        return eventPersons[0].LastNote ?? "";
+        return eventPersons[0].LastNote ?? '';
       }
-      return "";
+      return '';
     },
     currentScore() {
       if (!this.isCountingUp) {
@@ -129,9 +148,9 @@ export default {
         return 0;
       }
       if (!this.penaltiesReset) {
-        return penalties.filter((t3) => t3.PenaltyType === "Yellow").length;
+        return penalties.filter(t3 => t3.PenaltyType === 'Yellow').length;
       }
-      return penalties.filter((t3) => t3.PenaltyType === "Yellow" && t3.BoutId === this.bout.BoutId).length;
+      return penalties.filter(t3 => t3.PenaltyType === 'Yellow' && t3.BoutId === this.bout.BoutId).length;
     },
     countRedCards() {
       const penalties = this.fencer1 ? this.bout.Person1.Penalties : this.bout.Person2.Penalties;
@@ -139,9 +158,9 @@ export default {
         return 0;
       }
       if (this.penaltiesReset) {
-        return penalties.filter((t3) => t3.PenaltyType === "Red").length;
+        return penalties.filter(t3 => t3.PenaltyType === 'Red').length;
       }
-      return penalties.filter((t3) => t3.PenaltyType === "Red" && t3.BoutId === this.bout.BoutId).length;
+      return penalties.filter(t3 => t3.PenaltyType === 'Red' && t3.BoutId === this.bout.BoutId).length;
     },
     getHandShotValue() {
       const personId = this.fencer1 ? this.bout.Person1Id : this.bout.Person2Id;
@@ -153,24 +172,24 @@ export default {
     minus() {
       if (this.baseScore > 0) {
         this.baseScore--;
-        this.emitScore(this.baseScore)
+        this.emitScore(this.baseScore);
       }
     },
     plus() {
       if (this.baseScore < this.maxScore) {
         this.baseScore++;
-        this.emitScore(this.baseScore)
+        this.emitScore(this.baseScore);
       }
     },
     emitScore(score) {
-      this.$emit('update:Score', score)
+      this.$emit('update:Score', score);
     },
     emitHandShotValue(value) {
-      this.$emit('update:HandShotValue', value)
+      this.$emit('update:HandShotValue', value);
     },
     openPenaltyModal() {
       this.$emit('penalty:open', this.fencer1);
     }
   }
-}
+};
 </script>

package/src/stories/Molecules/Boxes/BoutBoxes/TimerBox/TimerBox.stories.js

@@ -1,39 +1,39 @@
 import TimerBox from './TimerBox.vue';
 
 export default {
-    title: 'Molecules/Boxes/BoutBoxes/TimerBox',
-    component: TimerBox,
-    tags: ['autodocs'],
-    args: {
-        initialTime: 120 // Default to 5 minutes
-    },
-    argTypes: {
-        initialTime: {
-            control: 'number'
-        }
+  title: 'Molecules/Boxes/BoutBoxes/TimerBox',
+  component: TimerBox,
+  tags: ['autodocs'],
+  args: {
+    initialTime: 120 // Default to 5 minutes
+  },
+  argTypes: {
+    initialTime: {
+      control: 'number'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        initialTime: 120,
-        ringName: 'Ring 1 - Pool 1',
-        showSubmit: true
-    }
+  args: {
+    initialTime: 120,
+    ringName: 'Ring 1 - Pool 1',
+    showSubmit: true
+  }
 };
 
 export const OneMinute = {
-    args: {
-        initialTime: 60,
-        ringName: 'Ring 1 - Pool 2',
-        showSubmit: false,
-    }
+  args: {
+    initialTime: 60,
+    ringName: 'Ring 1 - Pool 2',
+    showSubmit: false
+  }
 };
 
 export const TenSeconds = {
-    args: {
-        initialTime: 10,
-        ringName: 'Ring 2 - Pool 2',
-        showSubmit: true
-    }
+  args: {
+    initialTime: 10,
+    ringName: 'Ring 2 - Pool 2',
+    showSubmit: true
+  }
 };

package/src/stories/Molecules/Boxes/BoutBoxes/TimerBox/TimerBox.vue

@@ -1,12 +1,27 @@
 <template>
-  <section class="mt-4 py-4 md:mt-4 md:py-6 w-11/12 flex flex-col bg-white mx-auto rounded-2xl shadow-md border border-dropdownSelect">
+  <section
+    class="mt-4 py-4 md:mt-4 md:py-6 w-11/12 flex flex-col bg-white mx-auto rounded-2xl shadow-md border border-dropdownSelect"
+  >
     <div class="w-full flex flex-row justify-around text-center px-4">
-
       <!-- Adjust Time by 10 seconds -->
       <div class="pt-1 flex flex-col">
-        <BaseIcon icon-name="fa-square-chevron-up" size="5xl" color="quaternary" @click="$emit('adjustTime', 10)" class="hover:text-quaternaryHighlight"  />
-        <div class="bg-gridBoxHeader rounded-lg h-12 flex items-center justify-center"><BaseText text="10" size="xl" color="quaternary" /></div>
-        <BaseIcon icon-name="fa-square-chevron-down" size="5xl" color="quaternary" @click="$emit('adjustTime', -10)" class="hover:text-quaternaryHighlight"  />
+        <BaseIcon
+          icon-name="fa-square-chevron-up"
+          size="5xl"
+          color="quaternary"
+          @click="$emit('adjustTime', 10)"
+          class="hover:text-quaternaryHighlight"
+        />
+        <div class="bg-gridBoxHeader rounded-lg h-12 flex items-center justify-center">
+          <BaseText text="10" size="xl" color="quaternary" />
+        </div>
+        <BaseIcon
+          icon-name="fa-square-chevron-down"
+          size="5xl"
+          color="quaternary"
+          @click="$emit('adjustTime', -10)"
+          class="hover:text-quaternaryHighlight"
+        />
       </div>
 
       <!-- Timer Display and Controls -->
@@ -15,23 +30,43 @@
           <BaseText :text="ringName" size="xl" :color="running ? 'alarmText' : 'quaternary'" weight="bold" />
         </div>
         <BaseText :text="formattedTime" size="5xl" weight="bold" :color="running ? 'alarmText' : 'quaternary'" />
-        <BaseButton :label="running ? 'Pause' : 'Start'" type="playPause" :selected="running" size="xl" @buttonClick="$emit('startPause')" />
+        <BaseButton
+          :label="running ? 'Pause' : 'Start'"
+          type="playPause"
+          :selected="running"
+          size="xl"
+          @buttonClick="$emit('startPause')"
+        />
       </section>
 
       <!-- Adjust Time by 1 second -->
       <div class="pt-1 flex flex-col">
-        <BaseIcon icon-name="fa-square-chevron-up" size="5xl" color="quaternary" @click="$emit('adjustTime', 1)" class="hover:text-quaternaryHighlight"  />
-        <div class="bg-gridBoxHeader rounded-lg h-12 flex items-center justify-center"><BaseText text="1" size="xl" color="quaternary" /></div>
-        <BaseIcon icon-name="fa-square-chevron-down" size="5xl" color="quaternary" @click="$emit('adjustTime', -1)" class="hover:text-quaternaryHighlight"  />
+        <BaseIcon
+          icon-name="fa-square-chevron-up"
+          size="5xl"
+          color="quaternary"
+          @click="$emit('adjustTime', 1)"
+          class="hover:text-quaternaryHighlight"
+        />
+        <div class="bg-gridBoxHeader rounded-lg h-12 flex items-center justify-center">
+          <BaseText text="1" size="xl" color="quaternary" />
+        </div>
+        <BaseIcon
+          icon-name="fa-square-chevron-down"
+          size="5xl"
+          color="quaternary"
+          @click="$emit('adjustTime', -1)"
+          class="hover:text-quaternaryHighlight"
+        />
       </div>
     </div>
   </section>
 </template>
 
 <script>
-import BaseText from "../../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../../Atoms/Icon/BaseIcon.vue";
-import BaseButton from "../../../Buttons/BaseButton/BaseButton.vue";
+import BaseText from '../../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../../Atoms/Icon/BaseIcon.vue';
+import BaseButton from '../../../Buttons/BaseButton/BaseButton.vue';
 
 export default {
   name: 'TimerBox',

package/src/stories/Molecules/Boxes/CounterBox/CounterBox.stories.js

@@ -1,29 +1,29 @@
 import CounterBox from './CounterBox.vue';
 
 export default {
-    title: 'Molecules/Boxes/CounterBox',
-    component: CounterBox,
-    tags: ['autodocs'],
-    args: {
-        count: 0,
-    },
-    argTypes: {
-        count: { control: { type: 'number' } },
-    },
+  title: 'Molecules/Boxes/CounterBox',
+  component: CounterBox,
+  tags: ['autodocs'],
+  args: {
+    count: 0
+  },
+  argTypes: {
+    count: { control: { type: 'number' } }
+  }
 };
 
 export const Default = {
-    args: {
-        count: 0,
-        label: 'Counter',
-        recommended: 3
-    },
+  args: {
+    count: 0,
+    label: 'Counter',
+    recommended: 3
+  }
 };
 
 export const WithInitialCount = {
-    args: {
-        count: 2,
-        label: 'Pool num',
-        recommended: 4
-    },
+  args: {
+    count: 2,
+    label: 'Pool num',
+    recommended: 4
+  }
 };