kyle/flxn-app
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

dark mode default, basic tournament stats/podium

Browse Source
This commit is contained in:
yohlo
2025-09-22 19:33:58 -05:00
parent b93ce38d48
commit 7ff26229d9
8 changed files with 228 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/contexts/auth-context.tsx
View File

@@ -19,7 +19,7 @@ interface AuthData {
export const defaultAuthData: AuthData = {
user: undefined,
metadata: { accentColor: "blue", colorScheme: "auto" },
metadata: { accentColor: "blue", colorScheme: "dark" },
roles: [],
phone: ""
};

9
src/features/core/components/header.tsx
View File

@@ -1,16 +1,13 @@
import { Title, AppShell, Flex } from "@mantine/core";
import { Title, AppShell, Flex, Box, Paper } from "@mantine/core";
import { HeaderConfig } from "../types/header-config";
import useRouterConfig from "../hooks/use-router-config";
import BackButton from "./back-button";
interface HeaderProps extends HeaderConfig {}
const Header = ({ collapsed, title }: HeaderProps) => {
const { header } = useRouterConfig();
const Header = ({ collapsed, title, withBackButton }: HeaderProps) => {
return (
<AppShell.Header id='app-header' display={collapsed ? 'none' : 'block'}>
{ header.withBackButton && <BackButton /> }
{ withBackButton && <BackButton /> }
<Flex justify='center' align='center' h='100%' px='md'>
<Title order={2}>{title}</Title>
</Flex>

6
src/features/reactions/components/emoji-bar.tsx
View File

@@ -78,8 +78,7 @@ const EmojiBar = ({
{visibleReactions.map((reaction) => (
<Button
key={reaction.emoji}
variant={hasReacted(reaction) ? "filled" : "light"}
color="gray"
variant={"light"}
bd={hasReacted(reaction) ? "1px solid var(--mantine-primary-color-filled)" : undefined}
size="compact-xs"
radius="xl"
@@ -109,8 +108,7 @@ const EmojiBar = ({
{hasGrouped && (
<Button
variant={userHasReactedToGrouped ? "filled" : "light"}
color="gray"
variant={"light"}
bd={userHasReactedToGrouped ? "1px solid var(--mantine-primary-color-filled)" : undefined}
size="compact-xs"
radius="xl"

110
src/features/tournaments/components/tournament-card.tsx
View File

@@ -1,48 +1,27 @@
import {
Badge,
Card,
Text,
Stack,
Group,
Box,
ThemeIcon,
UnstyledButton,
Badge,
} from "@mantine/core";
import { Tournament } from "@/features/tournaments/types";
import { useMemo } from "react";
import { TournamentInfo } from "@/features/tournaments/types";
import {
TrophyIcon,
CalendarIcon,
MapPinIcon,
UsersIcon,
CrownIcon,
MedalIcon,
} from "@phosphor-icons/react";
import { useNavigate } from "@tanstack/react-router";
import Avatar from "@/components/avatar";
interface TournamentCardProps {
tournament: Tournament;
tournament: TournamentInfo;
}
export const TournamentCard = ({ tournament }: TournamentCardProps) => {
const navigate = useNavigate();
const displayDate = useMemo(() => {
if (!tournament.start_time) return null;
const date = new Date(tournament.start_time);
if (isNaN(date.getTime())) return null;
return date.toLocaleDateString(undefined, {
month: "short",
day: "numeric",
year: "numeric",
});
}, [tournament.start_time]);
const enrollmentDeadline = tournament.enroll_time
? new Date(tournament.enroll_time)
: new Date(tournament.start_time);
const isEnrollmentOpen = enrollmentDeadline > new Date();
const enrolledTeamsCount = tournament.teams?.length || 0;
return (
<UnstyledButton
w="100%"
@@ -93,31 +72,62 @@ export const TournamentCard = ({ tournament }: TournamentCardProps) => {
<Text fw={600} size="lg" lineClamp={2}>
{tournament.name}
</Text>
{displayDate && (
<Group gap="xs">
<ThemeIcon
size="sm"
variant="light"
radius="sm"
color="gray"
>
<CalendarIcon size={12} />
</ThemeIcon>
<Text size="sm" c="dimmed">
{displayDate}
</Text>
</Group>
{(tournament.first_place || tournament.second_place || tournament.third_place) && (
<Stack gap={6} >
{tournament.first_place && (
<Badge
size="md"
radius="md"
variant="filled"
color="yellow"
leftSection={
<CrownIcon size={16} />
}
style={{
textTransform: 'none',
fontWeight: 600,
color: 'white',
}}
>
{tournament.first_place.name}
</Badge>
)}
{tournament.second_place && (
<Badge
size="md"
radius="md"
color="gray"
variant="filled"
leftSection={
<MedalIcon size={16} />
}
style={{
textTransform: 'none',
fontWeight: 500,
}}
>
{tournament.second_place.name}
</Badge>
)}
{tournament.third_place && (
<Badge
size="md"
radius="md"
color="orange"
variant="filled"
leftSection={
<MedalIcon size={16} />
}
style={{
textTransform: 'none',
fontWeight: 500,
}}
>
{tournament.third_place.name}
</Badge>
)}
</Stack>
)}
<Group gap="xs">
<ThemeIcon size="sm" variant="light" radius="sm" color="gray">
<UsersIcon size={12} />
</ThemeIcon>
<Text size="sm" c="dimmed">
{enrolledTeamsCount} team
{enrolledTeamsCount !== 1 ? "s" : ""}
</Text>
</Group>
</Stack>
</Group>
</Group>

23
src/features/tournaments/types.ts
View File

@@ -2,6 +2,22 @@ import { TeamInfo } from "@/features/teams/types";
import { Match } from "@/features/matches/types";
import { z } from "zod";
export interface TournamentTeamStats {
id: string;
team_id: string;
tournament_id: string;
team_name: string;
matches: number;
wins: number;
losses: number;
total_cups_made: number;
total_cups_against: number;
margin_of_victory: number;
margin_of_loss: number;
win_percentage: number;
avg_cups_per_match: number;
}
export interface TournamentInfo {
id: string;
name: string;
@@ -9,6 +25,9 @@ export interface TournamentInfo {
start_time?: string;
end_time?: string;
logo?: string;
first_place?: TeamInfo;
second_place?: TeamInfo;
third_place?: TeamInfo;
}
export interface Tournament {
@@ -25,6 +44,10 @@ export interface Tournament {
updated: string;
teams?: TeamInfo[];
matches?: Match[];
first_place?: TeamInfo;
second_place?: TeamInfo;
third_place?: TeamInfo;
team_stats?: TournamentTeamStats[];
}
export const tournamentInputSchema = z.object({

2
src/lib/mantine/mantine-provider.tsx
View File

@@ -55,7 +55,7 @@ const MantineProvider = ({ children }: { children: React.ReactNode }) => {
setIsHydrated(true);
}, []);
const colorScheme = isHydrated ? metadata.colorScheme || "auto" : "auto";
const colorScheme = isHydrated ? metadata.colorScheme || "dark" : "dark";
const primaryColor = isHydrated ? metadata.accentColor || "blue" : "blue";
return (

40
src/lib/pocketbase/services/tournaments.ts
View File

@@ -9,16 +9,24 @@ import type { Team } from "@/features/teams/types";
import PocketBase from "pocketbase";
import { transformFreeAgent, transformTournament, transformTournamentInfo } from "@/lib/pocketbase/util/transform-types";
import { transformTeam } from "@/lib/pocketbase/util/transform-types";
import { getFreeAgents } from "@/features/tournaments/server";
import { PlayerInfo } from "@/features/players/types";
export function createTournamentsService(pb: PocketBase) {
return {
async getTournament(id: string, isAdmin: boolean = false): Promise<Tournament> {
const result = await pb.collection("tournaments").getOne(id, {
expand: "teams, teams.players, matches, matches.tournament, matches.home, matches.away, matches.home.players, matches.away.players",
});
return transformTournament(result, isAdmin);
const [tournamentResult, teamStatsResult] = await Promise.all([
pb.collection("tournaments").getOne(id, {
expand: "teams, teams.players, matches, matches.tournament, matches.home, matches.away, matches.home.players, matches.away.players",
}),
pb.collection("team_stats_per_tournament").getFullList({
filter: `tournament_id = "${id}"`,
sort: "-wins,-total_cups_made"
})
]);
tournamentResult.team_stats = teamStatsResult;
return transformTournament(tournamentResult, isAdmin);
},
async getMostRecentTournament(): Promise<Tournament> {
const result = await pb
@@ -29,17 +37,35 @@ export function createTournamentsService(pb: PocketBase) {
sort: "-created",
}
);
const teamStatsResult = await pb.collection("team_stats_per_tournament").getFullList({
filter: `tournament_id = "${result.id}"`,
sort: "-wins,-total_cups_made"
});
result.team_stats = teamStatsResult;
return transformTournament(result);
},
async listTournaments(): Promise<TournamentInfo[]> {
const result = await pb
.collection("tournaments")
.getFullList({
fields: "id,name,location,start_time,end_time,logo",
expand: "teams,teams.players,matches",
sort: "-created",
});
return result.map(transformTournamentInfo);
const tournamentsWithStats = await Promise.all(result.map(async (tournament) => {
const teamStats = await pb.collection("team_stats_per_tournament").getFullList({
filter: `tournament_id = "${tournament.id}"`,
sort: "-wins,-total_cups_made"
});
tournament.team_stats = teamStats;
return tournament;
}));
return tournamentsWithStats.map(transformTournamentInfo);
},
async createTournament(data: TournamentInput): Promise<Tournament> {
const result = await pb

107
src/lib/pocketbase/util/transform-types.ts
View File

@@ -57,12 +57,58 @@ export const transformMatch = (record: any, isAdmin: boolean = false): Match =>
}
export const transformTournamentInfo = (record: any): TournamentInfo => {
// Check if tournament is complete by looking at matches
const matches = record.expand?.matches || [];
// Filter out bye matches (tbd status with bye=true) when checking completion
const nonByeMatches = matches.filter((match: any) => !(match.status === 'tbd' && match.bye === true));
const isComplete = nonByeMatches.length > 0 && nonByeMatches.every((match: any) => match.status === 'ended');
let first_place: TeamInfo | undefined = undefined;
let second_place: TeamInfo | undefined = undefined;
let third_place: TeamInfo | undefined = undefined;
if (isComplete) {
const teams = record.expand?.teams || [];
const teamMap = new Map<string, TeamInfo>(teams.map((team: any) => [team.id, transformTeamInfo(team)]));
const winnersMatches = matches.filter((match: any) => !match.is_losers_bracket);
const finalsMatch = winnersMatches.reduce((highest: any, current: any) =>
(!highest || current.lid > highest.lid) ? current : highest, null);
const losersMatches = matches.filter((match: any) => match.is_losers_bracket);
const losersFinale = losersMatches.reduce((highest: any, current: any) =>
(!highest || current.lid > highest.lid) ? current : highest, null);
if (finalsMatch && finalsMatch.status === 'ended') {
const finalsWinner = (finalsMatch.home_cups > finalsMatch.away_cups) ? finalsMatch.home : finalsMatch.away;
const finalsLoser = (finalsMatch.home_cups > finalsMatch.away_cups) ? finalsMatch.away : finalsMatch.home;
const finalsWinnerId = typeof finalsWinner === 'string' ? finalsWinner : finalsWinner?.id;
const finalsLoserId = typeof finalsLoser === 'string' ? finalsLoser : finalsLoser?.id;
first_place = finalsWinnerId ? teamMap.get(finalsWinnerId) || undefined : undefined;
second_place = finalsLoserId ? teamMap.get(finalsLoserId) || undefined : undefined;
}
if (losersFinale && losersFinale.status === 'ended') {
const losersFinaleLoser = (losersFinale.home_cups > losersFinale.away_cups) ? losersFinale.away : losersFinale.home;
const losersFinaleloserId = typeof losersFinaleLoser === 'string' ? losersFinaleLoser : losersFinaleLoser?.id;
third_place = losersFinaleloserId ? teamMap.get(losersFinaleloserId) || undefined : undefined;
}
}
return {
id: record.id,
name: record.name,
location: record.location,
start_time: record.start_time,
end_time: record.end_time,
logo: record.logo,
first_place,
second_place,
third_place,
};
}
@@ -149,7 +195,60 @@ export function transformTournament(record: any, isAdmin: boolean = false): Tour
a.lid - b.lid ? -1 : 0
)
?.map((match: any) => transformMatch(match, isAdmin)) ?? [];
const team_stats = record.team_stats?.map((stat: any) => ({
id: stat.id,
team_id: stat.team_id,
tournament_id: stat.tournament_id,
team_name: stat.team_name,
matches: stat.matches,
wins: stat.wins,
losses: stat.losses,
total_cups_made: stat.total_cups_made,
total_cups_against: stat.total_cups_against,
margin_of_victory: stat.margin_of_victory,
margin_of_loss: stat.margin_of_loss,
win_percentage: (stat.wins / stat.matches) * 100,
avg_cups_per_match: stat.total_cups_made / stat.matches,
})) ?? [];
const nonByeMatches = matches.filter((match: any) => !(match.status === 'tbd' && match.bye === true));
const isComplete = nonByeMatches.length > 0 && nonByeMatches.every((match: any) => match.status === 'ended');
let first_place: TeamInfo | undefined = undefined;
let second_place: TeamInfo | undefined = undefined;
let third_place: TeamInfo | undefined = undefined;
if (isComplete) {
const teamMap = new Map<string, TeamInfo>(teams.map((team: any) => [team.id, team]));
const winnersMatches = matches.filter((match: any) => !match.is_losers_bracket);
const finalsMatch = winnersMatches.reduce((highest: any, current: any) =>
(!highest || current.lid > highest.lid) ? current : highest, null);
const losersMatches = matches.filter((match: any) => match.is_losers_bracket);
const losersFinale = losersMatches.reduce((highest: any, current: any) =>
(!highest || current.lid > highest.lid) ? current : highest, null);
if (finalsMatch && finalsMatch.status === 'ended') {
const finalsWinner = (finalsMatch.home_cups > finalsMatch.away_cups) ? finalsMatch.home : finalsMatch.away;
const finalsLoser = (finalsMatch.home_cups > finalsMatch.away_cups) ? finalsMatch.away : finalsMatch.home;
const finalsWinnerId = typeof finalsWinner === 'string' ? finalsWinner : finalsWinner?.id;
const finalsLoserId = typeof finalsLoser === 'string' ? finalsLoser : finalsLoser?.id;
first_place = finalsWinnerId ? teamMap.get(finalsWinnerId) || undefined : undefined;
second_place = finalsLoserId ? teamMap.get(finalsLoserId) || undefined : undefined;
}
if (losersFinale && losersFinale.status === 'ended') {
const losersFinaleLoser = (losersFinale.home_cups > losersFinale.away_cups) ? losersFinale.away : losersFinale.home;
const losersFinaleloserId = typeof losersFinaleLoser === 'string' ? losersFinaleLoser : losersFinaleLoser?.id;
third_place = losersFinaleloserId ? teamMap.get(losersFinaleloserId) || undefined : undefined;
}
}
return {
id: record.id,
name: record.name,
@@ -163,7 +262,11 @@ export function transformTournament(record: any, isAdmin: boolean = false): Tour
created: record.created,
updated: record.updated,
teams,
matches
matches,
first_place,
second_place,
third_place,
team_stats,
};
}