# 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
- <kbd>Space</kbd>: Berpindah ke kata berikutnya dan mencatat histori akurasi.
- <kbd>Backspace</kbd>: Menghapus atau memperbaiki karakter yang salah dalam kata aktif.
- <kbd>Tab</kbd>: Restart tes instan kapan saja.
- <kbd>Tab</kbd> + <kbd>Enter</kbd>: Mulai tes / run baru setelah sesi selesai.

---

## 🛠️ Tech Stack

- **Framework**: [Vue 3](https://vuejs.org/) (`<script setup>` + Composition API)
- **Build Tool**: [Vite 6](https://vite.dev/)
- **Bahasa**: [TypeScript](https://www.typescriptlang.org/) (Strict Mode)
- **Styling**: [Tailwind CSS v4](https://tailwindcss.com/) (via `@tailwindcss/vite`)
- **State Management**: [Pinia](https://pinia.vuejs.org/)
- **Routing**: [Vue Router 4](https://router.vuejs.org/)
- **Icons**: [Lucide Vue Next](https://lucide.dev/)
- **Typography**: Google Fonts (*Plus Jakarta Sans* & *JetBrains Mono*)

---

## 📁 Struktur Folder

```text
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](https://nodejs.org/) (versi 18+ direkomendasikan)
- [npm](https://www.npmjs.com/) atau [pnpm](https://pnpm.io/) / [yarn](https://yarnpkg.com/)

### 1. Clone atau Buka Folder Project
```bash
cd e:\Personal\typing-test
```

### 2. Install Dependencies
```bash
npm install
```

### 3. Jalankan Development Server
```bash
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. |