@dcrackel/hematournamentui 1.0.706 → 1.0.707

package/src/stories/Organisms/RankCalculator/ByLetter/RankCalculator.stories.js

@@ -1,24 +1,23 @@
 import RankCalculator from './RankCalculator.vue';
 
 export default {
-    title: 'Organisms/RankCalculator/byLetter',
-    component: RankCalculator,
-    tags: ['autodocs'],
-    args: {
-        ranks: ['A', 'A', 'B', 'B', 'B', 'C', 'C', 'C', 'C', 'D', 'D', 'D']
-    },
-    argTypes: {
-        ranks: {
-            control: 'array'
-        }
+  title: 'Organisms/RankCalculator/byLetter',
+  component: RankCalculator,
+  tags: ['autodocs'],
+  args: {
+    ranks: ['A', 'A', 'B', 'B', 'B', 'C', 'C', 'C', 'C', 'D', 'D', 'D']
+  },
+  argTypes: {
+    ranks: {
+      control: 'array'
     }
+  }
 };
 
-
 export const Default = {
-    ranks: ['A', 'A', 'B', 'B', 'B', 'C', 'C', 'C', 'C', 'D', 'D', 'D'],
+  ranks: ['A', 'A', 'B', 'B', 'B', 'C', 'C', 'C', 'C', 'D', 'D', 'D']
 };
 
 export const AnotherExample = {
-    ranks: ['A', 'B', 'C', 'D', 'E', 'E', 'E', 'D', 'C', 'B', 'A'],
+  ranks: ['A', 'B', 'C', 'D', 'E', 'E', 'E', 'D', 'C', 'B', 'A']
 };

package/src/stories/Organisms/RankCalculator/ByLetter/RankCalculator.vue

@@ -1,53 +1,61 @@
 <template>
   <div>
-    <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="'Rank Calculator'" :weight="'normal'"/>
-    <TitledInput :inputValue="rankInput"
-                 placeholder="e.g., A,A,B,B,B,C,C,C,D,D,E"
-                 title="Enter Ranks (separate by commas)"
-                 @update:value="handleRankInput"/>
+    <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="'Rank Calculator'" :weight="'normal'" />
+    <TitledInput
+      :inputValue="rankInput"
+      placeholder="e.g., A,A,B,B,B,C,C,C,D,D,E"
+      title="Enter Ranks (separate by commas)"
+      @update:value="handleRankInput"
+    />
 
-    <BaseButton class="w-full" color="neutral" label="Calculate" size="sm" type="secondary" @buttonClick="updateRanks"/>
-  <br>
-    <BaseText :color="'primaryHighlight'" :size="'sm'" :text="ranks.join(', ')" :weight="'normal'"/>
+    <BaseButton
+      class="w-full"
+      color="neutral"
+      label="Calculate"
+      size="sm"
+      type="secondary"
+      @buttonClick="updateRanks"
+    />
+    <br />
+    <BaseText :color="'primaryHighlight'" :size="'sm'" :text="ranks.join(', ')" :weight="'normal'" />
     <div class="flex p-2">
-      <BaseText :color="'primaryHighlight'" :size="'md'" text="Final Rank:" :weight="'normal'"/>
-      <BaseText :color="'primaryHighlight'" :size="'md'" :text="finalRank" :weight="'normal'"/>
+      <BaseText :color="'primaryHighlight'" :size="'md'" text="Final Rank:" :weight="'normal'" />
+      <BaseText :color="'primaryHighlight'" :size="'md'" :text="finalRank" :weight="'normal'" />
     </div>
 
     <div>
       <div class="flex p-2">
-      <BaseText :color="'primaryHighlight'" :size="'md'" text="PayOut: " :weight="'normal'"/>
-      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.rank" :weight="'normal'"/>
+        <BaseText :color="'primaryHighlight'" :size="'md'" text="PayOut: " :weight="'normal'" />
+        <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.rank" :weight="'normal'" />
       </div>
       <div class="flex p-2">
-        <BaseText :color="'primaryHighlight'" :size="'md'" text="A's:" :weight="'normal'"/>
-        <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[0]" :weight="'normal'"/>
+        <BaseText :color="'primaryHighlight'" :size="'md'" text="A's:" :weight="'normal'" />
+        <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[0]" :weight="'normal'" />
       </div>
       <div class="flex p-2">
-        <BaseText :color="'primaryHighlight'" :size="'md'" text="B's:" :weight="'normal'"/>
-        <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[1]" :weight="'normal'"/>
+        <BaseText :color="'primaryHighlight'" :size="'md'" text="B's:" :weight="'normal'" />
+        <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[1]" :weight="'normal'" />
       </div>
       <div class="flex p-2">
-        <BaseText :color="'primaryHighlight'" :size="'md'" text="C's:" :weight="'normal'"/>
-        <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[2]" :weight="'normal'"/>
+        <BaseText :color="'primaryHighlight'" :size="'md'" text="C's:" :weight="'normal'" />
+        <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[2]" :weight="'normal'" />
       </div>
       <div class="flex p-2">
-        <BaseText :color="'primaryHighlight'" :size="'md'" text="D's:" :weight="'normal'"/>
-        <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[3]" :weight="'normal'"/>
+        <BaseText :color="'primaryHighlight'" :size="'md'" text="D's:" :weight="'normal'" />
+        <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[3]" :weight="'normal'" />
       </div>
       <div class="flex p-2">
-        <BaseText :color="'primaryHighlight'" :size="'md'" text="E's:" :weight="'normal'"/>
-        <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[4]" :weight="'normal'"/>
+        <BaseText :color="'primaryHighlight'" :size="'md'" text="E's:" :weight="'normal'" />
+        <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[4]" :weight="'normal'" />
       </div>
     </div>
   </div>
 </template>
 
-
 <script>
 import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
-import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import TitledInput from '../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 const chart = [
   { rank: 'A5', counts: [5, 6, 1, 0, 0, 0] },
@@ -102,7 +110,7 @@ const payoutChart = [
   { rank: 'A2', counts: [2, 3, 4, 5, 6] },
   { rank: 'A3', counts: [3, 4, 5, 6, 7] },
   { rank: 'A4', counts: [4, 5, 6, 7, 8] },
-  { rank: 'A5', counts: [5, 7, 7, 8, 9] },
+  { rank: 'A5', counts: [5, 7, 7, 8, 9] }
 ];
 
 export default {
@@ -115,7 +123,7 @@ export default {
   data() {
     return {
       rankInput: '', // Field to enter ranks
-      ranks: [],     // Ranks array based on input
+      ranks: [] // Ranks array based on input
     };
   },
   computed: {
@@ -124,10 +132,10 @@ export default {
     },
     payout() {
       return payoutChart.find(p => p.rank === this.finalRank) || { rank: 'Unknown', counts: [0, 0, 0, 0, 0] };
-    },
+    }
   },
   methods: {
-    handleRankInput(value){
+    handleRankInput(value) {
       this.rankInput = value;
     },
     updateRanks() {
@@ -146,16 +154,15 @@ export default {
       return counts;
     },
     downgradeRanks(counts) {
-      for (let i = 0; i < counts.length - 1; i++) {
-        if (counts[i] > 0) {
-          counts[i + 1] += 1; // Shift one rank to the right
-          counts[i] -= 1;
-          break; // Exit the loop after shifting one rank
-        }
-      }
+      const downgradedCounts = [...counts];
+      const rankIndex = downgradedCounts.findIndex((count, index) => index < downgradedCounts.length - 1 && count > 0);
+      if (rankIndex < 0) return downgradedCounts;
+
+      downgradedCounts[rankIndex] -= 1;
+      downgradedCounts[rankIndex + 1] += 1;
+      return downgradedCounts;
     },
     getFinalRank(ranks) {
-      ranks.sort((a, b) => a.charCodeAt(0) - b.charCodeAt(0));
       let counts = this.getRankCounts(ranks);
       let downgrades = 0;
 
@@ -166,7 +173,7 @@ export default {
           }
         }
 
-        this.downgradeRanks(counts);
+        counts = this.downgradeRanks(counts);
 
         for (let chartRank of chart) {
           if (chartRank.counts.every((count, idx) => count <= counts[idx])) {
@@ -181,8 +188,7 @@ export default {
       }
 
       return 'E1';
-    },
-  },
+    }
+  }
 };
 </script>
-

package/src/stories/Organisms/RankCalculator/ByPoints/RankCalculatorByPoints.stories.js

@@ -1,24 +1,23 @@
 import RankCalculatorByPoints from './RankCalculatorByPoints.vue';
 
 export default {
-    title: 'Organisms/RankCalculator/byPoints',
-    component: RankCalculatorByPoints,
-    tags: ['autodocs'],
-    args: {
-        ranks: ['A', 'A', 'B', 'B', 'B', 'C', 'C', 'C', 'C', 'D', 'D', 'D']
-    },
-    argTypes: {
-        ranks: {
-            control: 'array'
-        }
+  title: 'Organisms/RankCalculator/byPoints',
+  component: RankCalculatorByPoints,
+  tags: ['autodocs'],
+  args: {
+    ranks: ['A', 'A', 'B', 'B', 'B', 'C', 'C', 'C', 'C', 'D', 'D', 'D']
+  },
+  argTypes: {
+    ranks: {
+      control: 'array'
     }
+  }
 };
 
-
 export const Default = {
-    ranks: ['A', 'A', 'B', 'B', 'B', 'C', 'C', 'C', 'C', 'D', 'D', 'D'],
+  ranks: ['A', 'A', 'B', 'B', 'B', 'C', 'C', 'C', 'C', 'D', 'D', 'D']
 };
 
 export const AnotherExample = {
-    ranks: ['A', 'B', 'C', 'D', 'E', 'E', 'E', 'D', 'C', 'B', 'A'],
+  ranks: ['A', 'B', 'C', 'D', 'E', 'E', 'E', 'D', 'C', 'B', 'A']
 };

package/src/stories/Organisms/RankCalculator/ByPoints/RankCalculatorByPoints.vue

@@ -1,58 +1,87 @@
 <template>
   <div>
-    <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="'Rank Calculator'" :weight="'normal'"/>
-    <TitledInput :inputValue="rankInput"
-                 placeholder="e.g., A,A,B,B,B,C,C,C,D,D,E"
-                 title="Enter Ranks (separate by commas)"
-                 @update:value="handleRankInput"/>
+    <BaseText :color="'primaryHighlight'" :size="'2xl'" :text="'Rank Calculator'" :weight="'normal'" />
+    <TitledInput
+      :inputValue="rankInput"
+      placeholder="e.g., A,A,B,B,B,C,C,C,D,D,E"
+      title="Enter Ranks (separate by commas)"
+      @update:value="handleRankInput"
+    />
 
-    <BaseButton class="w-full" color="neutral" label="Calculate" size="sm" type="secondary" @buttonClick="updateRanks"/>
-    <br>
-    <BaseText :color="'primaryHighlight'" :size="'sm'" :text="ranks.join(', ')" :weight="'normal'"/>
+    <BaseButton
+      class="w-full"
+      color="neutral"
+      label="Calculate"
+      size="sm"
+      type="secondary"
+      @buttonClick="updateRanks"
+    />
+    <br />
+    <BaseText :color="'primaryHighlight'" :size="'sm'" :text="ranks.join(', ')" :weight="'normal'" />
     <div class="flex p-2">
-      <BaseText :color="'primaryHighlight'" :size="'md'" text="Final Rank:" :weight="'normal'"/>
-      <BaseText :color="'primaryHighlight'" :size="'md'" :text="finalRank" :weight="'normal'"/>
+      <BaseText :color="'primaryHighlight'" :size="'md'" text="Final Rank:" :weight="'normal'" />
+      <BaseText :color="'primaryHighlight'" :size="'md'" :text="finalRank" :weight="'normal'" />
     </div>
 
     <div class="flex p-2">
-      <BaseText :color="'primaryHighlight'" :size="'md'" text="PayOut: " :weight="'normal'"/>
-      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.rank" :weight="'normal'"/>
+      <BaseText :color="'primaryHighlight'" :size="'md'" text="PayOut: " :weight="'normal'" />
+      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.rank" :weight="'normal'" />
     </div>
     <div class="flex p-2">
-      <BaseText :color="'primaryHighlight'" :size="'md'" text="A's:" :weight="'normal'"/>
-      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[0]" :weight="'normal'"/>
+      <BaseText :color="'primaryHighlight'" :size="'md'" text="A's:" :weight="'normal'" />
+      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[0]" :weight="'normal'" />
     </div>
     <div class="flex p-2">
-      <BaseText :color="'primaryHighlight'" :size="'md'" text="B's:" :weight="'normal'"/>
-      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[1]" :weight="'normal'"/>
+      <BaseText :color="'primaryHighlight'" :size="'md'" text="B's:" :weight="'normal'" />
+      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[1]" :weight="'normal'" />
     </div>
     <div class="flex p-2">
-      <BaseText :color="'primaryHighlight'" :size="'md'" text="C's:" :weight="'normal'"/>
-      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[2]" :weight="'normal'"/>
+      <BaseText :color="'primaryHighlight'" :size="'md'" text="C's:" :weight="'normal'" />
+      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[2]" :weight="'normal'" />
     </div>
     <div class="flex p-2">
-      <BaseText :color="'primaryHighlight'" :size="'md'" text="D's:" :weight="'normal'"/>
-      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[3]" :weight="'normal'"/>
+      <BaseText :color="'primaryHighlight'" :size="'md'" text="D's:" :weight="'normal'" />
+      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[3]" :weight="'normal'" />
     </div>
     <div class="flex p-2">
-      <BaseText :color="'primaryHighlight'" :size="'md'" text="E's:" :weight="'normal'"/>
-      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[4]" :weight="'normal'"/>
+      <BaseText :color="'primaryHighlight'" :size="'md'" text="E's:" :weight="'normal'" />
+      <BaseText :color="'primaryHighlight'" :size="'md'" :text="payout.counts[4]" :weight="'normal'" />
     </div>
   </div>
 </template>
 
 <script>
 import BaseButton from '../../../Molecules/Buttons/BaseButton/BaseButton.vue';
-import TitledInput from "../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue";
-import BaseText from "../../../Atoms/Text/BaseText.vue";
+import TitledInput from '../../../Molecules/CombinationInputs/TitledInput/TitledInput.vue';
+import BaseText from '../../../Atoms/Text/BaseText.vue';
 
 const pointValues = {
-  'A5': 1000, 'A4': 950, 'A3': 900, 'A2': 850, 'A1': 800,
-  'B5': 750, 'B4': 700, 'B3': 650, 'B2': 600, 'B1': 550,
-  'C5': 500, 'C4': 450, 'C3': 400, 'C2': 350, 'C1': 300,
-  'D5': 250, 'D4': 200, 'D3': 150, 'D2': 100, 'D1': 50,
-  'E5': 25, 'E4': 20, 'E3': 15, 'E2': 10, 'E1': 5,
-  'U': 0
+  A5: 1000,
+  A4: 950,
+  A3: 900,
+  A2: 850,
+  A1: 800,
+  B5: 750,
+  B4: 700,
+  B3: 650,
+  B2: 600,
+  B1: 550,
+  C5: 500,
+  C4: 450,
+  C3: 400,
+  C2: 350,
+  C1: 300,
+  D5: 250,
+  D4: 200,
+  D3: 150,
+  D2: 100,
+  D1: 50,
+  E5: 25,
+  E4: 20,
+  E3: 15,
+  E2: 10,
+  E1: 5,
+  U: 0
 };
 
 const pointToRank = [
@@ -80,7 +109,7 @@ const pointToRank = [
   { points: 200, rank: 'E4' },
   { points: 150, rank: 'E3' },
   { points: 100, rank: 'E2' },
-  { points: 50, rank: 'E1' },
+  { points: 50, rank: 'E1' }
 ];
 
 const payoutChart = [
@@ -108,7 +137,7 @@ const payoutChart = [
   { rank: 'A2', counts: [2, 3, 4, 5, 6] },
   { rank: 'A3', counts: [3, 4, 5, 6, 7] },
   { rank: 'A4', counts: [4, 5, 6, 7, 8] },
-  { rank: 'A5', counts: [5, 7, 7, 8, 9] },
+  { rank: 'A5', counts: [5, 7, 7, 8, 9] }
 ];
 
 export default {
@@ -121,14 +150,14 @@ export default {
   data() {
     return {
       rankInput: 'A,A,B,B,C,C,D,D,E,E,U,U', // Field to enter ranks
-      ranks: [],     // Ranks array based on input
-      finalRank: '', // To store the final rank after calculation
+      ranks: [], // Ranks array based on input
+      finalRank: '' // To store the final rank after calculation
     };
   },
   computed: {
     payout() {
       return payoutChart.find(p => p.rank === this.finalRank) || { rank: 'Unknown', counts: [0, 0, 0, 0, 0] };
-    },
+    }
   },
   methods: {
     handleRankInput(value) {
@@ -150,7 +179,7 @@ export default {
         }
       }
       return 'U'; // Default to 'U' if no matching rank is found
-    },
-  },
+    }
+  }
 };
 </script>

package/src/stories/Organisms/Skeletons/ClubManagement/ClubManagement.stories.js

@@ -1,17 +1,13 @@
 import ClubMangementSkeleton from './ClubMangementSkeleton.vue';
 
-
 export default {
-    title: 'Organisms/Skeletons/ClubMangement',
-    component: ClubMangementSkeleton,
-    tags: ['autodocs'],
-    args: {
-
-    },
-    argTypes: {
-    }
+  title: 'Organisms/Skeletons/ClubMangement',
+  component: ClubMangementSkeleton,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {}
 };
 
 export const Default = {
-    components: { ClubMangementSkeleton },
+  components: { ClubMangementSkeleton }
 };

package/src/stories/Organisms/Skeletons/ClubManagement/ClubMangementSkeleton.vue

@@ -39,6 +39,6 @@
 
 <script>
 export default {
-  name: 'ClubManagementSkeleton',
-}
+  name: 'ClubManagementSkeleton'
+};
 </script>

package/src/stories/Organisms/Skeletons/EventCard/EventCardSkeleton.stories.js

@@ -1,17 +1,13 @@
 import EventCardSkeleton from './EventCardSkeleton.vue';
 
-
 export default {
-    title: 'Organisms/Skeletons/EventCard',
-    component: EventCardSkeleton,
-    tags: ['autodocs'],
-    args: {
-
-    },
-    argTypes: {
-    }
+  title: 'Organisms/Skeletons/EventCard',
+  component: EventCardSkeleton,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {}
 };
 
 export const Default = {
-    components: { EventCardSkeleton },
+  components: { EventCardSkeleton }
 };

package/src/stories/Organisms/Skeletons/EventCard/EventCardSkeleton.vue

@@ -25,11 +25,10 @@
       </div>
     </div>
   </div>
-
 </template>
 
 <script>
 export default {
   name: 'EventCardSkeleton'
-}
-</script>
+};
+</script>

