@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -6,71 +6,72 @@
       <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
         <div class="flex space-x-4 items-center">
           <div class="relative">
-            <img :src="missingPortrait" alt="Placeholder portrait" class="w-12 h-12 rounded-full"/>
+            <img :src="missingPortrait" alt="Placeholder portrait" class="w-12 h-12 rounded-full" />
             <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} relative -mt-4 ml-9 z-10`"></div>
           </div>
           <div>
-            <BaseText text="Waiting to be selected" size="md" color="quaternary" weight="bold"/>
-            <BaseText text="starting soon" size="xs" color="quinary"/>
+            <BaseText text="Waiting to be selected" size="md" color="quaternary" weight="bold" />
+            <BaseText text="starting soon" size="xs" color="quinary" />
           </div>
         </div>
-        <BaseText text="" size="3xl" weight="bold" class="align-middle pr-3 pt-0.5"/>
+        <BaseText text="" size="3xl" weight="bold" class="align-middle pr-3 pt-0.5" />
       </div>
 
       <!-- Right placeholder -->
       <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
         <div class="flex justify-end space-x-4 ml-4 w-full">
           <div class="text-right">
-            <BaseText text="Waiting to be selected" size="md" color="quaternary" weight="bold"/>
-            <BaseText text="starting soon" size="xs" color="quinary"/>
+            <BaseText text="Waiting to be selected" size="md" color="quaternary" weight="bold" />
+            <BaseText text="starting soon" size="xs" color="quinary" />
           </div>
           <div class="relative">
-            <img :src="missingPortrait" alt="Placeholder portrait" class="w-12 h-12 rounded-full"/>
+            <img :src="missingPortrait" alt="Placeholder portrait" class="w-12 h-12 rounded-full" />
             <div :class="`w-4 h-4 rounded-full bg-${card.fencer2.colorDot} relative -mt-4 -ml-1 z-10`"></div>
           </div>
         </div>
       </div>
 
-      <section class="w-18 bg-primary">
-      </section>
+      <section class="w-18 bg-primary"></section>
     </div>
 
     <!-- Mobile -->
     <div class="flex md:hidden justify-between items-center p-4 border rounded-md bg-poolBox">
       <div class="relative flex flex-col items-center">
-        <img :src="missingPortrait" alt="Placeholder portrait" class="w-12 h-12 rounded-full"/>
+        <img :src="missingPortrait" alt="Placeholder portrait" class="w-12 h-12 rounded-full" />
         <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} relative -mt-4 ml-9 z-10`"></div>
       </div>
 
       <div class="text-center flex-1 mx-4">
-        <BaseText text="Select a Match!" size="md" color="quaternary" weight="bold"/>
-        <BaseText text="to get started" size="xs" color="quinary"/>
+        <BaseText text="Select a Match!" size="md" color="quaternary" weight="bold" />
+        <BaseText text="to get started" size="xs" color="quinary" />
       </div>
 
       <!-- right portrait -->
       <div class="relative w-12 h-12">
         <img :src="missingPortrait" alt="Portrait" class="w-12 h-12 rounded-full" />
-        <div :class="`absolute -mt-4 -right-1 w-4 h-4 rounded-full bg-${card.fencer2.colorDot} ring-2 ring-white`"></div>
+        <div
+          :class="`absolute -mt-4 -right-1 w-4 h-4 rounded-full bg-${card.fencer2.colorDot} ring-2 ring-white`"
+        ></div>
       </div>
     </div>
   </section>
 </template>
 
 <script>
-import BaseText from "../../../../../Atoms/Text/BaseText.vue";
-import missingPortrait from "../../../../../../assets/portrait1.png";
+import BaseText from '../../../../../Atoms/Text/BaseText.vue';
+import missingPortrait from '../../../../../../assets/portrait1.png';
 
 export default {
-  name: "BoutCardWaiting",
-  components: {BaseText },
+  name: 'BoutCardWaiting',
+  components: { BaseText },
   props: {
     card: {
       type: Object,
       required: true
-    },
+    }
   },
   data() {
     return { missingPortrait };
-  },
-};
-</script>
+  }
+};
+</script>

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

