# DESIGN.md

Dokumen spesifikasi desain antarmuka, prinsip estetika, dan token visual untuk aplikasi **ChronoType (Classic Mode & Game Mode)**.

---

## 1. Filosofi Desain

- **Distraction-Free (Zen Mode)**: Menghilangkan elemen UI yang tidak relevan selama pengguna sedang mengetik.
- **Rogue RPG Elements (Minimalist HUD)**: Integrasi status game (Floor, Target Score, Gold, Streak, Relics) tanpa membuat layar penuh sesak.
- **Micro-Feedback yang Presisi**: Kursor animasi bercahaya (*glowing caret*) dan pewarnaan karakter seketika (*instant feedback*).
- **Subtle Timer**: Indikator waktu tidak menggunakan angka yang mencolok melainkan garis tipis (*edge-to-edge line*) di puncak layar.

---

## 2. Palet Warna (Color Palette)

Aplikasi dibangun dengan tema gelap berbasis *Tailwind CSS v4* dan palet *Slate*:

| Peran | Hex / Tailwind Token | Keterangan |
| :--- | :--- | :--- |
| **Background Utama** | `#020617` (`slate-950`) | Latar belakang gelap pekat untuk kenyamanan mata. |
| **Background Card/Header/HUD** | `#0f172a` (`slate-900`) | Kontainer HUD, kartu shop, pill selector, dan modal hasil. |
| **Border & Divider** | `#1e293b` (`slate-800`) | Garis tepi subtil dengan batas kontras rendah. |
| **Aksen Utama (Caret & Gold)** | `#f59e0b` (`amber-500` / `amber-400`) | Warna kursor glowing, karakter benar, mata uang Gold, dan timer bar. |
| **Streak / Fire** | `#f97316` (`orange-500` / `orange-400`) | Indikator combo streak menyala (*flame accent*). |
| **Boss Floor / Error** | `#fb7185` (`rose-500` / `rose-400`) | Badge Boss Floor dan highlight karakter typo. |
| **Rarity: Rare Item** | `#22d3ee` (`cyan-400`) | Badge dan border item langka. |
| **Rarity: Legendary Item** | `#c084fc` (`purple-400`) | Badge dan border item legendaris. |
| **Teks Belum Diketik** | `#475569` (`slate-600`) | Teks abu-abu redup agar mata fokus pada kata aktif. |
| **Teks Sudah Diketik (Benar)** | `#94a3b8` (`slate-400`) | Warna netral pasca pengetikan. |

---

## 3. Tipografi

Dua jenis font Google Fonts yang dimuat via `index.html`:

1. **JetBrains Mono** (`font-mono`):
   - Digunakan untuk: Area pengetikan kata, caret, dan angka statistik WPM/Akurasi/Score/Gold.
   - Karakteristik: Monospace presisi, lebar karakter seragam untuk kalkulasi posisi caret `offsetLeft`.
2. **Plus Jakarta Sans** (`font-sans`):
   - Digunakan untuk: Header, navigasi, dialog shop, deskripsi relic, dan label UI umum.
   - Karakteristik: Geometris modern, bersih, dan mudah dibaca pada berbagai ukuran layar.

---

## 4. Spesifikasi Komponen

### Top-Edge Timer Bar (`TopProgressBar.vue`)
- Posisi: `fixed top-0 left-0 w-full z-50`
- Ketebalan: `3px`
- Visual: Gradasi `from-amber-500 via-amber-400 to-amber-300` dengan efek `shadow-[0_0_8px_rgba(245,158,11,0.6)]`.
- Animasi: `transition-all duration-100 ease-linear` (menyusut proporsional seiring waktu floor berjalan dan terpengaruh time speed scaling di Game Mode).

### Roguelite HUD (`RogueHud.vue`)
- Terletak tepat di atas area pengetikan saat mode `Game Mode` aktif.
- Menampilkan:
  - **Floor Badge**: Normal floor (Amber) atau Boss floor (Rose red dengan animasi crown).
  - **Score Progress**: Score vs Target Score dengan bar gradasi progresif.
  - **Gold Wallet**: Jumlah koin emas yang terkumpul.
  - **Combo Streak**: Pengali kombo dengan ikon api dinamis.
  - **Relic Inventory**: Ikon mini relic aktif dengan kartu tooltip deskripsi.

### The Rogue Merchant Shop (`ShopModal.vue`)
- Tampil otomatis saat player berhasil mencapai target score suatu Floor.
- Menyediakan 3 kartu Relic acak (Common / Rare / Legendary) yang seimbang untuk mengatasi eskalasi kesulitan dan percepatan timer (Time Extenders, Slowers, Multipliers, & Forgiveness).
- Tombol *Lanjut ke Floor Berikutnya*.

### Game Over Modal (`GameOverModal.vue`)
- Tampil saat timer habis sebelum target score tercapai di mode Roguelite.
- Menampilkan metrik Floor tertinggi yang dicapai, Max Combo Streak, dan Total Relics yang dimiliki beserta tombol *Mulai Run Baru*.