119 lines
5.6 KiB
Markdown
119 lines
5.6 KiB
Markdown
# 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. |
|