@@ -1,23 +1,20 @@
 import ClubCard from './ClubCard.vue';
-import getAllClubs from '../../../../mocks/getAllClubs.js'
+import getAllClubs from '../../../../mocks/getAllClubs.js';
 
 export default {
-    title: 'Organisms/Cards/ClubCard',
-    component: ClubCard,
-    tags: ['autodocs'],
-    args: {
-        detail: Object
-    },
-    argTypes: {
-        detail: getAllClubs[10]
-    },
+  title: 'Organisms/Cards/ClubCard',
+  component: ClubCard,
+  tags: ['autodocs'],
+  args: {
+    detail: Object
+  },
+  argTypes: {
+    detail: getAllClubs[10]
+  }
 };
 
-
 export const Default = {
-    args: {
-        detail: getAllClubs[9]
-    }
-}
-
-
+  args: {
+    detail: getAllClubs[9]
+  }
+};

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

@@ -1,43 +1,50 @@
 <template>
-  <div class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-white w-full hover:border-bright my-4"
-       @click="handleClick">
-    <div class="hidden md:flex mr-2 md:mr-4 border-r border-dropdownSelect h-12 md:h-14 md:w-10 w-2 items-center justify-center">
-    </div>
+  <div
+    class="flex items-center border border-dropdownSelect rounded-lg shadow-lg bg-white w-full hover:border-bright my-4"
+    @click="handleClick"
+  >
+    <div
+      class="hidden md:flex mr-2 md:mr-4 border-r border-dropdownSelect h-12 md:h-14 md:w-10 w-2 items-center justify-center"
+    ></div>
 
     <div class="p-2 md:p-0 w-20">
       <div v-if="!clubImage" class="w-10 h-10 md:w-14 md:h-10 rounded-lg bg-dropdownSelect"></div>
-      <img v-if="clubImage" :src="clubImage" alt="Club Logo" class="w-10 h-10 md:w-16 md:h-12 rounded-lg object-cover">
+      <img
+        v-if="clubImage"
+        :src="clubImage"
+        alt="Club Logo"
+        class="w-10 h-10 md:w-16 md:h-12 rounded-lg object-cover"
+      />
     </div>
 
     <div class="flex flex-col w-3/4 justify-start md:ml-4">
       <span class="w-full flex justify-start">
-        <BaseText :text="clubName" size="" color="quaternary" weight="bold" class="text-sm md:text-lg"/>
+        <BaseText :text="clubName" size="" color="quaternary" weight="bold" class="text-sm md:text-lg" />
       </span>
       <span class="w-full flex flex-col justify-start">
-        <BaseText :text="clubLocation" size="" color="quinary" weight="normal" class="text-xs md:text-md"/>
+        <BaseText :text="clubLocation" size="" color="quinary" weight="normal" class="text-xs md:text-md" />
       </span>
     </div>
 
     <section class="justify-end w-1/2 hidden md:flex mr-8">
       <div v-if="memberCount" class="flex flex-col items-center mr-4">
-        <BaseText :text="'Members'" size="xs" color="quinary" weight="normal"/>
-        <BaseText :text="memberCount" size="" color="quaternary" weight="bold" class="text-xs md:text-sm"/>
+        <BaseText :text="'Members'" size="xs" color="quinary" weight="normal" />
+        <BaseText :text="memberCount" size="" color="quaternary" weight="bold" class="text-xs md:text-sm" />
       </div>
       <div v-if="hostedTournaments" class="flex flex-col items-center">
-        <BaseText :text="'Hosted'" size="xs" color="quinary" weight="normal"/>
-        <BaseText :text="hostedTournaments" size="" color="quaternary" weight="bold" class="text-xs md:text-sm"/>
+        <BaseText :text="'Hosted'" size="xs" color="quinary" weight="normal" />
+        <BaseText :text="hostedTournaments" size="" color="quaternary" weight="bold" class="text-xs md:text-sm" />
       </div>
     </section>
   </div>
 </template>
 
