@dcrackel/hematournamentui 1.0.706 → 1.0.707

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

@@ -7,7 +7,7 @@
     <!-- Desktop active -->
     <div class="hidden md:flex items-center justify-between rounded-lg">
       <!-- Fencer 1 -->
-      <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
+      <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="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full z-0 relative" />
@@ -27,7 +27,7 @@
       </div>
 
       <!-- Fencer 2 -->
-      <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
+      <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-5/12">
         <div class="flex space-x-4 justify-between w-full">
           <BaseText :text="String(card.score2)" size="3xl" weight="bold" class="align-middle pl-3 pt-0.5" />
           <div class="w-full">
@@ -50,11 +50,11 @@
     </div>
 
     <!-- Mobile active -->
-    <div
-        class="flex md:hidden justify-between items-center p-3 border border-alarm rounded-md bg-poolBox transition"
-        :class="mobileCardActionClass"
-        @click="onCardClick"
-    >
+    <div
+      class="flex md:hidden justify-between items-center p-3 border border-alarm rounded-md bg-poolBox transition"
+      :class="mobileCardActionClass"
+      @click="onCardClick"
+    >
       <div class="relative flex flex-col items-center">
         <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
         <div :class="`w-4 h-4 rounded-full bg-${card.fencer1.colorDot} absolute top-0 left-0`"></div>
@@ -77,33 +77,35 @@
 </template>
 
 <script>
-import BaseText from "../../../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import missingPortrait from "../../../../../../assets/portrait1.png";
+import BaseText from '../../../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import missingPortrait from '../../../../../../assets/portrait1.png';
 
 export default {
-  name: "BoutCardActive",
+  name: 'BoutCardActive',
   emits: ['resume'],
   components: { BaseButton, BaseText },
   props: {
-    card: { type: Object, required: true },
-    editMode: { type: Boolean, default: false },
-    timerStatus: { type: String, default: "stopped" },
-  },
+    card: { type: Object, required: true },
+    editMode: { type: Boolean, default: false },
+    timerStatus: { type: String, default: 'stopped' }
+  },
   data() {
     return {
       missingPortrait,
       remaining: 0,
-      interval: null,
+      interval: null
     };
   },
-  computed: {
-    hasCard() { return !!this.card; },
-    mobileCardActionClass() {
-      if (this.editMode) return "cursor-pointer";
-      return "cursor-default";
-    },
-    fencer1Portrait() {
+  computed: {
+    hasCard() {
+      return !!this.card;
+    },
+    mobileCardActionClass() {
+      if (this.editMode) return 'cursor-pointer';
+      return 'cursor-default';
+    },
+    fencer1Portrait() {
       const src = this.card?.fencer1?.portrait;
       return src && String(src).trim() ? src : this.missingPortrait;
     },
@@ -112,46 +114,56 @@ export default {
       return src && String(src).trim() ? src : this.missingPortrait;
     },
     displayTime() {
-      const m = Math.floor(this.remaining / 60).toString().padStart(2, "0");
-      const s = (this.remaining % 60).toString().padStart(2, "0");
+      const m = Math.floor(this.remaining / 60)
+        .toString()
+        .padStart(2, '0');
+      const s = (this.remaining % 60).toString().padStart(2, '0');
       return `${m}:${s}`;
-    },
+    }
   },
   mounted() {
-    if (this.timerStatus === "running") this.start();
+    if (this.timerStatus === 'running') this.start();
+  },
+  beforeUnmount() {
+    this.stop();
   },
-  beforeUnmount() { this.stop(); },
   watch: {
-    "card.timeLeftSeconds": {
+    'card.timeLeftSeconds': {
       immediate: true,
       handler(n) {
         const next = Number(n ?? 0);
-        if (this.timerStatus !== "running") this.remaining = next;
-        if (this.timerStatus === "running" && this.remaining === 0) this.remaining = next;
-      },
+        if (this.timerStatus !== 'running') this.remaining = next;
+        if (this.timerStatus === 'running' && this.remaining === 0) this.remaining = next;
+      }
     },
     timerStatus(n) {
-      if (n === "running") { this.start(); return; }
+      if (n === 'running') {
+        this.start();
+        return;
+      }
       this.stop();
-    },
+    }
   },
   methods: {
     start() {
       this.stop();
       if (!this.remaining) this.remaining = Number(this.card?.timeLeftSeconds ?? 0);
       this.interval = setInterval(() => {
-        if (this.remaining <= 0) { this.stop(); return; }
+        if (this.remaining <= 0) {
+          this.stop();
+          return;
+        }
         this.remaining--;
       }, 1000);
     },
     stop() {
       if (this.interval) clearInterval(this.interval);
       this.interval = null;
-    },
-    onCardClick() {
-      if (!this.editMode) return;
-      this.$emit("resume", this.card.ids);
-    },
-  },
+    },
+    onCardClick() {
+      if (!this.editMode) return;
+      this.$emit('resume', this.card.ids);
+    }
+  }
 };
 </script>

