@dcrackel/hematournamentui 1.0.98 → 1.0.99

package/src/stories/Atoms/Icon/BaseIcon.vue

@@ -32,7 +32,11 @@ export default {
     },
     hover: {
       type: String,
-      default: 'primary'
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   computed: {
@@ -41,15 +45,15 @@ export default {
         this.style,
         this.iconName,
         `text-${this.size}`,
-        this.colorClass,
-        this.hoverClass
+        this.disabled ? 'text-gridBoxHeader' : this.colorClass,
+        this.disabled ? '' : this.hoverClass
       ];
     },
     colorClass() {
       return `text-${this.color}`;
     },
     hoverClass() {
-      return `hover:text-${this.hover}`;
+      return this.hover === '' ? ` hover:text-${this.color}` : ` hover:text-${this.hover}`;
     }
   }
 };

package/src/stories/Atoms/Text/BaseText.vue

@@ -25,7 +25,7 @@ export default {
       type: String,
       default: 'sm',
       validator: function (value) {
-        return ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl'].indexOf(value) !== -1;
+        return ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl', '5xl'].indexOf(value) !== -1;
       }
     },
     color: {
@@ -88,7 +88,7 @@ export default {
             baseClasses += ' text-bright';
             break;
           case 'alarm':
-            baseClasses += ' text-alarmText';
+            baseClasses += ' text-lossRed';
             break;
         }
 
@@ -163,6 +163,12 @@ export default {
           case '3xl':
             baseClasses += ' text-3xl';
             break;
+          case '4xl':
+            baseClasses += ' text-4xl';
+            break;
+          case '5xl':
+            baseClasses += ' text-5xl';
+            break;
         }
         return baseClasses;
       })

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

@@ -0,0 +1,60 @@
+import PassesBox from './PassesBox.vue';
+import eventRules from "../../../../../mocks/eventRules.js";
+import getPoolsWithBouts from "../../../../../mocks/getPoolsWithBouts.js";
+
+export default {
+    title: 'Molecules/Boxes/BoutBoxes/PassesBox',
+    component: PassesBox,
+    tags: ['autodocs'],
+    args: {
+        maxPasses: 5,
+        bout: {
+            CurrentPass: 2
+        },
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+        showSubmit: false,
+        screenHeight: 1080,
+    },
+    argTypes: {
+        maxPasses: { control: 'number' },
+        bout: { control: 'object' },
+        hostingClubColors: { control: 'object'},
+        showSubmit: { control: 'boolean' },
+        screenHeight: { control: 'number' },
+    },
+};
+
+
+
+export const Default = {
+    args: {
+        maxPasses: 5,
+        bout: {
+            CurrentPass: 2
+        },
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+        showSubmit: false,
+        screenHeight: 1080,
+    }
+};
+
+export const WithSubmit = {
+    args: {
+        maxPasses: 5,
+        bout: {
+            CurrentPass: 4
+        },
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+        showSubmit: true,
+        screenHeight: 1080,
+    }
+};

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

