@dcrackel/hematournamentui 1.0.230 → 1.0.232

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

@@ -9,8 +9,8 @@
             <img :src="missingPortrait" alt="Portrait" class="w-12 h-12 rounded-full" />
           </div>
           <div>
-            <BaseText text="Waiting to be selected" size="md" color="primary" weight="bold" />
-            <BaseText text="starting soon" size="xs" color="quaternary" />
+            <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`"/>
@@ -23,8 +23,8 @@
       <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>
-            <BaseText text="Waiting to be selected" size="md" color="primary" weight="bold" class="text-right" />
-            <BaseText text="starting soon" size="xs" color="quaternary" class="text-right" />
+            <BaseText text="Waiting to be selected" size="md" color="quaternary" weight="bold" class="text-right" />
+            <BaseText text="starting soon" size="xs" color="quinary" class="text-right" />
           </div>
           <div>
             <div :class="`w-4 h-4 rounded-full bg-${hostingClubColors.Color2} absolute top-10 right-12`"></div>
@@ -49,8 +49,8 @@
             <img :src="fencer1.portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
           </div>
           <div>
-            <BaseText :text="fencer1.name" size="md" color="primary" weight="bold" />
-            <BaseText :text="fencer1.team" size="xs" color="quaternary" />
+            <BaseText :text="fencer1.name" size="md" color="quaternary" weight="bold" />
+            <BaseText :text="fencer1.team" size="xs" color="quinary" />
           </div>
         </div>
         <BaseText :text="fencer1Score" size="3xl" weight="bold" :class="`align-middle pr-3 pt-0.5`"/>
@@ -58,7 +58,7 @@
 
       <!-- Timer -->
       <div v-if="bout.Status === 'Active'" class="text-center mx-8 ">
-        <p class="text-xl font-bold">{{ displayTime }}</p>
+       <BaseText :text="displayTime" size="lg" color="quinary" weight="bold" />
       </div>
 
       <!-- Fencer 2 -->
@@ -66,8 +66,8 @@
         <div class="flex space-x-4 justify-between w-full">
           <BaseText :text="fencer2Score" size="3xl" weight="bold" :class="`align-middle pl-3 pt-0.5`"/>
           <div class="w-full">
-            <BaseText :text="fencer2.name" size="md" color="primary" weight="bold" class="text-right" />
-            <BaseText :text="fencer2.team" size="xs" color="quaternary" class="text-right" />
+            <BaseText :text="fencer2.name" size="md" color="quaternary" weight="bold" class="text-right" />
+            <BaseText :text="fencer2.team" size="xs" color="quinary" class="text-right" />
           </div>
           <div class="w-20">
             <div :class="`w-4 h-4 rounded-full bg-${hostingClubColors.Color2} absolute top-10 right-12`"></div>

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

@@ -3,10 +3,10 @@
     <div class="w-full flex flex-row justify-between">
       <section class="flex flex-row justify-start">
         <div class="flex flex-col pl-4">
-          <BaseText :text="event.EventName" size="xl" color="primary" weight="bold"  class="text-left" />
+          <BaseText :text="event.EventName" size="xl" color="quaternary" weight="bold"  class="text-left" />
           <BaseText :text="`${event.Date} ${event.StartTime}`" size="md" color="quinary"  class="text-left" />
           <p class="mt-4">
-            <BaseText :text="event.Status" size="md" color="primary" class="text-left" />
+            <BaseText :text="event.Status" size="md" color="quaternary" class="text-left" />
             <BaseText :text="event.RuleSummary" size="sm" color="quinary"  class="text-left" />
           </p>
         </div>

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

@@ -13,17 +13,17 @@
     </div>
     <div class="flex flex-col w-4/12 justify-star">
       <span class="w-full flex justify-start">
-        <BaseText :text="fullName" size="xl" color="primary" weight="bold"/>
+        <BaseText :text="fullName" size="xl" color="quaternary" weight="bold"/>
       </span>
       <span class="w-full flex justify-start">
-        <BaseText :text="person.Person.Club.Name" size="sm" color="primary" weight="normal"/>
+        <BaseText :text="person.Person.Club.Name" size="sm" color="quinary" weight="normal"/>
       </span>
     </div>
     <div class="grid grid-cols-2 gap-x-4 mr-10">
-      <BaseText text="M2Rating" size="sm" color="primary" weight="normal" />
-      <BaseText :text="M2Rating" size="sm" color="primary" weight="bold"/>
-      <BaseText text="HemaRating" size="sm" color="primary" weight="normal" />
-      <BaseText :text="HEMARating" size="sm" color="primary" weight="bold"/>
+      <BaseText text="M2Rating" size="sm" color="quaternary" weight="normal" />
+      <BaseText :text="M2Rating" size="sm" color="quinary" weight="bold"/>
+      <BaseText text="HemaRating" size="sm" color="quaternary" weight="normal" />
+      <BaseText :text="HEMARating" size="sm" color="quinary" weight="bold"/>
     </div>
     <div class="mr-4 ml-auto">
       <ButtonBar

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

@@ -13,10 +13,10 @@
     </div>
     <div class="flex flex-col w-5/12 justify-star">
       <span class="w-full flex justify-start">
-        <BaseText :text="fullName" size="md" color="primary" weight="bold"/>
+        <BaseText :text="fullName" size="md" color="quaternary" weight="bold"/>
       </span>
       <span class="w-full flex justify-start">
-        <BaseText :text="person.Club" size="xs" color="secondary" weight="normal"/>
+        <BaseText :text="person.Club" size="xs" color="quinary" weight="normal"/>
       </span>
     </div>
     <div class="flex flex-col w-5/12">

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

@@ -19,12 +19,12 @@
     </div>
     <div class="flex-1 ml-4">
       <p class="flex">
-        <BaseText :text="name" size="md" />
+        <BaseText :text="name" size="md" weight="bold" color="quaternary" />
         <BaseText v-if="seed !== poolPosition" :text="`${seed}`" size="xs" class="ml-1" color="bright" />
       </p>
-      <BaseText :text="club" size="xs" />
+      <BaseText :text="club" size="xs" color="quinary" />
     </div>
-    <BaseIcon v-if="mode === 'preparation' || mode === 'planning'" icon-name="fa-grip-dots-vertical" size="2xl" />
+    <BaseIcon v-if="mode === 'preparation' || mode === 'planning'" icon-name="fa-grip-dots-vertical" size="2xl" color="quaternary" />
   </div>
 </template>
 

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

@@ -8,10 +8,10 @@
     </div>
     <div class="flex flex-col w-4/12 justify-star">
       <span class="w-full flex justify-start">
-        <BaseText :text="fullName" size="md" color="primary" weight="bold"/>
+        <BaseText :text="fullName" size="md" color="quaternary" weight="bold"/>
       </span>
       <span class="w-full flex justify-start">
-        <BaseText :text="staff.Person.Club.Name" size="xs" color="primary" weight="normal"/>
+        <BaseText :text="staff.Person.Club.Name" size="xs" color="quinary" weight="normal"/>
       </span>
     </div>
 

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

@@ -16,13 +16,14 @@
           :scoreColor="getScoreColor(true)"
           :large="large"
           :highLight="highlight"
+          :faded="shouldFade(bout, true)"
           @action:highLight="handleHighlight"
       />
     </section>
     <!-- Card break -->
     <div :class="getCardSpace"></div>
     <!-- Card break -->
-    <section>
+    <section @click="handleBoutClick(bout)">
       <TableauFencerCard
           :fencer="person2Display"
           :score="score2"
@@ -31,6 +32,7 @@
           :scoreColor="getScoreColor(false)"
           :large="large"
           :highLight="highlight"
+          :faded="shouldFade(bout, false)"
           @action:highLight="handleHighlight"
       />
     </section>
@@ -102,6 +104,8 @@ export default {
     },
     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';
         }
@@ -109,7 +113,11 @@ export default {
         if (this.bout.Score1 < this.bout.Score2 && this.bout.Status === 'Active') {
           return 'bg-lossRed';
         }
-      } else {
+      }
+
+      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';
         }
@@ -124,6 +132,21 @@ export default {
       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;
+
+        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
     }
   },
   computed: {

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

@@ -1,8 +1,8 @@
 <!-- TableauFencerCard.vue -->
 <template>
-<section class="bg-poolSetup flex shadow-lg rounded-md border" @mouseover="handleHighLight(true)" @mouseout="handleHighLight(false)" :class="[width, highLighted]">
+<section class="bg-poolSetup flex rounded-md border" @mouseover="handleHighLight(true)" @mouseout="handleHighLight(false)" :class="[width, highLighted, opacity]">
     <!-- Left position -->
-    <div class="text-center px-1 w-5 flex items-center justify-center rounded-l-md z-50" :class="`bg-${color}`">
+    <div class="text-center px-1 w-5 flex items-center justify-center rounded-l-md z-50" :class="[`bg-${color}`]">
       <BaseText :text="position" size="xs" color="neutral"/>
     </div>
 
@@ -16,8 +16,8 @@
         <img v-if="portraitURL" :src="portraitURL" alt="Portrait" class="w-9 h-9 rounded-r-md">
       </div>
       <div class="flex flex-col justify-center ml-2">
-        <BaseText :text="name" :size="large ? 'sm' : 'xs'" :weight="large ? 'bold' : 'normal'" class="text-nowrap overflow-hidden"/>
-        <BaseText v-if="club.length > 1 && large" :text="club" size="xs"/>
+        <BaseText :text="name" :size="large ? 'sm' : 'xs'" :weight="large ? 'bold' : 'normal'" color="quaternary" class="text-nowrap overflow-hidden"/>
+        <BaseText v-if="club.length > 1 && large" color="quinary" :text="club.substring(0,36)" size="xs" class="text-nowrap overflow-hidden"/>
       </div>
     </div>
   </div>
@@ -63,6 +63,10 @@ export default {
     highLight: {
       type: Boolean,
       default: false
+    },
+    faded: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -84,6 +88,9 @@ export default {
     },
     highLighted() {
       return this.highLight ? 'border-bright' : 'border-poolSetup';
+    },
+    opacity() {
+      return this.faded ? 'opacity-60 shadow-md' : 'shadow-xl';
     }
   },
   methods: {

package/src/stories/Templates/EventManagement/Bracket/Bracket.stories.js

@@ -1,6 +1,7 @@
 import Bracket from './Bracket.vue';
 import getDEWithBouts from '../../../../mocks/getDEWithBouts.js';
 import getDEWithBouts6Fencers from '../../../../mocks/getDeBouts-6fencers.js';
+import getDEWithBouts15Fencers from '../../../../mocks/getDeBouts-15fencers.js';
 import getDEWithBouts22Fencers from '../../../../mocks/getDeBouts-22fencers.js';
 
 export default {
@@ -32,9 +33,9 @@ export default {
 
 export const Default = {
     args: {
-        bouts: getDEWithBouts22Fencers.pools[0].Bouts,
-        eventRules: getDEWithBouts22Fencers.eventRules,
-        hostingClubColors: getDEWithBouts22Fencers.hostingClubColors,
+        bouts: getDEWithBouts15Fencers.pools[0].Bouts,
+        eventRules: getDEWithBouts15Fencers.eventRules,
+        hostingClubColors: getDEWithBouts15Fencers.hostingClubColors,
         connectedToServer: true
     }
 };