@dcrackel/hematournamentui 1.0.706 → 1.0.708

package/src/stories/Organisms/Containers/PoolGrid/PoolGrid.vue

@@ -2,98 +2,187 @@
   <div class="flex w-full justify-center mb-4">
     <table class="border-separate border-spacing-1 w-[900px]">
       <thead>
-      <tr>
-        <th :class="nameAndStatsHeaderColor" class="rounded-lg px-4 py-2 "><BaseText text="Name" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'"/></th>
-        <th class="w-1"></th>
-        <th :class="gridBoxHeaderAndSides" class="rounded-lg px-4 py-2"></th>
-        <th v-for="(participant, index) in participants" :key="participant.PersonId"
-            :class="gridBoxHeaderAndSides" class="rounded-lg text-center align-middle">
-          <BaseText :text="index+1" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'"/>
-        </th>
-        <th class="w-1"></th>
-        <th :class="nameAndStatsHeaderColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
-          <BaseText text="W%" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'"/>
-        </th>
-        <th :class="nameAndStatsHeaderColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
-          <BaseText text="W" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'"/>
-        </th>
-        <th :class="nameAndStatsHeaderColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
-          <BaseText text="L" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'"/>
-        </th>
-        <th :class="nameAndStatsHeaderColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
-          <BaseText text="HS" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'"/>
-        </th>
-        <th :class="nameAndStatsHeaderColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
-          <BaseText text="HR" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'"/>
-        </th>
-        <th :class="nameAndStatsHeaderColor" class="rounded-lg able-cell text-center align-middle h-10 w-10">
-          <BaseText text="IND" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'"/>
-        </th>
-      </tr>
+        <tr>
+          <th :class="nameAndStatsHeaderColor" class="rounded-lg px-4 py-2">
+            <BaseText
+              text="Name"
+              size="sm"
+              weight="bold"
+              color=""
+              :class="nightMode ? 'text-neutral' : 'text-quinary'"
+            />
+          </th>
+          <th class="w-1"></th>
+          <th :class="gridBoxHeaderAndSides" class="rounded-lg px-4 py-2"></th>
+          <th
+            v-for="(participant, index) in participants"
+            :key="participant.PersonId"
+            :class="gridBoxHeaderAndSides"
+            class="rounded-lg text-center align-middle"
+          >
+            <BaseText
+              :text="index + 1"
+              size="sm"
+              weight="bold"
+              color=""
+              :class="nightMode ? 'text-neutral' : 'text-quinary'"
+            />
+          </th>
+          <th class="w-1"></th>
+          <th :class="nameAndStatsHeaderColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
+            <BaseText text="W%" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'" />
+          </th>
+          <th :class="nameAndStatsHeaderColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
+            <BaseText text="W" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'" />
+          </th>
+          <th :class="nameAndStatsHeaderColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
+            <BaseText text="L" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'" />
+          </th>
+          <th :class="nameAndStatsHeaderColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
+            <BaseText text="HS" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'" />
+          </th>
+          <th :class="nameAndStatsHeaderColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
+            <BaseText text="HR" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'" />
+          </th>
+          <th :class="nameAndStatsHeaderColor" class="rounded-lg able-cell text-center align-middle h-10 w-10">
+            <BaseText
+              text="IND"
+              size="sm"
+              weight="bold"
+              color=""
+              :class="nightMode ? 'text-neutral' : 'text-quinary'"
+            />
+          </th>
+        </tr>
       </thead>
       <tbody>
-      <tr v-for="(participant, index) in participants" :key="participant.PersonId">
-        <td :class="nameAndStatsBoxBGColor" class="rounded-lg text-right align-middle pr-4">
-          <BaseText :text="participant.DisplayName" size="sm" color="" :class="nightMode ? 'text-black' : 'text-quinary'"/>
-        </td>
-        <th class="w-1"></th>
-        <td :class="gridBoxHeaderAndSides" class="rounded-lg text-center align-middle h-10 w-10">
-          <BaseText :text="index + 1" size="sm" weight="bold" color="" :class="nightMode ? 'text-neutral' : 'text-quinary'"/>
-        </td>
+        <tr v-for="(participant, index) in participants" :key="participant.PersonId">
+          <td :class="nameAndStatsBoxBGColor" class="rounded-lg text-right align-middle pr-4">
+            <BaseText
+              :text="participant.DisplayName"
+              size="sm"
+              color=""
+              :class="nightMode ? 'text-black' : 'text-quinary'"
+            />
+          </td>
+          <th class="w-1"></th>
+          <td :class="gridBoxHeaderAndSides" class="rounded-lg text-center align-middle h-10 w-10">
+            <BaseText
+              :text="index + 1"
+              size="sm"
+              weight="bold"
+              color=""
+              :class="nightMode ? 'text-neutral' : 'text-quinary'"
+            />
+          </td>
 