package/src/stories/Organisms/Cards/BoutCard/Variants/BoutCardInactive/BoutCardInactive.stories.js

@@ -1,49 +1,36 @@
 import BoutCardInactive from './BoutCardInactive.vue';
 
 const baseCard = {
-    status: 'scheduled',
-    customStatus: '',
-    fencer1: { portrait: '', name: 'Fencer A', team: 'Club X', colorDot: 'red-500' },
-    fencer2: { portrait: '', name: 'Fencer B', team: 'Club Y', colorDot: 'blue-500' },
-    score1: 0,
-    score2: 0,
-    pos1: '1',
-    pos2: '2',
-    ids: { BoutId: 2, orderIndex: 1, PoolId: 10, EventId: 5 },
+  status: 'scheduled',
+  customStatus: '',
+  fencer1: { portrait: '', name: 'Fencer A', team: 'Club X', colorDot: 'red-500' },
+  fencer2: { portrait: '', name: 'Fencer B', team: 'Club Y', colorDot: 'blue-500' },
+  score1: 0,
+  score2: 0,
+  pos1: '1',
+  pos2: '2',
+  ids: { BoutId: 2, orderIndex: 1, PoolId: 10, EventId: 5 }
 };
 
 export default {
-    title: 'Molecules/BoutCard/Variants/Inactive',
-    component: BoutCardInactive,
-    args: {
-        card: { ...baseCard },
-        editMode: true,
-        reorderMode: false,
-        mode: 'scheduled',
-
-        // NEW
-        isAdmin: false,
-    },
-    argTypes: {
-        mode: { control: { type: 'radio' }, options: ['scheduled', 'completed'] },
-        isAdmin: { control: 'boolean' },
-    },
+  title: 'Molecules/BoutCard/Variants/Inactive',
+  component: BoutCardInactive,
+  args: {
+    card: { ...baseCard },
+    editMode: true,
+    reorderMode: false,
+    mode: 'scheduled'
+  },
+  argTypes: {
+    mode: { control: { type: 'radio' }, options: ['scheduled', 'completed'] }
+  }
 };
 
 export const Scheduled = {};
 
-export const ScheduledAdminAssignVisible = {
-    args: {
-        mode: 'scheduled',
-        isAdmin: true,
-        card: { ...baseCard, status: 'scheduled' },
-    },
-};
-
 export const Completed = {
-    args: {
-        mode: 'completed',
-        isAdmin: true, // doesn't matter; button should be hidden when not scheduled
-        card: { ...baseCard, status: 'completed', score1: 5, score2: 2 },
-    },
+  args: {
+    mode: 'completed',
+    card: { ...baseCard, status: 'completed', score1: 5, score2: 2 }
+  }
 };

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

@@ -1,7 +1,7 @@
 <template>
   <section class="w-full">
     <div v-if="c.customStatus && c.status !== 'active'" class="text-left">
-      <BaseText :text="c.customStatus" size="sm" color="primary"/>
+      <BaseText :text="c.customStatus" size="sm" color="primary" />
     </div>
 
     <!-- Desktop -->
@@ -10,27 +10,27 @@
       <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-full mr-4">
         <div class="flex space-x-4 items-center">
           <div class="relative">
-            <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+            <img :src="fencer1Portrait" alt="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="c.fencer1.name" size="md" color="quaternary" weight="bold"/>
-            <BaseText :text="c.fencer1.team" size="xs" color="quinary"/>
+            <BaseText :text="c.fencer1.name" size="md" color="quaternary" weight="bold" />
+            <BaseText :text="c.fencer1.team" size="xs" color="quinary" />
           </div>
         </div>
-        <BaseText :text="score1Display" size="3xl" weight="bold" class="align-middle pr-3 pt-0.5"/>
+        <BaseText :text="score1Display" size="3xl" weight="bold" class="align-middle pr-3 pt-0.5" />
       </div>
 
       <!-- Fencer 2 -->
       <div class="flex justify-between shadow-lg drop-shadow p-2 rounded-xl bg-poolBox w-full ml-4">
         <div class="flex space-x-4 justify-between w-full">
