feat: sidebar + top bar game layout with dark crime theme
This commit is contained in:
@@ -1,48 +1,32 @@
|
||||
@php
|
||||
$character = auth()->user()->character;
|
||||
@endphp
|
||||
@php $character = auth()->user()->character; @endphp
|
||||
<div class="flex items-center space-x-3 text-sm">
|
||||
{{-- HP --}}
|
||||
<div class="flex items-center space-x-1 bg-syndicate-800 border border-syndicate-700 rounded px-2 py-1">
|
||||
<span class="text-red-400">❤</span>
|
||||
<span class="text-gray-300">{{ $character->health }}<span class="text-gray-600">/{{ $character->max_health }}</span></span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center space-x-4 text-sm">
|
||||
<!-- Energy Bar -->
|
||||
<div class="flex items-center space-x-2">
|
||||
{{-- Energy --}}
|
||||
<div class="flex items-center space-x-1 bg-syndicate-800 border border-syndicate-700 rounded px-2 py-1">
|
||||
<span class="text-yellow-400">⚡</span>
|
||||
<div class="w-20 bg-gray-600 rounded-full h-2">
|
||||
<div
|
||||
class="bg-yellow-400 h-2 rounded-full transition-all duration-300"
|
||||
style="width: {{ $character->energy_percentage }}%"
|
||||
></div>
|
||||
</div>
|
||||
<span>{{ $character->energy }}/{{ $character->max_energy }}</span>
|
||||
<span class="text-gray-300">{{ $character->energy }}<span class="text-gray-600">/{{ $character->max_energy }}</span></span>
|
||||
</div>
|
||||
|
||||
<!-- Health Bar -->
|
||||
<div class="flex items-center space-x-2">
|
||||
<span class="text-red-400">❤️</span>
|
||||
<div class="w-20 bg-gray-600 rounded-full h-2">
|
||||
<div
|
||||
class="bg-red-400 h-2 rounded-full transition-all duration-300"
|
||||
style="width: {{ $character->health_percentage }}%"
|
||||
></div>
|
||||
</div>
|
||||
<span>{{ $character->health }}/{{ $character->max_health }}</span>
|
||||
{{-- Cash --}}
|
||||
<div class="flex items-center space-x-1 bg-syndicate-800 border border-syndicate-700 rounded px-2 py-1">
|
||||
<span class="text-gold-400">$</span>
|
||||
<span class="text-gray-300">{{ number_format($character->money) }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Money -->
|
||||
<div class="flex items-center space-x-1">
|
||||
<span class="text-green-400">💰</span>
|
||||
<span>${{ number_format($character->money) }}</span>
|
||||
{{-- Level --}}
|
||||
<div class="bg-syndicate-700 text-gray-300 rounded px-2 py-1 text-xs font-medium">
|
||||
Lv.{{ $character->level }}
|
||||
</div>
|
||||
|
||||
<!-- Level -->
|
||||
<div class="flex items-center space-x-1">
|
||||
<span class="text-blue-400">📈</span>
|
||||
<span>Lv. {{ $character->level }}</span>
|
||||
</div>
|
||||
|
||||
<!-- Status -->
|
||||
@if($character->status !== 'active')
|
||||
<span class="px-2 py-1 text-xs rounded {{ $character->status === 'in_hospital' ? 'bg-red-500' : 'bg-yellow-500' }}">
|
||||
{{ ucfirst(str_replace('_', ' ', $character->status)) }}
|
||||
{{-- Non-active status badge --}}
|
||||
@if($character->status !== \App\Enums\CharacterStatus::ACTIVE)
|
||||
<span class="px-2 py-1 text-xs rounded {{ $character->status->color() }}">
|
||||
{{ $character->status->label() }}
|
||||
</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user