@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -2,97 +2,97 @@ import TableauBoutCard from './TableauBoutCard.vue';
 import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
 
 export default {
-    title: 'Organisms/Cards/TableauBoutCard',
-    component: TableauBoutCard,
-    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
+  title: 'Organisms/Cards/TableauBoutCard',
+  component: TableauBoutCard,
+  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'
     },
-    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'
-        }
+    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
-    }
+  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
-    }
+  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
-    }
+  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
-    }
+  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
-    }
+  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/Cards/TableauBoutCard/TableauBoutCard.test.js

@@ -0,0 +1,44 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import TableauBoutCard from './TableauBoutCard.vue';
+
+const createBout = status => ({
+  BoutId: 42,
+  Status: status,
+  Score1: 4,
+  Score2: 3,
+  Person1: { PersonId: 1, DisplayName: 'Fencer One', EventPersons: [] },
+  Person2: { PersonId: 2, DisplayName: 'Fencer Two', EventPersons: [] }
+});
+
+const mountCard = bout =>
+  shallowMount(TableauBoutCard, {
+    props: {
+      bout,
+      hostingClubColors: {},
+      roundName: 'Final',
+      bracketSize: 'Final'
+    }
+  });
+
+describe('TableauBoutCard selection', () => {
+  it('emits directing intent for a scheduled bout', async () => {
+    const bout = createBout('Scheduled');
+    const wrapper = mountCard(bout);
+
+    await wrapper.find('section section').trigger('click');
+
+    expect(wrapper.emitted('action:directingBout')).toEqual([[bout]]);
+    expect(wrapper.emitted('action:editBout')).toBeUndefined();
+  });
+
+  it('emits editing intent for a completed bout', async () => {
+    const bout = createBout('Completed');
+    const wrapper = mountCard(bout);
+
+    await wrapper.find('section section').trigger('click');
+
+    expect(wrapper.emitted('action:editBout')).toEqual([[bout]]);
+    expect(wrapper.emitted('action:directingBout')).toBeUndefined();
+  });
+});

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

@@ -1,18 +1,22 @@
 <template>
   <section :class="getTopSpace">
-    <div v-if="roundName === 'Third Place'" class="flex justify-center border-b mb-4 mt-8" :class="large ? 'w-72': 'w-40'">
-      <BaseText :text="roundName" size="sm" color="quaternary"/>
+    <div
+      v-if="roundName === 'Third Place'"
+      class="flex justify-center border-b mb-4 mt-8"
+      :class="large ? 'w-72' : 'w-40'"
+    >
+      <BaseText :text="roundName" size="sm" color="quaternary" />
     </div>
-    <div v-if="roundName === 'Final'" class="flex justify-center border-b mb-4 mt-0" :class="large ? 'w-72': 'w-40'">
-      <BaseText :text="roundName" size="sm" color="quaternary"/>
+    <div v-if="roundName === 'Final'" class="flex justify-center border-b mb-4 mt-0" :class="large ? 'w-72' : 'w-40'">
+      <BaseText :text="roundName" size="sm" color="quaternary" />
     </div>
-    <div v-if="showGrandFinal" class="flex justify-center border-b mb-4 mt-0" :class="large ? 'w-72': 'w-40'">
-      <BaseText :text="roundName" size="sm" color="quaternary"/>
+    <div v-if="showGrandFinal" class="flex justify-center border-b mb-4 mt-0" :class="large ? 'w-72' : 'w-40'">
+      <BaseText :text="roundName" size="sm" color="quaternary" />
     </div>
     <!-- Replacement headers for finals -->
     <div v-if="roundName !== 'Grand Final' || showGrandFinal">
-    <section @click="handleBoutClick(bout)" >
-      <TableauFencerCard
+      <section @click="handleBoutClick(bout)">
+        <TableauFencerCard
           :fencer="person1Display"
           :score="score1"
           :position="dePosition1"
@@ -23,13 +27,13 @@
           :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
           :faded="shouldFade(bout, true)"
           @action:highLight="handleHighlight"
-      />
-    </section>
-    <!-- Card break -->
-    <div :class="getCardSpace"></div>
-    <!-- Card break -->
-    <section @click="handleBoutClick(bout)">
-      <TableauFencerCard
+        />
+      </section>
+      <!-- Card break -->
+      <div :class="getCardSpace"></div>
+      <!-- Card break -->
+      <section @click="handleBoutClick(bout)">
+        <TableauFencerCard
           :fencer="person2Display"
           :score="score2"
           :position="dePosition2"
@@ -40,17 +44,47 @@
           :isCountingBackwardsMaxScore="isCountingBackwardsMaxScore"
           :faded="shouldFade(bout, false)"
           @action:highLight="handleHighlight"
