# Dark Crime Theme Implementation Plan > **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. **Goal:** Apply a dark, crime-themed UI to the full Laravel/Blade/Tailwind game — sidebar layout, blood-red accents, near-black backgrounds — across all game and auth pages. **Architecture:** All styling is done via Tailwind utility classes directly in Blade templates. A custom color palette (`syndicate`, `crime`, `gold`) is registered in `tailwind.config.js`. No new CSS files are created — the existing `resources/css/app.css` (`@tailwind base/components/utilities`) is sufficient. **Tech Stack:** Laravel 11, Blade templates, Tailwind CSS v3, `@tailwindcss/forms`, Alpine.js (already present via `x-data`), Bunny Fonts. ## Global Constraints - Never add new PHP files — only modify Blade templates and `tailwind.config.js` - Keep all existing route names and form actions unchanged - Preserve Alpine.js `x-data` / `@click` attributes on the navigation - Use exact color token names: `syndicate-{950,900,800,700,600}`, `crime-{600,500,400}`, `gold-{500,400}` - Font families: `font-sans` = Inter, `font-display` = Rajdhani - Bunny Fonts URL format: `https://fonts.bunny.net/css?family=inter:400,500,600|rajdhani:600,700&display=swap` - No mobile sidebar collapse — out of scope --- ## File Map | File | Action | Responsibility | |---|---|---| | `tailwind.config.js` | Modify | Register color palette + font-display | | `resources/views/layouts/app.blade.php` | Modify | Dark body bg, new font link | | `resources/views/layouts/guest.blade.php` | Modify | Dark auth wrapper + card | | `resources/views/layouts/game.blade.php` | Rewrite | Sidebar + top bar shell | | `resources/views/layouts/navigation.blade.php` | Rewrite | Sidebar nav links (replaces top-nav) | | `resources/views/game/partials/stats-bar.blade.php` | Rewrite | Compact HP/Energy/Cash pills | | `resources/views/components/primary-button.blade.php` | Modify | Crime-red button | | `resources/views/components/secondary-button.blade.php` | Modify | Syndicate-dark button | | `resources/views/components/text-input.blade.php` | Modify | Dark input field | | `resources/views/components/input-label.blade.php` | Modify | Light label text | | `resources/views/game/dashboard.blade.php` | Modify | Dark card classes throughout | | `resources/views/game/crimes/index.blade.php` | Modify | Dark card/button classes | | `resources/views/game/inventory/index.blade.php` | Modify | Dark card/button classes | | `resources/views/game/hospital.blade.php` | Modify | Dark card classes | | `resources/views/game/jail.blade.php` | Modify | Dark card classes | --- ### Task 1: Register color palette and fonts in Tailwind config **Files:** - Modify: `tailwind.config.js` - Modify: `resources/views/layouts/app.blade.php` - Modify: `resources/views/layouts/guest.blade.php` **Interfaces:** - Produces: color tokens `syndicate-{950,900,800,700,600}`, `crime-{600,500,400}`, `gold-{500,400}`, font family `font-display` — used by every subsequent task - [ ] **Step 1: Update tailwind.config.js** Replace the entire file content with: ```js import defaultTheme from 'tailwindcss/defaultTheme'; import forms from '@tailwindcss/forms'; /** @type {import('tailwindcss').Config} */ export default { content: [ './vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php', './storage/framework/views/*.php', './resources/views/**/*.blade.php', ], theme: { extend: { fontFamily: { sans: ['Inter', ...defaultTheme.fontFamily.sans], display: ['Rajdhani', ...defaultTheme.fontFamily.sans], }, colors: { syndicate: { 950: '#0a0a0c', 900: '#111114', 800: '#1a1a1f', 700: '#242429', 600: '#2e2e35', }, crime: { 600: '#dc2626', 500: '#ef4444', 400: '#f87171', }, gold: { 500: '#d97706', 400: '#fbbf24', }, }, }, }, plugins: [forms], }; ``` - [ ] **Step 2: Update app.blade.php font link and body class** Replace `resources/views/layouts/app.blade.php` with: ```blade @yield('title', config('app.name', 'Laravel')) @vite(['resources/css/app.css', 'resources/js/app.js']) @yield('content') ``` - [ ] **Step 3: Update guest.blade.php for dark auth layout** Replace `resources/views/layouts/guest.blade.php` with: ```blade {{ config('app.name', 'Laravel') }} @vite(['resources/css/app.css', 'resources/js/app.js'])
{{ config('app.name', 'The Crime Syndicate') }}
{{ $slot }}
``` - [ ] **Step 4: Build assets and verify no Tailwind errors** Run: ```bash cd /home/liquidsky/Projects/thecrimesyndicate && npm run build 2>&1 | tail -20 ``` Expected: build completes with no errors. The output should mention `app.css` and `app.js`. - [ ] **Step 5: Commit** ```bash cd /home/liquidsky/Projects/thecrimesyndicate git add tailwind.config.js resources/views/layouts/app.blade.php resources/views/layouts/guest.blade.php git commit -m "feat: register syndicate/crime/gold color palette and Inter/Rajdhani fonts" ``` --- ### Task 2: Rewrite game layout with sidebar + top bar **Files:** - Rewrite: `resources/views/layouts/game.blade.php` - Rewrite: `resources/views/layouts/navigation.blade.php` - Rewrite: `resources/views/game/partials/stats-bar.blade.php` **Interfaces:** - Consumes: color tokens from Task 1 - Produces: `@yield('game-content')` content slot consumed by all game pages; `$character` variable (already passed by game controllers) - [ ] **Step 1: Rewrite game.blade.php** Replace `resources/views/layouts/game.blade.php` with: ```blade @extends('layouts.app') @section('title', config('game.name', 'The Crime Syndicate') . ' - ' . ($title ?? 'Game')) @section('content')
{{-- TOP BAR --}}
{{-- Logo --}} {{ config('game.name', 'The Crime Syndicate') }} {{-- Stats bar --}}
@if(auth()->check() && auth()->user()->character) @include('game.partials.stats-bar') @endif
{{-- User menu --}}
{{ auth()->user()->name ?? '' }}
Settings
@csrf
{{-- BODY: sidebar + content --}}
{{-- SIDEBAR --}} @include('layouts.navigation') {{-- CONTENT --}}
{{-- Flash messages --}} @if(session('success'))
{{ session('success') }}
@endif @if(session('error'))
{{ session('error') }}
@endif @yield('game-content')
{{-- FOOTER --}}
@endsection ``` - [ ] **Step 2: Rewrite navigation.blade.php as sidebar** Replace `resources/views/layouts/navigation.blade.php` with: ```blade ``` - [ ] **Step 3: Rewrite stats-bar.blade.php as compact pills** Replace `resources/views/game/partials/stats-bar.blade.php` with: ```blade @php $character = auth()->user()->character; @endphp
{{-- HP --}}
❤ {{ $character->health }}/{{ $character->max_health }}
{{-- Energy --}}
⚡ {{ $character->energy }}/{{ $character->max_energy }}
{{-- Cash --}}
$ {{ number_format($character->money) }}
{{-- Level --}}
Lv.{{ $character->level }}
{{-- Non-active status badge --}} @if($character->status !== \App\Enums\CharacterStatus::ACTIVE) {{ $character->status->label() }} @endif
``` - [ ] **Step 4: Build assets** ```bash cd /home/liquidsky/Projects/thecrimesyndicate && npm run build 2>&1 | tail -20 ``` Expected: build succeeds with no errors. - [ ] **Step 5: Commit** ```bash cd /home/liquidsky/Projects/thecrimesyndicate git add resources/views/layouts/game.blade.php resources/views/layouts/navigation.blade.php resources/views/game/partials/stats-bar.blade.php git commit -m "feat: sidebar + top bar game layout with dark crime theme" ``` --- ### Task 3: Restyle Blade components (buttons + form inputs) **Files:** - Modify: `resources/views/components/primary-button.blade.php` - Modify: `resources/views/components/secondary-button.blade.php` - Modify: `resources/views/components/text-input.blade.php` - Modify: `resources/views/components/input-label.blade.php` **Interfaces:** - Consumes: color tokens from Task 1 - Produces: restyled ``, ``, ``, `` used by auth pages and game pages - [ ] **Step 1: Restyle primary-button** Replace `resources/views/components/primary-button.blade.php` with: ```blade ``` - [ ] **Step 2: Restyle secondary-button** Replace `resources/views/components/secondary-button.blade.php` with: ```blade ``` - [ ] **Step 3: Restyle text-input** Replace `resources/views/components/text-input.blade.php` with: ```blade @props(['disabled' => false]) merge(['class' => 'bg-syndicate-700 border-syndicate-600 text-gray-100 placeholder-gray-500 focus:border-crime-500 focus:ring-crime-500 rounded-md shadow-sm']) }}> ``` - [ ] **Step 4: Restyle input-label** Replace `resources/views/components/input-label.blade.php` with: ```blade @props(['value']) ``` - [ ] **Step 5: Build assets** ```bash cd /home/liquidsky/Projects/thecrimesyndicate && npm run build 2>&1 | tail -20 ``` Expected: build succeeds with no errors. - [ ] **Step 6: Commit** ```bash cd /home/liquidsky/Projects/thecrimesyndicate git add resources/views/components/primary-button.blade.php resources/views/components/secondary-button.blade.php resources/views/components/text-input.blade.php resources/views/components/input-label.blade.php git commit -m "feat: restyle form components for dark crime theme" ``` --- ### Task 4: Restyle game dashboard **Files:** - Modify: `resources/views/game/dashboard.blade.php` **Interfaces:** - Consumes: color tokens from Task 1, game layout from Task 2 - Consumes: `$character`, `$recentActivity` variables (passed by `GameController`) - [ ] **Step 1: Replace dashboard.blade.php** Replace `resources/views/game/dashboard.blade.php` with: ```blade @extends('layouts.game') @section('title', 'Dashboard') @section('game-content')
{{-- Welcome Card --}}