@@ -0,0 +1,94 @@
+<template>
+  <section class="w-full">
+    <div class="mt-4 py-4 md:w-11/12 w-full flex flex-col bg-white mx-auto rounded-2xl shadow-md">
+      <div class="w-full rounded-t-xl flex flex-row justify-between pt-2">
+        <div class="w-full text-center mt-0">
+          <BaseText text="Current Pass" size="xl" color="quaternary" weight="bold" />
+        </div>
+      </div>
+
+      <div class="w-full flex flex-row justify-around text-center px-4 pt-4">
+        <div class="pt-1 w-1/4" @click="minusPass">
+          <BaseIcon icon-name="fa-square-minus" size="5xl" color="quaternary" hover="quaternary" class="hover:text-quaternaryHighlight" :disabled="score <= 0" />
+        </div>
+        <div class="flex flex-row w-1/2 justify-center">
+            <BaseText :text="currentPass + 1" size="5xl" color="primary" weight="bold" />
+        </div>
+        <div class="pt-1 w-1/4" @click="addPass">
+          <BaseIcon icon-name="fa-square-plus" size="5xl" color="quaternary" hover="quaternary" class="hover:text-quaternaryHighlight" :disabled="score <= 0" />
+        </div>
+      </div>
+
+      <div class="flex flex-row justify-center">
+        <div v-if="showSubmit" class="flex flex-row justify-between m-8 w-9/12">
+          <button class="w-full rounded-xl p-1 bg-red text-cloud" @click="submit">
+            Submit Score
+          </button>
+        </div>
+        <div v-if="!showSubmit" class="flex flex-row justify-between m-4 md:m-9 w-9/12">
+          <div v-for="(pass, index) in passes" :key="index">
+            <div v-if="currentPass < index" class="w-4 h-4 border border-quaternary rounded-full"></div>
+            <div v-if="currentPass >= index" class="w-4 h-4 bg-blue rounded-full"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseIcon from "../../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from "../../../../Atoms/Text/BaseText.vue";
+
+export default {
+  name: 'PassesBox',
+  components: {BaseText, BaseIcon},
+  props: {
+    maxPasses: {
+      type: Number,
+      required: true,
+    },
+    bout: {
+      type: Object,
+      required: true,
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    },
+    showSubmit: {
+      type: Boolean,
+      default: false,
+    },
+    screenHeight: Number
+  },
+  data() {
+    return {
+      passes: [],
+      currentPass: this.bout.CurrentPass || 0
+    }
+  },
+  created() {
+    this.passes = new Array(this.maxPasses).fill(0)
+  },
+  methods: {
+    addPass() {
+      if (this.currentPass + 1 >= this.passes.length) {
+        this.showSubmit = true
+        return
+      }
+      this.currentPass++
+      this.passes[this.currentPass] = 1
+    },
+    minusPass() {
+      if (this.currentPass <= 0) return
+      this.passes[this.currentPass] = 0
+      this.currentPass--
+    },
+    submit() {
+      this.$emit('submit')
+    }
+  }
+}
+</script>
+

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

@@ -0,0 +1,113 @@
+import ScoreBox from './ScoreBox.vue';
+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
+    },
+    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
+    }
+};
+
+export const Fencer2 = {
+    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
+    }
+};
+
+export const Fencer2purple = {
+    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
+    }
+};
+
+export const CufcNavy = {
+    args: {
+        fencer1: false,
+        match: getPoolsWithBouts[3],
+        screenHeight: 800,
+        hostingClubColors: {
+            Color1: 'rose',
+            Color2: 'navy'
+        },
+        maxScore: 7
+    }
+};

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

@@ -0,0 +1,110 @@
+<template>
+  <section class="w-full">
+    <div
+        class="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()}`,
+        screenHeight > 740 ? 'mt-4' : 'mt-1'
+      ]"
+    >
+      <div class="w-full rounded-t-xl flex flex-row justify-between pt-2">
+        <div class="w-full text-center">
+          <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" @click="$emit('open-report')">
+          <i class="fa-solid fa-chevron-right"></i>
+        </div>
+      </div>
+      <div class="flex flex-row w-full justify-between">
+        <div class="w-full text-center">
+          <!-- Notes should go here in the future -->
+        </div>
+      </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="fa-square-minus" size="5xl" :color="computedColor" hover="quaternary" :disabled="currentScore <= 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" />
+          </div>
+        </div>
+        <div class="pt-1 w-1/4" @click="plus">
+          <BaseIcon icon-name="fa-square-plus" size="5xl" :color="computedColor" hover="quaternary" :disabled="currentScore >= 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"  />
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script>
+import BaseText from "../../../../Atoms/Text/BaseText.vue";
+import BaseIcon from "../../../../Atoms/Icon/BaseIcon.vue";
+
+export default {
+  name: 'ScoreBox',
+  components: {BaseIcon, BaseText},
+  props: {
+    fencer1: {
+      type: Boolean,
+      default: false,
+      required: true
+    },
+    bout: {
+      type: Object,
+      required: true
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    },
+    screenHeight: {
+      type: Number,
+      default: 800
+    },
+    score: {
+      type: Number,
+      default: 0
+    },
+    maxScore: {
+      type: Number,
+      required: true
+    }
+  },
+  data() {
+    return {
+      currentScore: 0
+    }
+  },
+  computed: {
+    computedColor() {
+      return this.fencer1 ? this.hostingClubColors.Color1.toLowerCase() : this.hostingClubColors.Color2.toLowerCase();
+    }
+  },
+  methods: {
+    minus() {
+      if (this.currentScore > 0) {
+        this.currentScore--;
+        this.emitSCore(this.currentScore)
+      }
+    },
+    plus() {
+      if (this.currentScore < this.maxScore) {
+        this.currentScore++;
+        this.emitSCore(this.currentScore)
+      }
+    },
+    emitSCore(score) {
+      this.$emit('update:Score', score)
+    }
+
+  }
+}
+</script>

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

