ChronoType ⏳

Aplikasi web Single Page Application (SPA) Typing Test Minimalis & Roguelite Typing Game ("Game Mode") yang modern, elegan, dan bebas distraksi.

Dibangun menggunakan kombinasi teknologi modern: Vue 3 (Composition API), Vite, TypeScript, Tailwind CSS v4, dan Pinia.

---

✨ Fitur Utama

1. 🎯 Classic Mode (Zen Typing Test)

• Distraction-Free (Monkeytype Style): Tampilan terpusat di tengah layar tanpa elemen yang mengganggu fokus.
• Top-Edge Progress Bar: Indikator timer berupa garis tipis 3px di paling atas layar dari ujung ke ujung (edge-to-edge) dengan amber glow.
• Pilihan Durasi Cepat: Opsi durasi pengetikan standar (15s, 30s, 60s).
• Smooth 3-Line Viewport: Area pengetikan 3 baris dengan transisi baris yang halus (smooth translate shift) sehingga kata aktif selalu berada di tengah tanpa loncat atau hilang.
• Precise Floating Caret: Kursor animasi halus bercahaya yang posisinya presisi menempel di sisi kiri huruf yang akan diketik.
• Statistik Mendalam: Mengukur WPM, Raw WPM, Akurasi (%), serta jumlah karakter benar/salah.

2. ⚔️ Game Mode (Roguelite Typing)

• Floor Level Progression: Tantangan berjenjang dari Floor 1 s.d. Boss Floor (setiap kelipatan 5) dengan target skor yang semakin menantang.
• Dynamic Time Escalation: Durasi waktu menyusut dan laju waktu berdetak semakin cepat seiring naiknya floor (+3.5% per floor).
• Gold & Combo Economy: Dapatkan koin emas (🪙) dan score multiplier dari rantai kata benar (combo streak).
• The Rogue Merchant (Shop): Toko relic antar-floor untuk membeli item pasif dan upgrade stat:
  • ⏳ Hourglass of Chronos (Memperlambat laju timer sebesar 20%).
  • ⏱️ Temporal Pocket Watch (Tambahan durasi awal +6s di setiap floor).
  • ☕ Overtime Espresso (Bonus +2.5s per 5 combo streak).
  • ✨ Chronomancer Nib (+0.4s waktu ekstra setiap kata benar).
  • 🛡️ Liquid Eraser (Typo pertama tidak memutus combo streak).
  • ⚡ Adrenaline Surge (2.5x Score Multiplier saat waktu < 10 detik).
  • ✒️ Golden Quill (+35% score multiplier tambahan).
  • 🧐 Scholar's Monocle (Kata 7+ huruf bernilai 2.5x score).
• Run Over & Summary: Layar evaluasi pencapaian run dengan quick restart.

3. ⌨️ Keyboard Shortcuts

• Space: Berpindah ke kata berikutnya dan mencatat histori akurasi.
• Backspace: Menghapus atau memperbaiki karakter yang salah dalam kata aktif.
• Tab: Restart tes instan kapan saja.
• Tab + Enter: Mulai tes / run baru setelah sesi selesai.

---

🛠️ Tech Stack

• Framework: Vue 3 (<script setup> + Composition API)
• Build Tool: Vite 6
• Bahasa: TypeScript (Strict Mode)
• Styling: Tailwind CSS v4 (via @tailwindcss/vite)
• State Management: Pinia
• Routing: Vue Router 4
• Icons: Lucide Vue Next
• Typography: Google Fonts (Plus Jakarta Sans & JetBrains Mono)

---

📁 Struktur Folder

typing-test/
├── src/
│   ├── assets/              # Aset statis
│   ├── components/          # Komponen UI Reusable
│   │   ├── TopProgressBar.vue  # Timer bar tipis edge-to-edge
│   │   ├── TypingArea.vue      # Viewport 3-baris & floating caret engine
│   │   ├── RogueHud.vue        # HUD game: Floor, Target, Gold & Streak
│   │   ├── ShopModal.vue       # Merchant toko relic antar floor
│   │   ├── GameOverModal.vue   # Ringkasan kekalahan & run restart
│   │   ├── ResultModal.vue     # Ringkasan WPM & Akurasi mode Classic
│   │   └── Navbar.vue          # Mode switcher (Classic Mode vs Game Mode)
│   ├── data/                # Data statis (words.ts 1000 kata, relics.ts)
│   ├── router/              # Konfigurasi rute SPA
│   ├── stores/              # Pinia Stores (typingStore.ts, rogueStore.ts)
│   ├── views/               # Halaman utama (HomeView.vue, AboutView.vue)
│   ├── App.vue              # Root layout
│   ├── main.ts              # Entrypoint aplikasi
│   ├── style.css            # Global Tailwind CSS v4 styling
│   └── vite-env.d.ts        # TypeScript ambient declarations
├── AGENTS.md                # Dokumentasi arsitektur untuk developer / AI agents
├── CLAUDE.md                # Referensi developer
├── DESIGN.md                # Design system & spesifikasi token visual
├── index.html
├── package.json
└── vite.config.ts

---

🚀 Cara Menjalankan Project

Prasyarat

Pastikan Anda telah menginstal:

• Node.js (versi 18+ direkomendasikan)
• npm atau pnpm / yarn

1. Clone atau Buka Folder Project

cd e:\Personal\typing-test

2. Install Dependencies

npm install

3. Jalankan Development Server

npm run dev

Setelah server berjalan, buka URL lokal yang ditampilkan pada terminal (biasanya http://localhost:5173) di browser Anda.

---

📦 Perintah Script Lainnya

Perintah	Deskripsi
npm run dev	Menjalankan local development server dengan Hot Module Replacement (HMR).
npm run build	Menjalankan type-checking TypeScript (vue-tsc) dan membuat production bundle di folder dist/.
npm run preview	Menjalankan preview lokal dari hasil build production.