@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Molecules/Reorder/ReorderableShell.vue

@@ -1,53 +1,55 @@
 <template>
   <div
-      :class="[
-      enabled ? 'select-none' : '',
-      isDragOver ? 'ring-2 ring-dashed ring-slate-300' : ''
-    ]"
-      role="listitem"
-      :aria-label="ariaLabel"
-      :draggable="enabled && dragReady"
-      tabindex="0"
-
-      @pointerdown="onPointerDown"
-      @pointerup="onPointerUp"
-      @pointercancel="onPointerUp"
-
-      @click="enabled && $emit('reorder:tap', payload)"
-      @keydown.space.prevent="enabled && $emit('reorder:tap', payload)"
-      @keydown.enter.prevent="enabled && $emit('reorder:tap', payload)"
-
-      @dragstart="onDragStart"
-      @dragend="onDragEnd"
-      @dragenter.prevent="onDragEnter"
-      @dragleave="onDragLeave"
-      @dragover.prevent="onDragOver"
-      @drop="onDrop"
+    :class="[enabled ? 'select-none' : '', isDragOver ? 'ring-2 ring-dashed ring-slate-300' : '']"
+    role="listitem"
+    :aria-label="ariaLabel"
+    :draggable="enabled && dragReady"
+    tabindex="0"
+    @pointerdown="onPointerDown"
+    @pointerup="onPointerUp"
+    @pointercancel="onPointerUp"
+    @click="enabled && $emit('reorder:tap', payload)"
+    @keydown.space.prevent="enabled && $emit('reorder:tap', payload)"
+    @keydown.enter.prevent="enabled && $emit('reorder:tap', payload)"
+    @dragstart="onDragStart"
+    @dragend="onDragEnd"
+    @dragenter.prevent="onDragEnter"
+    @dragleave="onDragLeave"
+    @dragover.prevent="onDragOver"
+    @drop="onDrop"
   >
-    <slot/>
+    <slot />
   </div>
 </template>
 
 <script>
 export default {
   name: 'ReorderableShell',
-  emits: ['reorder:dragend', 'reorder:dragenter', 'reorder:dragleave', 'reorder:dragover', 'reorder:dragstart', 'reorder:drop', 'reorder:tap'],
+  emits: [
+    'reorder:dragend',
+    'reorder:dragenter',
+    'reorder:dragleave',
+    'reorder:dragover',
+    'reorder:dragstart',
+    'reorder:drop',
+    'reorder:tap'
+  ],
   props: {
-    enabled: {type: Boolean, default: false},
-    dragId: {type: [String, Number], required: true},
-    payload: {type: Object, default: () => ({})},
-    ariaLabel: {type: String, default: 'Reorder item'},
+    enabled: { type: Boolean, default: false },
+    dragId: { type: [String, Number], required: true },
+    payload: { type: Object, default: () => ({}) },
+    ariaLabel: { type: String, default: 'Reorder item' },
 
     // NEW
-    requireHandle: {type: Boolean, default: true},           // drag only from a handle
-    handleSelector: {type: String, default: '[data-drag-handle]'},
-    longPressMs: {type: Number, default: 250},               // touch long-press threshold
+    requireHandle: { type: Boolean, default: true }, // drag only from a handle
+    handleSelector: { type: String, default: '[data-drag-handle]' },
+    longPressMs: { type: Number, default: 250 } // touch long-press threshold
   },
   data() {
     return {
       isDragOver: false,
-      dragReady: false,        // controls :draggable
-      pressTimer: null,
+      dragReady: false, // controls :draggable
+      pressTimer: null
     };
   },
   methods: {
@@ -67,7 +69,7 @@ export default {
       }
       clearTimeout(this.pressTimer);
       this.pressTimer = setTimeout(() => {
-        this.dragReady = true;   // enables :draggable
+        this.dragReady = true; // enables :draggable
       }, this.longPressMs);
     },
     onPointerUp() {
@@ -82,11 +84,11 @@ export default {
         e.preventDefault();
         return;
       }
+      const dataTransfer = e.dataTransfer;
       try {
-        e.dataTransfer.setData('text/plain', String(this.dragId));
-        e.dataTransfer.effectAllowed = 'move';
-      } catch {
-      }
+        dataTransfer.setData('text/plain', String(this.dragId));
+        dataTransfer.effectAllowed = 'move';
+      } catch {}
       this.$emit('reorder:dragstart', this.payload);
     },
     onDragEnd() {
@@ -105,7 +107,8 @@ export default {
     },
     onDragOver(e) {
       if (!this.enabled) return;
-      e.dataTransfer && (e.dataTransfer.dropEffect = 'move');
+      const dataTransfer = e.dataTransfer;
+      if (dataTransfer) dataTransfer.dropEffect = 'move';
       this.$emit('reorder:dragover', this.payload);
     },
     onDrop(e) {
@@ -113,8 +116,8 @@ export default {
       this.isDragOver = false;
       const fromDragId = Number(e.dataTransfer?.getData('text/plain') || '');
       if (!fromDragId || String(fromDragId) === String(this.dragId)) return;
-      this.$emit('reorder:drop', {fromDragId, toDragId: this.dragId, target: this.payload});
-    },
-  },
+      this.$emit('reorder:drop', { fromDragId, toDragId: this.dragId, target: this.payload });
+    }
+  }
 };
 </script>

