useMatchmakingStore

The useMatchmakingStore is a Pinia store that manages matchmaking queues, lobbies, friends, region selection, and latency testing for the 5Stack platform.

Overview

This store handles:

Matchmaking queue state and confirmations
Lobby creation and management
Friends list and online status
Region selection and latency testing
Match invitations
Regional queue statistics

Import

import { useMatchmakingStore } from '~/stores/MatchmakingStore';

Usage

const matchmakingStore = useMatchmakingStore();

// Check queue status
const queueDetails = matchmakingStore.joinedMatchmakingQueues.details;

// Get current lobby
const lobby = matchmakingStore.currentLobby;

// Invite friend to lobby
await matchmakingStore.inviteToLobby(friendSteamId);

State

Queue Management

joinedMatchmakingQueues

Ref<Object>

Current matchmaking queue state containing:

details: Queue information (total players, type, regions)
confirmation: Match confirmation state (when match is found)

regionStats

Ref<Object>

Statistics showing number of players in queue per region and match type.

friends

Ref<Array>

List of all friends with their status and current activities.

playersOnline

Ref<Array>

Full player data for currently online players.

onlinePlayerSteamIds

Ref<string[]>

Array of Steam IDs for players currently online.

matchInvites

Ref<Array>

Pending match invitations received by the user.

Lobbies

lobbies

Ref<Array>

All lobbies the user is part of or invited to.

viewingMatchId

Ref<string | undefined>

ID of the match currently being viewed.

Region & Latency

latencies

Ref<Map<string, number[]>>

Latency test results for each region.

storedRegions

Ref<string[]>

User’s manually selected preferred regions.

playerMaxAcceptableLatency

Ref<number>

Maximum latency (in ms) the user is willing to accept. Default: 75ms

isRefreshing

Ref<boolean>

Indicates whether latency tests are currently running.

Methods

Lobby Management

createLobby()

Creates a new matchmaking lobby.

async createLobby(): Promise<string>

Returns: string - The ID of the newly created lobby Example:

const lobbyId = await matchmakingStore.createLobby();
console.log('Created lobby:', lobbyId);

inviteToLobby()

Invites a player to your lobby. Creates a new lobby if you’re not in one.

async inviteToLobby(steam_id: string): Promise<void>

steam_id

string

required

Steam ID of the player to invite

Example:

await matchmakingStore.inviteToLobby('76561198012345678');

Latency & Region Management

refreshLatencies()

Runs latency tests for all available regions.

async refreshLatencies(): Promise<void>

Example:

await matchmakingStore.refreshLatencies();
console.log('Latency tests complete');

checkLatenies()

Checks if latencies have been tested, and runs tests if not.

checkLatenies(): void

Example:

matchmakingStore.checkLatenies();

getRegionlatencyResult()

Gets the latency test result for a specific region.

getRegionlatencyResult(region: string): { isLan: boolean; latency: string } | undefined

region

string

required

Region code to get latency for

Returns: Object containing isLan flag and latency string, or undefined if not tested Example:

const result = matchmakingStore.getRegionlatencyResult('us-east');
if (result) {
  console.log(`Latency: ${result.latency}ms, LAN: ${result.isLan}`);
}

togglePreferredRegion()

Toggles a region in/out of the user’s preferred regions list.

togglePreferredRegion(region: string): void

region

string

required

Region code to toggle

Example:

matchmakingStore.togglePreferredRegion('us-west');

updateMaxAcceptableLatency()

Updates the maximum acceptable latency threshold.

updateMaxAcceptableLatency(latency: number): void

latency

number

required

Maximum latency in milliseconds

Example:

matchmakingStore.updateMaxAcceptableLatency(100);

Computed Properties

onlineFriends

ComputedRef<Array>

Friends who are currently online (excludes pending friend requests).

offlineFriends

ComputedRef<Array>

Friends who are currently offline (excludes pending friend requests).

lobbyInvites

ComputedRef<Array>

Lobbies the user is invited to but not currently in.

currentLobby

ComputedRef<Object | undefined>

The lobby the user is currently in.

preferredRegions

ComputedRef<Array>

Filtered and sorted list of regions based on user preferences and latency:

Filters out regions exceeding max acceptable latency
Prioritizes manually selected regions
Sorts by LAN status and latency

Real-time Subscriptions

The store automatically subscribes to:

Friends list and their online status
Match invitations
Lobby memberships and updates

Example: Region Selection UI

const matchmakingStore = useMatchmakingStore();

const regionOptions = computed(() => {
  return matchmakingStore.preferredRegions.map(region => {
    const result = matchmakingStore.getRegionlatencyResult(region.value);
    return {
      label: region.label,
      value: region.value,
      latency: result?.latency || 'Testing...',
      isLan: result?.isLan || false,
    };
  });
});

function handleRegionSelect(regionCode: string) {
  matchmakingStore.togglePreferredRegion(regionCode);
}

Example: Queue Status Display

const matchmakingStore = useMatchmakingStore();

const queueStatus = computed(() => {
  const queue = matchmakingStore.joinedMatchmakingQueues;
  
  if (queue.confirmation) {
    return {
      status: 'confirmation',
      message: `Match found! ${queue.confirmation.confirmed}/${queue.confirmation.players} confirmed`,
      expiresAt: queue.confirmation.expiresAt,
    };
  }
  
  if (queue.details) {
    return {
      status: 'searching',
      message: `Searching... (${queue.details.totalInQueue} in queue)`,
      regions: queue.details.regions.join(', '),
    };
  }
  
  return { status: 'idle' };
});

Local Storage Keys

The store persists data to localStorage:

5stack_region_latency_{region} - Latency test results per region
5stack_max_acceptable_latency - User’s max acceptable latency setting
5stack_preferred_regions - User’s manually selected preferred regions

GraphQL API

Stores

Composables

useMatchmakingStore

Overview

Import

Usage

State

Queue Management

Lobbies

Region & Latency

Methods

Lobby Management

createLobby()

inviteToLobby()

Latency & Region Management

refreshLatencies()

checkLatenies()

getRegionlatencyResult()

togglePreferredRegion()

updateMaxAcceptableLatency()

Computed Properties

Real-time Subscriptions

Example: Region Selection UI

Example: Queue Status Display

Local Storage Keys

Build docs developers (and LLMs) love

GraphQL API

Stores

Composables

​Overview

​Import

​Usage

​State

​Queue Management

​Social Features

​Lobbies

​Region & Latency

​Methods

​Lobby Management

​createLobby()

​inviteToLobby()

​Latency & Region Management

​refreshLatencies()

​checkLatenies()

​getRegionlatencyResult()

​togglePreferredRegion()

​updateMaxAcceptableLatency()

​Computed Properties

​Real-time Subscriptions

​Example: Region Selection UI

​Example: Queue Status Display

​Local Storage Keys

Build docs developers (and LLMs) love

Overview

Import

Usage

State

Queue Management

Social Features

Lobbies

Region & Latency

Methods

Lobby Management

createLobby()

inviteToLobby()

Latency & Region Management

refreshLatencies()

checkLatenies()

getRegionlatencyResult()

togglePreferredRegion()

updateMaxAcceptableLatency()

Computed Properties

Real-time Subscriptions

Example: Region Selection UI

Example: Queue Status Display

Local Storage Keys