-      />
-    </section>
+        />
+      </section>
     </div>
   </section>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 import TableauFencerCard from '../TableauFencerCard/TableauFencerCard.vue';
 import { spacingConfig } from './SpacingConfig';
 
+const scoreColorRulesByFencer = {
+  true: [
+    {
+      matches: bout => bout.Person1.DisplayName !== 'BYE' && bout.Person2.DisplayName === 'BYE',
+      color: 'bg-winGreen'
+    },
+    { matches: bout => bout.Score1 > bout.Score2, color: 'bg-winGreen' },
+    {
+      matches: bout => bout.Score1 < bout.Score2 && bout.Status === 'Active',
+      color: 'bg-lossRed'
+    }
+  ],
+  false: [
+    {
+      matches: bout => bout.Person2.DisplayName !== 'BYE' && bout.Person1.DisplayName === 'BYE',
+      color: 'bg-winGreen'
+    },
+    { matches: bout => bout.Score2 > bout.Score1, color: 'bg-winGreen' },
+    {
+      matches: bout => bout.Score2 < bout.Score1 && bout.Status === 'Active',
+      color: 'bg-lossRed'
+    }
+  ]
+};
+
+const getMatchingScoreColor = (bout, isPerson1) => {
+  const matchingRule = scoreColorRulesByFencer[String(isPerson1)].find(rule => rule.matches(bout));
+  return matchingRule?.color || 'bg-dropdownSelect';
+};
+
 export default {
   name: 'TableauBoutCard',
   emits: ['action:directingBout', 'action:editBout'],
@@ -110,55 +144,32 @@ export default {
     handleBoutClick(bout) {
       if (bout.Status === 'Completed') {
         this.$emit('action:editBout', bout);
-      } else {
-        this.$emit('action:directingBout', bout);
+        return;
       }
+      this.$emit('action:directingBout', bout);
     },
     getScoreColor(isPerson1) {
-      if (isPerson1) {
-        if (this.bout.Person2.DisplayName === 'BYE' && !((this.bout.Person1.DisplayName === 'BYE') && (this.bout.Person2.DisplayName === 'BYE'))) return 'bg-winGreen'
-
-        if (this.bout.Score1 > this.bout.Score2) {
-          return 'bg-winGreen';
-        }
-
-        if (this.bout.Score1 < this.bout.Score2 && this.bout.Status === 'Active') {
-          return 'bg-lossRed';
-        }
-      }
-
-      if (!isPerson1) {
-        if (this.bout.Person1.DisplayName === 'BYE' && !((this.bout.Person1.DisplayName === 'BYE') && (this.bout.Person2.DisplayName === 'BYE'))) return 'bg-winGreen'
-
-        if (this.bout.Score1 < this.bout.Score2) {
-          return 'bg-winGreen';
-        }
-
-        if (this.bout.Score1 > this.bout.Score2 && this.bout.Status === 'Active') {
-          return 'bg-lossRed';
-        }
-      }
-      return 'bg-dropdownSelect';
+      return getMatchingScoreColor(this.bout, isPerson1);
     },
     handleHighlight(value) {
       if (this.bout.Person1.DisplayName.length < 1 || this.bout.Person2.DisplayName.length < 1) return;
       if (this.bout.Person1.DisplayName === 'BYE' || this.bout.Person2.DisplayName === 'BYE') return;
       this.highlight = value;
     },
-    shouldFade(bout, person1){
-        if (this.bout.Person1.DisplayName === 'BYE' && this.bout.Person2.DisplayName === 'BYE') return false;
+    shouldFade(bout, person1) {
+      if (this.bout.Person1.DisplayName === 'BYE' && this.bout.Person2.DisplayName === 'BYE') return false;
 
-        if (person1) {
-          if (bout.Person1.DisplayName === 'BYE') return true;
-          if (parseInt(bout.Score1) < parseInt(bout.Score2)) return true;
-        }
+      if (person1) {
+        if (bout.Person1.DisplayName === 'BYE') return true;
+        if (parseInt(bout.Score1) < parseInt(bout.Score2)) return true;
+      }
 
       if (!person1) {
         if (bout.Person2.DisplayName === 'BYE') return true;
         if (parseInt(bout.Score2) < parseInt(bout.Score1)) return true;
       }
 
-      return false
+      return false;
     }
   },
   computed: {
@@ -181,21 +192,23 @@ export default {
       return this.currentConfig?.getCardSpace || '';
     },
     person1Display() {
-      if (this.bout.Status === "Scheduled" && this.bout.Person1.DisplayName === 'BYE') {
+      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') {
+      if (this.bout.Status === 'Scheduled' && this.bout.Person2.DisplayName === 'BYE') {
         return { ...this.bout.Person2, DisplayName: '', Club: { Name: '' } };
       }
       return this.bout.Person2;
     },
     showGrandFinal() {
-      return this.roundName === 'Grand Final' &&
-          this.bout.Person1.DisplayName !== 'BYE' &&
-          this.bout.Person2.DisplayName !== 'BYE';
+      return (
+        this.roundName === 'Grand Final' &&
+        this.bout.Person1.DisplayName !== 'BYE' &&
+        this.bout.Person2.DisplayName !== 'BYE'
+      );
     }
   }
 };

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

@@ -1,93 +1,92 @@
 import TableauFencerCard from './TableauFencerCard.vue';
 
-
 export default {
-    title: 'Organisms/Cards/TableauFencerCard',
-    component: TableauFencerCard,
-    args: {
-        fencer: {
-            DisplayName: 'John Doe',
-            Club: {
-                Name: 'Fencing Club'
-            },
-            Images: [
-                {
-                    URL: 'https://randomuser.me/api/portraits/men/91.jpg'
-                }
-            ]
-        },
-        score: '15',
-        position: '1',
-        color: 'blue',
-        scoreColor: 'bg-winGreen',
-        large: true
-    },
-    argTypes: {
-        fencer: {
-            control: 'object',
-            description: 'Object containing fencer details including name, club, and images'
-        },
-        score: {
-            control: 'text',
-            description: 'Score of the fencer'
-        },
-        position: {
-            control: 'text',
-            description: 'Position of the fencer in the bracket'
-        },
-        color: {
-            control: 'color',
-            description: 'Color for the position background'
-        },
-        scoreColor: {
-            control: 'color',
-            description: 'Color for the score background'
-        },
-        large: {
-            control: 'boolean',
-            description: 'Boolean to determine the size of the card'
+  title: 'Organisms/Cards/TableauFencerCard',
+  component: TableauFencerCard,
+  args: {
+    fencer: {
+      DisplayName: 'John Doe',
+      Club: {
+        Name: 'Fencing Club'
+      },
+      Images: [
+        {
+          URL: 'https://randomuser.me/api/portraits/men/91.jpg'
         }
+      ]
+    },
+    score: '15',
+    position: '1',
+    color: 'blue',
+    scoreColor: 'bg-winGreen',
+    large: true
+  },
+  argTypes: {
+    fencer: {
+      control: 'object',
+      description: 'Object containing fencer details including name, club, and images'
+    },
+    score: {
+      control: 'text',
+      description: 'Score of the fencer'
+    },
+    position: {
+      control: 'text',
+      description: 'Position of the fencer in the bracket'
+    },
+    color: {
+      control: 'color',
+      description: 'Color for the position background'
+    },
+    scoreColor: {
+      control: 'color',
+      description: 'Color for the score background'
+    },
+    large: {
+      control: 'boolean',
+      description: 'Boolean to determine the size of the card'
     }
+  }
 };
 
 export const Default = {
-    args: {
-        fencer: {
-            DisplayName: 'John Doe',
-            Club: {
-                Name: 'Fencing Club'
-            },
-            Images: [
-                {
-                    URL: 'https://randomuser.me/api/portraits/men/50.jpg'
-                }
-            ]
-        },
-        score: '15',
-        position: '1',
-        color: 'blue',
-        scoreColor: 'bg-winGreen',
-        large: true
-    }
+  args: {
+    fencer: {
+      DisplayName: 'John Doe',
+      Club: {
+        Name: 'Fencing Club'
+      },
+      Images: [
+        {
+          URL: 'https://randomuser.me/api/portraits/men/50.jpg'
+        }
+      ]
+    },
+    score: '15',
+    position: '1',
+    color: 'blue',
+    scoreColor: 'bg-winGreen',
+    large: true
+  }
 };
 
 export const Small = {
-    args: {
-        fencer: {
-            DisplayName: 'Jane Doe',
-            Club: {
-                Name: 'Fencing Club'
-            },
-            Images: [
-                {
-                    URL: 'https://via.placeholder.com/40'
-                }
-            ]
-        },
-        score: '12',
-        position: '2',
-        color: 'red',
-        scoreColor: 'bg-lossRed',
-        large: false
-    }
+  args: {
+    fencer: {
+      DisplayName: 'Jane Doe',
+      Club: {
+        Name: 'Fencing Club'
+      },
+      Images: [
+        {
+          URL: 'https://via.placeholder.com/40'
+        }
+      ]
+    },
+    score: '12',
+    position: '2',
+    color: 'red',
+    scoreColor: 'bg-lossRed',
+    large: false
+  }
 };