76 lines
4.2 KiB
Markdown
76 lines
4.2 KiB
Markdown
# AGENTS.md
|
|
|
|
## Repository Overview
|
|
Aplikasi web Single Page Application (SPA) **Typing Test & Roguelite Typing Game ("Rogue Run")** minimalis.
|
|
|
|
- **Stack**: Vue 3 (Composition API + `<script setup>`), Vite 6, TypeScript, Tailwind CSS v4, Pinia, Vue Router 4, Lucide Icons.
|
|
- **Tujuan**: Memberikan pengalaman mengetik tanpa distraksi (Zen Mode) sekaligus mode ekspedisi game Roguelite adiktif dengan floor target, gold economy, shop, dan relic modifiers.
|
|
|
|
---
|
|
|
|
## Architectural Guidelines
|
|
|
|
### 1. Dual Mode System (`src/stores/typingStore.ts` & `src/stores/rogueStore.ts`)
|
|
- **Classic Mode (`appMode: 'classic'`)**:
|
|
- Typing test standar dengan durasi (15s, 30s, 60s).
|
|
- Mengukur WPM murni, Raw WPM, dan Akurasi.
|
|
- Timer bar tipis di puncak layar (`TopProgressBar.vue`).
|
|
- **Game Mode (`appMode: 'rogue'`)**:
|
|
- Progresi bertingkat per **Floor** (Floor 1, 2, ..., Boss Floor setiap kelipatan 5).
|
|
- Setiap Floor memiliki **Target Score** progresif dan durasi waktu dinamis yang menyusut (35s -> 18s) serta laju waktu yang berdetak semakin cepat (+3.5% per floor).
|
|
- **The Rogue Shop (`ShopModal.vue`)**: Toko relic antar floor untuk membeli upgrade stat menggunakan Gold (`🪙`).
|
|
- **Relic Engine (`src/data/relics.ts`)**: Relic dengan efek time slow (*Hourglass of Chronos*), starting time bonus (*Temporal Pocket Watch*), bonus waktu per kata (*Chronomancer Nib*), bonus time combo (*Overtime Espresso*), score multipliers, clutch multipliers, dan forgiveness shields.
|
|
|
|
### 2. State Management
|
|
- `typingStore.ts`: Mengelola keyboard input, timer core, active word stream, WPM, dan akurasi.
|
|
- `rogueStore.ts`: Mengelola skor game, target floor, gold, combo streak, relic inventory, status victory/game over, dan catalog shop.
|
|
|
|
### 3. Typing Engine & Viewport (`src/components/TypingArea.vue`)
|
|
- **3-Line Viewport**: Tampilan dibatasi tepat 3 baris (`168px = 3 x 56px line-height`) dengan `overflow-hidden`.
|
|
- **Smooth Line Shift**: Menggunakan `transform: translate3d(0, translateY, 0)` sehingga kata aktif selalu berada di baris ke-2 (tengah) saat berpindah baris, tanpa membuat kata-kata melompat atau menghilang.
|
|
- **Precise Floating Caret**: Dihitung menggunakan `offsetLeft` karakter aktif secara presisi di sisi kiri huruf yang akan diketik (`JetBrains Mono`).
|
|
|
|
### 4. Data Pool
|
|
- `src/data/words.ts`: 1000 kata umum bahasa Inggris (`ENGLISH_1000_WORDS`).
|
|
- `src/data/relics.ts`: Katalog relic Roguelite ber-rarity (*Common*, *Rare*, *Legendary*).
|
|
|
|
---
|
|
|
|
## Project Structure
|
|
```text
|
|
typing-test/
|
|
├── src/
|
|
│ ├── assets/ # Static assets
|
|
│ ├── components/ # Reusable UI components
|
|
│ │ ├── TopProgressBar.vue # Thin edge-to-edge top timer
|
|
│ │ ├── TypingArea.vue # 3-Line viewport typing engine with smooth caret
|
|
│ │ ├── RogueHud.vue # Roguelite floor, score bar, gold & streak HUD
|
|
│ │ ├── ShopModal.vue # Intermission relic merchant shop
|
|
│ │ ├── GameOverModal.vue # Defeat summary & quick restart
|
|
│ │ ├── ResultModal.vue # Classic mode WPM / Accuracy summary
|
|
│ │ └── Navbar.vue # Mode switcher (Classic vs Rogue Run)
|
|
│ ├── data/ # Static data (words.ts - 1000 words, relics.ts)
|
|
│ ├── router/ # Vue Router 4 configurations
|
|
│ ├── stores/ # Pinia state stores (typingStore.ts, rogueStore.ts)
|
|
│ ├── views/ # Page views (HomeView.vue, AboutView.vue)
|
|
│ ├── App.vue # Root layout
|
|
│ ├── main.ts # App entrypoint
|
|
│ ├── style.css # Tailwind CSS v4 entry
|
|
│ └── vite-env.d.ts # TypeScript declarations
|
|
├── DESIGN.md # Design system & visual specifications
|
|
├── CLAUDE.md # Developer reference pointing to AGENTS.md
|
|
├── index.html
|
|
├── package.json
|
|
├── tsconfig.json
|
|
├── tsconfig.app.json
|
|
├── tsconfig.node.json
|
|
└── vite.config.ts
|
|
```
|
|
|
|
---
|
|
|
|
## Command Reference
|
|
- `npm run dev`: Menjalankan Vite development server lokal.
|
|
- `npm run build`: Type-checking dengan `vue-tsc` dan bundle build Vite untuk production.
|
|
- `npm run preview`: Preview bundle build lokal.
|