Match Components

The match components handle all aspects of CS2 match lifecycle - from creation and team formation to veto processes, live match display, and statistics.

Core Match Components

MatchForm

Primary component for creating and editing matches. Handles both PUG (Pick-Up Game) and team-based matches with comprehensive match options. Location: components/match/MatchForm.vue Key Features:

PUG vs Team match toggle
Team selection with search
Match options configuration (map pool, veto, server settings)
Integration with MatchOptions component
Automatic validation using vee-validate and Zod

Usage Example:

<template>
  <MatchForm :match="existingMatch" />
</template>

<script setup>
import MatchForm from '~/components/match/MatchForm.vue'

const existingMatch = ref(null) // Pass existing match for edit, null for create
</script>

Props:

match (Object, optional): Existing match object for editing

Form Fields:

{
  pug: boolean,              // Toggle for PUG mode
  team_1: string,            // Team 1 UUID
  team_2: string,            // Team 2 UUID
  // ... inherits all fields from MatchOptions
}

MatchInfo

Displays comprehensive match information including teams, scores, status, and action buttons. Location: components/match/MatchInfo.vue Key Features:

Animated check-in/schedule sections with gradient borders
Team names and current scores
Match status with real-time updates
Coach assignment (if enabled)
Quick server connect
Auto-cancel warnings and scheduled time display

Usage Example:

<template>
  <MatchInfo :match="match" />
</template>

<script setup>
import MatchInfo from '~/components/match/MatchInfo.vue'
import { useMatchQuery } from '~/composables/useMatchQuery'

const match = useMatchQuery(matchId)
</script>

Props:

match (Object, required): Match object with lineups, options, and status

Computed Properties:

isPreLiveStatus: Checks if match is in pre-live state
showCheckInSection: Determines if check-in UI should display
showQuickConnectSection: Shows server connect when match is live

LineupOverview

Displays team lineup with player statistics in a comprehensive table format. Location: components/match/LineupOverview.vue Key Features:

Responsive statistics table (K/D/A, HS%, damage, multi-kills)
Team name editing (for captains/organizers)
Ready status indicators during check-in
Empty slot management with “Add Player” functionality
Join lineup button for open/invite matches
Progressive disclosure of stats based on screen size

Usage Example:

<template>
  <LineupOverview
    :match="match"
    :lineup="match.lineup_1"
    :show-stats="true"
    @joined="refetchMatch"
  />
</template>

<script setup>
import LineupOverview from '~/components/match/LineupOverview.vue'
</script>

Props:

match (Object, required): Match object
lineup (Object, required): Lineup object with players and stats
showStats (Boolean, default: true): Toggle statistics display

Events:

joined: Emitted when a player joins or lineup is updated

Table Columns:

Player name (always visible)
Kills, Deaths (mobile+)
Assists (desktop+)
K/D ratio (desktop+)
Headshot % (large screens+)
Team damage, Multi-kills, Total damage (extra large screens+)

MatchMapVeto

Interactive map veto interface with pick/ban functionality and side selection. Location: components/match/MatchMapVeto.vue Key Features:

Visual map selection grid
Side selection (CT/T) with animated icons
Real-time turn indicator with pulsing animations
Organizer override mode
Pick history display
Sound effects for veto events

Usage Example:

<template>
  <MatchMapVeto :match="match" />
</template>

<script setup>
import MatchMapVeto from '~/components/match/MatchMapVeto.vue'
</script>

Props:

match (Object, required): Match object with veto state

Veto Pick Types:

enum e_veto_pick_types_enum {
  Pick,    // Select map to play
  Ban,     // Remove map from pool
  Side     // Choose starting side
}

GraphQL Subscription: Subscribes to match_map_veto_picks for real-time updates

PlayerStatusDisplay

Displays player status with animated indicators for online/ready/in-game states. Location: components/match/PlayerStatusDisplay.vue Key Features:

Animated status dot (red/yellow/green)
Contextual status based on match phase
Check-in ready status
In-game detection
Tooltip with detailed status info
Captain badge display

Usage Example:

<template>
  <PlayerStatusDisplay
    :member="lineupPlayer"
    :match="match"
    :show-details="true"
  />
