@usssa/component-library 1.0.0-alpha.263 → 1.0.0-alpha.264

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usssa/component-library",
-  "version": "1.0.0-alpha.263",
+  "version": "1.0.0-alpha.264",
   "description": "A Quasar component library project",
   "productName": "Quasar component library App",
   "author": "Engineering Team <engineering@usssa.com>",

package/src/components/core/UBracket.vue

@@ -5,7 +5,7 @@ import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
 import { UBtnIcon, UBtnStd, UChip, UMenuItem, USheet } from '../../components'
 import { useScreenType } from '../../composables/useScreenType'
 
-const emit = defineEmits(['open-expand'])
+const emit = defineEmits(['open-expand', 'schedule-click'])
 
 defineOptions({
   name: 'UBracket',
@@ -52,10 +52,15 @@ const props = defineProps({
   teamSheetApplyLabel: { type: String, default: 'Select Team' },
   teamSheetCancelLabel: { type: String, default: 'Cancel' },
   teamSheetHeading: { type: String, default: 'Select Team' },
+  venueSheetHeading: { type: String, default: 'Venue Detail' },
   vGap: {
     type: Number,
     default: 50,
   },
+  viewMatchupDetailText: {
+    type: String,
+    default: 'View Matchup Details',
+  },
   zoomInTooltip: {
     type: String,
     default: 'Zoom In',
@@ -99,6 +104,7 @@ const tempSelectedTeamId = ref('')
 const teamSheet = ref([])
 const tooltipState = ref({ visible: false, x: 0, y: 0, text: '' })
 const zoomRef = ref(null)
+const locationSheet = ref([])
 
 const selectedTeamName = computed({
   get() {
@@ -838,44 +844,131 @@ const renderBracket = () => {
     const destPos = getNodePosition(destId)
 
     if (pos1 && pos2 && destPos) {
-      // Horizontally, it should be halfway between the end of the source node and the start of the destination node.
-      const x = pos1.x + nodeWidth / 2
-      // Vertically, it should be centered between the two source nodes.
-      const y = (pos1.y + nodeHeight + pos2.y) / 2
+      // Use the leftmost node's x for alignment
+      const nodeX1 = pos1.x
+      const nodeX2 = pos2.x
+      const nodeY1 = pos1.y
+      const nodeY2 = pos2.y
+
+      const startX = Math.min(nodeX1, nodeX2)
+      const topY = Math.min(nodeY1, nodeY2)
+      const bottomY = Math.max(nodeY1, nodeY2) + nodeHeight
+      // Move details upward by 12px so it doesn't touch the node
+      const centerY = (topY + bottomY) / 2 - 12
 
-      const dateGroup = g.append('g').attr('transform', `translate(${x}, ${y})`)
+      const detailsGroup = g.append('g').attr('transform', `translate(${startX}, ${centerY})`)
 
-      // Add the date text first
-      dateGroup
+      // Remove the white background rect (unwanted)
+      // detailsGroup.append('rect') ... (removed)
+
+      // Add the date text
+      detailsGroup
         .append('text')
         .attr('class', 'match-date text-overline-xs text-description')
-        .attr('x', 30) // Position text to end just left of center
-        .attr('y', 2)
-        .attr('text-anchor', 'end') // Anchor text from the end
+        .attr('x', 0)
+        .attr('y', -6)
+        .attr('text-anchor', 'start')
         .attr('dominant-baseline', 'middle')
         .text(game.date)
 
-      // Add the icon after the text
-      const locationIcon = dateGroup
+      // Add venue text below date text from the 'venue' key
+      if (game.venue) {
+        // We'll use a <foreignObject> with a div, and check for overflow after rendering
+        const venueFO = detailsGroup
+          .append('foreignObject')
+          .attr('x', 0)
+          .attr('y', 2)
+          .attr('width', 200)
+          .attr('height', 30)
+          .append('xhtml:div')
+          .attr('class', 'text-body-xxs text-description match-venue venue-ellipsis')
+          .style('word-break', 'break-word')
+          .style('white-space', 'normal')
+          .style('text-align', 'start')
+          .style('width', '100%')
+          .style('overflow', 'hidden')
+          .style('display', '-webkit-box')
+          .style('-webkit-line-clamp', 2)
+          .style('-webkit-box-orient', 'vertical')
+          .text(game.venue);
+
+        // After nextTick, check for vertical overflow and add tooltip if needed
+        nextTick(() => {
+          // venueFO is a D3 selection, so .node() gives us the div
+          const div = venueFO.node();
+          if (div && div.scrollHeight > div.clientHeight + 1) {
+            // Add ellipsis via CSS (already set), and tooltip on hover
+            d3.select(div)
+              .on('mouseover', function (event) {
+                const rect = this.getBoundingClientRect()
+                const svgRect = svgRef.value.getBoundingClientRect()
+                tooltipState.value = {
+                  visible: true,
+                  x: rect.left - svgRect.left + rect.width / 2,
+                  y: rect.top - svgRect.top - 40,
+                  text: game.venue,
+                }
+              })
+              .on('mouseout', function () {
+                tooltipState.value = { ...tooltipState.value, visible: false }
+              })
+          }
+        });
+      }
+
+      const locationIcon = detailsGroup
         .append('image')
         .attr('href', '/icons/field-location.svg')
-        .attr('x', 95)
-        .attr('y', -12)
+        .attr('x', 200)
+        .attr('y', -8)
         .attr('width', 24)
         .attr('height', 24)
         .attr('class', 'location-icon')
         .style('cursor', 'pointer')
 
+      const scheduleIcon = detailsGroup
+        .append('image')
+        .attr('href', '/icons/scoreboard.svg')
+        .attr('x', 240)
+        .attr('y', -8)
+        .attr('width', 24)
+        .attr('height', 24)
+        .attr('class', 'info-icon')
+        .style('cursor', 'pointer')
+
       locationIcon.on('click', function (event) {
-        const iconRect = this.getBoundingClientRect()
-        const svgRect = svgRef.value.getBoundingClientRect()
-        tooltipState.value = {
-          visible: true,
-          x: iconRect.left - svgRect.left + iconRect.width / 2,
-          y: iconRect.top - svgRect.top - 40,
-          text: game.location || 'Dallas, TX',
+        if ($screen.value.isMobile) {
+          locationSheet.value.push({ open: true, height: 150 })
+        } else {
+          const iconRect = this.getBoundingClientRect()
+          const svgRect = svgRef.value.getBoundingClientRect()
+          tooltipState.value = {
+            visible: true,
+            x: iconRect.left - svgRect.left + iconRect.width / 2,
+            y: iconRect.top - svgRect.top - 40,
+            text: game.location || 'Dallas, TX',
+          }
         }
       })
+
+      // Tooltip on hover for schedule icon
+      scheduleIcon
+        .on('mouseover', function (event) {
+          const iconRect = this.getBoundingClientRect()
+          const svgRect = svgRef.value.getBoundingClientRect()
+          tooltipState.value = {
+            visible: true,
+            x: iconRect.left - svgRect.left + iconRect.width / 2,
+            y: iconRect.top - svgRect.top - 40,
+            text: props.viewMatchupDetailText,
+          }
+        })
+        .on('mouseout', function () {
+          tooltipState.value = { ...tooltipState.value, visible: false }
+        })
+        .on('click', function (event) {
+          emit('schedule-click', game)
+        })
     }
   })
 
@@ -903,6 +996,39 @@ const renderBracket = () => {
         (winnerNodePosition.x !== 0 || winnerNodePosition.y !== 0)
       ) {
         const { x: mx, y: my } = winnerNodePosition
+
+        let labelPlaced = false
+
+        const sourcePositions = (game.team || [])
+          .map((source) => {
+            if (
+              typeof source === 'object' &&
+              source.teamName &&
+              source.position
+            ) {
+              const id = `${source.teamName}_${source.position.columnNo}_${source.position.rowNo}`
+              return getNodePosition(id)
+            }
+            return null
+          })
+          .filter(Boolean)
+
+        let triX = 0, triY = 0
+        if (sourcePositions.length === 2) {
+          if (mx > sourcePositions[0].x) {
+            // Winner to the right
+            triX = (sourcePositions[0].x + nodeWidth + mx - edgeMargin) / 2
+          } else {
+            // Winner to the left
+            triX = (sourcePositions[0].x - edgeMargin + mx + nodeWidth) / 2
+          }
+          // Always use the vertical center of the destination node
+          triY = my + nodeHeight / 2
+        } else if (sourcePositions.length === 1) {
+          triX = (sourcePositions[0].x + mx) / 2
+          triY = my + nodeHeight / 2
+        }
+
         game.team.forEach((source) => {
           let sourceNodeId
           if (
@@ -945,6 +1071,47 @@ const renderBracket = () => {
             .attr('d', path.toString())
             .attr('stroke-linecap', 'round')
         })
+
+        // Place the gameAliasName at the trisection point (only once per edge group)
+        if (game.gameAliasName && !labelPlaced && sourcePositions.length) {
+          const aliasText = game.gameAliasName.replace(/-/g, '').trim();
+          const padding = 6   // px, padding inside the square
+          const tempText = g.append('text')
+            .attr('class', 'text-caption-xs game-number')
+            .attr('x', triX)
+            .attr('y', triY)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .style('visibility', 'hidden')
+            .text(aliasText)
+          const bbox = tempText.node().getBBox()
+          tempText.remove()
+          const size = Math.max(bbox.width, bbox.height) + padding
+
+          // Draw white square background with edge color border
+          g.append('rect')
+            .attr('x', triX - size / 2)
+            .attr('y', triY - size / 2)
+            .attr('width', size)
+            .attr('height', size)
+            .attr('rx', 4)
+            .attr('fill', '#fff')
+            .attr('stroke', getComputedStyle(document.documentElement)
+              .getPropertyValue('--q-color-neutral-4') || '#b9e0ff')
+            .attr('stroke-width', 4)
+            .attr('class', 'edge-alias-bg')
+
+          // Draw the label text
+          g.append('text')
+            .attr('class', 'text-caption-xs text-description game-alias-label')
+            .attr('x', triX)
+            .attr('y', triY)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .style('pointer-events', 'none')
+            .text(aliasText)
+          labelPlaced = true
+        }
       }
     }
 
@@ -969,6 +1136,32 @@ const renderBracket = () => {
         (loserNodePosition.x !== 0 || loserNodePosition.y !== 0)
       ) {
         const { x: lx, y: ly } = loserNodePosition
+
+        let labelPlaced = false
+
+        const sourcePositions = (game.team || [])
+          .map((source) => {
+            if (
+              typeof source === 'object' &&
+              source.teamName &&
+              source.position
+            ) {
+              const id = `${source.teamName}_${source.position.columnNo}_${source.position.rowNo}`
+              return getNodePosition(id)
+            }
+            return null
+          })
+          .filter(Boolean)
+
+        let triX = 0, triY = 0
+        if (sourcePositions.length === 2) {
+          triX = (sourcePositions[0].x - edgeMargin + lx + nodeWidth) / 2
+          triY = ly + nodeHeight / 2
+        } else if (sourcePositions.length === 1) {
+          triX = (sourcePositions[0].x + lx) / 2
+          triY = ly + nodeHeight / 2
+        }
+
         game.team.forEach((source) => {
           let sourceNodeId
           if (
@@ -999,18 +1192,74 @@ const renderBracket = () => {
             .attr('d', path.toString())
             .attr('stroke-linecap', 'round') // Changed to rounded end
         })
+
+        // Place the gameAliasName at the trisection point (only once per edge group)
+        if (game.gameAliasName && !labelPlaced && sourcePositions.length) {
+          // Remove hyphens from gameAliasName
+          const aliasText = game.gameAliasName.replace(/-/g, '').trim();
+          // Calculate text size for the background rect
+          const fontSize = 13 // px, matches .edge-alias-label font-size
+          const padding = 6   // px, padding inside the square
+          // Temporary text element to measure width
+          const tempText = g.append('text')
+            .attr('class', 'text-caption-xs text-description')
+            .attr('x', triX)
+            .attr('y', triY)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .style('visibility', 'hidden')
+            .text(aliasText)
+          const bbox = tempText.node().getBBox()
+          tempText.remove()
+          const size = Math.max(bbox.width, bbox.height) + padding
+
+          // Draw white square background with edge color border
+          g.append('rect')
+            .attr('x', triX - size / 2)
+            .attr('y', triY - size / 2)
+            .attr('width', size)
+            .attr('height', size)
+            .attr('rx', 5)
+            .attr('fill', '#fff')
+            .attr('stroke', getComputedStyle(document.documentElement)
+              .getPropertyValue('--q-color-neutral-4') || '#b9e0ff')
+            .attr('stroke-width', 4)
+            .attr('class', 'edge-alias-bg')
+
+          // Draw the label text
+          g.append('text')
+            .attr('class', 'text-caption-xs text-description game-alias-label')
+            .attr('x', triX)
+            .attr('y', triY)
+            .attr('text-anchor', 'middle')
+            .attr('dominant-baseline', 'middle')
+            .style('pointer-events', 'none')
+            .text(aliasText)
+          labelPlaced = true
+        }
       }
-    }
-  })
+    } // <-- FIX: close the LOSER edges block here
+
+  }) // <-- close games.value.forEach
 
   // After all edges are drawn, move highlighted edges to top
   nextTick(() => {
     const gEl = gRef.value
     if (gEl) {
+      // Move highlighted edges to top
       const highlightedEdges = gEl.querySelectorAll('.edge-path.highlighted')
       highlightedEdges.forEach((el) => {
         gEl.appendChild(el)
       })
+      // Move game-alias boxes (rects and texts) to top after edges
+      const aliasRects = gEl.querySelectorAll('.edge-alias-bg')
+      const aliasLabels = gEl.querySelectorAll('.game-alias-label')
+      aliasRects.forEach((el) => {
+        gEl.appendChild(el)
+      })
+      aliasLabels.forEach((el) => {
+        gEl.appendChild(el)
+      })
     }
   })
 }
@@ -1709,6 +1958,26 @@ watch(currentTransform, (newVal) => {
       />
     </template>
   </USheet>
+  <USheet
+    v-model:dialogs="locationSheet"
+    dialog-class="bracket-sheet"
+    :heading="venueSheetHeading"
+    show-action-buttons
+  >
+    <template #content>
+      <div class="text-body-xl text-dark">
+          Dallas, TX
+      </div>
+    </template>
+    <template #action_primary_one>
+      <UBtnStd
+        class="full-width"
+        color="primary"
+        label="Close"
+        @onClick="locationSheet = []"
+      />
+    </template>
+  </USheet>
 </template>
 
 <style scoped lang="sass">
@@ -1825,6 +2094,15 @@ svg
 :deep(.match-date)
   fill: #566176
 
+:deep(.match-venue)
+  fill: #566176
+
+:deep(.game-number)
+  fill: #566176
+
+:deep(.game-alias-label)
+  fill: #566176
+
 :deep(.edge-path)
   fill: none !important
   stroke: $neutral-4
@@ -1836,6 +2114,7 @@ svg
     opacity: 1
 
 :deep(.dot)
+ 
   opacity: 0.6
 
 :deep(.remove-team .button-label)
@@ -1886,4 +2165,17 @@ svg
   pointer-events: auto
   box-shadow: 0 2px 8px rgba(0,0,0,0.15)
   overflow: hidden
+
+:deep(.edge-alias-bg)
+  shape-rendering: inherit
+  stroke: $neutral-4 !important
+  stroke-width: 2 !important
+  fill: #fff !important
+
+:deep(.venue-ellipsis)
+  overflow: hidden
+  text-overflow: ellipsis
+  display: -webkit-box
+  -webkit-line-clamp: 2
+  -webkit-box-orient: vertical
 </style>

package/src/utils/bracket.json

@@ -47,6 +47,8 @@
                 }
               }
             ],
+            "date": "Sun. Feb 23, 2024 09:00 AM",
+            "venue": "Truckee High School 11725 Donner Pass Rd, Truckee, CA 96161",
             "position": {
               "columnNo": "1",
               "rowNo": "4"
@@ -123,6 +125,8 @@
                 }
               }
             ],
+            "date": "Sun. Feb 23, 2024 09:00 AM",
+            "venue": "Truckee High School 11725 Donner Pass Rd, Truckee, CA 96161",
             "position": {
               "columnNo": "1",
               "rowNo": "8"
@@ -664,6 +668,8 @@
                 }
               }
             ],
+            "date": "Sun. Feb 23, 2024 09:00 AM",
+            "venue": "Truckee High School 11725 Donner Pass Rd, Truckee, CA 96161",
             "position": {
               "columnNo": "2",
               "rowNo": "11"
@@ -901,6 +907,8 @@
                 }
               }
             ],
+            "date": "Sun. Feb 23, 2024 09:00 AM",
+            "venue": "Truckee High School 11725 Donner Pass Rd, Truckee, CA 96161",
             "position": {
               "columnNo": "3",
               "rowNo": "9"