From a36b0b7612ee06dd2d2add3d5a38f52c4be69826 Mon Sep 17 00:00:00 2001 From: Doar Mihai Date: Sun, 28 Jun 2026 03:19:32 +0300 Subject: [PATCH] some progress --- app/Models/Character.php | 2 +- .../plans/2026-06-28-dark-crime-theme.md | 1122 +++++++++++++++++ .../2026-06-28-dark-crime-theme-design.md | 202 +++ 3 files changed, 1325 insertions(+), 1 deletion(-) create mode 100644 docs/superpowers/plans/2026-06-28-dark-crime-theme.md create mode 100644 docs/superpowers/specs/2026-06-28-dark-crime-theme-design.md diff --git a/app/Models/Character.php b/app/Models/Character.php index 056c617..5edca19 100644 --- a/app/Models/Character.php +++ b/app/Models/Character.php @@ -194,7 +194,7 @@ class Character extends Model */ public function getDefenseAttribute(): int { - $base = $this->defense; + $base = $this->attributes['defense'] ?? 0; $armor = $this->inventory()->where('equipped', true)->whereHas('item', function($q) { $q->where('type', 'armor'); })->first(); diff --git a/docs/superpowers/plans/2026-06-28-dark-crime-theme.md b/docs/superpowers/plans/2026-06-28-dark-crime-theme.md new file mode 100644 index 0000000..94a56c0 --- /dev/null +++ b/docs/superpowers/plans/2026-06-28-dark-crime-theme.md @@ -0,0 +1,1122 @@ +# 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 --}} +
+ © {{ date('Y') }} {{ config('game.name', 'The Crime Syndicate') }} — v{{ config('game.version', '1.0.0') }} +
+ +
+@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) \ No newline at end of file diff --git a/docs/superpowers/specs/2026-06-28-dark-crime-theme-design.md b/docs/superpowers/specs/2026-06-28-dark-crime-theme-design.md new file mode 100644 index 0000000..d6617b8 --- /dev/null +++ b/docs/superpowers/specs/2026-06-28-dark-crime-theme-design.md @@ -0,0 +1,202 @@ +# Dark Crime Theme — Design Spec +**Date:** 2026-06-28 +**Project:** The Crime Syndicate +**Scope:** Full game UI — auth pages, game layout, all game pages + +--- + +## 1. Color System + +Defined as custom Tailwind tokens in `tailwind.config.js` under `theme.extend.colors`: + +### Background scale (`syndicate`) +| Token | Hex | Usage | +|---|---|---| +| `syndicate-950` | `#0a0a0c` | Page/body background | +| `syndicate-900` | `#111114` | Sidebar background | +| `syndicate-800` | `#1a1a1f` | Card / panel backgrounds | +| `syndicate-700` | `#242429` | Card borders, dividers | +| `syndicate-600` | `#2e2e35` | Hover states, subtle borders | + +### Accent (`crime` — blood red) +| Token | Hex | Usage | +|---|---|---| +| `crime-600` | `#dc2626` | Primary buttons, active nav indicator | +| `crime-500` | `#ef4444` | Button hover states | +| `crime-400` | `#f87171` | Accent text, icon tints | + +### Money (`gold`) +| Token | Hex | Usage | +|---|---|---| +| `gold-500` | `#d97706` | Cash / money values | +| `gold-400` | `#fbbf24` | Money highlights | + +### Text +- Primary text: `text-gray-100` +- Secondary / muted: `text-gray-400` +- Disabled / placeholder: `text-gray-600` + +--- + +## 2. Typography + +Replace the existing `Figtree` font with two faces from Bunny Fonts: + +| Face | Usage | Tailwind class | +|---|---|---| +| **Inter** (400, 500, 600) | Body text, labels, data | `font-sans` | +| **Rajdhani** (600, 700) | Headings, game title, card titles | `font-display` | + +`font-display` added to `tailwind.config.js` as a custom font family. + +--- + +## 3. Layout Structure + +### 3.1 Base layout (`resources/views/layouts/app.blade.php`) +- `` class: `font-sans antialiased bg-syndicate-950 text-gray-100 min-h-screen` +- Remove `bg-gray-100` wrapper div +- Load the two new font faces via Bunny Fonts link tag + +### 3.2 Game layout (`resources/views/layouts/game.blade.php`) +Replaces the current single-top-bar layout with a sidebar + top bar shell. + +**Structure:** +``` +┌─────────────────────────────────────────────────┐ +│ TOP BAR (h-14): Logo | Stats bar | User menu │ +├──────────┬──────────────────────────────────────┤ +│ SIDEBAR │ CONTENT AREA │ +│ (w-56) │ bg-syndicate-950, p-6 │ +│ bg-900 │ @yield('game-content') │ +│ │ │ +│ Nav │ │ +│ links │ │ +│ │ │ +│ Logout │ │ +└──────────┴──────────────────────────────────────┘ +``` + +**Top bar:** +- `bg-syndicate-900 border-b border-syndicate-700 h-14` +- Left: game title in `font-display text-crime-400` +- Center: Stats bar (HP, Energy, Cash pills) +- Right: character name + dropdown (logout, profile, settings) + +**Sidebar:** +- `bg-syndicate-900 border-r border-syndicate-700 w-56 min-h-screen flex-shrink-0` +- Nav links: icon + label, `text-gray-400 hover:text-gray-100 hover:bg-syndicate-800` +- Active state: `border-l-2 border-crime-500 bg-syndicate-800 text-gray-100` +- Conditional links: Hospital shown only when `$character->status === IN_HOSPITAL`; Jail when `IN_JAIL` + +**Nav links (in order):** +1. Dashboard (`/game`) +2. Crimes (`/game/crimes`) +3. Inventory (`/game/inventory`) +4. Profile (`/game/character`) +5. --- divider --- +6. Hospital (conditional) +7. Jail (conditional) + +### 3.3 Stats bar partial (`resources/views/game/partials/stats-bar.blade.php`) +Compact inline pills: +- HP: red heart icon + `{hp}/{max_hp}` +- Energy: yellow bolt icon + `{energy}/{max_energy}` +- Cash: gold dollar icon + `${cash}` +- Level badge: `Lv.{level}` in `bg-syndicate-700 text-gray-300 rounded px-2` + +--- + +## 4. Component Styles + +### Cards / Panels +``` +bg-syndicate-800 border border-syndicate-700 rounded-lg +``` +Card header: `border-b border-syndicate-700 px-6 py-4` +Card body: `px-6 py-4` + +### Primary Button +``` +bg-crime-600 hover:bg-crime-500 text-white font-medium rounded px-4 py-2 transition +``` + +### Secondary / Ghost Button +``` +bg-syndicate-700 hover:bg-syndicate-600 text-gray-300 rounded px-4 py-2 transition +``` + +### Disabled Button +``` +bg-syndicate-700 text-gray-600 cursor-not-allowed rounded px-4 py-2 +``` + +### Flash Messages +- Success: `bg-green-900/40 border border-green-700 text-green-400` +- Error: `bg-red-900/40 border border-red-800 text-red-400` + +### Action grid tiles (Quick Actions, Crime cards) +``` +bg-syndicate-800 border border-syndicate-700 hover:border-crime-600 rounded-lg p-4 transition +``` +Hover lifts border to `crime-600`. + +--- + +## 5. Page-specific Restyling + +### Auth pages (login, register, forgot-password, etc.) +- `layouts/guest.blade.php`: full-page centered layout on `bg-syndicate-950` +- Card: `bg-syndicate-800 border border-syndicate-700 rounded-lg w-full max-w-md p-8` +- Title above card: game name in `font-display text-2xl text-crime-400` +- Blade components (`text-input`, `primary-button`, `input-label`) updated for dark theme + +### Game dashboard (`game/dashboard.blade.php`) +- All `bg-white dark:bg-gray-800` → `bg-syndicate-800 border border-syndicate-700` +- EXP progress bar: `bg-crime-600` on `bg-syndicate-700` track +- Money values: `text-gold-400` +- Activity log items: `bg-syndicate-700` background + +### Crimes page (`game/crimes/index.blade.php`) +- Crime cards: `bg-syndicate-800 border border-syndicate-700 hover:border-crime-600` +- Success rate badge: keep color logic (green/yellow/red) but darken backgrounds to 900/40 variants +- "Attempt Crime" button: primary button style +- Cooldown button: disabled button style +- Recent attempts row: `bg-syndicate-700` rows + +### Inventory, Hospital, Jail pages +- Same card/panel treatment as above +- No structural changes needed beyond color replacement + +--- + +## 6. Files Changed + +| File | Change | +|---|---| +| `tailwind.config.js` | Add `syndicate`, `crime`, `gold` color scales; add `font-display` | +| `resources/views/layouts/app.blade.php` | Dark body, new fonts | +| `resources/views/layouts/guest.blade.php` | Dark centered auth layout | +| `resources/views/layouts/game.blade.php` | Full sidebar + top bar rewrite | +| `resources/views/game/partials/stats-bar.blade.php` | Compact pill redesign | +| `resources/views/layouts/navigation.blade.php` | Sidebar nav links (replaces old top nav) | +| `resources/views/components/primary-button.blade.php` | Crime red style | +| `resources/views/components/secondary-button.blade.php` | Syndicate dark style | +| `resources/views/components/text-input.blade.php` | Dark input style | +| `resources/views/components/input-label.blade.php` | Light label text | +| `resources/views/game/dashboard.blade.php` | Dark card classes throughout | +| `resources/views/game/crimes/index.blade.php` | Dark card/button classes | +| `resources/views/game/inventory/index.blade.php` | Dark card classes | +| `resources/views/game/hospital.blade.php` | Dark card classes | +| `resources/views/game/jail.blade.php` | Dark card classes | +| `resources/views/auth/login.blade.php` | (no change — uses components) | +| `resources/views/auth/register.blade.php` | (no change — uses components) | + +--- + +## 7. Out of Scope + +- Mobile responsiveness (sidebar collapse on small screens) — future iteration +- Animations / transitions beyond simple CSS `transition` +- Custom icons (emoji kept as-is) +- JS interactivity \ No newline at end of file