some progress
This commit is contained in:
@@ -194,7 +194,7 @@ class Character extends Model
|
|||||||
*/
|
*/
|
||||||
public function getDefenseAttribute(): int
|
public function getDefenseAttribute(): int
|
||||||
{
|
{
|
||||||
$base = $this->defense;
|
$base = $this->attributes['defense'] ?? 0;
|
||||||
$armor = $this->inventory()->where('equipped', true)->whereHas('item', function($q) {
|
$armor = $this->inventory()->where('equipped', true)->whereHas('item', function($q) {
|
||||||
$q->where('type', 'armor');
|
$q->where('type', 'armor');
|
||||||
})->first();
|
})->first();
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -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
|
||||||
Reference in New Issue
Block a user