package/src/stories/Organisms/Skeletons/FencerCard/FencerCardSkeleton.stories.js

@@ -1,17 +1,13 @@
 import FencerCardSkeleton from './FencerCardSkeleton.vue';
 
-
 export default {
-    title: 'Organisms/Skeletons/FencerCard',
-    component: FencerCardSkeleton,
-    tags: ['autodocs'],
-    args: {
-
-    },
-    argTypes: {
-    }
+  title: 'Organisms/Skeletons/FencerCard',
+  component: FencerCardSkeleton,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {}
 };
 
 export const Default = {
-    components: { FencerCardSkeleton },
+  components: { FencerCardSkeleton }
 };

package/src/stories/Organisms/Skeletons/FencerCard/FencerCardSkeleton.vue

@@ -44,5 +44,5 @@
 <script>
 export default {
   name: 'FencerCardSkeleton'
-}
+};
 </script>

package/src/stories/Organisms/Skeletons/PersonManagement/PersonManagementSkeleton.stories.js

@@ -1,16 +1,13 @@
 import PersonManagementSkeleton from './PersonManagementSkeleton.vue';
 
 export default {
-    title: 'Organisms/Skeletons/PersonManagement',
-    component: PersonManagementSkeleton,
-    tags: ['autodocs'],
-    args: {
-
-    },
-    argTypes: {
-    }
+  title: 'Organisms/Skeletons/PersonManagement',
+  component: PersonManagementSkeleton,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {}
 };
 
 export const Default = {
-    components: { PersonManagementSkeleton },
+  components: { PersonManagementSkeleton }
 };

