typing-test/AGENTS.md

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

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.