some progress

2026-06-28 03:19:32 +03:00
parent 435cef6beb
commit a36b0b7612
3 changed files with 1325 additions and 1 deletions
@@ -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`)
+- `<body>` 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