@dcrackel/meyersquaredui 1.0.259 → 1.0.261

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

@@ -1,8 +1,9 @@
 import Tableau from './Tableau.vue';
 //import getDEWithBouts from '../../../mocks/getDEWithBouts.js';
 //import getDEWithBouts from '../../../mocks/getDEWithBouts8.js';
-import getDEWithBouts from '../../../mocks/getDEWithBouts16.js';
-//import getDEWithBouts from '../../../mocks/getDEWithBouts2.js';
+//import getDEWithBouts from '../../../mocks/getDEWithBouts16.js';
+//import getDEWithBouts from '../../../mocks/getDEWithBouts32.js';
+import getDEWithBouts from '../../../mocks/getDEWithBouts64.js';
 //import getDEWithBouts from '../../../mocks/getDEWithBouts68.js';
 
 export default {

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

@@ -85,7 +85,8 @@ export default {
   },
   computed: {
     isSplitMode() {
-      return ["Table of 32", "Table of 64", "Table of 128", "Table of 256"].includes(this.bracketSize);
+      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,44 +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 && t.splitFinalPadTopPx !== undefined) {
-        padTopPx = t.splitFinalPadTopPx + 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,10 +6,21 @@ 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,
 
-    splitFinalPadTopPx: 940,
+    splitFinalPadTopByBracket: {
+        "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,
 };