73 lines
3.9 KiB
Markdown
73 lines
3.9 KiB
Markdown
# 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*.
|