package/src/stories/Molecules/StepIndicator/BaseStepIndicator/StepIndicator.stories.js

@@ -1,49 +1,49 @@
-import StepIndicator from "./StepIndicator.vue";
-import mockEventQuestions from "../../../../mocks/EventQuestionsMock.js";
+import StepIndicator from './StepIndicator.vue';
+import mockEventQuestions from '../../../../mocks/EventQuestionsMock.js';
 
 export default {
-    title: 'Molecules/StepIndicators/StepIndicator',
-    component: StepIndicator,
-    tags: ['autodocs'],
-    args: {
-        selected: 1,
-        steps: []
-    },
-    argTypes: {
-        selected: { control: 'number' },
-        steps: { control: 'object' }
-    }
+  title: 'Molecules/StepIndicators/StepIndicator',
+  component: StepIndicator,
+  tags: ['autodocs'],
+  args: {
+    selected: 1,
+    steps: []
+  },
+  argTypes: {
+    selected: { control: 'number' },
+    steps: { control: 'object' }
+  }
 };
 
 export const Default = {
-    args: {
-        selected: 0,
-        steps: [
-            { name: "Basic Info", icon: "fa-circle-info" },
-            { name: "Pool Setup", icon: "fa-table-columns" },
-            { name: "Direct Elimination.", icon: "fa-diagram-sankey" }
-        ]
-    }
-}
+  args: {
+    selected: 0,
+    steps: [
+      { name: 'Basic Info', icon: 'fa-circle-info' },
+      { name: 'Pool Setup', icon: 'fa-table-columns' },
+      { name: 'Direct Elimination.', icon: 'fa-diagram-sankey' }
+    ]
+  }
+};
 
 export const Step2 = {
-    args: {
-        selected: 1,
-        steps: [
-            { name: "Basic Info", icon: "fa-circle-info" },
-            { name: "Pool Setup", icon: "fa-table-columns" },
-            { name: "Direct Elimination", icon: "fa-diagram-sankey" }
-        ]
-    }
-}
+  args: {
+    selected: 1,
+    steps: [
+      { name: 'Basic Info', icon: 'fa-circle-info' },
+      { name: 'Pool Setup', icon: 'fa-table-columns' },
+      { name: 'Direct Elimination', icon: 'fa-diagram-sankey' }
+    ]
+  }
+};
 
 export const Step3 = {
-    args: {
-        selected: 2,
-        steps: [
-            { name: "Basic Info", icon: "fa-circle-info" },
-            { name: "Pool Setup", icon: "fa-table-columns" },
-            { name: "Direct Elimination.", icon: "fa-diagram-sankey" }
-        ]
-    }
-}
+  args: {
+    selected: 2,
+    steps: [
+      { name: 'Basic Info', icon: 'fa-circle-info' },
+      { name: 'Pool Setup', icon: 'fa-table-columns' },
+      { name: 'Direct Elimination.', icon: 'fa-diagram-sankey' }
+    ]
+  }
+};

package/src/stories/Molecules/StepIndicator/BaseStepIndicator/StepIndicator.vue

@@ -1,36 +1,34 @@
 <template>
   <section class="hidden md:flex flex-col w-full">
-  <ol class="flex justify-center">
-    <li v-for="(step, index) in steps" :key="index" class="flex items-center">
-      <span
+    <ol class="flex justify-center">
+      <li v-for="(step, index) in steps" :key="index" class="flex items-center">
+        <span
           class="flex items-center justify-center w-10 h-10 border-dropdownSelect rounded-full lg:h-12 lg:w-12 shrink-0 ml-2"
           :class="index === selected ? 'bg-toggleBackground' : 'bg-dropdownSelect'"
