@dcrackel/meyersquaredui 1.0.115 → 1.0.117

package/src/stories/Molecules/BreadCrumbs/BreadCrumbs.stories.js

@@ -0,0 +1,22 @@
+import BreadCrumbs from './BreadCrumbs.vue';
+
+export default {
+    title: 'Molecules/BreadCrumbs/BreadCrumbs',
+    component: BreadCrumbs,
+};
+
+const Template = (args) => ({
+    components: { BreadCrumbs },
+    setup() {
+        return { args };
+    },
+    template: '<BreadCrumbs v-bind="args" />',
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    tournamentName: 'Spring Tournament',
+    eventName: 'Saber Fights',
+    currentStep: 'Registration',
+    detailMessage: 'Click on the tournament or event to view more details.',
+};

package/src/stories/Molecules/BreadCrumbs/BreadCrumbs.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="flex flex-col mb-20 lg:ml-4">
+    <div class="flex overflow-x-auto md:overflow-x-hidden mx-2 md:ml-0 h-12">
+      <BaseText tag="h2" weight="bold"
+                class="mt-4 underline hover:text-accent text-sm md:text-xl whitespace-nowrap"
+                @click="navigateToTournamentDetail">{{ tournamentName }}
+      </BaseText>
+      <Icon icon="fa-chevron-right" color="primary" size="sm" class="ml-4 mt-4 md:mt-5"/>
+      <BaseText tag="h2" weight="bold" class="pb-0.5 ml-4 mt-4 text-sm md:text-xl whitespace-nowrap">
+        {{ eventName }}
+      </BaseText>
+      <Icon icon="fa-chevron-right" color="primary" size="sm" class="ml-4 mt-4 md:mt-5"/>
+      <BaseText tag="h2" weight="bold" class="pb-0.5 ml-4 mt-4 text-sm md:text-xl whitespace-nowrap">
+        {{ currentStep }}
+      </BaseText>
+    </div>
+    <BaseText tag="h2" weight="regular" class="mt-2 mb-8 mx-2 md:mx-0 text-sm md:text-md md:ml-0">
+      {{ detailMessage }}
+    </BaseText>
+  </div>
+</template>
+
+<script>
+import BaseText from '../../Atoms/BaseText/BaseText.vue';
+import Icon from '../../Atoms/Icon/Icon.vue';
+
+export default {
+  name: 'BreadCrumbs',
+  components: {
+    BaseText,
+    Icon,
+  },
+  props: {
+    tournamentName: {
+      type: String,
+      required: true
+    },
+    eventName: {
+      type: String,
+      required: true
+    },
+    currentStep: {
+      type: String,
+      required: true
+    },
+    detailMessage: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    navigateToTournamentDetail() {
+      this.$emit('navigate');
+    }
+  }
+}
+</script>

package/src/stories/Molecules/ProgressTracker/ProgressTracker.stories.js

@@ -22,10 +22,11 @@ export const Default = Template.bind({});
 Default.args = {
     currentPhase: 2, // Example: Pool Results
     highlightPhase: 1, // Example: Pools (User viewing Pools page)
-    isEventComplete: false,
+    livePhase: 1,
+    isEventComplete: false, //fa-kit fa-longsword
     phases: [
         { label: 'Registration', icon: 'fa-solid fa-file-alt' },
-        { label: 'Pools', icon: 'fa-kit fa-longsword' },
+        { label: 'Pools', icon: 'fa-regular fa-circle-dot' },
         { label: 'Pool Results', icon: 'fa-solid fa-clipboard-check' },
         { label: 'Bracket', icon: 'fa-solid fa-sitemap' },
         { label: 'Final Result', icon: 'fa-solid fa-trophy' },

package/src/stories/Molecules/ProgressTracker/ProgressTracker.vue

@@ -15,16 +15,17 @@
       <!-- Clickable Icon and Label -->
       <div class="flex flex-col items-center"
            :class="{'hover:cursor-pointer': index <= currentPhase, 'hover:cursor-default': index > currentPhase}">
-        <div
-            class="w-6 h-6 md:w-9 md:h-9 flex items-center justify-center rounded-full transition-all duration-300 border-2"
-            :class="{
-            'border-accent': isPhaseActive(index),
-            'border-gray-300': !isPhaseActive(index),
-            'hover:bg-accent': hoveredPhase === index && index <= currentPhase,
-            'hover:bg-gray-200': hoveredPhase === index && !isPhaseActive(index) && index <= currentPhase,
-          }"
-        >
+          <div
+              class="w-6 h-6 md:w-9 md:h-9 flex items-center justify-center rounded-full transition-all duration-300 border-2"
+              :class="{
+              'border-accent': isPhaseActive(index),
+              'border-gray-300': !isPhaseActive(index),
+              'hover:bg-accent': hoveredPhase === index && index <= currentPhase,
+              'hover:bg-gray-200': hoveredPhase === index && !isPhaseActive(index) && index <= currentPhase,
+            }"
+          >
           <i :class="[phase.icon, 'text-xs md:text-lg']"></i>
+          <i v-if="livePhase === index" :class="[phase.icon, 'text-xs md:text-lg absolute animate-ping text-accent']"></i>
         </div>
         <BaseText
             tag="p"
@@ -74,6 +75,10 @@ export default {
       type: Number,
       default: null,
     },
+    livePhase: {
+      type: Number,
+      default: null,
+    },
     isEventComplete: {
       type: Boolean,
       default: false,

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

@@ -0,0 +1,81 @@
+import BoutCard from './BoutCard.vue';
+import getPoolsWithBouts from '../../../../mocks/getPoolsWithBouts.js';
+
+export default {
+    title: 'Organisms/Cards/BoutCard',
+    component: BoutCard,
+    tags: ['autodocs'],
+    args: {
+        bout: getPoolsWithBouts[0],
+        isWaiting: false,
+        timerStatus: 'stopped',
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        },
+    },
+    argTypes: {
+        bout: {
+            control: 'object'
+        },
+        isSkeleton: {
+            control: 'boolean'
+        },
+        timerStatus: {
+            control: 'text'
+        },
+        hostingClubColors: {
+            control: 'object'
+        },
+
+    }
+};
+
+
+export const Default = {
+    args: {
+        bout: getPoolsWithBouts[0],
+        isWaiting: false,
+        timerStatus: 'running',
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+};
+
+export const Scheduled = {
+    args: {
+        bout: getPoolsWithBouts[4],
+        isWaiting: false,
+        timerStatus: 'stopped',
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+}
+
+export const Completed = {
+    args: {
+        bout: getPoolsWithBouts[2],
+        isWaiting: false,
+        timerStatus: 'stopped',
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+}
+
+export const Skeleton = {
+    args: {
+        bout: getPoolsWithBouts[2],
+        isWaiting: true,
+        timerStatus: 'stopped',
+        hostingClubColors: {
+            Color1: 'red',
+            Color2: 'blue'
+        }
+    }
+}

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

@@ -0,0 +1,199 @@
+<template>
+  <section>
+    <div v-if="isWaiting" class="flex items-center justify-between rounded-lg w-full">
+      <!-- Fencer 1 -->
+      <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>
+            <div :class="`w-4 h-4 rounded-full bg-${hostingClubColors.Color1} absolute top-10 left-11 `"></div>
+            <img :src="missingPortrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+          </div>
+          <div>
+            <BaseText size="md" color="quaternary" weight="bold">Waiting to be selected</BaseText>
+            <BaseText size="xs" color="quinary">starting soon</BaseText>
+          </div>
+        </div>
+        <BaseText text="" size="3xl" weight="bold" :class="`align-middle pr-3 pt-0.5`"/>
+      </div>
+
+      <!-- Timer -->
+      <div class="text-center mx-8"></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-end space-x-4 ml-4 w-full">
+          <div>
+            <BaseText size="md" color="quaternary" weight="bold" class="text-right">Waiting to be selected</BaseText>
+            <BaseText size="xs" color="quinary" class="text-right">starting soon</BaseText>
+          </div>
+          <div>
+            <div :class="`w-4 h-4 rounded-full bg-${hostingClubColors.Color2} absolute top-10 right-12`"></div>
+            <img :src="missingPortrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Custom Status -->
+    <div v-if="bout.customStatus && bout.Status !== 'Active'" class="text-left">
+      <BaseText size="sm" color="primary">{{bout.customStatus}}</BaseText>
+    </div>
+
+    <!-- Bout Card -->
+    <div v-if="!isWaiting" class="flex items-center justify-between rounded-lg">
+      <!-- Fencer 1 -->
+      <div class="w-5/12 flex justify-between border-l border-t border-b p-2 bg-poolBox rounded-l-xl" :class="fencer1Class">
+        <div class="flex space-x-4 items-center">
+          <div>
+            <div :class="`w-4 h-4 rounded-full bg-${hostingClubColors.Color1} fixed mt-8 ml-9`"></div>
+            <img :src="fencer1.portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+          </div>
+          <div>
+            <BaseText size="md" color="quaternary" weight="bold">{{fencer1.name}}</BaseText>
+            <BaseText size="xs" color="quinary">{{fencer1.team}}</BaseText>
+          </div>
+        </div>
+        <BaseText size="3xl" weight="bold" :class="`align-middle pr-3 pt-0.5`">{{fencer1Score}}</BaseText>
+      </div>
+
+      <!-- Timer -->
+      <div v-if="bout.Status === 'Active'" class="w-2/12 h-16 pt-3 text-center bg-primary">
+        <BaseText size="2xl" color="white" weight="bold">{{displayTime}}</BaseText>
+      </div>
+
+      <!-- Fencer 2 -->
+      <div class="w-5/12 flex justify-between border-r border-t border-b p-2 bg-poolBox rounded-r-xl" :class="fencer2Class">
+        <div class="flex space-x-4 justify-between w-full">
+          <BaseText size="3xl" weight="bold" :class="`align-middle pl-3 pt-0.5`">{{fencer2Score}}</BaseText>
+          <div class="w-full">
+            <BaseText size="md" color="quaternary" weight="bold" class="text-right">{{fencer2.name}}</BaseText>
+            <BaseText size="xs" color="quinary" class="text-right">{{fencer2.team}}</BaseText>
+          </div>
+          <div class="w-20">
+            <div :class="`w-4 h-4 rounded-full bg-${hostingClubColors.Color2} fixed mt-8 mr-14`"></div>
+            <img :src="fencer2.portrait" alt="Portrait" class="w-12 h-12 rounded-full"/>
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script>
+import missingPortrait from "../../../../assets/images/portrait1.png";
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+import BaseButton from "../../../Atoms/BaseButton/BaseButton.vue";
+
+export default {
+  components: {BaseButton, BaseText},
+  props: {
+    bout: {
+      type: Object,
+      required: true
+    },
+    isWaiting: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    timerStatus: {
+      type: String,
+      required: false,
+      default: 'stopped'
+    },
+    hostingClubColors: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    return {
+      remainingTime: this.bout.TimeLeft,
+      interval: null,
+      missingPortrait
+    };
+  },
+  mounted() {
+    if (this.timerStatus === 'running') {
+      this.startTimer();
+    }
+  },
+  beforeDestroy() {
+    this.stopTimer();
+  },
+  computed: {
+    fencer1() {
+      return {
+        portrait: this.bout.Person1.Images.length ? this.bout.Person1.Images[0].URL : this.missingPortrait,
+        name: this.bout.Person1.DisplayName,
+        team: this.bout.Person1.Club.Name,
+        score: this.bout.Score1
+      };
+    },
+    fencer2() {
+      return {
+        portrait: this.bout.Person2.Images.length ? this.bout.Person2.Images[0].URL : this.missingPortrait,
+        name: this.bout.Person2.DisplayName,
+        team: this.bout.Person2.Club.Name,
+        score: this.bout.Score2
+      };
+    },
+    fencer1Score() {
+      return this.bout.Status !== 'Scheduled' ? this.fencer1.score : '-';
+    },
+    fencer2Score() {
+      return this.bout.Status !== 'Scheduled' ? this.fencer2.score : '-';
+    },
+    displayTime() {
+      const minutes = Math.floor(this.remainingTime / 60).toString().padStart(2, '0');
+      const seconds = (this.remainingTime % 60).toString().padStart(2, '0');
+      return `${minutes}:${seconds}`;
+    },
+    fencer1Class() {
+      return {
+        [`border-${this.hostingClubColors.Color1}`]: this.bout.Status === 'Active',
+        [`border-r`]: this.bout.Status !== 'Active',
+      };
+    },
+    fencer2Class() {
+      return {
+        [`border-${this.hostingClubColors.Color2}`]: this.bout.Status === 'Active',
+        [`border-l`]: this.bout.Status !== 'Active',
+      };
+    }
+  },
+  watch: {
+    timerStatus(newStatus) {
+      if (newStatus === 'running') {
+        this.startTimer();
+      } else {
+        this.stopTimer();
+      }
+    },
+    bout: {
+      deep: true,
+      handler(newBout) {
+        this.remainingTime = newBout.TimeLeft;
+        newBout.TimerStatus === 'running' ? this.startTimer() : this.stopTimer();
+      }
+    }
+  },
+  methods: {
+    startTimer() {
+      if (this.interval) clearInterval(this.interval);
+      this.interval = setInterval(() => {
+        if (this.remainingTime > 0) {
+          this.remainingTime--;
+        } else {
+          this.stopTimer();
+        }
+      }, 1000);
+    },
+    stopTimer() {
+      if (this.interval) clearInterval(this.interval);
+      this.interval = null;
+    },
+  }
+}
+</script>

package/src/stories/Organisms/{GridLayout → Grids/GridLayout}/GridLayout.stories.js

@@ -1,10 +1,10 @@
 import GridLayout from './GridLayout.vue';
-import TournamentCard from '../../Organisms/Cards/TournamentCard/TournamentCard.vue';
-import FencerCard from '../../Organisms/Cards/FencerCard/FencerCard.vue';
-import ArticleCard from '../../Organisms/Cards/ArticleCard/ArticleCard.vue';
-import mockTournaments from "../../../mocks/getTournamentsMock.js";
-import mockTopFencers from "../../../mocks/getTopFencers.js";
-import mockArticles from "../../../mocks/getArticles.js";
+import TournamentCard from '../../Cards/TournamentCard/TournamentCard.vue';
+import FencerCard from '../../Cards/FencerCard/FencerCard.vue';
+import ArticleCard from '../../Cards/ArticleCard/ArticleCard.vue';
+import mockTournaments from "../../../../mocks/getTournamentsMock.js";
+import mockTopFencers from "../../../../mocks/getTopFencers.js";
+import mockArticles from "../../../../mocks/getArticles.js";
 
 export default {
     title: 'Organisms/Grids/GridLayout',

package/src/stories/Organisms/{GridLayout → Grids/GridLayout}/GridLayout.vue

@@ -38,10 +38,10 @@
 </template>
 
 <script>
-import BaseButton from "../../Atoms/BaseButton/BaseButton.vue";
-import BaseText from "../../Atoms/BaseText/BaseText.vue";
+import BaseButton from "../../../Atoms/BaseButton/BaseButton.vue";
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
 import {markRaw} from "vue";
-import Icon from "../../Atoms/Icon/Icon.vue";
+import Icon from "../../../Atoms/Icon/Icon.vue";
 
 export default {
   name: 'GridLayout',

package/src/stories/Organisms/Grids/GridPool/GridPool.stories.js

@@ -0,0 +1,30 @@
+import PoolGrid from './GridPool.vue';
+import getPoolsWithBoutsByPoolId from "../../../../mocks/getPoolsWithBoutsByPoolId.js";
+
+export default {
+    title: 'Organisms/Grids/GridPool',
+    component: PoolGrid,
+    tags: ['autodocs'],
+    args: {
+        bouts: getPoolsWithBoutsByPoolId.pools[0].Bouts
+    },
+    argTypes: {
+        bouts: {
+            control: 'object'
+        }
+
+    }
+};
+
+export const Default = {
+    args: {
+        bouts: getPoolsWithBoutsByPoolId.pools[0].Bouts
+    }
+};
+
+
+export const EmptyPool = {
+    args: {
+        bouts: []
+    }
+};

package/src/stories/Organisms/Grids/GridPool/GridPool.vue

@@ -0,0 +1,195 @@
+<template>
+  <div class="flex w-full justify-center mb-4 ">
+    <table class="border-separate border-spacing-1 w-[900px]">
+      <thead>
+      <tr>
+        <th class="border border-primary bg-gray-500 rounded-lg px-4 py-2 ">
+          <BaseText size="sm" weight="bold" color="white">Name</BaseText>
+        </th>
+        <th class="w-1"></th>
+        <th class="bg-gray-300 rounded-lg px-4 py-2"></th>
+        <th v-for="(participant, index) in participants" :key="participant.PersonId"
+            class="border border-primary bg-gray-500 rounded-lg text-center align-middle">
+          <BaseText size="sm" weight="bold" color="white">{{index+1}}</BaseText>
+        </th>
+        <th class="w-1"></th>
+        <th class="border border-primary bg-gray-500 rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText size="sm" weight="bold" color="white">W%</BaseText>
+        </th>
+        <th class="border border-primary bg-gray-500 rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText size="sm" weight="bold" color="white">W</BaseText>
+        </th>
+        <th class="border border-primary bg-gray-500 rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText size="sm" weight="bold" color="white">L</BaseText>
+        </th>
+        <th class="border border-primary bg-gray-500 rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText size="sm" weight="bold" color="white">HS</BaseText>
+        </th>
+        <th class="border border-primary bg-gray-500 rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText size="sm" weight="bold" color="white">HR</BaseText>
+        </th>
+        <th class="border border-primary bg-gray-500 rounded-lg able-cell text-center align-middle h-10 w-10">
+          <BaseText size="sm" weight="bold" color="white">IND</BaseText>
+        </th>
+      </tr>
+      </thead>
+      <tbody>
+      <tr v-for="(participant, index) in participants" :key="participant.PersonId" class="even:bg-gray-100">
+        <td class="border border-primary rounded-lg text-right align-middle pr-4">
+          <BaseText size="sm" color="primary">{{participant.DisplayName}}</BaseText>
+        </td>
+        <th class="w-1"></th>
+        <td class="border border-primary bg-gray-500 rounded-lg text-center align-middle h-10 w-10">
+          <BaseText size="sm" weight="bold" color="white">{{index + 1}}</BaseText>
+        </td>
+
+        <td v-for="opponent in participants" :key="opponent.PersonId"
+            :class="{'bg-gray-300 rounded-lg ': participant.PersonId === opponent.PersonId, 'bg-secondary rounded-lg': participant.PersonId !== opponent.PersonId}"
+            class="rounded-lg h-10 w-10">
+          <div v-if="participant.PersonId !== opponent.PersonId"
+               :class="getBoutClass(participant.PersonId, opponent.PersonId)"
+               class="rounded-lg text-center pt-2.5 h-10 w-10">
+            <BaseText size="sm" color="white">{{getScore(participant.PersonId, opponent.PersonId)}}</BaseText>
+          </div>
+        </td>
+
+        <td class="w-1"></td>
+        <td class="border border-primary rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText size="sm" color="primary" >{{getStats(participant).WP}}</BaseText>
+        </td>
+        <td class="border border-primary rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText size="sm" color="primary">{{getStats(participant).W}}</BaseText>
+        </td>
+        <td class="border border-primary rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText size="sm" color="primary">{{getStats(participant).L}}</BaseText>
+        </td>
+        <td class="border border-primary rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText size="sm" color="primary">{{getStats(participant).HS}}</BaseText>
+        </td>
+        <td class="border border-primary rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText size="sm" color="primary">{{getStats(participant).HR}}</BaseText>
+        </td>
+        <td class="border border-primary rounded-lg table-cell text-center align-middle h-10 w-10">
+          <BaseText size="sm" color="primary">{{getStats(participant).IND}}</BaseText>
+        </td>
+      </tr>
+      </tbody>
+    </table>
+
+  </div>
+</template>
+
+<script>
+import BaseText from "../../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: 'GridPool',
+  components: {BaseText},
+  props: {
+    bouts: {
+      type: Array,
+      required: true,
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    participants() {
+      const participantMap = {};
+      this.bouts.forEach((bout) => {
+        participantMap[bout.Person1Id] = bout.Person1;
+        participantMap[bout.Person2Id] = bout.Person2;
+      });
+      return Object.values(participantMap);
+    },
+  },
+  methods: {
+    getScore(rowPersonId, colPersonId) {
+      const bout = this.bouts.find(
+          (bout) =>
+              (bout.Person1Id === rowPersonId && bout.Person2Id === colPersonId) ||
+              (bout.Person1Id === colPersonId && bout.Person2Id === rowPersonId)
+      );
+
+      if (bout) {
+        if (bout.Status === 'Scheduled') return '';
+
+        const score1 = bout.Score1;
+        const score2 = bout.Score2;
+
+        if (bout.Status === 'Completed') {
+          if (score1 > score2) {
+            return bout.Person1Id === rowPersonId
+                ? `W${score1}`
+                : `L${score2}`;
+          }
+
+          if (score2 > score1) {
+            return bout.Person1Id === rowPersonId
+                ? `L${score1}`
+                : `W${score2}`;
+          }
+
+          return `T${score1}`;
+        }
+
+        return bout.Person1Id === rowPersonId ? score1 : score2;
+      }
+
+      return '';
+    },
+    getBoutClass(person1Id, person2Id) {
+      const bout = this.bouts.find((bout) => (bout.Person1Id === person1Id && bout.Person2Id === person2Id) || (bout.Person1Id === person2Id && bout.Person2Id === person1Id));
+
+      if (bout) {
+        if (bout.Status === 'Completed') {
+          if (bout.Score1 > bout.Score2) {
+            return person1Id === bout.Person1Id ? 'bg-accent' : 'bg-gray-400';
+          }
+          if (bout.Score2 > bout.Score1) {
+            return person2Id === bout.Person2Id ? 'bg-gray-400' : 'bg-accent';
+          }
+          if (bout.Score2 === bout.Score1) {
+            return person2Id === bout.Person2Id ? 'bg-primary' : 'bg-primary';
+          }
+        }
+
+        if (bout.Status === 'Active') {
+          return 'bg-blue';
+        }
+      }
+      return '';
+    },
+    getStats(participant) {
+      const completedBouts = this.bouts.filter((bout) =>
+          (bout.Person1Id === participant.PersonId || bout.Person2Id === participant.PersonId) &&
+          bout.Status === 'Completed');
+
+      const wins = completedBouts.filter((bout) =>
+          (bout.Person1Id === participant.PersonId && bout.Score1 > bout.Score2) ||
+          (bout.Person2Id === participant.PersonId && bout.Score2 > bout.Score1)).length;
+
+      const losses = completedBouts.filter((bout) =>
+          (bout.Person1Id === participant.PersonId && bout.Score1 < bout.Score2) ||
+          (bout.Person2Id === participant.PersonId && bout.Score2 < bout.Score1)).length;
+
+      const totalHitsScored = completedBouts.reduce((sum, bout) => sum + (bout.Person1Id === participant.PersonId ? bout.Score1 : bout.Score2), 0);
+      const totalHitsReceived = completedBouts.reduce((sum, bout) => sum + (bout.Person1Id === participant.PersonId ? bout.Score2 : bout.Score1), 0);
+
+      const indicator = totalHitsScored - totalHitsReceived;
+      const winPercent = completedBouts.length > 0 ? ((wins / completedBouts.length) * 100).toFixed(0) : '0.00';
+
+      return {
+        WP: `${winPercent}%`,
+        HS: totalHitsScored,
+        HR: totalHitsReceived,
+        IND: indicator,
+        W: wins,
+        L: losses,
+      };
+    },
+  },
+};
+</script>
+