@dcrackel/hematournamentui 1.0.231 → 1.0.233

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/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'" color="quaternary" class="text-nowrap overflow-hidden"/>
-        <BaseText v-if="club.length > 1 && large" color="quinary" :text="club" size="xs"/>
+        <BaseText :text="name" :size="large ? 'sm' : 'xs'" :weight="large ? 'bold' : 'normal'" color="quaternary" class="truncate  text-nowrap overflow-hidden"/>
+        <BaseText v-if="club.length > 1 && large" color="quinary" :text="club.substring(0,28)" size="xs" class="truncate 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/Organisms/Containers/TableauLines/SpacingConfig.js

@@ -36,7 +36,7 @@ export const spacingConfig = {
             'Table of 8': { getTopSpace: 'mt-[1.3rem]', getConnectorHeight: 'h-[7rem]', getTopSpaceForLine: 'mt-[3.25rem]' },
             Quarterfinal: { getTopSpace: 'mt-[4.7rem]', getConnectorHeight: 'h-[14rem]', getTopSpaceForLine: 'mt-[7rem]' },
             Semifinal: { getTopSpace: 'mt-[12.7rem]', getConnectorHeight: 'h-[28.3rem]', getTopSpaceForLine: '' },
-            Final: { getTopSpace: 'h-[28rem] mt-[27rem] -ml-[309px]', getBottomLine: 'h-[28rem] mt-[2.5rem] -ml-[309px]' },
+            Final: { getTopSpace: 'h-[30rem] mt-[25rem] -ml-[309px]', getBottomLine: 'h-[30rem] mt-[2.5rem] -ml-[309px]' },
             'Third Place': { getTopSpace: 'hidden', getConnectorHeight: 'hidden', getTopSpaceForLine: 'hidden' },
         },
         small: {

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
     }
 };
@@ -48,3 +49,12 @@ export const TableOfEight = {
     }
 };
 
+export const TableWithTwentyTwo = {
+    args: {
+        bouts: getDEWithBouts22Fencers.pools[0].Bouts,
+        eventRules: getDEWithBouts22Fencers.eventRules,
+        hostingClubColors: getDEWithBouts22Fencers.hostingClubColors,
+        connectedToServer: true
+    }
+};
+

package/src/stories/Templates/Menus/Admin/AdminLeftMenu.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="bg-secondary min-h-screen flex flex-col justify-between">
+  <div class="bg-secondary min-h-screen flex flex-col justify-between w-[150]">
     <section class="h-28 border-b border-neutral">
       <div class="flex flex-col justify-center h-28">
         <div class="flex justify-center">

package/tailwind.config.js

@@ -39,6 +39,12 @@ module.exports = {
     ],
     theme: {
         extend: {
+            scrollbar: {
+                DEFAULT: {
+                    thumb: 'bg-gray-800 rounded-full',
+                    track: 'bg-gray-300',
+                },
+            },
             fontFamily: {
                 sans: ['Inter', 'system-ui', '-apple-system', 'BlinkMacSystemFont'],
                 'roboto-mono': ['Roboto Mono', 'monospace'],
@@ -94,6 +100,9 @@ module.exports = {
             },
         },
     },
+    variants: {
+        scrollbar: ['rounded'],
+    },
     plugins: [
         function ({ addBase, theme }) {
             addBase({