Welcome, {{ $character->name }}!

You are in {{ $character->location->name ?? 'Unknown Location' }}.

Level {{ $character->level }} — {{ number_format($character->experience) }} / {{ number_format($character->experience_for_next_level) }} EXP

{{ number_format($character->experience_progress, 1) }}% to next level

{{-- Quick Stats --}}

Quick Stats

Strength {{ $character->strength }}
Defense {{ $character->defense }}
Speed {{ $character->speed }}
Dexterity {{ $character->dexterity }}
Attack Power {{ $character->attack_power }}
Total Defense {{ $character->defense }}
{{-- Finances --}}

Finances

💰 Cash
${{ number_format($character->money) }}
🏦 Bank
${{ number_format($character->bank) }}
Deposit to Bank Withdraw from Bank
{{-- Quick Actions --}}

Quick Actions

🎯 Crimes Commit crimes 🎒 Inventory Manage items 👤 Profile View profile ⚙️ Settings Account settings
{{-- Recent Activity --}}

Recent Activity

@if($recentActivity->isEmpty())

No recent activity.

@else
@foreach($recentActivity as $activity)
@switch($activity->action) @case('crime_attempt') @if(str_contains($activity->description, 'success')) ✅ @else ❌ @endif @break @case('money_earned') 💰 @break @case('money_spent') 💸 @break @case('character_created') 🎉 @break @default 📝 @endswitch