-          <BaseText :text="score2Display" size="3xl" weight="bold" class="align-middle pl-3 pt-0.5"/>
+          <BaseText :text="score2Display" size="3xl" weight="bold" class="align-middle pl-3 pt-0.5" />
           <div class="w-full">
-            <BaseText :text="c.fencer2.name" size="md" color="quaternary" weight="bold" class="text-right"/>
-            <BaseText :text="c.fencer2.team" size="xs" color="quinary" class="text-right"/>
+            <BaseText :text="c.fencer2.name" size="md" color="quaternary" weight="bold" class="text-right" />
+            <BaseText :text="c.fencer2.team" size="xs" color="quinary" class="text-right" />
           </div>
           <div class="relative w-20">
-            <img :src="fencer2Portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+            <img :src="fencer2Portrait" alt="Portrait" class="w-12 h-12 rounded-full" />
             <div :class="`w-4 h-4 rounded-full bg-${card.fencer2.colorDot} relative -mt-4 -ml-2 z-10`"></div>
           </div>
         </div>
@@ -39,42 +39,40 @@
       <!-- Actions -->
       <section v-if="editMode" class="text-right pl-4 flex">
         <BaseButton
-            v-if="isScheduled"
-            label="Start" size="sm" type="primary"
-            @buttonClick="$emit('start', c.ids)" class="w-16"/>
-        <BaseButton
-            v-if="!isScheduled"
-            label="Edit" size="sm" type="primary"
-            @buttonClick="$emit('edit', c.ids)" class="w-16"/>
-        <!-- Admin assign button -->
+          v-if="isScheduled"
+          label="Start"
+          size="sm"
+          type="primary"
+          @buttonClick="$emit('start', c.ids)"
+          class="w-16"
+        />
         <BaseButton
-            v-if="isAdmin && isScheduled"
-            label=""
-            type="primary"
-            iconName="fa-user-plus"
-            :iconLeft="false"
-            class="w-10 h-10 pr-4"
-            @buttonClick="$emit('assign', c.ids)"
+          v-if="!isScheduled"
+          label="Edit"
+          size="sm"
+          type="primary"
+          @buttonClick="$emit('edit', c.ids)"
+          class="w-16"
         />
       </section>
     </div>
 
     <!-- Mobile -->
-    <section
-        class="relative flex md:hidden items-center border rounded-md bg-poolBox transition overflow-hidden"
-        :class="mobileCardActionClass"
-    >
+    <section
+      class="relative flex md:hidden items-center border rounded-md bg-poolBox transition overflow-hidden"
+      :class="mobileCardActionClass"
+    >
       <!-- main tappable area -->
       <div class="flex flex-1 items-center p-4 min-w-0" @click="onCardClick">
         <!-- left portrait or index when reordering -->
         <div v-if="!reorderMode" class="relative flex flex-col items-center flex-none">
-          <img :src="fencer1Portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+          <img :src="fencer1Portrait" alt="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 v-if="reorderMode" class="flex flex-col items-center -mt-3 select-none flex-none">
-          <BaseText text="bout" size="xs" color="quinary" weight="bold"/>
-          <BaseText :text="`${(c.ids.orderIndex ?? 0) + 1}`" size="3xl" color="quaternary" weight="bold"/>
+          <BaseText text="bout" size="xs" color="quinary" weight="bold" />
+          <BaseText :text="`${(c.ids.orderIndex ?? 0) + 1}`" size="3xl" color="quaternary" weight="bold" />
         </div>
 
         <!-- center -->
@@ -82,80 +80,67 @@
           <div class="flex items-center justify-center">
             <div :class="`mr-2 bg-${card.fencer1.colorDot} w-3 h-3 flex-none`"></div>
             <BaseText
-                :text="c.fencer1.name"
-                size="sm"
-                color="quinary"
-                weight="bold"
-                class="leading-none truncate max-w-full"
+              :text="c.fencer1.name"
+              size="sm"
+              color="quinary"
+              weight="bold"
+              class="leading-none truncate max-w-full"
             />
           </div>
 
-          <BaseText text="vs" size="xs" color="quaternary"/>
+          <BaseText text="vs" size="xs" color="quaternary" />
 
           <div class="flex items-center justify-center">
             <div :class="`mr-2 bg-${card.fencer2.colorDot} w-3 h-3 flex-none`"></div>
             <BaseText