package/src/stories/Organisms/Skeletons/PersonManagement/PersonManagementSkeleton.vue

@@ -57,6 +57,6 @@
 
 <script>
 export default {
-  name: 'PersonManagementSkeleton',
-}
+  name: 'PersonManagementSkeleton'
+};
 </script>

package/src/stories/Organisms/Skeletons/PoolSkeleton/PoolSkeleton.stories.js

@@ -1,17 +1,13 @@
 import PoolSkeleton from './PoolSkeleton.vue';
 
-
 export default {
-    title: 'Organisms/Skeletons/Pool',
-    component: PoolSkeleton,
-    tags: ['autodocs'],
-    args: {
-
-    },
-    argTypes: {
-    }
+  title: 'Organisms/Skeletons/Pool',
+  component: PoolSkeleton,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {}
 };
 
 export const Default = {
-    components: { PoolSkeleton },
+  components: { PoolSkeleton }
 };

package/src/stories/Organisms/Skeletons/PoolSkeleton/PoolSkeleton.vue

@@ -1,5 +1,7 @@
 <template>
-  <div class="p-4 mr-4 mt-3 bg-neutral rounded-lg shadow-md border border-dropdownSelect min-w-[22rem] w-40 animate-pulse">
+  <div
+    class="p-4 mr-4 mt-3 bg-neutral rounded-lg shadow-md border border-dropdownSelect min-w-[22rem] w-40 animate-pulse"
+  >
     <div class="flex flex-row justify-between mb-2">
       <div class="bg-dropdownSelect rounded h-6 w-1/2 mr-6"></div>
       <div class="bg-dropdownSelect rounded h-6 w-1/2"></div>