@@ -0,0 +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'
+        }
+    }
+};
+
+export const Default = {
+    args: {
+        initialTime: 120,
+        ringName: 'Ring 1 - Pool 1',
+        showSubmit: true
+    }
+};
+
+export const OneMinute = {
+    args: {
+        initialTime: 60,
+        ringName: 'Ring 1 - Pool 2',
+        showSubmit: false,
+    }
+};
+
+export const TenSeconds = {
+    args: {
+        initialTime: 10,
+        ringName: 'Ring 2 - Pool 2',
+        showSubmit: true
+    }
+};

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

@@ -0,0 +1,112 @@
+<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">
+            <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="alterTime(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="alterTime(-10)" class="hover:text-quaternaryHighlight"  />
+        </div>
+
+        <!-- Timer Display and Controls -->
+        <section class="flex flex-col w-44 justify-between">
+          <div class="flex flex-col h-6">
+            <BaseText v-if="!showSubmit" :text="ringName" size="xl" color="quaternary" weight="bold" />
+            <BaseButton v-if="showSubmit" label="Submit" type="playPause" :selected="true" size="xl" @click="submit" />
+          </div>
+          <BaseText :text="formattedTime" size="5xl" weight="bold" :color="timerState === 'running' ? 'secondary' : 'quaternary'" />
+          <BaseButton :label="timerState === 'running' ? 'Pause' : 'Start'" type="playPause" :selected="timerState === 'running'" size="xl" @click="startOrPause" />
+        </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="alterTime(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="alterTime(-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";
+
+export default {
+  name: 'TimerBox',
+  components: {BaseButton, BaseIcon, BaseText},
+  props: {
+    initialTime: {
+      type: Number,
+      default: 120
+    },
+    ringName: {
+      type: String,
+      required: true
+    },
+    showSubmit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      time: parseInt(this.initialTime),
+      running: false,
+      timerInterval: null
+    };
+  },
+  computed: {
+    formattedTime() {
+      const minutes = Math.floor(this.time / 60);
+      const seconds = this.time % 60;
+      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
+    },
+    timerState() {
+      return this.running ? 'running' : 'paused';
+    }
+  },
+  methods: {
+    startOrPause() {
+      this.emitTimeStateChange()
+
+      if (this.running) {
+        clearInterval(this.timerInterval);
+      } else {
+        this.timerInterval = setInterval(() => {
+          if (this.time > 0) {
+            this.time--;
+            this.emitTimeChange(this.time)
+          } else {
+            this.stopTimer();
+          }
+        }, 1000);
+      }
+      this.running = !this.running;
+    },
+    async alterTime(seconds) {
+      this.stopTimer();
+      this.time = Math.max(0, this.time + seconds);
+      this.emitTimeStateChange()
+    },
+    stopTimer() {
+      clearInterval(this.timerInterval);
+      this.running = false;
+      this.emitTimeStateChange();
+    },
+    emitTimeStateChange() {
+      this.$emit('update:timeChange', {time: this.time, running: !this.running});
+    },
+    emitTimeChange() {
+      this.$emit('update:time',this.time);
+    }
+  },
+  beforeDestroy() {
+    clearInterval(this.timerInterval);
+  }
+};
+</script>
+

package/src/stories/Molecules/Breadcrumb/Admin/Breadcrumb.test.js