-                :text="c.fencer2.name"
-                size="sm"
-                color="quinary"
-                weight="bold"
-                class="leading-none truncate max-w-full"
+              :text="c.fencer2.name"
+              size="sm"
+              color="quinary"
+              weight="bold"
+              class="leading-none truncate max-w-full"
             />
           </div>
         </div>
 
         <!-- right portrait -->
         <div class="relative w-12 h-12 flex-none">
-          <img :src="fencer2Portrait" 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>
+          <img :src="fencer2Portrait" 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>
       </div>
-
-      <!-- action rail: [ > ] -->
-      <button
-          v-if="isAdmin && isScheduled && !reorderMode"
-          type="button"
-          class="flex-none w-10 h-full flex items-center justify-center bg-white/60 hover:bg-white"
-          @click.stop="$emit('assign', c.ids)"
-          aria-label="Assign director"
-          title="Assign director"
-      >
-        <BaseIcon icon-name="fa-chevron-right" size="sm" color="quinary" hover="primary" />
-      </button>
     </section>
-
   </section>
 </template>
 
 <script>
-import BaseText from "../../../../../Atoms/Text/BaseText.vue";
-import BaseButton from "../../../../../Molecules/Buttons/BaseButton/BaseButton.vue";
-import missingPortrait from "../../../../../../assets/portrait1.png";
-import BaseIcon from "../../../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from '../../../../../Atoms/Text/BaseText.vue';
+import BaseButton from '../../../../../Molecules/Buttons/BaseButton/BaseButton.vue';
+import missingPortrait from '../../../../../../assets/portrait1.png';
 
-const emptyFencer = { portrait: "", name: "Unknown Name", team: "Unknown Team", colorDot: "gray-400" };
+const emptyFencer = { portrait: '', name: 'Unknown Name', team: 'Unknown Team', colorDot: 'gray-400' };
 const defaultCard = {
-  status: "scheduled",
-  customStatus: "",
+  status: 'scheduled',
+  customStatus: '',
   fencer1: { ...emptyFencer },
   fencer2: { ...emptyFencer },
   score1: 0,
   score2: 0,
-  pos1: "",
-  pos2: "",
-  ids: {},
+  pos1: '',
+  pos2: '',
+  ids: {}
 };
 
 export default {
-  name: "BoutCardInactive",
-  emits: ['assign', 'edit', 'reorder:tap', 'start'],
-  components: {BaseIcon, BaseButton, BaseText },
+  name: 'BoutCardInactive',
+  emits: ['edit', 'reorder:tap', 'start'],
+  components: { BaseButton, BaseText },
   props: {
     card: { type: Object, required: true },
     editMode: { type: Boolean, default: false },
     reorderMode: { type: Boolean, default: false },
-    mode: { type: String, default: undefined }, // let status decide unless explicitly set
-    isAdmin: { type: Boolean, default: false },
+    mode: { type: String, default: undefined } // let status decide unless explicitly set
   },
   computed: {
     c() {
@@ -164,23 +149,23 @@ export default {
         ...defaultCard,
         ...src,
         fencer1: { ...emptyFencer, ...(src.fencer1 || {}) },
-        fencer2: { ...emptyFencer, ...(src.fencer2 || {}) },
+        fencer2: { ...emptyFencer, ...(src.fencer2 || {}) }
       };
     },
-    isScheduled() {
-      const status = this.mode ?? this.c.status; // prefer explicit prop if provided
-      return status === "scheduled";
-    },
-    mobileCardActionClass() {
-      if (this.reorderMode) return "cursor-grab ring-2 ring-dashed ring-slate-300";
-      if (this.editMode) return "cursor-pointer";
-      return "cursor-default";
-    },
+    isScheduled() {
+      const status = this.mode ?? this.c.status; // prefer explicit prop if provided
+      return status === 'scheduled';
+    },
+    mobileCardActionClass() {
+      if (this.reorderMode) return 'cursor-grab ring-2 ring-dashed ring-slate-300';
+      if (this.editMode) return 'cursor-pointer';
+      return 'cursor-default';
+    },
     score1Display() {
-      return this.isScheduled ? "-" : String(this.c.score1);
+      return this.isScheduled ? '-' : String(this.c.score1);
     },
     score2Display() {
-      return this.isScheduled ? "-" : String(this.c.score2);
+      return this.isScheduled ? '-' : String(this.c.score2);
     },
     fencer1Portrait() {
       const s = this.c.fencer1.portrait;
@@ -189,23 +174,23 @@ export default {
     fencer2Portrait() {
       const s = this.c.fencer2.portrait;
       return s && String(s).trim() ? s : missingPortrait;
-    },
-  },
-  methods: {
-    onCardClick() {
-      if (this.reorderMode) {
-        this.$emit("reorder:tap", this.c.ids);
-        return;
-      }
-
-      if (!this.editMode) return;
-      if (this.isScheduled) {
-        this.$emit("start", this.c.ids);
-        return;
-      }
-
-      this.$emit("edit", this.c.ids);
-    },
-  },
-};
+    }
+  },
+  methods: {
+    onCardClick() {
+      if (this.reorderMode) {
+        this.$emit('reorder:tap', this.c.ids);
+        return;
+      }
+
+      if (!this.editMode) return;
+      if (this.isScheduled) {
+        this.$emit('start', this.c.ids);
+        return;
+      }
+
+      this.$emit('edit', this.c.ids);
+    }
+  }
+};
 </script>

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