</template>

<script setup>
import PlayerStatusDisplay from '~/components/match/PlayerStatusDisplay.vue'
</script>

Props:

member (Object, required): Lineup player object
match (Object, optional): Match object for status context
showDetails (Boolean, default: true): Show flag, name, role, etc.
linkable (Boolean, default: true): Make player name clickable
flip (Boolean, default: false): Flip status indicator position
showName (Boolean, default: false): Show name in tooltip

Status Logic:

WaitingForCheckIn: Red (offline not ready), Yellow (online not ready), Green (ready)
Other phases: Red (offline), Yellow (online not in game), Green (in game)

Match Action Components

MatchActions

Dropdown menu with match management actions (forfeit, report, delete, etc.). Location: components/match/MatchActions.vue Features:

Forfeit match
Report match (admin)
Delete match (organizer)
Cancel match
Edit match settings

CheckIntoMatch

Check-in button and countdown timer for match start. Location: components/match/CheckIntoMatch.vue Features:

Captain/player check-in modes
Countdown timer to auto-cancel
Animated ready state

ScheduleMatch

Schedule a match for a future date/time. Location: components/match/ScheduleMatch.vue Features:

Date/time picker
Timezone handling
Schedule validation

QuickMatchConnect

One-click server connection with server details. Location: components/match/QuickMatchConnect.vue Features:

Copy server IP
Copy connect command
Direct connect button
Server status display

Match Display Components

MatchStatus

Badge component displaying current match status with color coding. Location: components/match/MatchStatus.vue Statuses:

enum e_match_status_enum {
  Scheduled,
  PickingPlayers,
  WaitingForCheckIn,
  WaitingForServer,
  Veto,
  Live,
  Finished,
  Canceled,
  Forfeit,
  Surrendered,
  Tie
}

MatchLineupScoreDisplay

Displays lineup score with win/loss/tie indication. Location: components/match/MatchLineupScoreDisplay.vue

MatchMaps

Displays all maps in the match with scores per map. Location: components/match/MatchMaps.vue Features:

Map thumbnails
Per-map scores
Current map indicator
Veto pick history

Statistics Components

LineupOverviewRow

Single player row in the lineup statistics table. Location: components/match/LineupOverviewRow.vue Displays:

Player avatar and name
K/D/A stats
K/D ratio with color coding
Headshot percentage
Team damage
Multi-kill rounds (2K, 3K, 4K, 5K)
Knife kills
Zeus kills
Total damage

LineupUtility

Utility usage statistics (smokes, flashes, HE, molotov). Location: components/match/LineupUtility.vue

LineupOpeningDuels

Opening duel statistics with win/loss ratios. Location: components/match/LineupOpeningDuels.vue

LineupClutches

Clutch statistics (1vX situations). Location: components/match/LineupClutches.vue

Lineup Management Components

AssignPlayerToLineup

Admin component to assign a player to a lineup. Location: components/match/AssignPlayerToLineup.vue Usage Example:

<AssignPlayerToLineup
  :lineup="lineup"
  :exclude="excludePlayers"
  :match-id="matchId"
/>

Props:

lineup (Object, required): Target lineup
exclude (Array, optional): Players to exclude from selection
matchId (String, required): Match UUID

JoinLineupForm

Player-facing button to join an open or invite-only match. Location: components/match/JoinLineupForm.vue

AssignCoachToLineup

Assign a coach to a lineup (if coaches are enabled). Location: components/match/AssignCoachToLineup.vue

Map Selection Components

MapSelector

Grid-based map selection interface with visual map cards. Location: components/match/MapSelector.vue Usage Example:

<MapSelector
  v-model="selectedMapId"
  :map-pool="availableMaps"
  :picks="vetoPicks"
  :confirm-label="'Select Map'"
  @update:modelValue="onMapSelected"
/>

Props:

modelValue (String): Selected map ID
mapPool (Array): Available maps
picks (Array): Previous veto picks (shown as overlay)
confirmLabel (String): Confirm button text

MatchMapLineup

Displays lineup for a specific map with side indication. Location: components/match/MatchMapLineup.vue