-
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'ClubCard',
-  components: {BaseText},
+  components: { BaseText },
   emits: ['edit'],
   props: {
     detail: {
@@ -47,15 +54,15 @@ export default {
   },
   computed: {
     clubName() {
-      return this.detail?.Name ?? "Unknown Club";
+      return this.detail?.Name ?? 'Unknown Club';
     },
     clubLocation() {
       return this.detail?.Address?.Name
-          ? `${this.detail.Address.Name}, ${this.detail.Address.City}, ${this.detail.Address.State}`
-          : "Location Unknown";
+        ? `${this.detail.Address.Name}, ${this.detail.Address.City}, ${this.detail.Address.State}`
+        : 'Location Unknown';
     },
     clubImage() {
-      return this.detail?.Images?.[0]?.URL ?? "";
+      return this.detail?.Images?.[0]?.URL ?? '';
     },
     memberCount() {
       return this.detail?.MemberCount ?? 0;

package/src/stories/Organisms/Cards/Director/DirectorCard.stories.js

@@ -1,31 +1,31 @@
 import DirectorCard from './DirectorCard.vue';
-import getPoolsWithBoutsByPoolId from "../../../../mocks/getPoolsWithBoutsByPoolId.js";
+import getPoolsWithBoutsByPoolId from '../../../../mocks/getPoolsWithBoutsByPoolId.js';
 
 const hostingClubColors = {
-    Color1: 'red',
-    Color2: 'blue'
-}
+  Color1: 'red',
+  Color2: 'blue'
+};
 
 export default {
-    title: 'Organisms/Cards/DirectorCard',
-    component: DirectorCard,
-    tags: ['autodocs'],
-    args: {
-        eventRules: getPoolsWithBoutsByPoolId.event.EventRules,
-        bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
-        hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors,
-    },
-    argTypes: {
-        eventRules: { control: 'object' },
-        bout: { control: 'object' },
-        hostingClubColors: { control: 'object' },
-    },
+  title: 'Organisms/Cards/DirectorCard',
+  component: DirectorCard,
+  tags: ['autodocs'],
+  args: {
+    eventRules: getPoolsWithBoutsByPoolId.event.EventRules,
+    bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
+    hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors
+  },
+  argTypes: {
+    eventRules: { control: 'object' },
+    bout: { control: 'object' },
+    hostingClubColors: { control: 'object' }
+  }
 };
 
 export const Default = {
-    args: {
-        eventRules: getPoolsWithBoutsByPoolId.event.EventRules,
-        bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
-        hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors,
-    }
-};
+  args: {
+    eventRules: getPoolsWithBoutsByPoolId.event.EventRules,
+    bout: getPoolsWithBoutsByPoolId.pools[0].Bouts[0],
+    hostingClubColors: getPoolsWithBoutsByPoolId.hostingClubColors
+  }
+};

package/src/stories/Organisms/Cards/Director/DirectorCard.vue

@@ -1,61 +1,109 @@
 <template>
   <section>
-    <ScoreBox :fencer1="true"
-              :bout="localBout"
-              :hostingClubColors="hostingClubColors"
-              :maxScore="parseInt(maxPoints)"
-              :isCountingUp="isCountingUp"
-              :showHandShotCounterBox="showHandShotCounterBox"
-              :penaltiesReset="penaltiesReset"
-              @penalty:open="openPenaltyModal"
-              @update:Score="updateScore1"
-              @update:HandShotValue="updateHandShot1"
+    <ScoreBox
+      :fencer1="true"
+      :bout="localBout"
+      :hostingClubColors="hostingClubColors"
+      :maxScore="parseInt(maxPoints)"
+      :isCountingUp="isCountingUp"
+      :showHandShotCounterBox="showHandShotCounterBox"
+      :penaltiesReset="penaltiesReset"
+      @penalty:open="openPenaltyModal"
+      @update:Score="updateScore1"
+      @update:HandShotValue="updateHandShot1"
+    />
+    <TimerBox
+      v-if="showTimerBox"
+      :timeLeft="timeLeft"
+      :running="timerRunning"
+      :ringName="RingName"
+      @startPause="toggleTimer"
+      @adjustTime="adjustTime"
     />
-    <TimerBox v-if="showTimerBox"
-              :timeLeft="timeLeft"
-              :running="timerRunning"
-              :ringName="RingName"
-              @startPause="toggleTimer"
-              @adjustTime="adjustTime" />
 
     <PassesBox v-if="showPassesBox" :bout="localBout" :maxPasses="parseInt(maxPasses)" @update:passes="updatePasses" />
     <PenaltyConfirmationBox v-if="showPenaltyConfirmationBox" />
-    <ScoreBox :fencer1="false"
-              :bout="localBout"
-              :hostingClubColors="hostingClubColors"
-              :maxScore="parseInt(maxPoints)"
-              :isCountingUp="isCountingUp"
-              :showHandShotCounterBox="showHandShotCounterBox"
-              :penaltiesReset="penaltiesReset"
-              @penalty:open="openPenaltyModal"
-              @update:Score="updateScore2"
-              @update:HandShotValue="updateHandShot2"
+    <ScoreBox
+      :fencer1="false"
+      :bout="localBout"
+      :hostingClubColors="hostingClubColors"
+      :maxScore="parseInt(maxPoints)"
+      :isCountingUp="isCountingUp"
+      :showHandShotCounterBox="showHandShotCounterBox"
+      :penaltiesReset="penaltiesReset"
+      @penalty:open="openPenaltyModal"
+      @update:Score="updateScore2"
+      @update:HandShotValue="updateHandShot2"
     />
 
     <div class="w-11/12 mt-5 mx-6">
-      <BaseButton label="Submit" type="grayAndBlue" :selected="showSubmit" @buttonClick="submitBout"/>
+      <BaseButton label="Submit" type="grayAndBlue" :selected="showSubmit" @buttonClick="submitBout" />
     </div>
-    <PenaltyModal :fencer1="fencer1ForModal" :bout="bout" :eventRules="eventRules" :show="showPenaltyModal"
-                  @update:closeModal="handleCloseModal"
-                  @penalty:remove="handleRemovePenalty"
-                  @penalty:add="handleAddPenalty"
-                  @penalty:update="handleUpdatePenalty"
+    <PenaltyModal
+      :fencer1="fencer1ForModal"
+      :bout="bout"
+      :eventRules="eventRules"
+      :show="showPenaltyModal"
+      @update:closeModal="handleCloseModal"
+      @penalty:remove="handleRemovePenalty"
+      @penalty:add="handleAddPenalty"
+      @penalty:update="handleUpdatePenalty"
     />
   </section>
 </template>
 
 <script>
-import ScoreBox from "../../../Molecules/Boxes/BoutBoxes/ScoreBox/ScoreBox.vue";
-import TimerBox from "../../../Molecules/Boxes/BoutBoxes/TimerBox/TimerBox.vue";
-import PassesBox from "../../../Molecules/Boxes/BoutBoxes/PassesBox/PassesBox.vue";
-import BaseButton from "../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import PenaltyConfirmationBox from "../../../Molecules/Boxes/BoutBoxes/PenaltyConfirmationBox/PenaltyConfirmationBox.vue";
-import PenaltyModal from "../../../Molecules/Modals/PenaltyModal/PenaltyModal.vue";
+import ScoreBox from '../../../Molecules/Boxes/BoutBoxes/ScoreBox/ScoreBox.vue';
+import TimerBox from '../../../Molecules/Boxes/BoutBoxes/TimerBox/TimerBox.vue';
+import PassesBox from '../../../Molecules/Boxes/BoutBoxes/PassesBox/PassesBox.vue';
+import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import PenaltyConfirmationBox from '../../../Molecules/Boxes/BoutBoxes/PenaltyConfirmationBox/PenaltyConfirmationBox.vue';
+import PenaltyModal from '../../../Molecules/Modals/PenaltyModal/PenaltyModal.vue';
+
+const scoreReachedByDirection = {
+  true: (bout, maxPoints) => bout.Score1 === maxPoints || bout.Score2 === maxPoints,
+  false: bout => bout.Score1 === 0 || bout.Score2 === 0
+};
+
+const hasScoreReached = (bout, isCountingUp, maxPoints) =>
+  scoreReachedByDirection[String(isCountingUp)](bout, maxPoints);
+
+const submitAvailabilityRules = [
+  {
+    matches: ({ showTimerBox }) => showTimerBox,
+    resolve: ({ isTimeExpired, isScoreReached }) => isTimeExpired || isScoreReached
+  },
+  {
+    matches: ({ showPassesBox }) => showPassesBox,
+    resolve: ({ isLastPass, isScoreReached }) => isLastPass || isScoreReached
+  },
+  {
+    matches: () => true,
+    resolve: () => true
+  }
+];
+
+const getSubmitAvailability = context => {
+  if (context.isDoubleEliminationTie) return false;
+  return submitAvailabilityRules.find(rule => rule.matches(context)).resolve(context);
+};
+
+const clonePerson = person => {
+  if (!person) return person;
+  const eventPersons = (person.EventPersons || []).map(eventPerson => ({ ...eventPerson }));
+  return { ...person, EventPersons: eventPersons };
+};
+
+const cloneBout = bout => ({
+  ...(bout || {}),
+  Person1: clonePerson(bout?.Person1),
+  Person2: clonePerson(bout?.Person2)
+});
 
 export default {
-  name: "DirectorCard",
-  components: {PenaltyModal, PenaltyConfirmationBox, ScoreBox, TimerBox, PassesBox, BaseButton },
-  emits:["penalty:remove", "penalty:add", "penalty:update","submit:bout", "update:bout"],
+  name: 'DirectorCard',
+  components: { PenaltyModal, PenaltyConfirmationBox, ScoreBox, TimerBox, PassesBox, BaseButton },
+  emits: ['penalty:remove', 'penalty:add', 'penalty:update', 'submit:bout', 'update:bout'],
   props: {
     eventRules: Array,
     bout: Object,
@@ -67,19 +115,19 @@ export default {
       showPenaltyModal: false,
       showPenaltyConfirmationBox: false,
       fencer1ForModal: true,
-      localBout: { ...this.bout },
+      localBout: cloneBout(this.bout),
       isCountingUp: true,
       lastNote1: '',
       lastNote2: '',
       timeLeft: 180,
       timerRunning: false,
-      timerInterval: null,
-    }
+      timerInterval: null
+    };
   },
   mounted() {
     this.initTime();
     this.determineCountingDirection();
-    this.emitBout()
+    this.emitBout();
   },
   beforeUnmount() {
     clearInterval(this.timerInterval);
@@ -89,66 +137,74 @@ export default {
       return this.localBout.Pool?.RingName || 'Ring';
     },
     showPassesBox() {
-      return Array.isArray(this.eventRules) &&
-          !this.showPenaltyConfirmationBox && (
-              this.eventRules.some((n2) => n2.Rules.RuleName === "PoolNumOfPasses") ||
-              this.eventRules.some((n2) => n2.Rules.RuleName === "DENumOfPasses")
-          );
+      return (
+        Array.isArray(this.eventRules) &&
+        !this.showPenaltyConfirmationBox &&
+        (this.eventRules.some(n2 => n2.Rules.RuleName === 'PoolNumOfPasses') ||
+          this.eventRules.some(n2 => n2.Rules.RuleName === 'DENumOfPasses'))
+      );
     },
     showTimerBox() {
-      return Array.isArray(this.eventRules) &&
-          !this.showPenaltyConfirmationBox && (
-              this.eventRules.some((n2) => n2.Rules.RuleName === "PoolTime") ||
-              this.eventRules.some((n2) => n2.Rules.RuleName === "DETime")
-          );
+      return (
+        Array.isArray(this.eventRules) &&
+        !this.showPenaltyConfirmationBox &&
+        (this.eventRules.some(n2 => n2.Rules.RuleName === 'PoolTime') ||
+          this.eventRules.some(n2 => n2.Rules.RuleName === 'DETime'))
+      );
     },
     showHandShotCounterBox() {
-      return Array.isArray(this.eventRules) &&
-          this.eventRules.some((n2) => n2.Rules.RuleName === "CountHandshots" && n2.RuleValue === "true");
+      return (
+        Array.isArray(this.eventRules) &&
+        this.eventRules.some(n2 => n2.Rules.RuleName === 'CountHandshots' && n2.RuleValue === 'true')
+      );
     },
     penaltiesReset() {
-      return Array.isArray(this.eventRules) &&
-          this.eventRules.some((n2) => n2.Rules.RuleName === "PenaltiesReset" && n2.RuleValue === "true");
+      return (
+        Array.isArray(this.eventRules) &&
+        this.eventRules.some(n2 => n2.Rules.RuleName === 'PenaltiesReset' && n2.RuleValue === 'true')
+      );
     },
     maxPoints() {
       if (this.localBout.DEBoutId) {
-        const e = Array.isArray(this.eventRules) ? this.eventRules.find((t) => t.Rules.RuleName === "DEMaxPoints") : null;
+        const e = Array.isArray(this.eventRules) ? this.eventRules.find(t => t.Rules.RuleName === 'DEMaxPoints') : null;
         return e ? parseInt(e.RuleValue) : 7;
       }
 
-      const n2 = Array.isArray(this.eventRules) ? this.eventRules.find((e) => e.Rules.RuleName === "PoolMaxPoints") : null;
+      const n2 = Array.isArray(this.eventRules)
+        ? this.eventRules.find(e => e.Rules.RuleName === 'PoolMaxPoints')
+        : null;
       return n2 ? parseInt(n2.RuleValue) : 7;
     },
     maxPasses() {
       if (this.localBout.DEBoutId) {
-        const e = Array.isArray(this.eventRules) ? this.eventRules.find((t) => t.Rules.RuleName === "DEMaxPasses") : null;
+        const e = Array.isArray(this.eventRules) ? this.eventRules.find(t => t.Rules.RuleName === 'DEMaxPasses') : null;
         return e ? parseInt(e.RuleValue) : 7;
       }
 
-      const n2 = Array.isArray(this.eventRules) ? this.eventRules.find((e) => e.Rules.RuleName === "PoolNumOfPasses") : null;
+      const n2 = Array.isArray(this.eventRules)
+        ? this.eventRules.find(e => e.Rules.RuleName === 'PoolNumOfPasses')
+        : null;
       return n2 ? parseInt(n2.RuleValue) : 7;
-    },
+    }
   },
   methods: {
     initTime() {
       const saved = Number(this.bout?.TimeLeft);
       // use saved if > 0, otherwise default from rules
-      this.timeLeft = Number.isFinite(saved) && saved > 0
-          ? saved
-          : this.startTime(); // your DE/Pool rule lookup
+      this.timeLeft = Number.isFinite(saved) && saved > 0 ? saved : this.startTime(); // your DE/Pool rule lookup
     },
     startTime() {
       if (this.localBout.DEBoutId) {
-        const e = Array.isArray(this.eventRules) ? this.eventRules.find((t) => t.Rules.RuleName === "DETime") : null;
+        const e = Array.isArray(this.eventRules) ? this.eventRules.find(t => t.Rules.RuleName === 'DETime') : null;
         return e ? parseInt(e.RuleValue) : 180;
       }
 
-      const n2 = Array.isArray(this.eventRules) ? this.eventRules.find((e) => e.Rules.RuleName === "PoolTime") : null;
+      const n2 = Array.isArray(this.eventRules) ? this.eventRules.find(e => e.Rules.RuleName === 'PoolTime') : null;
       return n2 ? parseInt(n2.RuleValue) : 180;
     },
     determineCountingDirection() {
       if (Array.isArray(this.eventRules)) {
-        const rule = this.eventRules.find(rule => rule.Rules.RuleName === "PoolScoreDirection");
+        const rule = this.eventRules.find(rule => rule.Rules.RuleName === 'PoolScoreDirection');
         this.isCountingUp = rule ? rule.RuleValue === 'true' : true;
       }
     },
@@ -209,25 +265,26 @@ export default {
       this.emitBout();
     },
     emitBout() {
-      this.localBout.TimeLeft = this.timeLeft;
-      if (!this.localBout.Started) this.localBout.Started = new Date().toISOString();
-
-      const isScoreReached = this.isCountingUp ? (this.localBout.Score1 === this.maxPoints || this.localBout.Score2 === this.maxPoints)
-          : (this.localBout.Score1 === 0 || this.localBout.Score2 === 0);
+      const updatedBout = {
+        ...this.localBout,
+        TimeLeft: this.timeLeft,
+        Started: this.localBout.Started || new Date().toISOString(),
+        IsCountingUp: this.isCountingUp,
+        ShowTimerBox: this.showTimerBox,
+        MaxPoints: this.maxPoints
+      };
+      const context = {
+        showPassesBox: this.showPassesBox,
+        showTimerBox: this.showTimerBox,
+        isScoreReached: hasScoreReached(updatedBout, this.isCountingUp, this.maxPoints),
+        isTimeExpired: updatedBout.TimeLeft === 0,
+        isLastPass: updatedBout.CurrentPass === this.maxPasses - 1,
+        isDoubleEliminationTie: Boolean(updatedBout.RoundLabel) && updatedBout.Score1 === updatedBout.Score2
+      };
 
-      const isTimeExpired = this.localBout.TimeLeft === 0;
-      const isLastPass = this.localBout.CurrentPass === this.maxPasses - 1;
-
-      if (this.showPassesBox) this.showSubmit = isLastPass || isScoreReached;
-      if (this.showTimerBox) this.showSubmit = isTimeExpired || isScoreReached;
-      if (!this.showPassesBox && !this.showTimerBox) this.showSubmit = true;
-      if (this.localBout.Score1 === this.localBout.Score2 && this.isDoubleElimination()) this.showSubmit = false;
-      //display optoins
-      this.localBout.IsCountingUp = this.isCountingUp;
-      this.localBout.ShowTimerBox = this.showTimerBox;
-      this.localBout.MaxPoints = this.maxPoints;
-
-      this.$emit('update:bout', this.localBout);
+      this.localBout = updatedBout;
+      this.showSubmit = getSubmitAvailability(context);
+      this.$emit('update:bout', { ...updatedBout });
     },
     isDoubleElimination() {
       return this.localBout.RoundLabel;
@@ -237,19 +294,16 @@ export default {
       this.showPenaltyModal = true;
     },
     preparePenalty(penalty, fencer1) {
-      const updatedPenalty = penalty.penalty;
-      updatedPenalty.BoutId = this.localBout.BoutId;
-      updatedPenalty.EventId = this.localBout.EventId;
-
-      if (fencer1) {
-        this.localBout.Person1.EventPersons[0].LastNote = updatedPenalty.Notes;
-        updatedPenalty.PersonId = this.localBout.Person1Id;
-      } else {
-        this.localBout.Person2.EventPersons[0].LastNote = updatedPenalty.Notes;
-        updatedPenalty.PersonId = this.localBout.Person2Id;
-      }
+      const eventPerson = fencer1 ? this.localBout.Person1.EventPersons[0] : this.localBout.Person2.EventPersons[0];
+      const personId = fencer1 ? this.localBout.Person1Id : this.localBout.Person2Id;
+      eventPerson.LastNote = penalty.penalty.Notes;
 
-      return updatedPenalty;
+      return {
+        ...penalty.penalty,
+        BoutId: this.localBout.BoutId,
+        EventId: this.localBout.EventId,
+        PersonId: personId
+      };
     },
     handleUpdatePenalty(penalty) {
       const updatedPenalty = this.preparePenalty(penalty, penalty.fencer1);
@@ -267,9 +321,11 @@ export default {
       this.showPenaltyModal = false;
     },
     handleRemovePenalty(penalty) {
-      penalty.BoutId = this.localBout.BoutId;
-      penalty.EventId = this.localBout.EventId;
-      this.$emit('penalty:remove', penalty);
+      this.$emit('penalty:remove', {
+        ...penalty,
+        BoutId: this.localBout.BoutId,
+        EventId: this.localBout.EventId
+      });
     }
   },
   beforeDestroy() {