{{ ucfirst(str_replace('_', ' ', $activity->action)) }}

{{ $activity->description }}

{{ $activity->created_at->diffForHumans() }}

@endforeach
@endif
@endsection ``` - [ ] **Step 2: Build assets** ```bash cd /home/liquidsky/Projects/thecrimesyndicate && npm run build 2>&1 | tail -20 ``` Expected: build succeeds. - [ ] **Step 3: Commit** ```bash cd /home/liquidsky/Projects/thecrimesyndicate git add resources/views/game/dashboard.blade.php git commit -m "feat: restyle game dashboard with dark crime theme" ``` --- ### Task 5: Restyle crimes page **Files:** - Modify: `resources/views/game/crimes/index.blade.php` **Interfaces:** - Consumes: color tokens from Task 1, game layout from Task 2 - Consumes: `$character`, `$availableCrimes`, `$recentAttempts`, `$crimeService` (passed by `CrimeController`) - [ ] **Step 1: Replace crimes/index.blade.php** Replace `resources/views/game/crimes/index.blade.php` with: ```blade @extends('layouts.game') @section('title', 'Crimes') @section('game-content')
{{-- Header card --}}

Available Crimes

Energy: {{ $character->energy }}/{{ $character->max_energy }}
@if($availableCrimes->isEmpty())

No crimes available. Try leveling up or restoring your energy.

@else
@foreach($availableCrimes as $crime) @php $onCooldown = $crimeService->isOnCooldown($character, $crime); $cooldownRemaining = $onCooldown ? $crimeService->getCooldownRemaining($character, $crime) : 0; $successRate = $crime->calculateSuccessRate($character); @endphp

{{ $crime->name }}

{{ $crime->difficulty_label }} Difficulty

{{ number_format($successRate * 100, 1) }}% Success

{{ Str::limit($crime->description, 100) }}

⚡ {{ $crime->energy_cost }} Energy
💰 ${{ $crime->reward_min }}-{{ $crime->reward_max }}
📈 {{ $crime->experience }} EXP
⏱ {{ $crime->cooldown }}s Cooldown
@if($onCooldown) @else
@csrf
@endif @if($crime->requires_level)

Requires Level {{ $crime->requires_level }}+

@endif
@endforeach
@endif
{{-- Recent Attempts --}}

Recent Attempts

@if($recentAttempts->isEmpty())

No recent crime attempts.

@else
@foreach($recentAttempts as $attempt)
@if($attempt->success) ✅ @else ❌ @endif

{{ $attempt->crime->name }}

{{ $attempt->attempted_at->diffForHumans() }}

@if($attempt->success)

+${{ number_format($attempt->reward) }}

+{{ $attempt->experience_gained }} EXP

@else

Failed