-      >
-        <BaseIcon
-            :icon-name="step.icon"
-            :color="index === selected ? 'neutral' : 'neutral'"
-            :size="'lg'"
-        />
-      </span>
-      <div v-if="index < steps.length - 1" class="flex-grow h-1 mx-2 w-20"
-           :class="index < selected ? 'text-toggleBackground' : 'text-dropdownSelect'"
-           style="border-bottom: 4px solid;"></div>
-    </li>
-  </ol>
-  <ol class="flex justify-center w-full">
-    <li v-for="(step, index) in steps" :key="index" class="flex items-center">
-      <div class="w-[8.9rem] flex justify-center">
-        <BaseText :text="step.name" :color="index === selected ? 'quinary' : 'dropdownSelect'" class="mt-2"/>
-      </div>
-    </li>
-  </ol>
+        >
+          <BaseIcon :icon-name="step.icon" :color="index === selected ? 'neutral' : 'neutral'" :size="'lg'" />
+        </span>
+        <div
+          v-if="index < steps.length - 1"
+          class="flex-grow h-1 mx-2 w-20"
+          :class="index < selected ? 'text-toggleBackground' : 'text-dropdownSelect'"
+          style="border-bottom: 4px solid"
+        ></div>
+      </li>
+    </ol>
+    <ol class="flex justify-center w-full">
+      <li v-for="(step, index) in steps" :key="index" class="flex items-center">
+        <div class="w-[8.9rem] flex justify-center">
+          <BaseText :text="step.name" :color="index === selected ? 'quinary' : 'dropdownSelect'" class="mt-2" />
+        </div>
+      </li>
+    </ol>
   </section>
-
 </template>
 
 <script>
-import BaseIcon from "../../../Atoms/Icon/BaseIcon.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseIcon from '../../../Atoms/Icon/BaseIcon.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 export default {
   name: 'StepIndicator',

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

@@ -1,37 +1,42 @@
-import BoutCard from "./BoutCard.vue";
+import BoutCard from './BoutCard.vue';
 
 const bout = {
-    Status: 'Scheduled',
-    TimeLeft: 90,
-    customStatus: '',
-    Person1: { DisplayName: 'Fencer A', Club: { Name: 'Club X' }, Images: [] },
-    Person2: { DisplayName: 'Fencer B', Club: { Name: 'Club Y' }, Images: [] },
-    Score1: 0, Score2: 0,
-    Person1Pos: '2', Person2Pos: '3',
-    BoutId: 42, OrderIndex: 0, PoolId: 10, EventId: 5,
-    hostingClubColors: {
-        Color1: 'red',
-        Color2: 'blue'
-    },
+  Status: 'Scheduled',
+  TimeLeft: 90,
+  customStatus: '',
+  Person1: { DisplayName: 'Fencer A', Club: { Name: 'Club X' }, Images: [] },
+  Person2: { DisplayName: 'Fencer B', Club: { Name: 'Club Y' }, Images: [] },
+  Score1: 0,
+  Score2: 0,
+  Person1Pos: '2',
+  Person2Pos: '3',
+  BoutId: 42,
+  OrderIndex: 0,
+  PoolId: 10,
+  EventId: 5,
+  hostingClubColors: {
+    Color1: 'red',
+    Color2: 'blue'
+  }
 };
 
 export default {
-    title: 'Organisms/Cards/BoutCard',
-    component: BoutCard,
-    args: {
-        bout,
-        isWaiting: false,
-        timerStatus: 'stopped',
-        hostingClubColors: { Color1: 'red', Color2: 'blue' },
-        editMode: true,
-        reorderMode: false,
-        isCountingBackwardsMaxScore: 0,
-    },
-    argTypes: {
-        isWaiting: { control: 'boolean' },
-        reorderMode: { control: 'boolean' },
-        timerStatus: { control: { type: 'radio' }, options: ['running', 'stopped'] },
-    },
+  title: 'Organisms/Cards/BoutCard',
+  component: BoutCard,
+  args: {
+    bout,
+    isWaiting: false,
+    timerStatus: 'stopped',
+    hostingClubColors: { Color1: 'red', Color2: 'blue' },
+    editMode: true,
+    reorderMode: false,
+    isCountingBackwardsMaxScore: 0
+  },
+  argTypes: {
+    isWaiting: { control: 'boolean' },
+    reorderMode: { control: 'boolean' },
+    timerStatus: { control: { type: 'radio' }, options: ['running', 'stopped'] }
+  }
 };
 
 export const Scheduled = {};

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

@@ -1,27 +1,25 @@
 <template>
   <component