-        <td v-for="opponent in participants" :key="opponent.PersonId"
+          <td
+            v-for="opponent in participants"
+            :key="opponent.PersonId"
             :class="{
               [gridBoxHeaderAndSides + ' rounded-lg']: participant.PersonId === opponent.PersonId,
               [gridBoxColor + ' 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 :text="getScore(participant.PersonId, opponent.PersonId)" size="sm" color=""/>
-          </div>
-        </td>
+            }"
+            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 :text="getScore(participant.PersonId, opponent.PersonId)" size="sm" color="" />
+            </div>
+          </td>
 
-        <td class="w-1"></td>
-        <td :class="nameAndStatsBoxBGColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
-          <BaseText :text="getStats(participant).WP" size="sm" color="" :class="nightMode ? 'text-black' : 'text-quinary'"/>
-        </td>
-        <td :class="nameAndStatsBoxBGColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
-          <BaseText :text="getStats(participant).W" size="sm" color="" :class="nightMode ? 'text-black' : 'text-quinary'"/>
-        </td>
-        <td :class="nameAndStatsBoxBGColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
-          <BaseText :text="getStats(participant).L" size="sm" color="" :class="nightMode ? 'text-black' : 'text-quinary'"/>
-        </td>
-        <td :class="nameAndStatsBoxBGColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
-          <BaseText :text="getStats(participant).HS" size="sm" color="" :class="nightMode ? 'text-black' : 'text-quinary'"/>
-        </td>
-        <td :class="nameAndStatsBoxBGColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
-          <BaseText :text="getStats(participant).HR" size="sm" color="" :class="nightMode ? 'text-black' : 'text-quinary'"/>
-        </td>
-        <td :class="nameAndStatsBoxBGColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
-          <BaseText :text="getStats(participant).IND" size="sm" color="" :class="nightMode ? 'text-black' : 'text-quinary'"/>
-        </td>
-      </tr>
+          <td class="w-1"></td>
+          <td :class="nameAndStatsBoxBGColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
+            <BaseText
+              :text="getStats(participant).WP"
+              size="sm"
+              color=""
+              :class="nightMode ? 'text-black' : 'text-quinary'"
+            />
+          </td>
+          <td :class="nameAndStatsBoxBGColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
+            <BaseText
+              :text="getStats(participant).W"
+              size="sm"
+              color=""
+              :class="nightMode ? 'text-black' : 'text-quinary'"
+            />
+          </td>
+          <td :class="nameAndStatsBoxBGColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
+            <BaseText
+              :text="getStats(participant).L"
+              size="sm"
+              color=""
+              :class="nightMode ? 'text-black' : 'text-quinary'"
+            />
+          </td>
+          <td :class="nameAndStatsBoxBGColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
+            <BaseText
+              :text="getStats(participant).HS"
+              size="sm"
+              color=""
+              :class="nightMode ? 'text-black' : 'text-quinary'"
+            />
+          </td>
+          <td :class="nameAndStatsBoxBGColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
+            <BaseText
+              :text="getStats(participant).HR"
+              size="sm"
+              color=""
+              :class="nightMode ? 'text-black' : 'text-quinary'"
+            />
+          </td>
+          <td :class="nameAndStatsBoxBGColor" class="rounded-lg table-cell text-center align-middle h-10 w-10">
+            <BaseText
+              :text="getStats(participant).IND"
+              size="sm"
+              color=""
+              :class="nightMode ? 'text-black' : 'text-quinary'"
+            />
+          </td>
+        </tr>
       </tbody>
     </table>