MatchRegionVeto

Region veto interface (similar to map veto but for server regions). Location: components/match/MatchRegionVeto.vue

MatchSelectServer

Manual server selection interface for match organizers. Location: components/match/MatchSelectServer.vue

Match Browsing Components

OpenMatches

List of open matches that players can join. Location: components/match/OpenMatches.vue

MyMatches

List of matches the current user is participating in. Location: components/match/MyMatches.vue

MyRecentMatches

Recent match history for the current user. Location: components/match/MyRecentMatches.vue

OtherMatches

Browse all public matches. Location: components/match/OtherMatches.vue

PlayerInvites

Match invitations for the current player. Location: components/match/PlayerInvites.vue

Common Patterns

GraphQL Integration

Most match components use Apollo GraphQL for real-time data:

<script lang="ts">
import { generateQuery, generateMutation } from '~/graphql/graphqlGen'
import { typedGql } from '~/generated/zeus/typedDocumentNode'

export default {
  apollo: {
    match: {
      query: generateQuery({
        matches_by_pk: [
          { id: this.$route.params.id },
          {
            id: true,
            status: true,
            lineup_1: { /* ... */ },
            lineup_2: { /* ... */ }
          }
        ]
      })
    }
  }
}
</script>

Form Validation

Components use vee-validate with Zod schemas:

import { useForm } from 'vee-validate'
import { toTypedSchema } from '@vee-validate/zod'
import * as z from 'zod'

const form = useForm({
  validationSchema: toTypedSchema(
    z.object({
      map_id: z.string(),
      side: z.string().optional()
    })
  )
})

Permission Checks

Components check user permissions using match properties:

// From GraphQL query
match.can_schedule        // Can schedule match
match.can_check_in        // Can check in
match.is_captain          // User is a captain
match.is_organizer        // User is organizer
match.is_in_lineup        // User is in a lineup
lineup.can_update_lineup  // Can modify lineup
lineup.can_pick_map_veto  // Can make veto pick

Tournament Components

Tournament brackets and stage management

UI Components

Base UI components and design system

Next Steps

API Reference

GraphQL schema and API endpoints

State Management

Learn about Pinia stores

Architecture

Components

Setup & Deployment

Contributing

​Core Match Components

​MatchForm

​MatchInfo

​LineupOverview

​MatchMapVeto

​PlayerStatusDisplay

​Match Action Components

​MatchActions

​CheckIntoMatch

​ScheduleMatch

​QuickMatchConnect

​Match Display Components

​MatchStatus

​MatchLineupScoreDisplay

​MatchMaps

​Statistics Components

​LineupOverviewRow

​LineupUtility

​LineupOpeningDuels

​LineupClutches

​Lineup Management Components

​AssignPlayerToLineup

​JoinLineupForm

​AssignCoachToLineup

​Map Selection Components

​MapSelector

​MatchMapLineup

​MatchRegionVeto

​MatchSelectServer

​Match Browsing Components

​OpenMatches

​MyMatches

​MyRecentMatches

​OtherMatches

​PlayerInvites

​Common Patterns

​GraphQL Integration

​Form Validation

​Permission Checks

​Related Components

Tournament Components

UI Components

​Next Steps

API Reference

State Management

Build docs developers (and LLMs) love

Core Match Components

MatchForm

MatchInfo

LineupOverview

MatchMapVeto

PlayerStatusDisplay

Match Action Components

MatchActions

CheckIntoMatch

ScheduleMatch

QuickMatchConnect

Match Display Components

MatchStatus

MatchLineupScoreDisplay

MatchMaps

Statistics Components

LineupOverviewRow

LineupUtility

LineupOpeningDuels

LineupClutches

Lineup Management Components

AssignPlayerToLineup

JoinLineupForm

AssignCoachToLineup

Map Selection Components

MapSelector

MatchMapLineup

MatchRegionVeto

MatchSelectServer

Match Browsing Components

OpenMatches

MyMatches

MyRecentMatches

OtherMatches

PlayerInvites

Common Patterns

GraphQL Integration

Form Validation

Permission Checks

Related Components

Next Steps