# 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.