-      :is="variantComponent"
-      :card="card"
-      :mode="inactiveMode"
-      :editMode="editMode"
-      :reorderMode="reorderMode"
-      :timerStatus="timerStatus"
-      :selected="selected"
-      :isAdmin="isAdmin"
-      @start="onStart"
-      @resume="onResume"
-      @edit="onEdit"
-      @assign="onAssign"
+    :is="variantComponent"
+    :card="card"
+    :mode="inactiveMode"
+    :editMode="editMode"
+    :reorderMode="reorderMode"
+    :timerStatus="timerStatus"
+    :selected="selected"
+    @start="onStart"
+    @resume="onResume"
+    @edit="onEdit"
   />
 </template>
 
 <script>
-import BoutCardWaiting from "./Variants/BoutCardWaiting/BoutCardWaiting.vue";
-import BoutCardActive from "./Variants/BoutCardActive/BoutCardActive.vue";
-import BoutCardInactive from "./Variants/BoutCardInactive/BoutCardInactive.vue";
-import BoutCardReorder from "./Variants/BoutCardReorder/BoutCardReorder.vue";
-import ReorderableShell from "../../../Molecules/Reorder/ReorderableShell.vue";
-import missingPortrait from "../../../../assets/portrait1.png";
+import BoutCardWaiting from './Variants/BoutCardWaiting/BoutCardWaiting.vue';
+import BoutCardActive from './Variants/BoutCardActive/BoutCardActive.vue';
+import BoutCardInactive from './Variants/BoutCardInactive/BoutCardInactive.vue';
+import BoutCardReorder from './Variants/BoutCardReorder/BoutCardReorder.vue';
+import ReorderableShell from '../../../Molecules/Reorder/ReorderableShell.vue';
+import missingPortrait from '../../../../assets/portrait1.png';
 
 const VariantMap = {
   waiting: BoutCardWaiting,
@@ -30,9 +28,35 @@ const VariantMap = {
   reorder: BoutCardReorder
 };
 
+const createFencerCard = (fencer, clubColor, fallbackColor) => {
+  const person = fencer || {};
+  const club = person.Club || {};
+  const portrait = person.Images?.[0]?.URL || missingPortrait;
+
+  return {
+    portrait,
+    name: person.DisplayName || 'Unknown Name',
+    team: club.Name || 'Unknown Team',
+    colorDot: clubColor || fallbackColor
+  };
+};
+
+const getDisplayedScore = (score, countingBackwardsMaxScore) => {
+  const normalizedScore = score || 0;
+  if (countingBackwardsMaxScore <= 0) return normalizedScore;
+  return countingBackwardsMaxScore - normalizedScore;
+};
+
+const createBoutIds = bout => ({
+  BoutId: bout.BoutId,
+  orderIndex: bout.OrderIndex,
+  PoolId: bout.PoolId,
+  EventId: bout.EventId
+});
+
 export default {
-  name: "BoutCard",
-  emits: ['action:assignBout', 'action:editBout', 'action:resumeBout', 'action:startBout', 'reorder:swap'],
+  name: 'BoutCard',
+  emits: ['action:editBout', 'action:resumeBout', 'action:startBout', 'reorder:swap'],
   components: { ReorderableShell, BoutCardWaiting, BoutCardActive, BoutCardInactive },
   props: {
     bout: { type: Object, required: true },
@@ -42,53 +66,27 @@ export default {
     editMode: { type: Boolean, required: true },
     reorderMode: { type: Boolean, required: true },
     isCountingBackwardsMaxScore: { type: Number, default: 0 },
-    selected: { type: Boolean, default: false },
-    isAdmin: { type: Boolean, default: false },
+    selected: { type: Boolean, default: false }
   },
   computed: {
     card() {
-      const b = this.bout || {};
-      const f1 = b.Person1 || {};
-      const f2 = b.Person2 || {};
-
-      const raw1 = b.Score1 || 0;
-      const raw2 = b.Score2 || 0;
-      const score1 = this.isCountingBackwardsMaxScore > 0 ? (this.isCountingBackwardsMaxScore - raw1) : raw1;
-      const score2 = this.isCountingBackwardsMaxScore > 0 ? (this.isCountingBackwardsMaxScore - raw2) : raw2;
-
-      const status = (b.Status || '').toLowerCase(); // 'scheduled' | 'active' | 'completed'
-      const timeLeftSeconds = Number(b.TimeLeft || 0);
+      const bout = this.bout || {};
 
       return {
-        status,
-        customStatus: b.customStatus || '',
-        timeLeftSeconds,
-        fencer1: {
-          portrait: f1?.Images?.[0]?.URL || missingPortrait,
-          name: f1?.DisplayName || 'Unknown Name',
-          team: f1?.Club?.Name || 'Unknown Team',
-          colorDot: this.hostingClubColors?.Color1 || 'red',
-        },
-        fencer2: {
-          portrait: f2?.Images?.[0]?.URL || missingPortrait,
-          name: f2?.DisplayName || 'Unknown Name',
-          team: f2?.Club?.Name || 'Unknown Team',
-          colorDot: this.hostingClubColors?.Color2 || 'blue',
-        },
-        score1,
-        score2,
-        pos1: b.Person1Pos,
-        pos2: b.Person2Pos,
-        ids: {
-          BoutId: b.BoutId,
-          orderIndex: b.OrderIndex,
-          PoolId: b.PoolId,
-          EventId: b.EventId,
-        },
+        status: (bout.Status || '').toLowerCase(),
+        customStatus: bout.customStatus || '',
+        timeLeftSeconds: Number(bout.TimeLeft || 0),
+        fencer1: createFencerCard(bout.Person1, this.hostingClubColors?.Color1, 'red'),
+        fencer2: createFencerCard(bout.Person2, this.hostingClubColors?.Color2, 'blue'),
+        score1: getDisplayedScore(bout.Score1, this.isCountingBackwardsMaxScore),
+        score2: getDisplayedScore(bout.Score2, this.isCountingBackwardsMaxScore),
+        pos1: bout.Person1Pos,
+        pos2: bout.Person2Pos,
+        ids: createBoutIds(bout)
       };
     },
     variant() {
-      if (this.reorderMode) return "reorder";
+      if (this.reorderMode) return 'reorder';
       if (this.isWaiting) return 'waiting';
       if (this.card.status === 'active') return 'active';
       return 'inactive';
@@ -99,17 +97,22 @@ export default {
     },
     variantComponent() {
       return VariantMap[this.variant];
-    },
+    }
   },
   methods: {
-    onStart(ids) { this.$emit('action:startBout', ids);},
-    onResume(ids) { this.$emit('action:resumeBout', ids); },
-    onEdit(ids) { this.$emit('action:editBout', ids); },
+    onStart(ids) {
+      this.$emit('action:startBout', ids);
+    },
+    onResume(ids) {
+      this.$emit('action:resumeBout', ids);
+    },
+    onEdit(ids) {
+      this.$emit('action:editBout', ids);
+    },
     onDrop({ fromDragId, toDragId }) {
       if (!fromDragId || !toDragId || String(fromDragId) === String(toDragId)) return;
       this.$emit('reorder:swap', { fromBoutId: fromDragId, toBoutId: toDragId });
-    },
-    onAssign(ids) { this.$emit('action:assignBout', ids); },
-  },
+    }
+  }
 };
 </script>

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

