3.9 KiB
3.9 KiB
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:
- 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.
- 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-300dengan efekshadow-[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 Modeaktif. - 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.