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.

5.6 KiB Raw Blame History