tebogomas14/shell-leaderboard
1
0
Fork 0
generated from theradcoza/Laravel-Docker-Dev-Template
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Rename car_number to number, time_ms to best_time_ms, update participant statuses, and redesign leaderboard with broadcast-style UI

Browse Source
This commit is contained in:
ut-masekela
2026-03-25 03:32:33 +02:00
parent a63ea60860
commit adc85b2b88
6 changed files with 232 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/app/Filament/Resources/ParticipantResource.php
View File

@@ -29,30 +29,34 @@ public static function form(Form $form): Form
Forms\Components\TextInput::make('name')
->required()
->maxLength(255)
->placeholder('Enter participant name'),
Forms\Components\TextInput::make('car_number')
->label('Car Number')
->placeholder('Driver name'),
Forms\Components\TextInput::make('number')
->label('Number')
->numeric()
->minValue(1)
->maxValue(999)
->placeholder('e.g., 44'),
])->columns(2),
Forms\Components\Select::make('status')
->options(Participant::statuses())
->default('ready')
->required(),
])->columns(3),
Forms\Components\Section::make('Timing')
Forms\Components\Section::make('Best Time')
->schema([
Forms\Components\Grid::make(4)
Forms\Components\Grid::make(3)
->schema([
Forms\Components\TextInput::make('time_minutes')
->label('Minutes')
->numeric()
->minValue(0)
->maxValue(59)
->default(0)
->placeholder('00')
->default(null)
->placeholder('MM')
->dehydrated(false)
->afterStateHydrated(function ($component, $state, $record) {
if ($record && $record->time_ms) {
$component->state(floor($record->time_ms / 60000));
if ($record && $record->best_time_ms) {
$component->state(floor($record->best_time_ms / 60000));
}
}),
Forms\Components\TextInput::make('time_seconds')
@@ -60,12 +64,12 @@ public static function form(Form $form): Form
->numeric()
->minValue(0)
->maxValue(59)
->default(0)
->placeholder('00')
->default(null)
->placeholder('SS')
->dehydrated(false)
->afterStateHydrated(function ($component, $state, $record) {
if ($record && $record->time_ms) {
$component->state(floor(($record->time_ms % 60000) / 1000));
if ($record && $record->best_time_ms) {
$component->state(floor(($record->best_time_ms % 60000) / 1000));
}
}),
Forms\Components\TextInput::make('time_milliseconds')
@@ -73,26 +77,18 @@ public static function form(Form $form): Form
->numeric()
->minValue(0)
->maxValue(999)
->default(0)
->placeholder('000')
->default(null)
->placeholder('ms')
->dehydrated(false)
->afterStateHydrated(function ($component, $state, $record) {
if ($record && $record->time_ms) {
$component->state($record->time_ms % 1000);
if ($record && $record->best_time_ms) {
$component->state($record->best_time_ms % 1000);
}
}),
Forms\Components\Select::make('status')
->options([
'pending' => 'Pending',
'completed' => 'Completed',
'dnf' => 'DNF',
])
->default('pending')
->required(),
]),
Forms\Components\Hidden::make('time_ms'),
Forms\Components\Hidden::make('best_time_ms'),
])
->description('Enter time as MM:SS.ms (e.g., 01:23.456)'),
->description('Enter best lap time as MM:SS.ms (leave blank if no time set)'),
]);
}
@@ -107,7 +103,7 @@ public static function table(Table $table): Table
})
->alignCenter()
->weight('bold'),
Tables\Columns\TextColumn::make('car_number')
Tables\Columns\TextColumn::make('number')
->label('#')
->alignCenter()
->placeholder('-')
@@ -117,29 +113,28 @@ public static function table(Table $table): Table
->sortable()
->weight('bold'),
Tables\Columns\TextColumn::make('formatted_time')
->label('Time')
->placeholder('No time')
->label('Best Time')
->placeholder('—')
->fontFamily('mono')
->alignCenter(),
Tables\Columns\BadgeColumn::make('status')
->formatStateUsing(fn (string $state): string => Participant::statuses()[$state] ?? $state)
->colors([
'warning' => 'pending',
'success' => 'completed',
'gray' => 'ready',
'info' => 'running',
'success' => 'finished',
'warning' => 'pit',
'danger' => 'dnf',
]),
Tables\Columns\TextColumn::make('updated_at')
->label('Last Update')
->dateTime('M j, H:i')
->label('Updated')
->dateTime('H:i:s')
->sortable(),
])
->defaultSort('time_ms', 'asc')
->defaultSort('best_time_ms', 'asc')
->filters([
Tables\Filters\SelectFilter::make('status')
->options([
'pending' => 'Pending',
'completed' => 'Completed',
'dnf' => 'DNF',
]),
->options(Participant::statuses()),
])
->actions([
Tables\Actions\EditAction::make(),
@@ -168,24 +163,24 @@ public static function getPages(): array
public static function mutateFormDataBeforeCreate(array $data): array
{
return static::calculateTimeMs($data);
return static::calculateBestTimeMs($data);
}
public static function mutateFormDataBeforeSave(array $data): array
{
return static::calculateTimeMs($data);
return static::calculateBestTimeMs($data);
}
protected static function calculateTimeMs(array $data): array
protected static function calculateBestTimeMs(array $data): array
{
$minutes = (int) ($data['time_minutes'] ?? 0);
$seconds = (int) ($data['time_seconds'] ?? 0);
$milliseconds = (int) ($data['time_milliseconds'] ?? 0);
$minutes = $data['time_minutes'] ?? null;
$seconds = $data['time_seconds'] ?? null;
$milliseconds = $data['time_milliseconds'] ?? null;
if ($minutes > 0 || $seconds > 0 || $milliseconds > 0) {
$data['time_ms'] = ($minutes * 60000) + ($seconds * 1000) + $milliseconds;
if ($minutes !== null || $seconds !== null || $milliseconds !== null) {
$data['best_time_ms'] = ((int)$minutes * 60000) + ((int)$seconds * 1000) + (int)$milliseconds;
} else {
$data['time_ms'] = null;
$data['best_time_ms'] = null;
}
return $data;

12
src/app/Filament/Resources/ParticipantResource/Pages/CreateParticipant.php
View File

@@ -11,14 +11,14 @@ class CreateParticipant extends CreateRecord
protected function mutateFormDataBeforeCreate(array $data): array
{
$minutes = (int) ($data['time_minutes'] ?? 0);
$seconds = (int) ($data['time_seconds'] ?? 0);
$milliseconds = (int) ($data['time_milliseconds'] ?? 0);
$minutes = $data['time_minutes'] ?? null;
$seconds = $data['time_seconds'] ?? null;
$milliseconds = $data['time_milliseconds'] ?? null;
if ($minutes > 0 || $seconds > 0 || $milliseconds > 0) {
$data['time_ms'] = ($minutes * 60000) + ($seconds * 1000) + $milliseconds;
if ($minutes !== null || $seconds !== null || $milliseconds !== null) {
$data['best_time_ms'] = ((int)$minutes * 60000) + ((int)$seconds * 1000) + (int)$milliseconds;
} else {
$data['time_ms'] = null;
$data['best_time_ms'] = null;
}
unset($data['time_minutes'], $data['time_seconds'], $data['time_milliseconds']);

12
src/app/Filament/Resources/ParticipantResource/Pages/EditParticipant.php
View File

@@ -19,14 +19,14 @@ protected function getHeaderActions(): array
protected function mutateFormDataBeforeSave(array $data): array
{
$minutes = (int) ($data['time_minutes'] ?? 0);
$seconds = (int) ($data['time_seconds'] ?? 0);
$milliseconds = (int) ($data['time_milliseconds'] ?? 0);
$minutes = $data['time_minutes'] ?? null;
$seconds = $data['time_seconds'] ?? null;
$milliseconds = $data['time_milliseconds'] ?? null;
if ($minutes > 0 || $seconds > 0 || $milliseconds > 0) {
$data['time_ms'] = ($minutes * 60000) + ($seconds * 1000) + $milliseconds;
if ($minutes !== null || $seconds !== null || $milliseconds !== null) {
$data['best_time_ms'] = ((int)$minutes * 60000) + ((int)$seconds * 1000) + (int)$milliseconds;
} else {
$data['time_ms'] = null;
$data['best_time_ms'] = null;
}
unset($data['time_minutes'], $data['time_seconds'], $data['time_milliseconds']);

48
src/app/Models/Participant.php
View File

@@ -11,26 +11,40 @@ class Participant extends Model
protected $fillable = [
'name',
'car_number',
'time_ms',
'number',
'best_time_ms',
'status',
];
protected $casts = [
'car_number' => 'integer',
'time_ms' => 'integer',
'number' => 'integer',
'best_time_ms' => 'integer',
];
/**
* Format time_ms as mm:ss.ms (e.g., 01:23.456)
*/
const STATUS_READY = 'ready';
const STATUS_RUNNING = 'running';
const STATUS_FINISHED = 'finished';
const STATUS_PIT = 'pit';
const STATUS_DNF = 'dnf';
public static function statuses(): array
{
return [
self::STATUS_READY => 'READY',
self::STATUS_RUNNING => 'RUNNING',
self::STATUS_FINISHED => 'FINISHED',
self::STATUS_PIT => 'IN PIT',
self::STATUS_DNF => 'DNF',
];
}
public function getFormattedTimeAttribute(): ?string
{
if ($this->time_ms === null) {
if ($this->best_time_ms === null) {
return null;
}
$totalMs = $this->time_ms;
$totalMs = $this->best_time_ms;
$minutes = floor($totalMs / 60000);
$seconds = floor(($totalMs % 60000) / 1000);
$milliseconds = $totalMs % 1000;
@@ -38,20 +52,14 @@ public function getFormattedTimeAttribute(): ?string
return sprintf('%02d:%02d.%03d', $minutes, $seconds, $milliseconds);
}
/**
* Scope to get ranked participants (fastest first, null times last)
*/
public function scopeRanked($query)
public function getStatusLabelAttribute(): string
{
return $query->orderByRaw('CASE WHEN time_ms IS NULL THEN 1 ELSE 0 END')
->orderBy('time_ms', 'asc');
return self::statuses()[$this->status] ?? strtoupper($this->status);
}
/**
* Scope to get only completed participants
*/
public function scopeCompleted($query)
public function scopeRanked($query)
{
return $query->where('status', 'completed');
return $query->orderByRaw('CASE WHEN best_time_ms IS NULL THEN 1 ELSE 0 END')
->orderBy('best_time_ms', 'asc');
}
}

6
src/database/migrations/2026_03_25_000001_create_participants_table.php
View File

@@ -11,9 +11,9 @@ public function up(): void
Schema::create('participants', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->integer('car_number')->nullable();
$table->integer('time_ms')->nullable(); // Time in milliseconds for accurate sorting
$table->string('status')->default('pending'); // pending, completed, dnf
$table->integer('number')->nullable();
$table->integer('best_time_ms')->nullable(); // Best lap time in milliseconds
$table->string('status')->default('ready'); // ready, running, finished, pit, dnf
$table->timestamps();
});
}

271
src/resources/views/leaderboard.blade.php
View File

@@ -4,9 +4,9 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="10">
<title>Shell Leaderboard</title>
<title>Shell Race Standings</title>
<link rel="preconnect" href="https://fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=inter:400,500,600,700,800,900&display=swap" rel="stylesheet" />
<link href="https://fonts.bunny.net/css?family=russo-one:400&display=swap" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
@@ -16,176 +16,193 @@
shell: {
red: '#E60000',
yellow: '#FFD100',
dark: '#1A1A1A',
},
broadcast: {
bg: '#0E0E0E',
bar: '#F5F5F5',
}
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
}
display: ['Russo One', 'sans-serif'],
},
}
}
}
</script>
<style>
@keyframes pulse-glow {
0%, 100% { box-shadow: 0 0 20px rgba(230, 0, 0, 0.3); }
50% { box-shadow: 0 0 40px rgba(230, 0, 0, 0.6); }
body {
background: #0E0E0E;
font-family: 'Russo One', sans-serif;
}
.leader-glow {
animation: pulse-glow 2s ease-in-out infinite;
.bar-light {
background: #F5F5F5;
}
@keyframes slide-in {
from { opacity: 0; transform: translateX(-20px); }
to { opacity: 1; transform: translateX(0); }
.pos-gold {
background: linear-gradient(180deg, #FFD700 0%, #B8860B 100%);
}
.animate-row {
animation: slide-in 0.3s ease-out forwards;
.pos-silver {
background: linear-gradient(180deg, #C0C0C0 0%, #808080 100%);
}
.pos-bronze {
background: linear-gradient(180deg, #CD7F32 0%, #8B4513 100%);
}
.pos-default {
background: linear-gradient(180deg, #E60000 0%, #990000 100%);
}
.tabular {
font-variant-numeric: tabular-nums;
}
.live-pulse {
animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.6; transform: scale(0.95); }
}
.row-shadow {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body class="bg-shell-dark min-h-screen font-sans antialiased">
<!-- Header -->
<header class="bg-gradient-to-r from-shell-red to-red-700 py-6 px-8 shadow-2xl">
<div class="max-w-7xl mx-auto flex items-center justify-between">
<div class="flex items-center gap-6">
<div class="w-16 h-16 bg-shell-yellow rounded-lg flex items-center justify-center shadow-lg">
<svg class="w-10 h-10 text-shell-dark" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 2L1 12h3v9h6v-6h4v6h6v-9h3L12 2z"/>
</svg>
</div>
<div>
<h1 class="text-4xl md:text-5xl lg:text-6xl font-black text-white tracking-tight">SHELL LEADERBOARD</h1>
<p class="text-shell-yellow text-lg md:text-xl font-semibold tracking-widest uppercase mt-1">Race Results</p>
<body class="min-h-screen antialiased text-white">
<!-- Header Bar -->
<header class="bg-shell-red">
<div class="w-full px-4 sm:px-6 lg:px-8 py-3 lg:py-4 flex items-center justify-between">
<!-- Left: Logo + Title -->
<div class="flex items-center gap-3 lg:gap-5">
<div class="w-10 h-10 lg:w-12 lg:h-12 bg-shell-yellow rounded flex items-center justify-center flex-shrink-0">
<span class="text-black font-bold text-lg lg:text-xl">S</span>
</div>
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white tracking-wide uppercase">
Race Standings
</h1>
</div>
<div class="text-right hidden md:block">
<div class="text-white/80 text-sm uppercase tracking-wider">Live Standings</div>
<div class="text-shell-yellow text-2xl font-bold tabular-nums" id="clock">{{ now()->format('H:i:s') }}</div>
<!-- Right: Live + Clock -->
<div class="flex items-center gap-4 lg:gap-6">
<div class="flex items-center gap-2">
<span class="live-pulse w-3 h-3 lg:w-4 lg:h-4 bg-white rounded-full"></span>
<span class="text-white text-base lg:text-xl font-semibold uppercase tracking-wider">Live</span>
</div>
<span class="text-white text-xl lg:text-2xl font-medium tabular" id="clock">{{ now()->format('H:i') }}</span>
</div>
</div>
</header>
<!-- Leaderboard -->
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<main class="w-full px-3 sm:px-4 lg:px-6 py-4 lg:py-6">
@if($participants->isEmpty())
<div class="text-center py-20">
<div class="text-shell-yellow text-6xl mb-4">🏁</div>
<h2 class="text-3xl font-bold text-white mb-2">No Participants Yet</h2>
<p class="text-gray-400 text-lg">Waiting for race data...</p>
<div class="text-center py-20 lg:py-32">
<div class="text-6xl lg:text-8xl mb-6">🏁</div>
<h2 class="text-3xl lg:text-5xl font-bold text-white mb-4">WAITING FOR DRIVERS</h2>
<p class="text-gray-500 text-xl lg:text-2xl">Race data will appear here</p>
</div>
@else
<!-- Table Header -->
<div class="bg-shell-dark/50 border-b-2 border-shell-yellow mb-2 rounded-t-xl overflow-hidden">
<div class="grid grid-cols-12 gap-4 px-6 py-4 text-shell-yellow font-bold uppercase tracking-wider text-sm md:text-base">
<div class="col-span-1 text-center">POS</div>
<div class="col-span-1 text-center">#</div>
<div class="col-span-6">DRIVER</div>
<div class="col-span-2 text-center">TIME</div>
<div class="col-span-2 text-center">GAP</div>
</div>
</div>
<!-- Participants -->
<div class="space-y-2">
@php $leaderTime = $participants->first()?->time_ms; @endphp
<!-- Standings -->
<div class="space-y-1.5 lg:space-y-2">
@php
$leaderTime = $participants->first()?->best_time_ms;
@endphp
@foreach($participants as $index => $participant)
@php
$position = $index + 1;
$isLeader = $position === 1;
$isPodium = $position <= 3;
$gap = null;
if ($leaderTime && $participant->time_ms && !$isLeader) {
$gapMs = $participant->time_ms - $leaderTime;
$gapSec = $gapMs / 1000;
$gap = sprintf('+%.3f', $gapSec);
$timeDisplay = null;
if ($isLeader && $participant->best_time_ms) {
$timeDisplay = $participant->formatted_time;
} elseif ($leaderTime && $participant->best_time_ms) {
$gapMs = $participant->best_time_ms - $leaderTime;
$timeDisplay = '+' . number_format($gapMs / 1000, 2);
}
$posClass = match($position) {
1 => 'pos-gold',
2 => 'pos-silver',
3 => 'pos-bronze',
default => 'pos-default'
};
$statusBadge = match($participant->status) {
'running' => ['bg-blue-500 text-white', 'RUNNING'],
'pit' => ['bg-shell-yellow text-black', 'IN PIT'],
'dnf' => ['bg-red-600 text-white', 'DNF'],
'finished' => ['bg-green-600 text-white', 'FINISHED'],
default => null
};
@endphp
<div class="animate-row {{ $isLeader ? 'leader-glow' : '' }}" style="animation-delay: {{ $index * 0.05 }}s">
<div class="grid grid-cols-12 gap-4 px-6 py-4 md:py-5 rounded-xl items-center transition-all duration-300 hover:scale-[1.01]
@if($isLeader)
bg-gradient-to-r from-shell-red to-red-800 text-white
@elseif($position === 2)
bg-gradient-to-r from-gray-600 to-gray-700 text-white
@elseif($position === 3)
bg-gradient-to-r from-amber-700 to-amber-800 text-white
@else
bg-gray-800/80 text-white hover:bg-gray-700/80
@endif
">
<!-- Position -->
<div class="col-span-1 text-center">
<span class="inline-flex items-center justify-center w-10 h-10 md:w-12 md:h-12 rounded-full font-black text-xl md:text-2xl
@if($isLeader) bg-shell-yellow text-shell-dark
@elseif($position === 2) bg-gray-300 text-gray-800
@elseif($position === 3) bg-amber-500 text-amber-900
@else bg-gray-600 text-white
@endif
">
{{ $position }}
</span>
</div>
<!-- Car Number -->
<div class="col-span-1 text-center">
<span class="text-xl md:text-2xl font-bold {{ $isLeader ? 'text-shell-yellow' : 'text-gray-300' }}">
{{ $participant->car_number ?? '-' }}
</span>
</div>
<!-- Name -->
<div class="col-span-6">
<span class="text-xl md:text-2xl lg:text-3xl font-bold tracking-wide uppercase">
<div class="row-shadow flex items-stretch h-14 sm:h-16 lg:h-20">
<!-- Position Cube -->
<div class="{{ $posClass }} w-14 sm:w-16 lg:w-20 flex-shrink-0 flex items-center justify-center">
<span class="tabular text-2xl sm:text-3xl lg:text-4xl text-white drop-shadow-md">
{{ $position }}
</span>
</div>
<!-- Main Bar (Light) -->
<div class="bar-light flex-1 flex items-center px-4 lg:px-6">
<!-- Number + Name -->
<div class="flex-1 min-w-0 flex items-center gap-2 lg:gap-4">
@if($participant->number)
<span class="tabular text-sm sm:text-base lg:text-xl text-gray-500">
#{{ $participant->number }}
</span>
@endif
<span class="text-lg sm:text-xl lg:text-3xl text-gray-900 uppercase tracking-wide truncate">
{{ $participant->name }}
</span>
@if($participant->status === 'dnf')
<span class="ml-3 px-2 py-1 bg-red-600 text-white text-xs font-bold rounded uppercase">DNF</span>
@elseif($participant->status === 'pending')
<span class="ml-3 px-2 py-1 bg-yellow-600 text-white text-xs font-bold rounded uppercase">In Progress</span>
@if($statusBadge)
<span class="px-2 py-0.5 lg:px-2.5 lg:py-1 {{ $statusBadge[0] }} text-xs lg:text-sm rounded flex-shrink-0">
{{ $statusBadge[1] }}
</span>
@endif
</div>
<!-- Time -->
<div class="col-span-2 text-center">
<span class="text-xl md:text-2xl lg:text-3xl font-mono font-bold {{ $isLeader ? 'text-shell-yellow' : '' }}">
@if($participant->formatted_time)
{{ $participant->formatted_time }}
@else
<span class="text-gray-500">--:--.---</span>
@endif
</span>
</div>
<!-- Gap -->
<div class="col-span-2 text-center">
<span class="text-lg md:text-xl font-mono {{ $isLeader ? 'text-shell-yellow font-bold' : 'text-gray-400' }}">
@if($isLeader && $participant->time_ms)
LEADER
@elseif($gap)
{{ $gap }}
@else
-
@endif
</span>
<div class="flex-shrink-0 text-right">
@if($timeDisplay)
<span class="tabular text-lg sm:text-xl lg:text-3xl text-gray-900">
{{ $timeDisplay }}
</span>
@else
<span class="text-lg sm:text-xl lg:text-3xl text-gray-400">—</span>
@endif
</div>
</div>
</div>
@endforeach
</div>
@endif
</main>
<!-- Footer -->
<footer class="fixed bottom-0 left-0 right-0 bg-gradient-to-r from-shell-dark via-gray-900 to-shell-dark py-4 border-t border-gray-800">
<div class="max-w-7xl mx-auto px-8 flex items-center justify-between">
<div class="flex items-center gap-4">
<div class="w-8 h-8 bg-shell-yellow rounded flex items-center justify-center">
<span class="text-shell-dark font-black text-sm">S</span>
</div>
<span class="text-gray-400 text-sm">Shell Racing Event</span>
<footer class="fixed bottom-0 left-0 right-0 bg-broadcast-bg border-t border-gray-800">
<div class="w-full px-4 sm:px-6 lg:px-8 py-2 lg:py-3 flex items-center justify-between">
<div class="flex items-center gap-2 lg:gap-3">
<span class="text-shell-red font-bold text-sm lg:text-lg uppercase">Shell</span>
<span class="text-gray-600 text-xs lg:text-sm">Racing Event</span>
</div>
<div class="flex items-center gap-2">
<span class="inline-block w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
<span class="text-gray-400 text-sm">Auto-refresh every 10s</span>
<span class="w-2 h-2 bg-green-500 rounded-full animate-pulse"></span>
<span class="text-gray-600 text-xs lg:text-sm">Auto-refresh</span>
</div>
</div>
</footer>
@@ -195,7 +212,7 @@ function updateClock() {
const clock = document.getElementById('clock');
if (clock) {
const now = new Date();
clock.textContent = now.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', second: '2-digit' });
clock.textContent = now.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' });
}
}
setInterval(updateClock, 1000);