Skip to content

Add total matches card and remove sort/filter from site #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
robotzurg merged 8 commits into from
Mar 2, 2026
Merged

Add total matches card and remove sort/filter from site #34

Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
5d8c481
Add live total card
robotzurg Mar 2, 2026
d7fc7fd
Remove the sorting and filtering by site
robotzurg Mar 2, 2026
20c5060
Fix formatting
robotzurg Mar 2, 2026
640b756
Formatting fix and remeda
robotzurg Mar 2, 2026
12da812
Yet another formatting fix
robotzurg Mar 2, 2026
a94d0ac
Merge branch 'main' into total-card
robotzurg Mar 2, 2026
d516757
Merge branch 'main' into total-card
robotzurg Mar 2, 2026
7c558d7
Update live-matches-tab.tsx
robotzurg Mar 2, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 11 additions & 36 deletions src/app/(home)/stats/_components/live-matches-tab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,40 +1,11 @@
'use client'

import { useState } from 'react'
import { sumBy } from 'remeda'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import type { ActiveMatchQueue } from '@/server/services/botlatro.service'
import {
CASUAL_QUEUE_ID,
LEGACY_QUEUE_ID,
RANKED_QUEUE_ID,
SANDBOX_QUEUE_ID,
SMALLWORLD_QUEUE_ID,
VANILLA_QUEUE_ID,
} from '@/shared/constants'
import { api } from '@/trpc/react'

const QUEUE_ORDER = [
Number(RANKED_QUEUE_ID),
Number(LEGACY_QUEUE_ID),
Number(SMALLWORLD_QUEUE_ID),
Number(SANDBOX_QUEUE_ID),
Number(CASUAL_QUEUE_ID),
]

const HIDDEN_QUEUES = new Set([Number(VANILLA_QUEUE_ID)])

function sortAndFilterQueues(queues: ActiveMatchQueue[]): ActiveMatchQueue[] {
return queues
.filter((q) => !HIDDEN_QUEUES.has(q.queue_id))
.sort((a, b) => {
const ai = QUEUE_ORDER.indexOf(a.queue_id)
const bi = QUEUE_ORDER.indexOf(b.queue_id)
const aOrder = ai === -1 ? QUEUE_ORDER.length : ai
const bOrder = bi === -1 ? QUEUE_ORDER.length : bi
return aOrder - bOrder
})
}

export function LiveMatchesTab() {
const [liveQueues, setLiveQueues] = useState<ActiveMatchQueue[] | null>(null)
const { data: initialQueues } = api.playerState.getActiveMatches.useQuery(
Expand All @@ -46,20 +17,24 @@ export function LiveMatchesTab() {
onData: (event) => setLiveQueues(event.data),
})

const queues = sortAndFilterQueues(liveQueues ?? initialQueues ?? [])
const queues = liveQueues ?? initialQueues ?? []
const total = sumBy(queues, (q) => q.active_matches)

return (
<div className='grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-6'>
<QueueCard label='Total' count={total} />
{queues.map((queue) => (
<QueueCard key={queue.queue_id} queue={queue} />
<QueueCard
key={queue.queue_id}
label={queue.queue_name}
count={queue.active_matches}
/>
))}
</div>
)
}

function QueueCard({ queue }: { queue: ActiveMatchQueue }) {
const count = queue.active_matches

function QueueCard({ label, count }: { label: string; count: number }) {
return (
<Card>
<CardHeader className='pb-2'>
Expand All @@ -68,7 +43,7 @@ function QueueCard({ queue }: { queue: ActiveMatchQueue }) {
<span className='absolute inline-flex h-full w-full animate-ping rounded-full bg-emerald-400 opacity-75' />
<span className='relative inline-flex h-2 w-2 rounded-full bg-emerald-500' />
</span>
{queue.queue_name}
{label}
</CardTitle>
</CardHeader>
<CardContent>
Expand Down