-
   </div>
 </template>
 
 <script>
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import BaseText from '../../../Atoms/Text/BaseText.vue';
+
+const isBoutBetween = (bout, firstPersonId, secondPersonId) =>
+  (bout.Person1Id === firstPersonId && bout.Person2Id === secondPersonId) ||
+  (bout.Person1Id === secondPersonId && bout.Person2Id === firstPersonId);
+
+const findBoutBetween = (bouts, firstPersonId, secondPersonId) =>
+  bouts.find(bout => isBoutBetween(bout, firstPersonId, secondPersonId));
+
+const getDisplayedScores = (bout, countingBackwardsMaxScore) => {
+  if (countingBackwardsMaxScore <= 0) return [bout.Score1, bout.Score2];
+  return [countingBackwardsMaxScore - bout.Score1, countingBackwardsMaxScore - bout.Score2];
+};
+
+const getWinnerId = (bout, countingBackwardsMaxScore) => {
+  const person1Wins = countingBackwardsMaxScore > 0 ? bout.Score1 < bout.Score2 : bout.Score1 > bout.Score2;
+  return person1Wins ? bout.Person1Id : bout.Person2Id;
+};
+
+const getPersonScore = (bout, personId, [person1Score, person2Score]) =>
+  personId === bout.Person1Id ? person1Score : person2Score;
 
 export default {
   name: 'PoolGrid',
-  components: {BaseText},
+  components: { BaseText },
   props: {
     bouts: {
       type: Array,
-      required: true,
+      required: true
     },
     nightMode: {
       type: Boolean,
-      default: false,
+      default: false
     },
     isCountingBackwardsMaxScore: {
       type: Number,
@@ -104,68 +193,42 @@ export default {
     return {};
   },
   computed: {
-    nameAndStatsHeaderColor(){
+    nameAndStatsHeaderColor() {
       return this.nightMode ? 'bg-black' : 'bg-eventBoxBlue';
     },
-    nameAndStatsBoxBGColor(){
+    nameAndStatsBoxBGColor() {
       return this.nightMode ? 'border border-black bg-white' : 'bg-eventBoxBlue';
     },
-    gridBoxColor(){
+    gridBoxColor() {
       return this.nightMode ? 'bg-lightgray' : 'bg-eventBoxBlue';
     },
-    gridBoxHeaderAndSides(){
+    gridBoxHeaderAndSides() {
       return this.nightMode ? 'bg-black' : 'bg-gridBoxHeader';
     },
     participants() {
       const participantMap = {};
-      this.bouts.forEach((bout) => {
+      this.bouts.forEach(bout => {
         participantMap[bout.Person1Id] = bout.Person1;
         participantMap[bout.Person2Id] = bout.Person2;
       });
       return Object.values(participantMap);
-    },
+    }
   },
   methods: {
     getScore(rowPersonId, colPersonId) {
-      // 1) find the bout
-      const bout = this.bouts.find(b =>
-          (b.Person1Id === rowPersonId && b.Person2Id === colPersonId) ||
-          (b.Person1Id === colPersonId && b.Person2Id === rowPersonId)
-      );
-      if (!bout || bout.Status === 'Scheduled') {
-        return '';
-      }
+      const bout = findBoutBetween(this.bouts, rowPersonId, colPersonId);
+      if (!bout || bout.Status === 'Scheduled') return '';
 
-      // 2) raw hit counts
-      const raw1 = bout.Score1;
-      const raw2 = bout.Score2;
-
-      // 3) display scores (invert if count-down)
-      const max = this.isCountingBackwardsMaxScore;
-      const d1 = max > 0 ? max - raw1 : raw1;
-      const d2 = max > 0 ? max - raw2 : raw2;
-
-      // 4) decide winner on raw, flip logic when count-down
-      const winnerIsP1 = max > 0
-          ? (raw1 < raw2)  // count-down: lower raw wins
-          : (raw1 > raw2); // normal: higher raw wins
-      const winnerId = winnerIsP1 ? bout.Person1Id : bout.Person2Id;
+      const displayedScores = getDisplayedScores(bout, this.isCountingBackwardsMaxScore);
+      const rowScore = getPersonScore(bout, rowPersonId, displayedScores);
+      if (bout.Status !== 'Completed') return rowScore;
 
-      // 5) Completed bouts: suffix W/L after the display score
-      if (bout.Status === 'Completed') {
-        const displayScore = rowPersonId === bout.Person1Id ? d1 : d2;
-        let suffix = rowPersonId === winnerId ? 'W' : 'L'
-        return `${displayScore}${suffix}`;
-      }
-
-      // 6) In-progress: just show the (possibly inverted) number
-      return rowPersonId === bout.Person1Id ? d1 : d2;
+      const winnerId = getWinnerId(bout, this.isCountingBackwardsMaxScore);
+      const suffix = rowPersonId === winnerId ? 'W' : 'L';
+      return `${rowScore}${suffix}`;
     },
     getBoutClass(rowId, colId) {
-      const bout = this.bouts.find(b =>
-          (b.Person1Id === rowId && b.Person2Id === colId) ||
-          (b.Person1Id === colId && b.Person2Id === rowId)
-      );
+      const bout = findBoutBetween(this.bouts, rowId, colId);
       if (!bout) return '';
 
       // 1) raw scores
@@ -175,8 +238,8 @@ export default {
       // 2) figure out winner on raw, flipping for count-down
       const isCountDown = this.isCountingBackwardsMaxScore > 0;
       const winnerIsP1 = isCountDown
-          ? raw1 < raw2   // count-down: lower raw wins
-          : raw1 > raw2;  // normal: higher raw wins
+        ? raw1 < raw2 // count-down: lower raw wins
+        : raw1 > raw2; // normal: higher raw wins
 
       const winnerId = winnerIsP1 ? bout.Person1Id : bout.Person2Id;
 
@@ -185,30 +248,23 @@ export default {
         const isRowWinner = rowId === winnerId;
 
         if (!this.nightMode) {
-          return isRowWinner
-              ? 'bg-winGreen text-neutral'
-              : 'bg-quaternary text-neutral';
+          return isRowWinner ? 'bg-winGreen text-neutral' : 'bg-quaternary text-neutral';
         } else {
-          return isRowWinner
-              ? 'bg-orange2 text-neutral'
-              : 'border border-orange2 text-darkgray bg-white';
+          return isRowWinner ? 'bg-orange2 text-neutral' : 'border border-orange2 text-darkgray bg-white';
         }
       }
 
       // 4) Active
       if (bout.Status === 'Active') {
-        return this.nightMode
-            ? 'bg-orange2 text-neutral'
-            : 'bg-blue text-neutral';
+        return this.nightMode ? 'bg-orange2 text-neutral' : 'bg-blue text-neutral';
       }
 
       // 5) Scheduled or anything else
       return '';
     },
     getStats(participant) {
-      const completed = this.bouts.filter(b =>
-          (b.Person1Id === participant.PersonId || b.Person2Id === participant.PersonId) &&
-          b.Status === 'Completed'
+      const completed = this.bouts.filter(
+        b => (b.Person1Id === participant.PersonId || b.Person2Id === participant.PersonId) && b.Status === 'Completed'
       );
 
       const max = this.isCountingBackwardsMaxScore;
@@ -221,32 +277,31 @@ export default {
 
       for (const bout of completed) {
         // raw scores
-        const raw1 = bout.Score1, raw2 = bout.Score2;
+        const raw1 = bout.Score1,
+          raw2 = bout.Score2;
         // display scores (inverted if count-down)
         const d1 = isCountDown ? max - raw1 : raw1;
         const d2 = isCountDown ? max - raw2 : raw2;
 
         // decide who “won” on raw values, flipping for count-down
         const winnerIsP1 = isCountDown
-            ? raw1 < raw2   // count-down: lower raw wins
-            : raw1 > raw2;  // normal: higher raw wins
+          ? raw1 < raw2 // count-down: lower raw wins
+          : raw1 > raw2; // normal: higher raw wins
 
         const isP1 = bout.Person1Id === participant.PersonId;
         const isWinner = isP1 ? winnerIsP1 : !winnerIsP1;
 
         // tally win/loss
         if (isWinner) wins++;
-        else          losses++;
+        else losses++;
 
         // accumulate inverted-or-not scores
-        totalScored   += isP1 ? d1 : d2;
+        totalScored += isP1 ? d1 : d2;
         totalReceived += isP1 ? d2 : d1;
       }
 
       const totalMatches = completed.length;
-      const winPct = totalMatches > 0
-          ? Math.round((wins / totalMatches) * 100)
-          : 0;
+      const winPct = totalMatches > 0 ? Math.round((wins / totalMatches) * 100) : 0;
 
       return {
         W: wins,
@@ -257,7 +312,6 @@ export default {
         IND: totalScored - totalReceived
       };
     }
-  },
+  }
 };
 </script>
-

package/src/stories/Organisms/Containers/PoolResults/PoolResultsTable.stories.js

@@ -1,70 +1,69 @@
-import FencerResults from './PoolResultsTable.vue'
+import FencerResults from './PoolResultsTable.vue';
 import getPoolResults from '../../../../mocks/getPoolResults.js';
 import eventPersonGetPoolAssignmentEvent from '../../../../mocks/eventPersonGetPoolAssignmentEvent.js';
 
 export default {
-    title: 'Organisms/Containers/PoolResultsTable',
-    component: FencerResults,
-    tags: ['autodocs'],
-    args: {
-        poolResults: getPoolResults.report,
-        initialCutoffLinePosition: 0,
-        numPromoted: "100%",
-        event: eventPersonGetPoolAssignmentEvent
-    },
-    argTypes: {
-        poolResults: { control: 'object' },
-        cutoffLinePosition: { control: 'number' },
-        numPromoted: { control: 'text' },
-        event: { control: 'object' }
+  title: 'Organisms/Containers/PoolResultsTable',
+  component: FencerResults,
+  tags: ['autodocs'],
+  args: {
+    poolResults: getPoolResults.report,
+    initialCutoffLinePosition: 0,
+    numPromoted: '100%',
+    event: eventPersonGetPoolAssignmentEvent
+  },
+  argTypes: {
+    poolResults: { control: 'object' },
+    cutoffLinePosition: { control: 'number' },
+    numPromoted: { control: 'text' },
+    event: { control: 'object' }
+  }
+};
 
-    },
-}
-
-let modifiedEvent = {...eventPersonGetPoolAssignmentEvent, Status: "results"}
+let modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'results' };
 
 export const Default = {
-    args: {
-        poolResults: getPoolResults.report,
-        initialCutoffIndex: 0,
-        numPromoted: "100%",
-        event: modifiedEvent
-    }
-}
+  args: {
+    poolResults: getPoolResults.report,
+    initialCutoffIndex: 0,
+    numPromoted: '100%',
+    event: modifiedEvent
+  }
+};
 
 const modifiedResults = getPoolResults.report.map((person, index) => {
-    return {
-        ...person,
-        Promoted: index < 5,
-        Status: "results"
-    };
+  return {
+    ...person,
+    Promoted: index < 5,
+    Status: 'results'
+  };
 });
 
 export const PromoteHalf = {
-    args: {
-        poolResults: modifiedResults,
-        initialCutoffIndex: 5,
-        numPromoted: "100%",
-        event: modifiedEvent
-    }
-}
+  args: {
+    poolResults: modifiedResults,
+    initialCutoffIndex: 5,
+    numPromoted: '100%',
+    event: modifiedEvent
+  }
+};
 
-modifiedEvent = {...eventPersonGetPoolAssignmentEvent, Status: "de"}
+modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'de' };
 export const NotResultsStatus = {
-    args: {
-        poolResults: getPoolResults.report,
-        initialCutoffIndex: 0,
-        numPromoted: "100%",
-        event: modifiedEvent
-    }
-}
+  args: {
+    poolResults: getPoolResults.report,
+    initialCutoffIndex: 0,
+    numPromoted: '100%',
+    event: modifiedEvent
+  }
+};
 
-modifiedEvent = {...eventPersonGetPoolAssignmentEvent, Status: "preparation"}
+modifiedEvent = { ...eventPersonGetPoolAssignmentEvent, Status: 'preparation' };
 export const EventIsInPreparationMode = {
-    args: {
-        poolResults: modifiedResults,
-        initialCutoffIndex: 5,
-        numPromoted: "100%",
-        event: modifiedEvent
-    }
-}
+  args: {
+    poolResults: modifiedResults,
+    initialCutoffIndex: 5,
+    numPromoted: '100%',
+    event: modifiedEvent
+  }
+};