flambeaux/flbxcup
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

homepage and logo

Browse source
This commit is contained in:
unurled 2025-06-24 20:32:26 +02:00
parent c9d982669a
commit ef6dadb148
12 changed files with 359 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

33
app/Http/Controllers/CompetitionController.php
View file

@ -3,13 +3,13 @@
namespace App\Http\Controllers;
use App\Models\Competition;
use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Http\JsonResponse;
class CompetitionController extends Controller
{
public static function getPublicCompetitions(int $skip = 0, int $take = 10): JsonResponse
public static function getPublics(int $skip = 0, int $take = 10): JsonResponse
{
if ($skip < 0) {
$skip = 0;
@ -37,6 +37,35 @@ class CompetitionController extends Controller
]);
}
public static function getUser(User $user, int $skip = 0, int $take = 10): JsonResponse
{
if ($skip < 0) {
$skip = 0;
}
if ($take < 1 || $take > 100) {
$take = 10;
}
$query = Competition::where('owner', $user->id);
$competitions = $query->orderBy('start_date', 'desc')
->skip($skip)
->take($take)
->get();
$total = $query->count();
return response()->json([
'data' => $competitions,
'meta' => [
'skip' => $skip,
'take' => $take,
'total' => $total,
'hasMore' => ($skip + $take) < $total
]
]);
}
/**
* Get all public competitions/tournaments with pagination.
*

1
app/Models/Competition.php
View file

@ -25,6 +25,7 @@ class Competition extends Model
'location',
'max_teams',
'current_scheduling_mode_id',
'owner',
];
/**

1
database/migrations/2025_06_24_000001_create_competition_system_tables.php
View file

@ -22,6 +22,7 @@ return new class extends Migration
$table->string('location')->nullable();
$table->integer('max_teams')->default(0);
$table->integer('current_scheduling_mode_id')->nullable();
$table->uuid('owner')->nullable();
$table->timestamps();
});

BIN
public/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 1.4 MiB

30
public/logo.svg
View file

File diff suppressed because one or more lines are too long
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 9.5 KiB

After

Width:  |  Height:  |  Size: 13 KiB

Before After
Before After

9
resources/js/components/AppHeader.svelte
View file

@ -42,11 +42,6 @@
];
const rightNavItems: NavItem[] = [
{
title: 'Repository',
href: 'https://github.com/oseughu/svelte-starter-kit',
icon: Folder,
},
{
title: 'Documentation',
href: 'https://laravel.com/docs/starter-kits',
@ -101,9 +96,7 @@
</Sheet>
</div>
<Link href={route('dashboard')} class="flex items-center gap-x-2">
<AppLogo />
</Link>
<AppLogo />
<!-- Desktop Menu -->
<div class="hidden h-full lg:flex lg:flex-1">

41
resources/js/components/AppLogo.svelte
View file

@ -1,12 +1,45 @@
<script lang="ts">
import AppLogoIcon from '@/components/AppLogoIcon.svelte';
import { type Appearance, useAppearance } from '@/hooks/useAppearance.svelte';
import { MonitorIcon, Moon, Sun } from 'lucide-svelte';
import Button from './ui/button/button.svelte';
import { Link } from '@inertiajs/svelte';
const appearanceManager = useAppearance();
// Create a local reactive variable that tracks the hook's value
let currentAppearance = $state(appearanceManager.appearance);
function handleUpdateAppearance(value: Appearance) {
appearanceManager.updateAppearance(value);
// Immediately update local state to ensure UI reflects the change
currentAppearance = value;
}
</script>
<div class="inline-flex items-center gap-3">
<div class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-md bg-sidebar-primary">
<AppLogoIcon class="size-5 fill-current text-white! dark:text-black!" />
<div class="inline-flex w-full justify-around">
<div class="inline-flex items-center gap-3">
<div class="flex aspect-square size-8 shrink-0 items-center justify-center rounded-md">
<AppLogoIcon class="size-5 object-cover" />
</div>
<div class="flex items-center">
<Link href={route('home')} class="flex items-center gap-x-2">
<span class="truncate text-sm font-semibold">FlbxCup</span>
</Link>
</div>
</div>
<div class="flex items-center">
<span class="truncate text-sm font-semibold">Laravel Starter Kit</span>
{#if currentAppearance === 'light'}
<Button onclick={() => handleUpdateAppearance('dark')}>
<Sun class="h-4 w-4" />
</Button>
{:else if currentAppearance === 'dark'}
<Button onclick={() => handleUpdateAppearance('system')}>
<Moon class="h-4 w-4" />
</Button>
{:else}
<Button onclick={() => handleUpdateAppearance('light')}>
<MonitorIcon class="h-4 w-4" />
</Button>
{/if}
</div>
</div>

69
resources/js/components/AppLogoIcon.svelte
View file

File diff suppressed because one or more lines are too long

20
resources/js/components/AppSidebar.svelte
View file

@ -4,9 +4,10 @@
import NavUser from '@/components/NavUser.svelte';
import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
import { type NavItem } from '@/types';
import { Link } from '@inertiajs/svelte';
import { Link, page } from '@inertiajs/svelte';
import { BookOpen, Folder, LayoutGrid } from 'lucide-svelte';
import AppLogo from './AppLogo.svelte';
import Button from './ui/button/button.svelte';
const mainNavItems: NavItem[] = [
{
@ -17,11 +18,6 @@
];
const footerNavItems: NavItem[] = [
{
title: 'Repository',
href: 'https://github.com/oseughu/svelte-starter-kit',
icon: Folder,
},
{
title: 'Admin Dashboard',
href: '/admin',
@ -36,9 +32,7 @@
<SidebarMenu>
<SidebarMenuItem>
<SidebarMenuButton size="lg">
<Link href={route('dashboard')}>
<AppLogo />
</Link>
<AppLogo />
</SidebarMenuButton>
</SidebarMenuItem>
</SidebarMenu>
@ -50,6 +44,12 @@
<SidebarFooter>
<NavFooter items={footerNavItems} class="mt-auto" />
<NavUser />
{#if $page.props.auth.user}
<NavUser />
{:else}
<Button>
<a href={route('auth.redirect')} class="flex items-center gap-2">Login</a>
</Button>
{/if}
</SidebarFooter>
</Sidebar>

36
resources/js/components/UserInfo.svelte
View file

@ -4,7 +4,7 @@
import type { User } from '@/types';
interface Props {
user: User;
user?: User;
showEmail?: boolean;
}
@ -12,23 +12,25 @@
const { getInitials } = useInitials();
let showAvatar = $derived(user.avatar && user.avatar !== '');
let showAvatar = $derived(user?.avatar && user?.avatar !== '');
</script>
<Avatar class="h-8 w-8 overflow-hidden rounded-full">
{#if showAvatar}
<AvatarImage src={user.avatar} alt={user.name} />
{:else}
<AvatarFallback class="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
{getInitials(user.name)}
</AvatarFallback>
{/if}
</Avatar>
{#if user}
<Avatar class="h-8 w-8 overflow-hidden rounded-full">
{#if showAvatar}
<AvatarImage src={user.avatar} alt={user.name} />
{:else}
<AvatarFallback class="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
{getInitials(user.name)}
</AvatarFallback>
{/if}
</Avatar>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-medium">{user.name}</span>
<div class="grid flex-1 text-left text-sm leading-tight">
<span class="truncate font-medium">{user.name}</span>
{#if showEmail}
<span class="truncate text-xs text-muted-foreground">{user.email}</span>
{/if}
</div>
{#if showEmail}
<span class="truncate text-xs text-muted-foreground">{user.email}</span>
{/if}
</div>
{/if}

349
resources/js/pages/Home.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts">
import { Link, page } from '@inertiajs/svelte';
import { Deferred, Link, page } from '@inertiajs/svelte';
import AppLayout from '@/layouts/AppLayout.svelte';
import { type BreadcrumbItem } from '@/types';
import { Button } from '@/components/ui/button';
@ -7,54 +7,7 @@
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Trophy, Users, Calendar, User } from 'lucide-svelte';
// Mock data for tournaments - replace with API calls when backend is ready
const publicTournaments = [
{
id: '1',
name: 'Summer Championship 2024',
description: 'Annual summer championship with multiple categories',
date: '2024-07-15',
participantsCount: 48,
isPublic: true,
},
{
id: '2',
name: 'Regional Qualifiers',
description: 'Regional qualifiers for the national tournament',
date: '2024-06-05',
participantsCount: 32,
isPublic: true,
},
{
id: '3',
name: 'Friendly Tournament',
description: 'Casual tournament for all skill levels',
date: '2024-05-20',
participantsCount: 16,
isPublic: true,
},
];
// User tournaments - only displayed when logged in
const userTournaments = [
{
id: '4',
name: 'My Club Championship',
description: 'Internal club championship tournament',
date: '2024-06-18',
participantsCount: 12,
isPublic: false,
},
{
id: '5',
name: 'Training Tournament',
description: 'Practice tournament for team members',
date: '2024-05-10',
participantsCount: 8,
isPublic: false,
},
];
let { publicTournaments, userTournaments } = $props();
const breadcrumbs: BreadcrumbItem[] = [
{
title: 'Home',
@ -80,54 +33,164 @@
<title>Home - FlbxCup</title>
</svelte:head>
<AppLayout {breadcrumbs}>
<div class="space-y-8 px-4 py-6 md:px-8">
<div class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h1 class="text-3xl font-bold tracking-tight">Welcome to FlbxCup</h1>
{#if isAuthenticated}
<Button>
<Link href="/tournaments/create" class="flex items-center gap-2">
<Trophy class="h-4 w-4" />
Create Tournament
</Link>
</Button>
{/if}
</div>
<p class="text-lg text-muted-foreground">Discover and manage tournaments with ease</p>
</div>
{#if !isAuthenticated}
<Card>
<CardHeader>
<CardTitle>Join FlbxCup</CardTitle>
<CardDescription>Create an account to create and manage your own tournaments</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-col gap-4 sm:flex-row">
<Deferred data="publicTournaments">
{#snippet fallback()}
<AppLayout {breadcrumbs}>
<div>Loading...</div>
</AppLayout>
{/snippet}
<AppLayout {breadcrumbs}>
<div class="space-y-8 px-4 py-6 md:px-8">
<div class="flex flex-col gap-4">
<div class="flex items-center justify-between">
<h1 class="text-3xl font-bold tracking-tight">Welcome to FlbxCup</h1>
{#if isAuthenticated}
<Button>
<Link href={route('login')} class="flex items-center gap-2">Login</Link>
<Link href="/tournaments/create" class="flex items-center gap-2">
<Trophy class="h-4 w-4" />
Create Tournament
</Link>
</Button>
<Button variant="outline">
<Link href={route('register')} class="flex items-center gap-2">Register</Link>
</Button>
<Button variant="outline">
<Link href={route('auth.redirect')} class="flex items-center gap-2">Login with SSO</Link>
</Button>
</div>
</CardContent>
</Card>
{/if}
{/if}
</div>
<p class="text-lg text-muted-foreground">Discover and manage tournaments with ease</p>
</div>
{#if isAuthenticated}
<Tabs value="public" class="w-full">
<TabsList>
<TabsTrigger value="public">Public Tournaments</TabsTrigger>
<TabsTrigger value="my">My Tournaments</TabsTrigger>
</TabsList>
<TabsContent value="public" class="mt-6">
{#if isAuthenticated}
<Tabs value="public" class="w-full">
<TabsList>
<TabsTrigger value="public">Public Tournaments</TabsTrigger>
<TabsTrigger value="my">My Tournaments</TabsTrigger>
</TabsList>
<TabsContent value="public" class="mt-6">
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{#if !publicTournaments.original.data || publicTournaments.original.data.length === 0}
<div class="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
<Trophy class="h-10 w-10 text-muted-foreground" />
<h3 class="mt-4 text-lg font-semibold">No Tournaments Yet</h3>
<p class="mt-2 text-sm text-muted-foreground">You haven't created any tournaments yet.</p>
<Button class="mt-4">
<Link href="/tournaments/create" class="flex items-center gap-2">Create Your First Tournament</Link>
</Button>
</div>
{/if}
{#each publicTournaments.original.data as tournament (tournament.id)}
<Card>
<CardHeader>
<CardTitle class="flex items-center gap-2">
<Trophy class="h-5 w-5 text-primary" />
{tournament.name}
</CardTitle>
<CardDescription>{tournament.description}</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-col gap-2 text-sm">
<div class="flex items-center gap-2">
<Calendar class="h-4 w-4 text-muted-foreground" />
<span>{formatDate(tournament.date)}</span>
</div>
<div class="flex items-center gap-2">
<Users class="h-4 w-4 text-muted-foreground" />
<span>{tournament.participantsCount} participants</span>
</div>
</div>
</CardContent>
<CardFooter>
<Button variant="outline" class="w-full">
<Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full">
View Details
</Link>
</Button>
</CardFooter>
</Card>
{/each}
</div>
</TabsContent>
<TabsContent value="my" class="mt-6">
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{#if !userTournaments.original.data || userTournaments.original.data.length === 0}
<div class="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
<Trophy class="h-10 w-10 text-muted-foreground" />
<h3 class="mt-4 text-lg font-semibold">No Tournaments Yet</h3>
<p class="mt-2 text-sm text-muted-foreground">You haven't created any tournaments yet.</p>
<Button class="mt-4">
<Link href="/tournaments/create" class="flex items-center gap-2">Create Your First Tournament</Link>
</Button>
</div>
{:else}
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{#each userTournaments.original.data as tournament (tournament.id)}
<Card>
<CardHeader>
<CardTitle class="flex items-center gap-2">
<Trophy class="h-5 w-5 text-primary" />
{tournament.name}
</CardTitle>
<CardDescription>{tournament.description}</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-col gap-2 text-sm">
<div class="flex items-center gap-2">
<Calendar class="h-4 w-4 text-muted-foreground" />
<span>{formatDate(tournament.date)}</span>
</div>
<div class="flex items-center gap-2">
<Users class="h-4 w-4 text-muted-foreground" />
<span>{tournament.participantsCount} participants</span>
</div>
<div class="flex items-center gap-2">
<User class="h-4 w-4 text-muted-foreground" />
<span>Created by you</span>
</div>
</div>
</CardContent>
<CardFooter class="flex gap-2">
<Button variant="outline" class="flex-1">
<Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full"
>View</Link
>
</Button>
<Button variant="secondary" class="flex-1">
<Link href={`/tournaments/${tournament.id}/edit`} class="flex items-center justify-center w-full">
Edit
</Link>
</Button>
</CardFooter>
</Card>
{/each}
</div>
{/if}
</div>
</TabsContent>
</Tabs>
{:else}
<Card>
<CardHeader>
<CardTitle>Join FlbxCup</CardTitle>
<CardDescription>Create an account to create and manage your own tournaments</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-col gap-4 sm:flex-row">
<Button>
<a href={route('auth.redirect')} class="flex items-center gap-2">Login with SSO</a>
</Button>
</div>
</CardContent>
</Card>
<div class="space-y-6">
<h2 class="text-2xl font-semibold tracking-tight">Public Tournaments</h2>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{#each publicTournaments as tournament (tournament.id)}
{#if !publicTournaments.original.data || publicTournaments.original.data.length === 0}
<div class="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
<Trophy class="h-10 w-10 text-muted-foreground" />
<h3 class="mt-4 text-lg font-semibold">No Tournaments Yet</h3>
<p class="mt-2 text-sm text-muted-foreground">You haven't created any tournaments yet.</p>
<Button class="mt-4">
<Link href="/tournaments/create" class="flex items-center gap-2">Create Your First Tournament</Link>
</Button>
</div>
{/if}
{#each publicTournaments.original.data as tournament (tournament.id)}
<Card>
<CardHeader>
<CardTitle class="flex items-center gap-2">
@ -150,102 +213,16 @@
</CardContent>
<CardFooter>
<Button variant="outline" class="w-full">
<Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full">
View Details
</Link>
<Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full"
>View Details</Link
>
</Button>
</CardFooter>
</Card>
{/each}
</div>
</TabsContent>
<TabsContent value="my" class="mt-6">
{#if userTournaments.length === 0}
<div class="flex flex-col items-center justify-center rounded-lg border border-dashed p-8 text-center">
<Trophy class="h-10 w-10 text-muted-foreground" />
<h3 class="mt-4 text-lg font-semibold">No Tournaments Yet</h3>
<p class="mt-2 text-sm text-muted-foreground">You haven't created any tournaments yet.</p>
<Button class="mt-4">
<Link href="/tournaments/create" class="flex items-center gap-2">Create Your First Tournament</Link>
</Button>
</div>
{:else}
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{#each userTournaments as tournament (tournament.id)}
<Card>
<CardHeader>
<CardTitle class="flex items-center gap-2">
<Trophy class="h-5 w-5 text-primary" />
{tournament.name}
</CardTitle>
<CardDescription>{tournament.description}</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-col gap-2 text-sm">
<div class="flex items-center gap-2">
<Calendar class="h-4 w-4 text-muted-foreground" />
<span>{formatDate(tournament.date)}</span>
</div>
<div class="flex items-center gap-2">
<Users class="h-4 w-4 text-muted-foreground" />
<span>{tournament.participantsCount} participants</span>
</div>
<div class="flex items-center gap-2">
<User class="h-4 w-4 text-muted-foreground" />
<span>Created by you</span>
</div>
</div>
</CardContent>
<CardFooter class="flex gap-2">
<Button variant="outline" class="flex-1">
<Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full">View</Link>
</Button>
<Button variant="secondary" class="flex-1">
<Link href={`/tournaments/${tournament.id}/edit`} class="flex items-center justify-center w-full">
Edit
</Link>
</Button>
</CardFooter>
</Card>
{/each}
</div>
{/if}
</TabsContent>
</Tabs>
{:else}
<div class="space-y-6">
<h2 class="text-2xl font-semibold tracking-tight">Public Tournaments</h2>
<div class="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
{#each publicTournaments as tournament (tournament.id)}
<Card>
<CardHeader>
<CardTitle class="flex items-center gap-2">
<Trophy class="h-5 w-5 text-primary" />
{tournament.name}
</CardTitle>
<CardDescription>{tournament.description}</CardDescription>
</CardHeader>
<CardContent>
<div class="flex flex-col gap-2 text-sm">
<div class="flex items-center gap-2">
<Calendar class="h-4 w-4 text-muted-foreground" />
<span>{formatDate(tournament.date)}</span>
</div>
<div class="flex items-center gap-2">
<Users class="h-4 w-4 text-muted-foreground" />
<span>{tournament.participantsCount} participants</span>
</div>
</div>
</CardContent>
<CardFooter>
<Button variant="outline" class="w-full">
<Link href={`/tournaments/${tournament.id}`} class="flex items-center justify-center w-full">View Details</Link>
</Button>
</CardFooter>
</Card>
{/each}
</div>
</div>
{/if}
</div>
</AppLayout>
{/if}
</div>
</AppLayout>
</Deferred>

10
routes/web.php
View file

@ -1,12 +1,20 @@
<?php
use App\Http\Controllers\CompetitionController;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Route;
use Inertia\Inertia;
Route::get('/', function () {
// get user if it exists
$user = Auth::user();
$userTournaments = [];
if ($user) {
$userTournaments = Inertia::defer(fn() => CompetitionController::getUser($user, 1, 10));
}
return Inertia::render('Home', [
'publicTournaments' => Inertia::defer(fn() => CompetitionController::getPublicCompetitions(1, 10))
'publicTournaments' => Inertia::defer(fn() => CompetitionController::getPublics(1, 10)),
'userTournaments' => $userTournaments,
]);
})->name('home');