@dcrackel/meyersquaredui 1.0.260 → 1.0.261

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/meyersquaredui",
   "private": false,
-  "version": "1.0.260",
+  "version": "1.0.261",
   "type": "module",
   "main": "dist/meyersquaredui.cjs.js",
   "module": "dist/meyersquaredui.esm.js",

package/src/mocks/getDEWithBouts16.js

@@ -15,13 +15,12 @@ const getDEWithBouts =
                 "Bouts": [
                     {
                         "TimerStatus": "running",
-                        "RefName": "Unassigned",
                         "BoutId": 14484,
                         "PoolId": 566,
                         "EventId": 121,
                         "Person1Id": 288,
                         "Person2Id": 79,
-                        "Status": "Active",
+                        "Status": "Scheduled",
                         "Score1": 2,
                         "Score2": 0,
                         "Started": null,
@@ -30,10 +29,12 @@ const getDEWithBouts =
                         "CurrentPass": 0,
                         "MaxPasses": 0,
                         "RoundLabel": "Table of 8",
+                        "RefName": "Tom Testerlou",
+                        "RefereeId": 79,
+                        "RingName": "Ring 1",
                         "DEBoutId": 1,
                         "DENextBoutId": 5,
                         "LoserNextBoutId": null,
-                        "RefereeId": null,
                         "createdAt": "2025-03-15T18:12:58.000Z",
                         "updatedAt": "2025-03-15T18:12:58.000Z",
                         "Person1": {
@@ -85,7 +86,8 @@ const getDEWithBouts =
                         "EventId": 121,
                         "Person1Id": 9,
                         "Person2Id": 351,
-                        "Status": "Scheduled",
+                        "Status": "Active",
+                        "RingName": "Ring 3",
                         "Score1": 0,
                         "Score2": 0,
                         "Started": null,
@@ -214,6 +216,7 @@ const getDEWithBouts =
                         "Person1Id": 201,
                         "Person2Id": 136,
                         "Status": "Scheduled",
+                        "RingName": "Ring 2",
                         "Score1": 0,
                         "Score2": 0,
                         "Started": null,

package/src/mocks/getDEWithBouts64.js

@@ -86,7 +86,8 @@ const getDEWithBouts =
                         "Person2Pos": 0,
                         "Person1Id": 623,
                         "Person2Id": 426,
-                        "Status": "Completed",
+                        "Status": "Active",
+                        "RingName": "Ring 1",
                         "Score1": 8,
                         "Score2": 7,
                         "Started": "2025-11-08T22:03:52.000Z",

package/src/stories/Organisms/Tableau/Tableau.vue

@@ -86,6 +86,7 @@ export default {
   computed: {
     isSplitMode() {
       return ["Table of 64", "Table of 128", "Table of 256"].includes(this.bracketSize);
+      //return false;
     },
     splitData() {
       if (!this.isSplitMode) return null;
@@ -118,10 +119,8 @@ export default {
       document.fonts.ready.then(() => this.recompute());
     }
 
-    // 3) after images/layout fully settle
     window.addEventListener("load", this.recompute, { once: true });
 
-    // 4) two RAFs catches late layout shifts reliably
     requestAnimationFrame(() => requestAnimationFrame(() => this.recompute()));
   },
   beforeUnmount() {
@@ -133,7 +132,6 @@ export default {
     bouts: {
       deep: true,
       handler() {
-        // realtime updates: recompute after DOM updates settle
         this.$nextTick(() => this.recompute());
       },
     },
@@ -213,51 +211,30 @@ export default {
       const t = TableauLayoutTuning;
       const depth = this.normalizeRoundNumber(roundName);
 
-      // GAP
-      const gapByDepth = t.gapByDepthPx || [];
-      const gapPx = gapByDepth[depth] ?? (t.baseGapPx * Math.pow(2, depth));
+      const isCompact = t.compact?.enabledFor?.includes(this.bracketSize);
+
+      const gapArr = isCompact ? (t.gapByDepthPxCompact || []) : (t.gapByDepthPx || []);
+      const padArr = isCompact ? (t.padByDepthPxCompact || []) : (t.padByDepthPx || []);
+
+      const gapPx = gapArr[depth] ?? (t.baseGapPx * Math.pow(2, depth));
 
-      // PAD BASE (fallback formula if no array entry)
       const prevGap = t.baseGapPx * Math.pow(2, Math.max(0, depth - 1));
       const padTopBase = depth === 0 ? 0 : prevGap / 2;
 
-      const padByDepth = t.padByDepthPx || [];
-      const padFromArray = padByDepth[depth];
+      const padFromArray = padArr[depth];
 
-      // Named biases (special cases)
       const namedBias =
           roundName === "Final" ? (t.finalPadBiasPx || 0)
               : roundName === "Third Place" ? (t.thirdPlacePadBiasPx || 0)
                   : 0;
 
-      const isSplitFinal = this.isSplitMode && roundName === "Final";
-
-      // 1) start from normal pad (array or fallback) + named bias
-      let padTopPx = (padFromArray !== undefined ? padFromArray : padTopBase) + namedBias;
-
-      // 2) split-final override (absolute)
-      if (isSplitFinal) {
-        const key = this.bracketSize; // e.g. "Table of 64"
-        const fromMap = t.splitFinalPadTopByBracket?.[key];
-
-        const base = (fromMap !== undefined) ? fromMap : t.splitFinalPadTopPx;
-
-        if (base !== undefined) {
-          padTopPx = base + namedBias;
-        }
-      }
-
-      // 3) optional split-final additive tweak (small nudges)
-      if (isSplitFinal) {
-        padTopPx += (t.splitFinalPadBiasPx || 0);
-      }
+      const splitFinalBias =
+          this.isSplitMode && roundName === "Final"
+              ? (t.splitFinalPadTopByBracket?.[this.bracketSize] ?? 0)
+              : 0;
 
-      console.log(
-          "layout", roundName,
-          "depth", depth,
-          "padTopPx", padTopPx,
-          "isSplitFinal", isSplitFinal
-      );
+      const padTopPx =
+          (padFromArray !== undefined ? padFromArray : padTopBase) + namedBias + splitFinalBias;
 
       return { gapPx, padTopPx };
     },

package/src/stories/Organisms/Tableau/components/FinalColumn/BigFinalBoutCard.vue

@@ -20,7 +20,7 @@
           <!-- Name -->
           <div class="flex-1 min-w-0 flex items-center px-2">
             <BaseText size="sm" weight="normal" color="primary" class="truncate">
-              {{ person1Display.DisplayName }}
+              {{ person1Name }}
             </BaseText>
           </div>
 
@@ -49,7 +49,7 @@
           <!-- Name -->
           <div class="flex-1 min-w-0 flex items-center px-2">
             <BaseText size="sm" weight="normal" color="primary" class="truncate">
-              {{ person2Display.DisplayName }}
+              {{person2Name }}
             </BaseText>
           </div>
 
@@ -130,10 +130,8 @@ export default {
     score1() { return `${this.bout.Score1}`; },
     dePosition2() { return this.bout.Person2?.EventPersons?.[0]?.DEPosition ?? ""; },
     score2() { return `${this.bout.Score2}`; },
-
     row1ScoreColor() { return this.getScoreColor(true); },
     row2ScoreColor() { return this.getScoreColor(false); },
-
     person1Display() {
       if (this.bout.Status === "Scheduled" && this.bout.Person1.DisplayName === "BYE") {
         return { ...this.bout.Person1, DisplayName: "", Club: { Name: "" } };
@@ -146,8 +144,24 @@ export default {
       }
       return this.bout.Person2;
     },
-    showScore1() { return this.bout.Person1.DisplayName !== "BYE"; },
-    showScore2() { return this.bout.Person2.DisplayName !== "BYE"; },
+    person1() {
+      return this.bout?.Person1 || { DisplayName: "", Club: { Name: "" } };
+    },
+    person2() {
+      return this.bout?.Person2 || { DisplayName: "", Club: { Name: "" } };
+    },
+    person1Name() {
+      const n = (this.person1?.DisplayName || "").trim();
+      if (!n || n === "BYE") return "";
+      return n.length > 19 ? n.substring(0, 19) : n;
+    },
+    person2Name() {
+      const n = (this.person2?.DisplayName || "").trim();
+      if (!n || n === "BYE") return "";
+      return n.length > 19 ? n.substring(0, 19) : n;
+    },
+    showScore1() { return (this.person1?.DisplayName || "") !== "BYE"; },
+    showScore2() { return (this.person2?.DisplayName || "") !== "BYE"; },
   },
   methods: {
     syncTimerFromBout(b) {

package/src/stories/Organisms/Tableau/components/FinalColumn/FinalColumn.vue

@@ -1,8 +1,8 @@
 <template>
   <section class="w-[260px] flex flex-col items-center">
     <!-- header stays aligned with others -->
-    <div class="flex justify-center mb-4 border-accent border-b w-40">
-      <BaseText size="sm" color="primary" weight="bold">Final</BaseText>
+    <div class="flex justify-center mb-4 border-white border-b w-40">
+      <BaseText size="sm" color="white" weight="bold">Final</BaseText>
     </div>
 
     <!-- body can be dropped down independently -->

package/src/stories/Organisms/Tableau/components/TableauBoutCard/TableauBoutCard.vue

@@ -1,26 +1,28 @@
 <template>
   <section class="relative" :class="showActiveTimer ? 'bg-primary' : ''">
-    <!-- headers (if any) stay outside the card body -->
+
     <div v-if="roundName === 'Third Place'" class="flex justify-center border-accent border-b mb-4 mt-8 w-40">
-      <BaseText size="sm" color="primary">{{roundName}}</BaseText>
+      <BaseText size="sm" color="primary">{{ roundName }}</BaseText>
     </div>
-
-    <!-- CARD BODY: this is what the lines should attach to -->
     <div ref="cardBody" class="relative w-40">
-
-    <section>
-      <TableauFencerCard
-          :fencer="person1Display"
-          :score="score1"
-          :position="dePosition1"
-          :color="hostingClubColors.Color1"
-          :scoreColor="getScoreColor(true)"
-          :showScore="showScore1"
-      />
-    </section>
-
-      <div class="relative h-[4px]">
-        <!-- Flow flips depending on side -->
+      <section class="relative">
+        <div v-if="isActiveBout  && bout?.RingName"
+             class="absolute -top-4 left-0 h-4 z-40 w-40 bg-primary px-5 pt-0.5 rounded-tl-md leading-none inline-flex items-center pointer-events-none" >
+          <BaseText size="xs" color="secondary" weight="bold" class="uppercase tracking-wide">
+            {{ bout.RingName }}
+          </BaseText>
+        </div>
+        <TableauFencerCard
+            :fencer="person1Display"
+            :score="score1"
+            :position="dePosition1"
+            :color="hostingClubColors.Color1"
+            :scoreColor="getScoreColor(true)"
+            :showScore="showScore1"
+        />
+      </section>
+
+      <div class="relative" :class="isCompact ? ' h-[0px]' : ' h-[4px]'">
         <div
             class="absolute top-1/2 -translate-y-1/2 w-px h-px opacity-0 pointer-events-none"
             :class="direction === 'rtl' ? 'right-0' : 'left-0'"
@@ -34,18 +36,18 @@
         ></div>
       </div>
 
-    <section>
-      <TableauFencerCard
-          :fencer="person2Display"
-          :score="score2"
-          :position="dePosition2"
-          :color="hostingClubColors.Color2"
-          :scoreColor="getScoreColor(false)"
-          :showScore="showScore2"
-      />
-    </section>
-
+      <section>
+        <TableauFencerCard
+            :fencer="person2Display"
+            :score="score2"
+            :position="dePosition2"
+            :color="hostingClubColors.Color2"
+            :scoreColor="getScoreColor(false)"
+            :showScore="showScore2"
+        />
+      </section>
     </div>
+
     <transition
         enter-active-class="transition duration-150"
         enter-from-class="opacity-0 translate-x-1"
@@ -54,11 +56,12 @@
         leave-from-class="opacity-100 translate-x-0"
         leave-to-class="opacity-0 translate-x-1"
     >
-      <div v-if="showActiveTimer"
+      <div
+          v-if="isActiveBout "
           class="absolute top-1/2 -translate-y-1/2 z-50 pointer-events-none"
           :class="direction === 'rtl' ? '-left-10' : '-right-10'"
       >
-        <div class="bg-primary rounded-r-md px-2 py-1 w-10 flex items-center justify-center" style="height: 44px">
+        <div class="bg-primary rounded-r-md px-2 py-1 w-10 flex items-center justify-center -mt-4" style="height: 60px">
           <BaseText size="xs" color="secondary" weight="bold" class="font-sourceCodePro">
             {{ displayTime }}
           </BaseText>
@@ -89,7 +92,6 @@ export default {
     bracketSize: { type: String, required: true },
     direction: { type: String, default: "ltr" },
   },
-
   data() {
     return {
       highlight: false,
@@ -97,15 +99,12 @@ export default {
       _timerId: null,
     };
   },
-
   mounted() {
     this.syncTimerFromBout();
   },
-
   beforeUnmount() {
     stopCountdown(this);
   },
-
   watch: {
     "bout.TimeLeft"(v) {
       this.remainingTime = v ?? 0;
@@ -118,67 +117,84 @@ export default {
       this.maybeStartOrStopTimer();
     },
   },
-
   computed: {
-    dePosition1() { return this.bout.Person1?.EventPersons?.[0]?.DEPosition ?? ""; },
-    score1() { return `${this.bout.Score1}`; },
-    dePosition2() { return this.bout.Person2?.EventPersons?.[0]?.DEPosition ?? ""; },
-    score2() { return `${this.bout.Score2}`; },
-
+    isActiveBout() {
+      return String(this.bout?.Status || '').toLowerCase() === 'active';
+    },
+    isTimerRunning() {
+      return String(this.bout?.TimerStatus || "").toLowerCase() === "running";
+    },
+    shouldTickTimer() {
+      return this.isTimerRunning && shouldTickBout(this.bout, this.remainingTime);
+    },
     showActiveTimer() {
-      return shouldTickBout(this.bout, this.remainingTime);
+      return this.isActiveBout;
     },
-
+    isCompact() {
+      return ["Table of 64", "Table of 128", "Table of 256"].includes(this.bracketSize);
+    },
+    dePosition1() { return this.bout?.Person1?.EventPersons?.[0]?.DEPosition ?? ""; },
+    score1() { return `${this.bout?.Score1 ?? 0}`; },
+    dePosition2() { return this.bout?.Person2?.EventPersons?.[0]?.DEPosition ?? ""; },
+    score2() { return `${this.bout?.Score2 ?? 0}`; },
     displayTime() {
       return formatSecondsMMSS(this.remainingTime);
     },
-
     person1Display() {
-      if (this.bout.Status === "Scheduled" && this.bout.Person1.DisplayName === "BYE") {
-        return { ...this.bout.Person1, DisplayName: "", Club: { Name: "" } };
+      const p1 = this.bout?.Person1;
+      if (!p1) return { DisplayName: "", Club: { Name: "" } };
+
+      if (this.bout?.Status === "Scheduled" && p1.DisplayName === "BYE") {
+        return { ...p1, DisplayName: "", Club: { Name: "" } };
       }
-      return this.bout.Person1;
+      return p1;
     },
     person2Display() {
-      if (this.bout.Status === "Scheduled" && this.bout.Person2.DisplayName === "BYE") {
-        return { ...this.bout.Person2, DisplayName: "", Club: { Name: "" } };
+      const p2 = this.bout?.Person2;
+      if (!p2) return { DisplayName: "", Club: { Name: "" } };
+
+      if (this.bout?.Status === "Scheduled" && p2.DisplayName === "BYE") {
+        return { ...p2, DisplayName: "", Club: { Name: "" } };
       }
-      return this.bout.Person2;
+      return p2;
+    },
+    showScore1() { return (this.bout?.Person1?.DisplayName ?? "") !== "BYE"; },
+    showScore2() { return (this.bout?.Person2?.DisplayName ?? "") !== "BYE"; },
+    isFirstRound() {
+      return String(this.bout?.RoundLabel || "") === String(this.bracketSize || "");
     },
-    showScore1() { return this.bout.Person1.DisplayName !== "BYE"; },
-    showScore2() { return this.bout.Person2.DisplayName !== "BYE"; },
   },
-
   methods: {
     registerAnchor(kind, el) {
       if (!el) return;
       this.$emit("register-node-anchor", { id: this.bout?.DEBoutId, kind, el });
     },
-
     syncTimerFromBout() {
       this.remainingTime = this.bout?.TimeLeft ?? 0;
       this.maybeStartOrStopTimer();
     },
-
     maybeStartOrStopTimer() {
-      const shouldTick = shouldTickBout(this.bout, this.remainingTime);
-      if (shouldTick) startCountdown(this);
+      if (this.shouldTickTimer) startCountdown(this);
       else stopCountdown(this);
     },
-
     getScoreColor(isPerson1) {
+      const p1 = this.bout?.Person1?.DisplayName ?? "";
+      const p2 = this.bout?.Person2?.DisplayName ?? "";
+      const s1 = Number(this.bout?.Score1 ?? 0);
+      const s2 = Number(this.bout?.Score2 ?? 0);
+      const status = this.bout?.Status;
+
       if (isPerson1) {
-        if (this.bout.Person2.DisplayName === "BYE" && !((this.bout.Person1.DisplayName === "BYE") && (this.bout.Person2.DisplayName === "BYE"))) return "bg-accent";
-        if (this.bout.Score1 > this.bout.Score2) return "bg-accent";
-        if (this.bout.Score1 < this.bout.Score2 && this.bout.Status === "Active") return "bg-secondary";
+        if (p2 === "BYE" && !(p1 === "BYE" && p2 === "BYE")) return "bg-accent";
+        if (s1 > s2) return "bg-accent";
+        if (s1 < s2 && status === "Active") return "bg-secondary";
       } else {
-        if (this.bout.Person1.DisplayName === "BYE" && !((this.bout.Person1.DisplayName === "BYE") && (this.bout.Person2.DisplayName === "BYE"))) return "bg-accent";
-        if (this.bout.Score1 < this.bout.Score2) return "bg-accent";
-        if (this.bout.Score1 > this.bout.Score2 && this.bout.Status === "Active") return "bg-secondary";
+        if (p1 === "BYE" && !(p1 === "BYE" && p2 === "BYE")) return "bg-accent";
+        if (s1 < s2) return "bg-accent";
+        if (s1 > s2 && status === "Active") return "bg-secondary";
       }
       return "bg-secondary";
     },
   },
 };
-
 </script>

package/src/stories/Organisms/Tableau/components/TableauFencerCard/TableauFencerCard.vue

@@ -1,11 +1,10 @@
 <template>
-  <section class="flex w-40 rounded-sm bg-secondary border border-primary h-5">
+  <section class="flex w-40 rounded-sm bg-secondary border border-primary" :class="isCompact ? 'h-3' : 'h-5'">
     <!-- Left position -->
     <div class="w-5 flex items-center justify-center px-1" :class="`bg-${color}`">
       <BaseText size="xs" color="secondary font-sourceCodePro">{{ position }}</BaseText>
     </div>
 
-    <!-- Name (flexes, truncates properly) -->
     <div class="flex-1 min-w-0 flex items-center px-2">
       <BaseText
           size="xs"
@@ -66,20 +65,13 @@ export default {
     }
   },
   computed: {
-    portraitURL() {
-      const images = this.fencer.Images || [];
-      const portrait = images.find(image => image.URL);
-      return portrait ? portrait.URL : '';
+    isCompact() {
+      return ["Table of 64","Table of 128","Table of 256"].includes(this.bracketSize);
     },
     name() {
-      //if (this.fencer.DisplayName === "BYE") return "";
       if (this.fencer.DisplayName.length > 19) return this.fencer.DisplayName.substring(0, 19);
       return this.fencer.DisplayName;
     },
-    club() {
-      if (this.fencer.DisplayName === "BYE" || this.fencer.DisplayName === "") return "";
-      return this.fencer.Club.Name;
-    },
     width() {
       return ' w-40';
     }

package/src/stories/Organisms/Tableau/layout/TableauLayoutEngine.js

@@ -6,13 +6,20 @@ export const TableauLayoutTuning = {
     padByDepthPx: [0, 32, 96, 224, 480, 992, 2016],
     gapByDepthPx: [20, 84, 212, 468, 980, 2004, 0],
 
+    padByDepthPxCompact: [0, 26, 76, 176, 376, 777, 0],
+    gapByDepthPxCompact: [10, 60, 160, 360, 760, 1000, 0],
+
     finalPadBiasPx: 0,
     thirdPlacePadBiasPx: 120,
 
     splitFinalPadTopByBracket: {
-        "Table of 64": 430,
-        "Table of 128": 940,
-        "Table of 32": 170,
+        "Table of 64": -45,
+        "Table of 128": 730,
+        "Table of 32": 0,
+    },
+    compact: {
+        enabledFor: ["Table of 64", "Table of 128", "Table of 256"],
+        interFencerGapPx: 1,
     },
     splitFinalPadBiasPx: 0,
 };

package/src/stories/Organisms/Tableau/components/TableauActiveBoutCard/SpacingConfig.js

@@ -1,71 +0,0 @@
-export const SpacingConfig = {
-    'Semifinal': {
-        large: {
-        },
-        small: {
-            Semifinal: {topSpace: 'mt-[0.7rem] mb-[1.8rem]', cardSpace: 'mt-[2.3rem]', gap: 40},
-            Final: {topSpace: 'mt-[12.2rem]', gap: 50},
-            'Third Place': {topSpace: '-mt-8 -ml-44', gap: 30}
-        }
-    },
-    'Table of 8': {
-        large: {
-        },
-        small: {
-            'Table of 8': { topSpace: 'mt-0 mb-4', leftLine: 'hidden', timeBox: '-right-[35px]', gap: 0},
-            Semifinal: { topSpace: 'mt-[0.7rem] mb-[1.8rem]', leftLine: 'h-[56px] mt-[19px] -ml-[1px]', timeBox: '-right-[35px]', gap: 32,},
-            Final: { topSpace: 'mt-[2.6rem]', getCardSpace: 'mt-1', timeBox: 'mt-[2.3rem] -right-[35px]', gap: 32, leftLine: 'hidden'},
-            'Third Place': { topSpace: '-mt-8 -ml-40', leftLine: 'h-0', timeBox: '-right-[35px] top-[69px]',gap: 0,}
-        }
-    },
-    'Table of 16': {
-        large: {
-        },
-        small: {
-            'Table of 16': { topSpace: 'mt-[0rem] mb-4', getCardSpace: 'mt-1', timeBox: '-right-[35px]', gap: 0, leftLine: 'hidden'},
-            'Table of 8':  { topSpace: 'mt-[0rem] mb-[1.5rem]', getCardSpace: 'mt-[0rem]', timeBox: '-right-[35px]', gap: 50, leftLine: 'mt-[1.2rem] h-[3.56rem]'},
-            Semifinal: { topSpace: 'mt-[2.25rem] mb-[3.63rem]', getCardSpace: 'mt-[0rem]', timeBox: '-right-[35px]', gap: 92, leftLine: 'mt-[2.8rem] h-[7.1rem]'},
-            Final: { topSpace: 'mt-[7rem]', getCardSpace: 'mt-1', timeBox: 'mt-[2.3rem] -right-[35px]', gap: 0, leftLine: 'hidden'},
-            'Third Place': { topSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1'},
-        }
-    },
-    'Table of 32': {
-        large: {
-        },
-        small: {
-            'Table of 32': { topSpace: 'mt-[0rem] mb-4', getCardSpace: 'mt-1', timeBox: '-right-[35px]', gap: 0, leftLine: 'hidden'},
-            'Table of 16': { topSpace: 'mt-[0rem] mb-[1.5rem]', getCardSpace: 'mt-[0rem]', timeBox: '-right-[35px]', gap: 50, leftLine: 'mt-[1.3rem] h-[3.5rem]'},
-            'Table of 8': { topSpace: 'mt-[2.4rem] mb-[3.45rem]', getCardSpace: 'mt-[5.9rem]', timeBox: '-right-[35px]', gap: 92,leftLine: 'mt-[3rem] h-[7rem] '},
-            Semifinal: { topSpace: 'mt-[5.5rem] mb-[7.5rem]', getCardSpace: 'mt-[12.8rem]', timeBox: '-right-[35px]', gap: 200, leftLine: 'mt-[7rem] h-[14rem]'},
-            Final: { topSpace: 'mt-[12.5rem]', getCardSpace: 'mt-1', timeBox: 'mt-[2.3rem] -right-[35px]', gap: 0, leftLine: 'hidden'},
-            'Third Place': { topSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1', timeBox: '-right-[35px]', gap: 0, leftLine: 'mt-[3rem] h-[7rem]'},
-        }
-    },
-    'Table of 64': {
-        large: {
-        },
-        small: {
-            'Table of 64': { topSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1'},
-            'Table of 32': { topSpace: 'mt-[0.7rem] mb-[2.65rem]', getCardSpace: 'mt-[3.4rem]'},
-            'Table of 16': { topSpace: 'mt-[2.9rem] mb-[5rem]', getCardSpace: 'mt-[7.85rem]'},
-            'Table of 8': { topSpace: 'mt-[7rem] mb-[9.95rem]', getCardSpace: 'mt-[16.8rem]'},
-            Semifinal: { topSpace: 'mt-[16.1rem] mb-[18.8rem]', getCardSpace: 'mt-[34.8rem]'},
-            Final: { topSpace: 'mt-[68rem]', getCardSpace: 'mt-1'},
-            'Third Place': { topSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1'},
-        }
-    },
-    'Table of 128': {
-        large: {
-        },
-        small: {
-            'Table of 128': { topSpace: 'mt-[0rem] mb-[2rem]', getCardSpace: 'mt-1'},
-            'Table of 64': { topSpace: 'mt-[0.7rem] mb-[2.65rem]', getCardSpace: 'mt-[3.4rem]'},
-            'Table of 32': { topSpace: 'mt-[2.9rem] mb-[5rem]', getCardSpace: 'mt-[7.85rem]'},
-            'Table of 16': { topSpace: 'mt-[7rem] mb-[9.95rem]', getCardSpace: 'mt-[16.8rem]'},
-            'Table of 8': { topSpace: 'mt-[16.1rem] mb-[18.8rem]', getCardSpace: 'mt-[34.8rem]'},
-            Semifinal: { topSpace: 'mt-[34.3rem] mb-[36.5rem]', getCardSpace: 'mt-[70.8rem]'},
-            Final: { topSpace: 'mt-[140rem]', getCardSpace: 'mt-1'},
-            'Third Place': { topSpace: '-mt-[2rem] -ml-[11rem]', getCardSpace: 'mt-1'},
-        }
-    },
-};