feat: restyle crimes page with dark crime theme
Replace crimes index page with dark syndicate theme styling using: - syndicate color tokens for backgrounds and borders - crime color tokens for action buttons - gold color tokens for reward displays - Improved visual hierarchy and spacing Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Doar Mihai
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
0d4409b52c
commit
3326c73d10
@@ -3,25 +3,20 @@
|
||||
@section('title', 'Crimes')
|
||||
|
||||
@section('game-content')
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
|
||||
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
||||
<div class="flex justify-between items-center">
|
||||
<h1 class="text-xl font-semibold text-gray-800 dark:text-gray-200">Available Crimes</h1>
|
||||
<div class="text-sm text-gray-500 dark:text-gray-400">
|
||||
Energy: {{ $character->energy }}/{{ $character->max_energy }}
|
||||
</div>
|
||||
<div class="max-w-4xl mx-auto space-y-6">
|
||||
|
||||
{{-- Header card --}}
|
||||
<div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-syndicate-700 flex justify-between items-center">
|
||||
<h1 class="font-display text-xl font-semibold text-gray-100">Available Crimes</h1>
|
||||
<div class="text-sm text-gray-400">
|
||||
Energy: <span class="text-yellow-400 font-medium">{{ $character->energy }}/{{ $character->max_energy }}</span>
|
||||
</div>
|
||||
<p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
|
||||
Commit crimes to earn money and experience. Each crime costs energy and has a chance of success or failure.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
@if($availableCrimes->isEmpty())
|
||||
<p class="text-center text-gray-500 dark:text-gray-400 py-8">
|
||||
No crimes available. Try leveling up or restoring your energy.
|
||||
</p>
|
||||
<p class="text-center text-gray-500 py-8 text-sm">No crimes available. Try leveling up or restoring your energy.</p>
|
||||
@else
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
@foreach($availableCrimes as $crime)
|
||||
@@ -30,103 +25,95 @@
|
||||
$cooldownRemaining = $onCooldown ? $crimeService->getCooldownRemaining($character, $crime) : 0;
|
||||
$successRate = $crime->calculateSuccessRate($character);
|
||||
@endphp
|
||||
|
||||
<div class="bg-gray-50 dark:bg-gray-700 rounded-lg p-4 border border-gray-200 dark:border-gray-600">
|
||||
|
||||
<div class="bg-syndicate-700 border border-syndicate-600 hover:border-crime-600 rounded-lg p-4 transition">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div>
|
||||
<h3 class="font-medium text-gray-800 dark:text-gray-200">{{ $crime->name }}</h3>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||||
{{ $crime->difficulty_label }} Difficulty
|
||||
</p>
|
||||
<h3 class="font-medium text-gray-100">{{ $crime->name }}</h3>
|
||||
<p class="text-xs text-gray-500 mt-1">{{ $crime->difficulty_label }} Difficulty</p>
|
||||
</div>
|
||||
<span class="text-xs px-2 py-1 rounded-full {{ $crime->difficulty_color }} text-white">
|
||||
<span class="text-xs px-2 py-1 rounded-full {{ $crime->difficulty_color }} text-white flex-shrink-0">
|
||||
{{ number_format($successRate * 100, 1) }}% Success
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<p class="text-sm text-gray-600 dark:text-gray-400 mb-3">
|
||||
{{ Str::limit($crime->description, 100) }}
|
||||
</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 text-xs">
|
||||
<div class="flex items-center">
|
||||
<span class="text-yellow-500 mr-1">⚡</span>
|
||||
|
||||
<p class="text-sm text-gray-400 mb-3">{{ Str::limit($crime->description, 100) }}</p>
|
||||
|
||||
<div class="grid grid-cols-2 gap-2 text-xs text-gray-400 mb-3">
|
||||
<div class="flex items-center space-x-1">
|
||||
<span class="text-yellow-400">⚡</span>
|
||||
<span>{{ $crime->energy_cost }} Energy</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="text-green-500 mr-1">💰</span>
|
||||
<div class="flex items-center space-x-1">
|
||||
<span class="text-gold-400">💰</span>
|
||||
<span>${{ $crime->reward_min }}-{{ $crime->reward_max }}</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="text-blue-500 mr-1">📈</span>
|
||||
<div class="flex items-center space-x-1">
|
||||
<span class="text-blue-400">📈</span>
|
||||
<span>{{ $crime->experience }} EXP</span>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<span class="text-gray-500 mr-1">⏱️</span>
|
||||
<div class="flex items-center space-x-1">
|
||||
<span class="text-gray-500">⏱</span>
|
||||
<span>{{ $crime->cooldown }}s Cooldown</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@if($onCooldown)
|
||||
<button
|
||||
disabled
|
||||
class="w-full mt-3 py-2 px-4 text-sm text-center bg-gray-300 dark:bg-gray-600 text-gray-500 dark:text-gray-400 rounded-lg cursor-not-allowed"
|
||||
>
|
||||
<button disabled
|
||||
class="w-full py-2 px-4 text-sm text-center bg-syndicate-600 text-gray-600 rounded-lg cursor-not-allowed">
|
||||
On Cooldown ({{ ceil($cooldownRemaining / 60) }}m)
|
||||
</button>
|
||||
@else
|
||||
<form action="{{ route('game.crimes.attempt', $crime) }}" method="POST" class="mt-3">
|
||||
<form action="{{ route('game.crimes.attempt', $crime) }}" method="POST">
|
||||
@csrf
|
||||
<button
|
||||
type="submit"
|
||||
class="w-full py-2 px-4 text-sm text-center bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition"
|
||||
>
|
||||
<button type="submit"
|
||||
class="w-full py-2 px-4 text-sm text-center bg-crime-600 hover:bg-crime-500 text-white rounded-lg transition">
|
||||
Attempt Crime
|
||||
</button>
|
||||
</form>
|
||||
@endif
|
||||
|
||||
|
||||
@if($crime->requires_level)
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
|
||||
Requires Level {{ $crime->requires_level }}+
|
||||
</p>
|
||||
<p class="text-xs text-gray-600 mt-2">Requires Level {{ $crime->requires_level }}+</p>
|
||||
@endif
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="p-6 border-t border-gray-200 dark:border-gray-700">
|
||||
<h3 class="text-lg font-semibold text-gray-800 dark:text-gray-200 mb-3">Recent Attempts</h3>
|
||||
|
||||
{{-- Recent Attempts --}}
|
||||
<div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-syndicate-700">
|
||||
<h3 class="font-display text-lg font-semibold text-gray-100">Recent Attempts</h3>
|
||||
</div>
|
||||
<div class="p-6">
|
||||
@if($recentAttempts->isEmpty())
|
||||
<p class="text-center text-gray-500 dark:text-gray-400 py-4">
|
||||
No recent crime attempts.
|
||||
</p>
|
||||
<p class="text-center text-gray-500 py-4 text-sm">No recent crime attempts.</p>
|
||||
@else
|
||||
<div class="space-y-2">
|
||||
@foreach($recentAttempts as $attempt)
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-700 rounded-lg">
|
||||
<div class="flex items-center">
|
||||
<span class="mr-3">
|
||||
<div class="flex items-center justify-between p-3 bg-syndicate-700 rounded-lg">
|
||||
<div class="flex items-center space-x-3">
|
||||
<span>
|
||||
@if($attempt->success)
|
||||
<span class="text-green-500">✅</span>
|
||||
<span class="text-green-400">✅</span>
|
||||
@else
|
||||
<span class="text-red-500">❌</span>
|
||||
<span class="text-red-400">❌</span>
|
||||
@endif
|
||||
</span>
|
||||
<div>
|
||||
<p class="font-medium text-gray-800 dark:text-gray-200">{{ $attempt->crime->name }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">{{ $attempt->attempted_at->diffForHumans() }}</p>
|
||||
<p class="font-medium text-gray-200 text-sm">{{ $attempt->crime->name }}</p>
|
||||
<p class="text-xs text-gray-500">{{ $attempt->attempted_at->diffForHumans() }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
@if($attempt->success)
|
||||
<p class="text-sm text-green-600 dark:text-green-400">+${{ number_format($attempt->reward) }}</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">+{{ $attempt->experience_gained }} EXP</p>
|
||||
<p class="text-sm text-gold-400">+${{ number_format($attempt->reward) }}</p>
|
||||
<p class="text-xs text-gray-500">+{{ $attempt->experience_gained }} EXP</p>
|
||||
@else
|
||||
<p class="text-sm text-red-600 dark:text-red-400">Failed</p>
|
||||
<p class="text-sm text-red-400">Failed</p>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
@@ -135,5 +122,6 @@
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
Reference in New Issue
Block a user