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') Forms\Components\TextInput::make('name')
->required() ->required()
->maxLength(255) ->maxLength(255)
->placeholder('Enter participant name'), ->placeholder('Driver name'),
Forms\Components\TextInput::make('car_number') Forms\Components\TextInput::make('number')
->label('Car Number') ->label('Number')
->numeric() ->numeric()
->minValue(1) ->minValue(1)
->maxValue(999) ->maxValue(999)
->placeholder('e.g., 44'), ->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([ ->schema([
Forms\Components\Grid::make(4) Forms\Components\Grid::make(3)
->schema([ ->schema([
Forms\Components\TextInput::make('time_minutes') Forms\Components\TextInput::make('time_minutes')
->label('Minutes') ->label('Minutes')
->numeric() ->numeric()
->minValue(0) ->minValue(0)
->maxValue(59) ->maxValue(59)
->default(0) ->default(null)
->placeholder('00') ->placeholder('MM')
->dehydrated(false) ->dehydrated(false)
->afterStateHydrated(function ($component, $state, $record) { ->afterStateHydrated(function ($component, $state, $record) {
if ($record && $record->time_ms) { if ($record && $record->best_time_ms) {
$component->state(floor($record->time_ms / 60000)); $component->state(floor($record->best_time_ms / 60000));
} }
}), }),
Forms\Components\TextInput::make('time_seconds') Forms\Components\TextInput::make('time_seconds')
@@ -60,12 +64,12 @@ public static function form(Form $form): Form
->numeric() ->numeric()
->minValue(0) ->minValue(0)
->maxValue(59) ->maxValue(59)
->default(0) ->default(null)
->placeholder('00') ->placeholder('SS')
->dehydrated(false) ->dehydrated(false)
->afterStateHydrated(function ($component, $state, $record) { ->afterStateHydrated(function ($component, $state, $record) {
if ($record && $record->time_ms) { if ($record && $record->best_time_ms) {
$component->state(floor(($record->time_ms % 60000) / 1000)); $component->state(floor(($record->best_time_ms % 60000) / 1000));
} }
}), }),
Forms\Components\TextInput::make('time_milliseconds') Forms\Components\TextInput::make('time_milliseconds')
@@ -73,26 +77,18 @@ public static function form(Form $form): Form
->numeric() ->numeric()
->minValue(0) ->minValue(0)
->maxValue(999) ->maxValue(999)
->default(0) ->default(null)
->placeholder('000') ->placeholder('ms')
->dehydrated(false) ->dehydrated(false)
->afterStateHydrated(function ($component, $state, $record) { ->afterStateHydrated(function ($component, $state, $record) {
if ($record && $record->time_ms) { if ($record && $record->best_time_ms) {
$component->state($record->time_ms % 1000); $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() ->alignCenter()
->weight('bold'), ->weight('bold'),
Tables\Columns\TextColumn::make('car_number') Tables\Columns\TextColumn::make('number')
->label('#') ->label('#')
->alignCenter() ->alignCenter()
->placeholder('-') ->placeholder('-')
@@ -117,29 +113,28 @@ public static function table(Table $table): Table
->sortable() ->sortable()
->weight('bold'), ->weight('bold'),
Tables\Columns\TextColumn::make('formatted_time') Tables\Columns\TextColumn::make('formatted_time')
->label('Time') ->label('Best Time')
->placeholder('No time') ->placeholder('—')
->fontFamily('mono') ->fontFamily('mono')
->alignCenter(), ->alignCenter(),
Tables\Columns\BadgeColumn::make('status') Tables\Columns\BadgeColumn::make('status')
->formatStateUsing(fn (string $state): string => Participant::statuses()[$state] ?? $state)
->colors([ ->colors([
'warning' => 'pending', 'gray' => 'ready',
'success' => 'completed', 'info' => 'running',
'success' => 'finished',
'warning' => 'pit',
'danger' => 'dnf', 'danger' => 'dnf',
]), ]),
Tables\Columns\TextColumn::make('updated_at') Tables\Columns\TextColumn::make('updated_at')
->label('Last Update') ->label('Updated')
->dateTime('M j, H:i') ->dateTime('H:i:s')
->sortable(), ->sortable(),
]) ])
->defaultSort('time_ms', 'asc') ->defaultSort('best_time_ms', 'asc')
->filters([ ->filters([
Tables\Filters\SelectFilter::make('status') Tables\Filters\SelectFilter::make('status')
->options([ ->options(Participant::statuses()),
'pending' => 'Pending',
'completed' => 'Completed',
'dnf' => 'DNF',
]),
]) ])
->actions([ ->actions([
Tables\Actions\EditAction::make(), Tables\Actions\EditAction::make(),
@@ -168,24 +163,24 @@ public static function getPages(): array
public static function mutateFormDataBeforeCreate(array $data): array public static function mutateFormDataBeforeCreate(array $data): array
{ {
return static::calculateTimeMs($data); return static::calculateBestTimeMs($data);
} }
public static function mutateFormDataBeforeSave(array $data): array 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); $minutes = $data['time_minutes'] ?? null;
$seconds = (int) ($data['time_seconds'] ?? 0); $seconds = $data['time_seconds'] ?? null;
$milliseconds = (int) ($data['time_milliseconds'] ?? 0); $milliseconds = $data['time_milliseconds'] ?? null;
if ($minutes > 0 || $seconds > 0 || $milliseconds > 0) { if ($minutes !== null || $seconds !== null || $milliseconds !== null) {
$data['time_ms'] = ($minutes * 60000) + ($seconds * 1000) + $milliseconds; $data['best_time_ms'] = ((int)$minutes * 60000) + ((int)$seconds * 1000) + (int)$milliseconds;
} else { } else {
$data['time_ms'] = null; $data['best_time_ms'] = null;
} }
return $data; 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 protected function mutateFormDataBeforeCreate(array $data): array
{ {
$minutes = (int) ($data['time_minutes'] ?? 0); $minutes = $data['time_minutes'] ?? null;
$seconds = (int) ($data['time_seconds'] ?? 0); $seconds = $data['time_seconds'] ?? null;
$milliseconds = (int) ($data['time_milliseconds'] ?? 0); $milliseconds = $data['time_milliseconds'] ?? null;
if ($minutes > 0 || $seconds > 0 || $milliseconds > 0) { if ($minutes !== null || $seconds !== null || $milliseconds !== null) {
$data['time_ms'] = ($minutes * 60000) + ($seconds * 1000) + $milliseconds; $data['best_time_ms'] = ((int)$minutes * 60000) + ((int)$seconds * 1000) + (int)$milliseconds;
} else { } else {
$data['time_ms'] = null; $data['best_time_ms'] = null;
} }
unset($data['time_minutes'], $data['time_seconds'], $data['time_milliseconds']); 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 protected function mutateFormDataBeforeSave(array $data): array
{ {
$minutes = (int) ($data['time_minutes'] ?? 0); $minutes = $data['time_minutes'] ?? null;
$seconds = (int) ($data['time_seconds'] ?? 0); $seconds = $data['time_seconds'] ?? null;
$milliseconds = (int) ($data['time_milliseconds'] ?? 0); $milliseconds = $data['time_milliseconds'] ?? null;
if ($minutes > 0 || $seconds > 0 || $milliseconds > 0) { if ($minutes !== null || $seconds !== null || $milliseconds !== null) {
$data['time_ms'] = ($minutes * 60000) + ($seconds * 1000) + $milliseconds; $data['best_time_ms'] = ((int)$minutes * 60000) + ((int)$seconds * 1000) + (int)$milliseconds;
} else { } else {
$data['time_ms'] = null; $data['best_time_ms'] = null;
} }
unset($data['time_minutes'], $data['time_seconds'], $data['time_milliseconds']); 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 = [ protected $fillable = [
'name', 'name',
'car_number', 'number',
'time_ms', 'best_time_ms',
'status', 'status',
]; ];
protected $casts = [ protected $casts = [
'car_number' => 'integer', 'number' => 'integer',
'time_ms' => 'integer', 'best_time_ms' => 'integer',
]; ];
/** const STATUS_READY = 'ready';
* Format time_ms as mm:ss.ms (e.g., 01:23.456) 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 public function getFormattedTimeAttribute(): ?string
{ {
if ($this->time_ms === null) { if ($this->best_time_ms === null) {
return null; return null;
} }
$totalMs = $this->time_ms; $totalMs = $this->best_time_ms;
$minutes = floor($totalMs / 60000); $minutes = floor($totalMs / 60000);
$seconds = floor(($totalMs % 60000) / 1000); $seconds = floor(($totalMs % 60000) / 1000);
$milliseconds = $totalMs % 1000; $milliseconds = $totalMs % 1000;
@@ -38,20 +52,14 @@ public function getFormattedTimeAttribute(): ?string
return sprintf('%02d:%02d.%03d', $minutes, $seconds, $milliseconds); return sprintf('%02d:%02d.%03d', $minutes, $seconds, $milliseconds);
} }
/** public function getStatusLabelAttribute(): string
* Scope to get ranked participants (fastest first, null times last)
*/
public function scopeRanked($query)
{ {
return $query->orderByRaw('CASE WHEN time_ms IS NULL THEN 1 ELSE 0 END') return self::statuses()[$this->status] ?? strtoupper($this->status);
->orderBy('time_ms', 'asc');
} }
/** public function scopeRanked($query)
* Scope to get only completed participants
*/
public function scopeCompleted($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) { Schema::create('participants', function (Blueprint $table) {
$table->id(); $table->id();
$table->string('name'); $table->string('name');
$table->integer('car_number')->nullable(); $table->integer('number')->nullable();
$table->integer('time_ms')->nullable(); // Time in milliseconds for accurate sorting $table->integer('best_time_ms')->nullable(); // Best lap time in milliseconds
$table->string('status')->default('pending'); // pending, completed, dnf $table->string('status')->default('ready'); // ready, running, finished, pit, dnf
$table->timestamps(); $table->timestamps();
}); });
} }

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

@@ -4,9 +4,9 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="refresh" content="10"> <meta http-equiv="refresh" content="10">
<title>Shell Leaderboard</title> <title>Shell Race Standings</title>
<link rel="preconnect" href="https://fonts.bunny.net"> <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 src="https://cdn.tailwindcss.com"></script>
<script> <script>
tailwind.config = { tailwind.config = {
@@ -16,176 +16,193 @@
shell: { shell: {
red: '#E60000', red: '#E60000',
yellow: '#FFD100', yellow: '#FFD100',
dark: '#1A1A1A', },
broadcast: {
bg: '#0E0E0E',
bar: '#F5F5F5',
} }
}, },
fontFamily: { fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'], display: ['Russo One', 'sans-serif'],
} },
} }
} }
} }
</script> </script>
<style> <style>
@keyframes pulse-glow { body {
0%, 100% { box-shadow: 0 0 20px rgba(230, 0, 0, 0.3); } background: #0E0E0E;
50% { box-shadow: 0 0 40px rgba(230, 0, 0, 0.6); } 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); } .pos-gold {
to { opacity: 1; transform: translateX(0); } 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> </style>
</head> </head>
<body class="bg-shell-dark min-h-screen font-sans antialiased"> <body class="min-h-screen antialiased text-white">
<!-- Header -->
<header class="bg-gradient-to-r from-shell-red to-red-700 py-6 px-8 shadow-2xl"> <!-- Header Bar -->
<div class="max-w-7xl mx-auto flex items-center justify-between"> <header class="bg-shell-red">
<div class="flex items-center gap-6"> <div class="w-full px-4 sm:px-6 lg:px-8 py-3 lg:py-4 flex items-center justify-between">
<div class="w-16 h-16 bg-shell-yellow rounded-lg flex items-center justify-center shadow-lg"> <!-- Left: Logo + Title -->
<svg class="w-10 h-10 text-shell-dark" fill="currentColor" viewBox="0 0 24 24"> <div class="flex items-center gap-3 lg:gap-5">
<path d="M12 2L1 12h3v9h6v-6h4v6h6v-9h3L12 2z"/> <div class="w-10 h-10 lg:w-12 lg:h-12 bg-shell-yellow rounded flex items-center justify-center flex-shrink-0">
</svg> <span class="text-black font-bold text-lg lg:text-xl">S</span>
</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>
</div> </div>
<h1 class="text-2xl sm:text-3xl lg:text-4xl font-bold text-white tracking-wide uppercase">
Race Standings
</h1>
</div> </div>
<div class="text-right hidden md:block">
<div class="text-white/80 text-sm uppercase tracking-wider">Live Standings</div> <!-- Right: Live + Clock -->
<div class="text-shell-yellow text-2xl font-bold tabular-nums" id="clock">{{ now()->format('H:i:s') }}</div> <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>
</div> </div>
</header> </header>
<!-- Leaderboard --> <!-- 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()) @if($participants->isEmpty())
<div class="text-center py-20"> <div class="text-center py-20 lg:py-32">
<div class="text-shell-yellow text-6xl mb-4">🏁</div> <div class="text-6xl lg:text-8xl mb-6">🏁</div>
<h2 class="text-3xl font-bold text-white mb-2">No Participants Yet</h2> <h2 class="text-3xl lg:text-5xl font-bold text-white mb-4">WAITING FOR DRIVERS</h2>
<p class="text-gray-400 text-lg">Waiting for race data...</p> <p class="text-gray-500 text-xl lg:text-2xl">Race data will appear here</p>
</div> </div>
@else @else
<!-- Table Header --> <!-- Standings -->
<div class="bg-shell-dark/50 border-b-2 border-shell-yellow mb-2 rounded-t-xl overflow-hidden"> <div class="space-y-1.5 lg:space-y-2">
<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"> @php
<div class="col-span-1 text-center">POS</div> $leaderTime = $participants->first()?->best_time_ms;
<div class="col-span-1 text-center">#</div> @endphp
<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
@foreach($participants as $index => $participant) @foreach($participants as $index => $participant)
@php @php
$position = $index + 1; $position = $index + 1;
$isLeader = $position === 1; $isLeader = $position === 1;
$isPodium = $position <= 3; $timeDisplay = null;
$gap = null;
if ($leaderTime && $participant->time_ms && !$isLeader) { if ($isLeader && $participant->best_time_ms) {
$gapMs = $participant->time_ms - $leaderTime; $timeDisplay = $participant->formatted_time;
$gapSec = $gapMs / 1000; } elseif ($leaderTime && $participant->best_time_ms) {
$gap = sprintf('+%.3f', $gapSec); $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 @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] <div class="row-shadow flex items-stretch h-14 sm:h-16 lg:h-20">
@if($isLeader)
bg-gradient-to-r from-shell-red to-red-800 text-white <!-- Position Cube -->
@elseif($position === 2) <div class="{{ $posClass }} w-14 sm:w-16 lg:w-20 flex-shrink-0 flex items-center justify-center">
bg-gradient-to-r from-gray-600 to-gray-700 text-white <span class="tabular text-2xl sm:text-3xl lg:text-4xl text-white drop-shadow-md">
@elseif($position === 3) {{ $position }}
bg-gradient-to-r from-amber-700 to-amber-800 text-white </span>
@else </div>
bg-gray-800/80 text-white hover:bg-gray-700/80
@endif <!-- Main Bar (Light) -->
"> <div class="bar-light flex-1 flex items-center px-4 lg:px-6">
<!-- Position -->
<div class="col-span-1 text-center"> <!-- Number + Name -->
<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 <div class="flex-1 min-w-0 flex items-center gap-2 lg:gap-4">
@if($isLeader) bg-shell-yellow text-shell-dark @if($participant->number)
@elseif($position === 2) bg-gray-300 text-gray-800 <span class="tabular text-sm sm:text-base lg:text-xl text-gray-500">
@elseif($position === 3) bg-amber-500 text-amber-900 #{{ $participant->number }}
@else bg-gray-600 text-white </span>
@endif @endif
"> <span class="text-lg sm:text-xl lg:text-3xl text-gray-900 uppercase tracking-wide truncate">
{{ $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">
{{ $participant->name }} {{ $participant->name }}
</span> </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> @if($statusBadge)
@elseif($participant->status === 'pending') <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">
<span class="ml-3 px-2 py-1 bg-yellow-600 text-white text-xs font-bold rounded uppercase">In Progress</span> {{ $statusBadge[1] }}
</span>
@endif @endif
</div> </div>
<!-- Time --> <!-- Time -->
<div class="col-span-2 text-center"> <div class="flex-shrink-0 text-right">
<span class="text-xl md:text-2xl lg:text-3xl font-mono font-bold {{ $isLeader ? 'text-shell-yellow' : '' }}"> @if($timeDisplay)
@if($participant->formatted_time) <span class="tabular text-lg sm:text-xl lg:text-3xl text-gray-900">
{{ $participant->formatted_time }} {{ $timeDisplay }}
@else </span>
<span class="text-gray-500">--:--.---</span> @else
@endif <span class="text-lg sm:text-xl lg:text-3xl text-gray-400">—</span>
</span> @endif
</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> </div>
</div> </div>
</div> </div>
@endforeach @endforeach
</div> </div>
@endif @endif
</main> </main>
<!-- Footer --> <!-- 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"> <footer class="fixed bottom-0 left-0 right-0 bg-broadcast-bg border-t border-gray-800">
<div class="max-w-7xl mx-auto px-8 flex items-center justify-between"> <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-4"> <div class="flex items-center gap-2 lg:gap-3">
<div class="w-8 h-8 bg-shell-yellow rounded flex items-center justify-center"> <span class="text-shell-red font-bold text-sm lg:text-lg uppercase">Shell</span>
<span class="text-shell-dark font-black text-sm">S</span> <span class="text-gray-600 text-xs lg:text-sm">Racing Event</span>
</div>
<span class="text-gray-400 text-sm">Shell Racing Event</span>
</div> </div>
<div class="flex items-center gap-2"> <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="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="text-gray-600 text-xs lg:text-sm">Auto-refresh</span>
</div> </div>
</div> </div>
</footer> </footer>
@@ -195,7 +212,7 @@ function updateClock() {
const clock = document.getElementById('clock'); const clock = document.getElementById('clock');
if (clock) { if (clock) {
const now = new Date(); 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); setInterval(updateClock, 1000);