Doar MihaiandClaude Sonnet 4.6
cad99125ce
Implement dark crime-themed redesign for three game pages using syndicate color tokens and dark typography. Updated inventory grid, hospital recovery status display, and jail sentence view with consistent styling. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
118 lines
7.9 KiB
PHP
118 lines
7.9 KiB
PHP
@extends('layouts.game')
|
|
|
|
@section('title', 'Inventory')
|
|
|
|
@section('game-content')
|
|
<div class="max-w-4xl mx-auto">
|
|
<div class="bg-syndicate-800 border border-syndicate-700 rounded-lg">
|
|
<div class="px-6 py-4 border-b border-syndicate-700">
|
|
<h1 class="font-display text-xl font-semibold text-gray-100">Inventory</h1>
|
|
<p class="mt-1 text-sm text-gray-400">Equip weapons and armor, or use consumables.</p>
|
|
</div>
|
|
|
|
<div class="p-6">
|
|
@if($inventory->isEmpty())
|
|
<p class="text-center text-gray-500 py-8 text-sm">Your inventory is empty.</p>
|
|
@else
|
|
<div class="space-y-6">
|
|
@foreach($inventory->groupBy('item.type') as $type => $items)
|
|
<div>
|
|
<h3 class="font-display text-base font-semibold text-gray-300 capitalize mb-3">
|
|
{{ ucfirst($type) }}s ({{ $items->sum('quantity') }})
|
|
</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
@foreach($items as $item)
|
|
<div class="bg-syndicate-700 border border-syndicate-600 rounded-lg p-4">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<div>
|
|
<h4 class="font-medium text-gray-100">{{ $item->item->name }}</h4>
|
|
<p class="text-xs text-gray-500">x{{ $item->quantity }}</p>
|
|
</div>
|
|
@if($item->equipped)
|
|
<span class="text-xs px-2 py-1 bg-green-800/60 border border-green-700 text-green-400 rounded-full">Equipped</span>
|
|
@endif
|
|
</div>
|
|
|
|
@if($item->item->description)
|
|
<p class="text-sm text-gray-400 mb-3">{{ Str::limit($item->item->description, 80) }}</p>
|
|
@endif
|
|
|
|
<div class="grid grid-cols-2 gap-2 text-xs text-gray-400 mb-3">
|
|
@if($item->item->attack_bonus > 0)
|
|
<div class="flex items-center space-x-1">
|
|
<span class="text-crime-400">⚔️</span>
|
|
<span>+{{ $item->item->attack_bonus }} Attack</span>
|
|
</div>
|
|
@endif
|
|
@if($item->item->defense_bonus > 0)
|
|
<div class="flex items-center space-x-1">
|
|
<span class="text-blue-400">🛡️</span>
|
|
<span>+{{ $item->item->defense_bonus }} Defense</span>
|
|
</div>
|
|
@endif
|
|
@if($item->item->health_bonus > 0)
|
|
<div class="flex items-center space-x-1">
|
|
<span class="text-green-400">❤️</span>
|
|
<span>+{{ $item->item->health_bonus }} Health</span>
|
|
</div>
|
|
@endif
|
|
@if($item->item->energy_bonus > 0)
|
|
<div class="flex items-center space-x-1">
|
|
<span class="text-yellow-400">⚡</span>
|
|
<span>+{{ $item->item->energy_bonus }} Energy</span>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
<div class="flex space-x-2">
|
|
@if($item->item->canEquip())
|
|
@if($item->equipped)
|
|
<form action="{{ route('game.inventory.unequip', $item) }}" method="POST">
|
|
@csrf
|
|
<button type="submit"
|
|
class="px-3 py-1 text-xs bg-syndicate-600 hover:bg-syndicate-500 text-gray-300 rounded transition">
|
|
Unequip
|
|
</button>
|
|
</form>
|
|
@else
|
|
<form action="{{ route('game.inventory.equip', $item) }}" method="POST">
|
|
@csrf
|
|
<button type="submit"
|
|
class="px-3 py-1 text-xs bg-crime-600 hover:bg-crime-500 text-white rounded transition">
|
|
Equip
|
|
</button>
|
|
</form>
|
|
@endif
|
|
@endif
|
|
|
|
@if($item->item->canUse())
|
|
<form action="{{ route('game.inventory.use', $item) }}" method="POST">
|
|
@csrf
|
|
<button type="submit"
|
|
class="px-3 py-1 text-xs bg-green-700 hover:bg-green-600 text-white rounded transition">
|
|
Use
|
|
</button>
|
|
</form>
|
|
@endif
|
|
|
|
<form action="{{ route('game.inventory.drop', $item) }}" method="POST">
|
|
@csrf
|
|
<input type="number" name="quantity" value="1" min="1" max="{{ $item->quantity }}" class="hidden">
|
|
<button type="submit"
|
|
class="px-3 py-1 text-xs bg-red-900/60 hover:bg-red-800/80 border border-red-800 text-red-400 rounded transition">
|
|
Drop
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|