@@ -15,7 +17,11 @@
     </div>
 
     <div class="grid grid-cols-1 gap-4">
-      <div v-for="index in 6" :key="index" class="flex flex-row items-center border border-dropdownSelect shadow p-3 rounded-lg">
+      <div
+        v-for="index in 6"
+        :key="index"
+        class="flex flex-row items-center border border-dropdownSelect shadow p-3 rounded-lg"
+      >
         <div class="bg-dropdownSelect rounded-lg h-8 w-8"></div>
         <div class="flex flex-col ml-4 w-3/4">
           <div class="bg-dropdownSelect rounded h-4 w-3/4 mb-2"></div>
@@ -29,5 +35,5 @@
 <script>
 export default {
   name: 'PoolSkeleton'
-}
-</script>
+};
+</script>

package/src/stories/Organisms/Skeletons/TournamentCard/TournamentCardSkeleton.stories.js

@@ -1,17 +1,13 @@
 import TournamentCardSkeleton from './TournamentCardSkeleton.vue';
 
-
 export default {
-    title: 'Organisms/Skeletons/TournamentCard',
-    component: TournamentCardSkeleton,
-    tags: ['autodocs'],
-    args: {
-
-    },
-    argTypes: {
-    }
+  title: 'Organisms/Skeletons/TournamentCard',
+  component: TournamentCardSkeleton,
+  tags: ['autodocs'],
+  args: {},
+  argTypes: {}
 };
 
 export const Default = {
-    components: { TournamentCardSkeleton },
+  components: { TournamentCardSkeleton }
 };

package/src/stories/Organisms/Skeletons/TournamentCard/TournamentCardSkeleton.vue

@@ -21,6 +21,6 @@
 
 <script>
 export default {
-  name: 'TournamentCardSkeleton',
-}
+  name: 'TournamentCardSkeleton'
+};
 </script>