@@ -30,8 +30,6 @@ describe('Breadcrumb', () => {
 
         const linkElements = wrapper.findAll('[to]');
 
-        // console.log(wrapper.html());
-
         expect(linkElements.length).toBe(items.filter(item => item.link).length);
     });
 

package/src/stories/Molecules/Buttons/BaseButton/BaseButton.vue

@@ -40,7 +40,7 @@ export default {
     type: {
       type: String,
       default: 'primary',
-      validator: value => ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'adminSecondary', 'iconOnly', 'editor', 'square', 'tabBar', 'graySecondary'].includes(value)
+      validator: value => ['primary', 'secondary', 'tertiary', 'bright', 'admin', 'adminSecondary', 'iconOnly', 'editor', 'square', 'tabBar', 'graySecondary', 'liteGraySecondary', 'whiteSecondary', 'grayAndBlue', 'playPause'].includes(value)
     },
     selected: {
       type: Boolean,
@@ -49,12 +49,6 @@ export default {
   },
   emits: ['click'],
   setup(props, { emit }) {
-    watch(() => props.selected, (newVal) => {
-      console.log('selected prop changed to:', newVal);
-      console.log('props.selected:', props.selected);
-      console.log('props.type:', props.type);  // Access type using props
-    });
-
     const computedClasses = computed(() => {
       const baseClasses = 'inline-flex';
       const sizeClass = {
@@ -80,8 +74,10 @@ export default {
         square: `p-8 my-3 items-center gap-2.5 rounded-md text-center shadow border border-dropdownSelect justify-center hover:bg-tertiary ${props.selected ? 'bg-dropdownSelect' : 'bg-neutral'}`,
         tabBar: `p-2 items-center justify-center text-center hover:border-b hover:border-b-bright text-primaryHighlight ${props.selected ? 'border-b border-b-bright' : 'border-b border-b-neutral text-bright'}`,
         graySecondary: `px-2.5 items-center gap-2.5 text-center my-1 p-3 w-full rounded-lg flex flex-row justify-center hover:bg-quinary ${props.selected ? 'bg-secondary' : 'bg-graySecondary'}`,
+        grayAndBlue: `px-2.5 items-center gap-2.5 text-center my-1 p-3 w-full rounded-lg flex flex-row justify-center border ${props.selected ? 'bg-secondary hover:bg-quinary' : 'bg-gridBoxHeader'}`,
         whiteSecondary: `px-2.5 items-center gap-2.5 text-center my-1 p-3 w-full rounded-lg flex flex-row justify-center border border-poolBox hover:border-dropdownSelect ${props.selected ? 'bg-neutral shadow' : 'bg-poolBox'}`,
         liteGraySecondary: `px-2.5 items-center gap-2.5 text-center my-1 p-3 w-full rounded-lg flex flex-row justify-center border border-poolBox hover:border-dropdownSelect ${props.selected ? 'bg-neutral shadow' : 'bg-poolBox'}`,
+        playPause: `p-1 w-full items-center gap-2.5 text-center rounded-md shadow justify-center ${props.selected ? 'bg-secondary hover:bg-quaternaryHighlight' : 'bg-quaternary hover:bg-quaternaryHighlight'}`,
       }[props.type];
 
       return `${baseClasses} ${typeClass} ${sizeClass}`;
@@ -102,7 +98,9 @@ export default {
           tabBar: 'primaryHighlight',
           graySecondary: 'neutral',
           whiteSecondary: 'primary',
-          liteGraySecondary: 'primary'
+          liteGraySecondary: 'primary',
+          playPause: 'neutral',
+          grayAndBlue: 'neutral'
         };
         return colorMap[props.type];
       }),

package/src/stories/Molecules/Modals/BaseModal/BaseModal.vue

@@ -65,11 +65,6 @@ export default {
     }
   },
   emits: ['update:show', 'submit-modal'],
-  watch: {
-    show(newValue) {
-      console.log(`BaseModal show prop changed to: ${newValue}`);
-    }
-  },
   methods: {
     close() {
       this.$emit('update:show', false);