@usssa/component-library 1.0.0-alpha.253 → 1.0.0-alpha.254

package/package.json

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

package/src/components/core/UBracket.vue

@@ -116,67 +116,62 @@ const isTeamSelected = computed(() => selectedTeamName.value.length > 0)
 
 // Flatten for rendering logic
 const games = computed(() =>
-  props.bracketData.round.flatMap((r, i) =>
+  normalizedBracketData.value.round.flatMap((r, i) =>
     r.game.map((m) => ({ ...m, round: r.roundNo }))
   )
 )
 
+// Use normalized bracket data for all rendering and layout logic
+const normalizedBracketData = computed(() =>
+  normalizeBracketData(props.bracketData)
+)
+
 const roundLabelStyles = computed(() => {
   const t = currentTransform.value || d3.zoomIdentity
-
-  // 1. Group rounds by column number to handle multiple rounds in the same visual column
-  const roundsByColumn = props.bracketData.round.reduce((acc, round) => {
-    const col = round.columnNo
-    if (!acc[col]) {
-      acc[col] = []
-    }
-    acc[col].push(round)
-    return acc
-  }, {})
-
-  // 2. Get sorted column numbers
-  const sortedColumns = Object.keys(roundsByColumn).sort((a, b) => a - b)
-
+  // Group rounds by normalized column number
+  const roundsByColumn = normalizedBracketData.value.round.reduce(
+    (acc, round) => {
+      const col = Number(round.columnNo)
+      if (!acc[col]) {
+        acc[col] = []
+      }
+      acc[col].push(round)
+      return acc
+    },
+    {}
+  )
+  // Get sorted normalized column numbers
+  const sortedColumns = Object.keys(roundsByColumn)
+    .map(Number)
+    .sort((a, b) => a - b)
   const styles = []
-
-  // 3. Generate styles for each round
-  props.bracketData.round.forEach((round) => {
-    const col = round.columnNo
-    const columnIndex = sortedColumns.indexOf(col.toString())
+  // Generate styles for each round using normalized column
+  normalizedBracketData.value.round.forEach((round, idx) => {
+    const col = Number(round.columnNo)
+    const columnIndex = sortedColumns.indexOf(col)
     const isLastColumn = columnIndex === sortedColumns.length - 1
-
     // The base X position is the same for all rounds in the same column
     const baseX = (col - 1) * props.hGap
-
-    // The width of the label container should be the horizontal gap
     const baseWidth = props.hGap
-
     // Apply zoom and pan transformations
     const left = t.applyX(baseX)
     const width = baseWidth * t.k
-
     const style = {
       left: left + 'px',
       width: width + 'px',
     }
-
-    // Add a border to all but the last column
     if (!isLastColumn) {
       style.borderRight = '1px solid #B9E0FF'
     }
-
-    // Find the original index to push the style in the correct order for the template v-for
-    const originalIndex = props.bracketData.round.findIndex((r) => r === round)
-    styles[originalIndex] = style
+    styles[idx] = style
   })
-
   return styles
 })
 
-// Compute teams for toolbar selection from bracket data (selectionType: 'Seed')
+// Compute teams for toolbar selection from normalized bracket data (selectionType: 'Seed')
 const toolbarTeams = computed(() => {
   const seedTeams = []
-  props.bracketData.round.forEach((round) => {
+  normalizedBracketData.value.round.forEach((round) => {
     if (Array.isArray(round.game)) {
       round.game.forEach((game) => {
         if (Array.isArray(game.team)) {
@@ -207,7 +202,7 @@ const applyBracketSheetSelection = () => {
 
 const applyRoundSheetSelection = () => {
   const selectedRound = props.bracketData.round.find(
-    (r) => `${r.roundNo}-${r.columnNo}` === tempSelectedRoundId.value
+    (r) => `${r.roundNo}-${r.roundName}` === tempSelectedRoundId.value
   )
   if (selectedRound) scrollToRound(selectedRound)
   roundSheet.value = []
@@ -458,6 +453,136 @@ const getTeamPath = (teamId) => {
   }
 }
 
+const normalizeBracketData = (bracketData) => {
+  const minCol = bracketData.minColumn
+    ? Number(bracketData.minColumn)
+    : Math.min(...bracketData.round.map((r) => Number(r.columnNo)))
+  const minRow = bracketData.minRow
+    ? Number(bracketData.minRow)
+    : Math.min(
+        ...bracketData.round
+          .flatMap((r) =>
+            (r.game || []).flatMap((g) =>
+              (g.team || []).map((t) => Number(t.position?.rowNo) || 0)
+            )
+          )
+          .filter((n) => n > 0)
+      )
+
+  // Normalize all positions so columns/rows start from 1
+  const normRounds = []
+  for (const round of bracketData.round) {
+    const normGames = []
+    if (Array.isArray(round.game)) {
+      for (const game of round.game) {
+        const normTeams = []
+        if (Array.isArray(game.team)) {
+          for (const team of game.team) {
+            if (team.position) {
+              normTeams.push({
+                ...team,
+                position: {
+                  columnNo: Number(team.position.columnNo) - minCol + 1,
+                  rowNo: Number(team.position.rowNo) - minRow + 1,
+                },
+              })
+            } else {
+              normTeams.push(team)
+            }
+          }
+        }
+        let normWinnerDest = game.winnerDestination
+        if (
+          normWinnerDest &&
+          normWinnerDest.team &&
+          normWinnerDest.team.position
+        ) {
+          normWinnerDest = {
+            ...normWinnerDest,
+            team: {
+              ...normWinnerDest.team,
+              position: {
+                columnNo:
+                  Number(normWinnerDest.team.position.columnNo) - minCol + 1,
+                rowNo: Number(normWinnerDest.team.position.rowNo) - minRow + 1,
+              },
+            },
+          }
+        }
+        let normLoserDest = game.loserDestination
+        if (
+          normLoserDest &&
+          normLoserDest.team &&
+          normLoserDest.team.position
+        ) {
+          normLoserDest = {
+            ...normLoserDest,
+            team: {
+              ...normLoserDest.team,
+              position: {
+                columnNo:
+                  Number(normLoserDest.team.position.columnNo) - minCol + 1,
+                rowNo: Number(normLoserDest.team.position.rowNo) - minRow + 1,
+              },
+            },
+          }
+        }
+        normGames.push({
+          ...game,
+          team: normTeams,
+          winnerDestination: normWinnerDest,
+          loserDestination: normLoserDest,
+        })
+      }
+    }
+    // Normalize winnerPlace/loserPlace
+    const normWinnerPlace = []
+    if (Array.isArray(round.winnerPlace)) {
+      for (const place of round.winnerPlace) {
+        if (place.position) {
+          normWinnerPlace.push({
+            ...place,
+            position: {
+              columnNo: Number(place.position.columnNo) - minCol + 1,
+              rowNo: Number(place.position.rowNo) - minRow + 1,
+            },
+          })
+        } else {
+          normWinnerPlace.push(place)
+        }
+      }
+    }
+    const normLoserPlace = []
+    if (Array.isArray(round.loserPlace)) {
+      for (const place of round.loserPlace) {
+        if (place.position) {
+          normLoserPlace.push({
+            ...place,
+            position: {
+              columnNo: Number(place.position.columnNo) - minCol + 1,
+              rowNo: Number(place.position.rowNo) - minRow + 1,
+            },
+          })
+        } else {
+          normLoserPlace.push(place)
+        }
+      }
+    }
+    normRounds.push({
+      ...round,
+      columnNo: Number(round.columnNo) - minCol + 1,
+      roundName: round.roundName,
+      game: normGames,
+      winnerPlace: normWinnerPlace,
+      loserPlace: normLoserPlace,
+    })
+  }
+  return {
+    ...bracketData,
+    round: normRounds,
+  }
+}
+
 const openExpandView = () => {
   emit('open-expand')
 }
@@ -672,11 +797,8 @@ const renderBracket = () => {
   nodeGroups
     .append('text')
     .attr('class', 'node-label')
-    .attr('x', (d) => d.x + (seedTeamIds.includes(d.id) ? 50 : 40)) // Move label right only for seed teams
+    .attr('x', (d) => d.x + (seedTeamIds.includes(d.id) ? 50 : 10)) // Move label right only for seed teams
     .attr('y', (d) => d.y + nodeHeight / 2 + 5)
-    .attr('text-anchor', (d) =>
-      seedTeamIds.includes(d.id) ? 'start' : 'middle'
-    )
     .text((d) => d.label)
 
   // Add '-' text to the right side for seed teams
@@ -912,7 +1034,8 @@ function resetZoom() {
 
     // Center on selected team if available, else round 1
     let tx, ty
-    let targetX = null, targetY = null
+    let targetX = null,
+      targetY = null
     if (selectedTeamId.value) {
       const pos = getNodePosition(selectedTeamId.value)
       targetX = pos.x + nodeWidth / 2
@@ -943,22 +1066,18 @@ function resetZoom() {
 }
 
 const scrollToBracketSide = (side) => {
-  if (!props.bracketData || !props.bracketData.round) return
-
-  const firstRound = props.bracketData.round[0]
+  if (!normalizedBracketData.value || !normalizedBracketData.value.round) return
+  const firstRound = normalizedBracketData.value.round[0]
   if (!firstRound || !firstRound.game || firstRound.game.length === 0) return
-
   const firstMatch = firstRound.game[0]
   let targetColumn = null
-
   if (side === 'winner' && firstMatch.winnerDestination) {
     targetColumn = firstMatch.winnerDestination.team.position.columnNo
   } else if (side === 'loser' && firstMatch.loserDestination) {
     targetColumn = firstMatch.loserDestination.team.position.columnNo
   }
-
   if (targetColumn) {
-    const targetRound = props.bracketData.round.find(
+    const targetRound = normalizedBracketData.value.round.find(
       (r) => r.columnNo === targetColumn
     )
     if (targetRound) {
@@ -969,41 +1088,26 @@ const scrollToBracketSide = (side) => {
 
 const scrollToRound = (round) => {
   activeRound.value = { roundNo: round.roundNo, columnNo: round.columnNo }
-  openRoundMenu.value = false // Close the menu on selection
+  openRoundMenu.value = false
   const svg = d3.select(svgRef.value)
   const zoomBehavior = zoomRef.value
   if (!zoomBehavior || !svgRef.value) return
 
-  // Calculate the x-coordinate of the target round's center.
-  const roundX = (round.columnNo - 1) * props.hGap + props.hGap / 2
+  const normalizedRound = normalizedBracketData.value.round
 
-  // Get the current viewport width.
-  const viewportWidth = svgRef.value.clientWidth
+  const mainRound = normalizedRound.find(
+    (r) => r.roundName == round.roundName && r.roundNo == round.roundNo
+  )
 
-  // Get the LIVE transform directly from the SVG node for accuracy.
-  // This is the key fix: currentTransform.value can be stale during transitions.
+  const roundX = (mainRound.columnNo - 1) * props.hGap + props.hGap / 2
+  const viewportWidth = svgRef.value.clientWidth
   const liveTransform = d3.zoomTransform(svg.node())
   const { k: currentK, y: currentY } = liveTransform
-
-  // Determine content dimensions.
-  const uniqueColumns = [
-    ...new Set(props.bracketData.round.map((r) => r.columnNo)),
-  ]
-  const numColumns = uniqueColumns.length
-  const contentWidth = 50 + (numColumns - 1) * props.hGap + nodeWidth + 50
-
-  // Calculate the new x-translate to center the round's center in the viewport.
   const targetX = viewportWidth / 2 - roundX * currentK
-
   const clampedX = targetX
-
-  // Create the new transform, keeping the current scale and y-pan.
-
   const newTransform = d3.zoomIdentity
     .translate(clampedX, currentY)
     .scale(currentK)
-
-  // Apply the new transform with a smooth transition.
   svg.transition().duration(750).call(zoomBehavior.transform, newTransform)
 }
 
@@ -1029,7 +1133,7 @@ const toggleBracketSideInSheet = (side) => {
 }
 
 const toggleRoundInSheet = (round) => {
-  tempSelectedRoundId.value = `${round.roundNo}-${round.columnNo}`
+  tempSelectedRoundId.value = `${round.roundNo}-${round.roundName}`
 }
 
 const toggleTeamInSheet = (teamId) => {
@@ -1154,7 +1258,7 @@ onMounted(() => {
 
   // Determine content dimensions
   const uniqueColumns = [
-    ...new Set(props.bracketData.round.map((r) => r.columnNo)),
+    ...new Set(normalizedBracketData.value.round.map((r) => r.columnNo)),
   ]
   const numColumns = uniqueColumns.length
   const contentWidth = 50 + (numColumns + 2) * props.hGap + nodeWidth + 50
@@ -1203,29 +1307,21 @@ onMounted(() => {
           .call(zoomBehavior.transform, newTransform)
         return false // Prevent default D3 wheel zoom
       }
-      // Allow click-and-drag panning
       return !event.ctrlKey || event.type === 'wheel'
     })
-    // We clamp manually in the zoom event instead of using translateExtent
     .on('zoom', (event) => {
       let { transform } = event
       const { k } = transform
-      tooltipState.value.visible = false // Hide tooltip on zoom/pan
-
-      // Calculate boundaries for clamping.
+      tooltipState.value.visible = false
       const minTx = viewportWidth - contentWidth * k
       const maxTx = 0
       const minTy = viewportHeight - contentHeight * k
       const maxTy = 0
-
       const tx =
         minTx > 0 ? minTx / 2 : Math.max(minTx, Math.min(maxTx, transform.x))
       const ty =
         minTy > 0 ? minTy / 2 : Math.max(minTy, Math.min(maxTy, transform.y))
-
-      // Create a new clamped transform
       const clampedTransform = d3.zoomIdentity.translate(tx, ty).scale(k)
-
       g.attr('transform', clampedTransform)
       currentTransform.value = clampedTransform
     })
@@ -1233,19 +1329,40 @@ onMounted(() => {
   svg.call(zoomBehavior)
   zoomRef.value = zoomBehavior
 
-  // Focus on round 1 when bracket loads
-  const firstRound = props.bracketData.round?.[0]
+  // Focus on first normalized round when bracket loads
+  const firstRound = normalizedBracketData.value.round?.[0]
   if (firstRound) scrollToRound(firstRound)
 
   renderBracket()
 
-  // Add window resize listener
   window.addEventListener('resize', reinitZoomAndLayout)
 })
 
 onUnmounted(() => {
   window.removeEventListener('resize', reinitZoomAndLayout)
-  document.removeEventListener('click', () => {})
+})
+
+watch(
+  () => props.bracketData,
+  () => {
+    // Reset selections on bracket data change
+    selectedTeamId.value = ''
+    tempSelectedTeamId.value = ''
+    tempSelectedRoundId.value = ''
+    tempSelectedBracketSide.value = ''
+    bracketSheet.value = []
+    roundSheet.value = []
+    computeBracketLayout()
+    renderBracket()
+  },
+  { deep: true }
+)
+
+watch(currentTransform, (newVal) => {
+  // Only update on explicit user zoom/pan, not on initial mount
+  if (gRef.value) {
+    d3.select(gRef.value).attr('transform', newVal)
+  }
 })
 </script>
 
@@ -1399,7 +1516,7 @@ onUnmounted(() => {
           @click="openRoundSheet"
         />
         <UBtnIcon
-          v-if="!$screen.isMobile"
+          v-if="!$screen.isMobile && toolbarTeams.length"
           iconClass="fa-kit-duotone fa-jersey"
           :anchor="anchor"
           ariaLabel="Select Team"
@@ -1428,7 +1545,7 @@ onUnmounted(() => {
           </template>
         </UBtnIcon>
         <UBtnIcon
-          v-if="$screen.isMobile"
+          v-if="$screen.isMobile && toolbarTeams.length"
           iconClass="fa-kit-duotone fa-jersey"
           :anchor="anchor"
           ariaLabel="Select Team"
@@ -1516,14 +1633,14 @@ onUnmounted(() => {
             in-sheet
             :label="descriptiveRoundName(round)"
             :selected="
-              tempSelectedRoundId === `${round.roundNo}-${round.columnNo}`
+              tempSelectedRoundId === `${round.roundNo}-${round.roundName}`
             "
             @onClick="toggleRoundInSheet(round)"
           >
             <template #trailing_slot>
               <q-icon
                 v-if="
-                  tempSelectedRoundId === `${round.roundNo}-${round.columnNo}`
+                  tempSelectedRoundId === `${round.roundNo}-${round.roundName}`
                 "
                 class="fa-kit-duotone fa-circle-check"
                 color="primary"
@@ -1652,7 +1769,7 @@ svg
   .main-content-dialog
     padding-top: $ba !important
   .q-item
-    margin-bottom: $xs
+    margin-bottom: $xs !important
 
 .bracket-toolbar
   bottom: $ba /* Position from the bottom */