Tournament Components

<template>
  <TournamentForm 
    :tournament="existingTournament" 
    @updated="handleUpdate" 
  />
</template>

<script setup>
import TournamentForm from '~/components/tournament/TournamentForm.vue'

const existingTournament = ref(null) // null for create mode

function handleUpdate() {
  // Refetch tournament data
}
</script>

{
  name: string,              // Tournament name (required)
  description: string,       // Tournament description
  start: Date,              // Start date/time (must be future)
  auto_start: boolean,      // Auto-start when scheduled
  discord_notifications_enabled: boolean,
  // ... inherits all MatchOptions fields
}

<template>
  <TournamentStage
    :stage="stage"
    :tournament="tournament"
    :is-final-stage="isFinalStage"
  />
</template>

<script setup>
import TournamentStage from '~/components/tournament/TournamentStage.vue'

const stage = ref({
  id: 'stage-uuid',
  type: 'SingleElimination',
  groups: 2,
  brackets: [...]
})
</script>

enum e_tournament_stage_types_enum {
  SingleElimination,
  DoubleElimination,
  Swiss,
  RoundRobin
}

<template>
  <TournamentBracketViewer
    :stage="stage"
    :tournament="tournament"
    :rounds="roundsMap"
    :is-final-stage="true"
    :is-loser-bracket="false"
    :total-groups="2"
    :stage-type="'SingleElimination'"
  />
</template>

<script setup>
import TournamentBracketViewer from '~/components/tournament/TournamentBracketViewer.vue'

// Group brackets by round
const roundsMap = computed(() => {
  const rounds = new Map()
  stage.value.brackets.forEach(bracket => {
    if (!rounds.has(bracket.round)) {
      rounds.set(bracket.round, [])
    }
    rounds.get(bracket.round).push(bracket)
  })
  return rounds
})
</script>

// Zoom levels
const MIN_ZOOM = 0.5
const MAX_ZOOM = 3.0
const ZOOM_STEP = 0.1
const DEFAULT_ZOOM = 0.75

// Momentum scrolling
const MOMENTUM_DECAY = 0.95
const MOMENTUM_MIN_VELOCITY = 0.5

// Height based on groups
maxHeight = totalGroups === 1 ? '80vh' : 
            totalGroups === 2 ? '40vh' : 
            totalGroups === 3 ? '28vh' : '22vh'

<template>
  <TournamentMatch
    :stage="stage"
    :tournament="tournament"
    :round="roundNumber"
    :brackets="roundBrackets"
    @schedule-bracket="openScheduleDialog"
  />
</template>

<script setup>
import TournamentMatch from '~/components/tournament/TournamentMatch.vue'

function openScheduleDialog(bracket) {
  // Open schedule dialog for bracket
}
</script>

<template>
  <TournamentStageBuilder
    :tournament="tournament"
    @stage-created="refetchTournament"
  />
</template>

{
  type: e_tournament_stage_types_enum,
  name: string,
  groups: number,
  teams_per_group: number,
  advancement: {
    winners: number,  // Teams advancing to next stage
    losers: number    // Teams going to loser bracket
  }
}

<template>
  <StageRoundBestOfConfig
    :stage="stage"
    :rounds="['Quarter Finals', 'Semi Finals', 'Grand Finals']"
  />
</template>

<template>
  <BracketScheduleDialog
    :open="dialogOpen"
    :bracket="selectedBracket"
    @update:open="dialogOpen = $event"
  />
</template>

<script setup>
import BracketScheduleDialog from '~/components/tournament/BracketScheduleDialog.vue'

const dialogOpen = ref(false)
const selectedBracket = ref(null)
</script>

import { getRoundLabel } from '~/utilities/tournamentRoundLabels'

// Example labels
getRoundLabel(1, 1, true, 8, false, 'SingleElimination', false)
// Returns: { key: 'tournament.round.quarter_finals', params: {} }

getRoundLabel(3, 2, true, 2, false, 'DoubleElimination', true)
// Returns: { key: 'tournament.round.grand_finals', params: {} }

getRoundLabel(2, 1, false, 16, true, 'DoubleElimination', false)
// Returns: { key: 'tournament.round.losers.round_x', params: { round: 2 } }

interface Tournament {
  id: string
  name: string
  description: string
  start: Date
  auto_start: boolean
  status: e_tournament_status_enum
  options: MatchOptions
  stages: TournamentStage[]
  teams: TournamentTeam[]
}

interface TournamentStage {
  id: string
  tournament_id: string
  type: e_tournament_stage_types_enum
  order: number
  groups: number
  brackets: Bracket[]
}

interface Bracket {
  id: string
  stage_id: string
  round: number
  group: number
  match_id?: string
  parent_bracket_id?: string
  loser_bracket_id?: string
  team_1_id?: string
  team_2_id?: string
  team_1_seed?: number
  team_2_seed?: number
}

<script lang="ts">
import { typedGql } from '~/generated/zeus/typedDocumentNode'
import { $ } from '~/generated/zeus'

export default {
  apollo: {
    $subscribe: {
      tournament: {
        query: typedGql('subscription')({
          tournaments_by_pk: [
            { id: $('id', 'uuid!') },
            {
              id: true,
              name: true,
              status: true,
              stages: [{ order_by: [{ order: 'asc' }] }, {
                id: true,
                type: true,
                brackets: [{ order_by: [{ round: 'asc' }] }, {
                  id: true,
                  match: { /* ... */ }
                }]
              }]
            }
          ]
        }),
        variables() {
          return { id: this.$route.params.id }
        }
      }
    }
  }
}
</script>

function drawLine(
  svg: SVGElement,
  sourceEl: HTMLElement,
  targetEl: HTMLElement,
  type: 'winner' | 'loser'
) {
  const sourceX = sourceEl.offsetLeft + sourceEl.offsetWidth
  const sourceY = sourceEl.offsetTop + sourceEl.offsetHeight / 2
  const targetX = targetEl.offsetLeft
  const targetY = targetEl.offsetTop + targetEl.offsetHeight / 2
  
  const midX = (sourceX + targetX) / 2
  
  // Create stepped path
  const path = `M ${sourceX} ${sourceY} H ${midX} V ${targetY} H ${targetX}`
  
  // Winner lines: white, Loser lines: red
  const color = type === 'winner' ? 'white' : 'rgba(255, 100, 100, 0.7)'
}

const zoomLevel = ref(0.75)

function zoomIn() {
  zoomLevel.value = Math.min(MAX_ZOOM, zoomLevel.value + ZOOM_STEP)
  nextTick(() => {
    redrawLines() // Recalculate SVG paths
  })
}