@@ -1,45 +1,44 @@
 <!-- src/stories/Organisms/Cards/BoutCard/Variants/BoutCardReorder/BoutCardReorder.vue -->
 <template>
   <section class="w-full border rounded-lg mb-4" :class="selected ? 'border-bright' : ''">
-    <div class="flex items-center justify-between p-2 rounded-md bg-poolBox shadow-sm" >
+    <div class="flex items-center justify-between p-2 rounded-md bg-poolBox shadow-sm">
       <!-- Left label / handle area (purely visual; drag comes from parent shell) -->
       <div class="flex flex-col items-center select-none pl-4 -mt-1">
         <BaseText text="bout" size="xs" color="quinary" weight="bold" />
-        <BaseText :text="String(orderIndex + 1)" size="4xl" color="quaternary" weight="bold"/>
+        <BaseText :text="String(orderIndex + 1)" size="4xl" color="quaternary" weight="bold" />
       </div>
 
       <!-- Center text -->
       <div class="text-center flex-1 mx-2">
-        <BaseText :text="`${card.pos1} - ${card.fencer1.name}`" size="sm" color="quinary" weight="bold"/>
-        <BaseText text="vs" size="xs" color="quaternary" class="-mt-0.5 ml-3"/>
-        <BaseText :text="`${card.pos2} - ${card.fencer2.name}`" size="sm" color="quinary" weight="bold"/>
+        <BaseText :text="`${card.pos1} - ${card.fencer1.name}`" size="sm" color="quinary" weight="bold" />
+        <BaseText text="vs" size="xs" color="quaternary" class="-mt-0.5 ml-3" />
+        <BaseText :text="`${card.pos2} - ${card.fencer2.name}`" size="sm" color="quinary" weight="bold" />
       </div>
 
       <div>
-        <BaseIcon icon-name="fa-grip-dots-vertical" size="4xl" color="quinary" class="mr-4"/>
+        <BaseIcon icon-name="fa-grip-dots-vertical" size="4xl" color="quinary" class="mr-4" />
       </div>
-
     </div>
   </section>
 </template>
 
 <script>
-import BaseText from "../../../../../Atoms/Text/BaseText.vue";
-import BaseIcon from "../../../../../Atoms/Icon/BaseIcon.vue";
+import BaseText from '../../../../../Atoms/Text/BaseText.vue';
+import BaseIcon from '../../../../../Atoms/Icon/BaseIcon.vue';
 
 export default {
-  name: "BoutCardReorder",
-  components: {BaseIcon, BaseText },
+  name: 'BoutCardReorder',
+  components: { BaseIcon, BaseText },
   props: {
     card: { type: Object, required: true },
     editMode: { type: Boolean, default: false },
     reorderMode: { type: Boolean, default: true },
-    selected: { type: Boolean, default: false },
+    selected: { type: Boolean, default: false }
   },
   computed: {
     orderIndex() {
       return Number(this.card?.ids?.orderIndex ?? 0);
-    },
-  },
+    }
+  }
 };
 </script>

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

@@ -1,11 +1,11 @@
 import BoutCardWaiting from './BoutCardWaiting.vue';
 
 export default {
-    title: 'Molecules/BoutCard/Variants/Waiting',
-    component: BoutCardWaiting,
-    args: {
-        colors: { Color1: 'red', Color2: 'blue' },
-    },
+  title: 'Molecules/BoutCard/Variants/Waiting',
+  component: BoutCardWaiting,
+  args: {
+    colors: { Color1: 'red', Color2: 'blue' }
+  }
 };
 
 export const Default = {};