@dcrackel/meyersquaredui 1.0.261 → 1.0.266

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dcrackel/meyersquaredui",
   "private": false,
-  "version": "1.0.261",
+  "version": "1.0.266",
   "type": "module",
   "main": "dist/meyersquaredui.cjs.js",
   "module": "dist/meyersquaredui.esm.js",
@@ -42,15 +42,15 @@
     "vue3-google-map": "^0.21.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^5.0.0",
-    "@storybook/addon-docs": "^10.1.11",
-    "@storybook/addon-links": "^10.1.11",
-    "@storybook/addon-onboarding": "^10.1.11",
-    "@storybook/vue3-vite": "^10.1.11",
+    "@chromatic-com/storybook": "^5.0.1",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/addon-links": "^10.2.8",
+    "@storybook/addon-onboarding": "^10.2.8",
+    "@storybook/vue3-vite": "^10.2.8",
     "@vitejs/plugin-vue": "^5.1.2",
     "autoprefixer": "^10.4.20",
     "postcss": "^8.4.45",
-    "storybook": "^10.1.11",
+    "storybook": "^10.2.8",
     "tailwindcss": "^3.4.11",
     "vite": "^6.3.5"
   },

package/src/index.js

@@ -55,6 +55,6 @@ export { default as DoubleButtonBanner } from './stories/Organisms/SectionBanner
 export { default as Footer } from './stories/Organisms/Footer/Footer.vue'
 export { default as LivePoolsContainer } from './stories/Organisms/ScoreBoardParts/Containers/LivePoolsContainer/LivePoolsContainer.vue'
 export { default as FinalResultsContainer } from './stories/Organisms/ScoreBoardParts/Containers/FinalResultsContainer/FinalResultsContainer.vue'
-
+export { default as ScoreBug} from './stories/Organisms/ScoreBoardParts/Containers/ScoreBug/ScoreBug.vue'
 
 export { default as HomePage } from './stories/Templates/HomePage/HomePage.vue'

package/src/stories/Organisms/ScoreBoardParts/Containers/ScoreBug/ScoreBug.stories.js

@@ -0,0 +1,86 @@
+import ScoreBug from './ScoreBug.vue';
+
+const mockBout = {
+    Person1: { DisplayName: 'Alice McSword', Club: { Name: 'Iron Oak HEMA' } },
+    Person2: { DisplayName: 'Bryn “The Wall” Kincaid', Club: { Name: 'River City Blades' } },
+
+    Score1: 3,
+    Score2: 2,
+
+    // counting behavior
+    IsCountingUp: true,
+    MaxPoints: 10,
+
+    // timer behavior
+    TimeLeft: 125,          // seconds
+    TimerStatus: 'stopped', // 'running' | 'stopped'
+};
+
+const mockHostingClubColors = {
+    Color1: 'red',
+    Color2: 'blue',
+};
+
+export default {
+    title: 'Organisms/Streaming/ScoreBug',
+    component: ScoreBug,
+    tags: ['autodocs'],
+    parameters: {
+        backgrounds: { default: 'light' },
+    },
+    argTypes: {
+        bout: { control: 'object' },
+        hostingClubColors: { control: 'object' },
+    },
+};
+
+export const Default = {
+    args: {
+        bout: mockBout,
+        hostingClubColors: mockHostingClubColors,
+    },
+};
+
+export const TimerRunning = {
+    args: {
+        bout: { ...mockBout, TimerStatus: 'running' },
+        hostingClubColors: mockHostingClubColors,
+    },
+};
+
+export const LongNames = {
+    args: {
+        bout: {
+            ...mockBout,
+            Person1: {
+                DisplayName: 'Sir Alexandrius Maximillian von Oberhau the Third',
+                Club: { Name: 'The Extremely Long Club Name Historical Fencing Society' },
+            },
+            Person2: {
+                DisplayName: 'Nephthys “The Meteor” Kurozawa-Santangelo',
+                Club: { Name: 'International League of Very Serious Sword People' },
+            },
+        },
+        hostingClubColors: mockHostingClubColors,
+    },
+};
+
+export const CountingDown = {
+    args: {
+        bout: {
+            ...mockBout,
+            IsCountingUp: false,
+            MaxPoints: 10,
+            Score1: 7, // displayed becomes 3
+            Score2: 9, // displayed becomes 1
+        },
+        hostingClubColors: mockHostingClubColors,
+    },
+};
+
+export const SilverVsBlue = {
+    args: {
+        bout: mockBout,
+        hostingClubColors: { Color1: 'silver', Color2: 'blue' },
+    },
+};

package/src/stories/Organisms/ScoreBoardParts/Containers/ScoreBug/ScoreBug.vue