@@ -1,31 +1,33 @@
 import BoutCardActive from './BoutCardActive.vue';
 
 const makeCard = () => ({
-    status: 'active',
-    customStatus: 'test',
-    timeLeftSeconds: 85,
-    fencer1: { portrait: '', name: 'Fencer A', team: 'Club X', colorDot: 'red-500' },
-    fencer2: { portrait: '', name: 'Fencer B', team: 'Club Y', colorDot: 'blue-500' },
-    score1: 3, score2: 4,
-    pos1: '1', pos2: '1',
-    ids: { boutId: 1, orderIndex: 0, poolId: 10, eventId: 5 },
+  status: 'active',
+  customStatus: 'test',
+  timeLeftSeconds: 85,
+  fencer1: { portrait: '', name: 'Fencer A', team: 'Club X', colorDot: 'red-500' },
+  fencer2: { portrait: '', name: 'Fencer B', team: 'Club Y', colorDot: 'blue-500' },
+  score1: 3,
+  score2: 4,
+  pos1: '1',
+  pos2: '1',
+  ids: { boutId: 1, orderIndex: 0, poolId: 10, eventId: 5 }
 });
 
 export default {
-    title: 'Molecules/BoutCard/Variants/Active',
-    component: BoutCardActive,
-    args: {
-        card: makeCard(),
-        editMode: true,
-        reorderMode: false,
-        timerStatus: 'running',
-    },
-    argTypes: {
-        timerStatus: {
-            control: { type: 'radio' },
-            options: ['running', 'stopped']
-        },
-    },
+  title: 'Molecules/BoutCard/Variants/Active',
+  component: BoutCardActive,
+  args: {
+    card: makeCard(),
+    editMode: true,
+    reorderMode: false,
+    timerStatus: 'running'
+  },
+  argTypes: {
+    timerStatus: {
+      control: { type: 'radio' },
+      options: ['running', 'stopped']
+    }
+  }
 };
 
 export const Running = {};