@endif
@endforeach
@endif
@endsection ``` - [ ] **Step 2: Build and commit** ```bash cd /home/liquidsky/Projects/thecrimesyndicate && npm run build 2>&1 | tail -5 git add resources/views/game/crimes/index.blade.php git commit -m "feat: restyle crimes page with dark crime theme" ``` --- ### Task 6: Restyle inventory, hospital, and jail pages **Files:** - Modify: `resources/views/game/inventory/index.blade.php` - Modify: `resources/views/game/hospital.blade.php` - Modify: `resources/views/game/jail.blade.php` **Interfaces:** - Consumes: color tokens from Task 1, game layout from Task 2 - Consumes: `$inventory` (inventory page), `$character` + `$releaseTime` + `$reviveCost` (hospital), `$character` + `$releaseTime` (jail) - [ ] **Step 1: Replace inventory/index.blade.php** Replace `resources/views/game/inventory/index.blade.php` with: ```blade @extends('layouts.game') @section('title', 'Inventory') @section('game-content')

Inventory

Equip weapons and armor, or use consumables.

@if($inventory->isEmpty())

Your inventory is empty.

@else
@foreach($inventory->groupBy('item.type') as $type => $items)

{{ ucfirst($type) }}s ({{ $items->sum('quantity') }})

@foreach($items as $item)

{{ $item->item->name }}

x{{ $item->quantity }}

@if($item->equipped) Equipped @endif
@if($item->item->description)

{{ Str::limit($item->item->description, 80) }}

@endif
@if($item->item->attack_bonus > 0)
⚔️ +{{ $item->item->attack_bonus }} Attack
@endif @if($item->item->defense_bonus > 0)
🛡️ +{{ $item->item->defense_bonus }} Defense
@endif @if($item->item->health_bonus > 0)
❤️ +{{ $item->item->health_bonus }} Health
@endif @if($item->item->energy_bonus > 0)
⚡ +{{ $item->item->energy_bonus }} Energy
@endif
@if($item->item->canEquip()) @if($item->equipped)
@csrf
@else
@csrf
@endif @endif @if($item->item->canUse())
@csrf
@endif
@csrf
@endforeach
@endforeach
@endif
@endsection ``` - [ ] **Step 2: Replace hospital.blade.php** Replace `resources/views/game/hospital.blade.php` with: ```blade @extends('layouts.game') @section('title', 'Hospital') @section('game-content')
🏥

You're in the Hospital

Your character has been injured and is currently recovering.

Your Status

Health {{ $character->health }}/{{ $character->max_health }}
Status @if($character->health <= 0) Dead @else In Hospital @endif
Release Time {{ $releaseTime }}
@csrf

Or wait to be automatically released when your health regenerates.

Back to Dashboard
@endsection ``` - [ ] **Step 3: Replace jail.blade.php** Replace `resources/views/game/jail.blade.php` with: ```blade @extends('layouts.game') @section('title', 'Jail') @section('game-content')
🚔

You're in Jail

Your character has been arrested and is currently serving time.

Your Status

Status In Jail
Release Time {{ $releaseTime }}

You must wait for your sentence to complete.

Back to Dashboard
@endsection ``` - [ ] **Step 4: Build assets** ```bash cd /home/liquidsky/Projects/thecrimesyndicate && npm run build 2>&1 | tail -5 ``` Expected: build succeeds. - [ ] **Step 5: Commit** ```bash cd /home/liquidsky/Projects/thecrimesyndicate git add resources/views/game/inventory/index.blade.php resources/views/game/hospital.blade.php resources/views/game/jail.blade.php git commit -m "feat: restyle inventory, hospital, and jail pages with dark crime theme" ``` --- ## Self-Review Checklist **Spec coverage:** - ✅ Color system (syndicate/crime/gold) — Task 1 - ✅ Typography (Inter + Rajdhani) — Task 1 - ✅ `app.blade.php` dark body — Task 1 - ✅ `guest.blade.php` dark auth layout — Task 1 - ✅ Game layout (sidebar + top bar) — Task 2 - ✅ Sidebar nav links with conditional Hospital/Jail — Task 2 - ✅ Stats bar compact pills (HP/Energy/Cash/Level) — Task 2 - ✅ Flash messages dark variant — Task 2 (inside game.blade.php) - ✅ Primary/Secondary/Ghost buttons — Task 3 - ✅ Dark text-input and input-label — Task 3 - ✅ Dashboard restyled — Task 4 - ✅ Crimes page restyled — Task 5 - ✅ Inventory page restyled — Task 6 - ✅ Hospital page restyled — Task 6 - ✅ Jail page restyled — Task 6 **No placeholders found.** **Type/name consistency:** - `CharacterStatus::ACTIVE`, `CharacterStatus::IN_HOSPITAL`, `CharacterStatus::IN_JAIL` — consistent across Tasks 2 and 4 - `$character->status->color()` / `->label()` — consistent with the enum definition - Color tokens identical across all tasks (no drift)