@@ -0,0 +1,145 @@
+<template>
+  <section class="w-full">
+    <!-- Transparent outer wrapper -->
+    <div
+        class="flex items-center w-full rounded-2xl overflow-hidden border border-dropdownSelect h-[56px] bg-transparent">
+      <!-- LEFT: name + club -->
+      <div :class="[leftBg]" class="h-full flex items-center gap-3 px-4 flex-1 min-w-0">
+        <BaseText :color="leftText" size="xl" weight="bold" class="truncate leading-none">
+          {{ bout.Person1.DisplayName }}
+        </BaseText>
+
+        <span class="inline-block w-2 flex-none"></span>
+
+        <BaseText :color="leftText" size="lg" class="truncate opacity-90 leading-none">
+          {{ bout.Person1?.Club?.Name || '' }}
+        </BaseText>
+      </div>
+
+      <!-- SCORE 1 -->
+      <div
+          class="h-full bg-lineGrey px-4 border-l border-r border-dropdownSelect flex items-center justify-center w-[72px] flex-none">
+        <BaseText size="3xl" color="secondary" weight="bold" font="mono" class="leading-none">
+          {{ score1 }}
+        </BaseText>
+      </div>
+
+      <!-- TIMER -->
+      <div
+          class="h-full px-4 bg-black border-r border-dropdownSelect flex items-center justify-center w-[120px] flex-none">
+        <BaseText size="2xl" color="secondary" weight="bold" font="mono" class="leading-none">
+          {{ formattedTime }}
+        </BaseText>
+      </div>
+
+      <!-- SCORE 2 -->
+      <div
+          class="h-full px-4 bg-lineGrey border-r border-dropdownSelect flex items-center justify-center w-[72px] flex-none">
+        <BaseText size="3xl" color="secondary" weight="bold" font="mono" class="leading-none">
+          {{ score2 }}
+        </BaseText>
+      </div>
+
+      <!-- RIGHT: club + name -->
+      <div :class="[rightBg]" class="h-full flex items-center justify-end gap-3 px-4 flex-1 min-w-0">
+        <BaseText :color="rightText" size="lg" class="truncate opacity-90 leading-none">
+          {{ bout.Person2?.Club?.Name || '' }}
+        </BaseText>
+
+        <span class="inline-block w-2 flex-none"></span>
+
+        <BaseText :color="rightText" size="xl" weight="bold" class="truncate text-right leading-none">
+          {{ bout.Person2.DisplayName }}
+        </BaseText>
+      </div>
+    </div>
+  </section>
+</template>
+
+
+<script>
+import BaseText from "../../../../Atoms/BaseText/BaseText.vue";
+
+export default {
+  name: "ScoreBug",
+  components: {BaseText},
+  props: {
+    bout: {type: Object, required: true},
+    hostingClubColors: {type: Object, required: true},
+  },
+  data() {
+    return {
+      time: 0,
+      timerInterval: null,
+    };
+  },
+  computed: {
+    color1() {
+      return (this.hostingClubColors?.Color1 || "red").toLowerCase();
+    },
+    color2() {
+      return (this.hostingClubColors?.Color2 || "blue").toLowerCase();
+    },
+    leftBg() {
+      return "bg-" + this.color1;
+    },
+    rightBg() {
+      return "bg-" + this.color2;
+    },
+    leftText() {
+      return this.color1 === "silver" ? "primary" : "white";
+    },
+    rightText() {
+      return this.color2 === "silver" ? "primary" : "white";
+    },
+    score1() {
+      if (!this.bout.IsCountingUp) return this.bout.MaxPoints - this.bout.Score1;
+      return this.bout.Score1;
+    },
+    score2() {
+      if (!this.bout.IsCountingUp) return this.bout.MaxPoints - this.bout.Score2;
+      return this.bout.Score2;
+    },
+    formattedTime() {
+      const minutes = Math.floor(this.time / 60);
+      const seconds = this.time % 60;
+      return `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`;
+    },
+    timerStatus() {
+      return this.bout.TimerStatus || "stopped";
+    },
+    initialTime() {
+      return parseInt(this.bout.TimeLeft ?? 120);
+    },
+  },
+  watch: {
+    timerStatus(newStatus) {
+      if (newStatus === "running") this.startTimer();
+      else this.stopTimer();
+    },
+    initialTime(newTime) {
+      this.time = parseInt(newTime);
+    },
+  },
+  methods: {
+    startTimer() {
+      this.stopTimer();
+      this.timerInterval = setInterval(() => {
+        if (this.time > 0) this.time--;
+        else this.stopTimer();
+      }, 1000);
+    },
+    stopTimer() {
+      clearInterval(this.timerInterval);
+      this.timerInterval = null;
+    },
+  },
+  mounted() {
+    this.time = this.initialTime;
+    if (this.timerStatus === "running") this.startTimer();
+  },
+  beforeDestroy() {
+    this.stopTimer();
+  },
+};
+</script>

package/src/stories/Organisms/ScoreBoardParts/FencerPit/FencerPit.vue

@@ -23,7 +23,7 @@
         </div>
         <div :class="getBackgroundColor(hostingClubColors.Color2)">
           <BaseText
-              size="4xl"
+              size="6xl"
               weight="bold"
               :color="getTextColor(hostingClubColors.Color2)"
               class="p-2 pr-4"

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

@@ -6,7 +6,7 @@ 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],
+    padByDepthPxCompact: [0, 26, 76, 176, 376, 365, 0],
     gapByDepthPxCompact: [10, 60, 160, 360, 760, 1000, 0],
 
     finalPadBiasPx: 0,