✨ Keunggulan

• ⚛️ Modern Stack: Menggunakan React 19, TypeScript 5, dan Vite 6 untuk performa instan.
• 🎨 Tailwind CSS 4: Konfigurasi zero-setup dengan gaya UI premium (glassmorphism, gradient) siap pakai.
• ⚡ Zero Friction: Secara otomatis mengunduh & merakit dependensi (npm install). Jalankan satu perintah, dan langsung mulai mengoding!
• 🎮 Game-Ready: Dilengkapi dengan kerangka dasar Game Canvas, timer, dan penghitung skor yang di-optimalkan menggunakan Hooks React.
• 📦 Standar LKS: Menghasilkan struktur direktori yang rapi, type-safe, dan mematuhi kaidah kompetisi standar Industri.

🛠 Instalasi (Local Development)

Mengingat tool ini diprioritaskan sebagai pustaka offline/local selama lomba:

# 1. Masuk ke direktori jo-builder
cd path/to/jo-builder

# 2. Registrasikan CLI ke sistem lokal
npm install
npm link

Setelah itu, perintah jo dapat dijalankan dari terminal mana pun.

🚀 Cara Penggunaan

1. Inisialisasi Proyek Baru

Membangun fondasi aplikasi React hanya dengan satu perintah:

jo init <nama-proyek>

Saran: Tunggu beberapa saat hingga proses npm install otomatis selesai.

2. Mulai Development Server

cd <nama-proyek>
npm run dev

3. Otomatisasi Git Commit

LKS mewajibkan pemformatan Git Commit yang rapi. Gunakan perintah berikut untuk mempermudah:

# Format: jo commit <KODE_MODUL> <"pesan commit">
jo commit A1 "Menambahkan fitur deteksi tabrakan (Collision)"
jo commit A2 "Menyelesaikan styling halaman Leaderboard"

📁 Struktur Direktori yang Dihasilkan

Proyek yang Anda hasilkan sudah disusun dengan pola modular.

nama-proyek/
├── src/
│   ├── components/      # Komponen UI Reusable (mis: GameCanvas.tsx)
│   ├── hooks/           # Custom React Hooks (mis: useLKSGame.ts)
│   ├── App.tsx          # Pusat Aplikasi / Router Layer
│   ├── main.tsx         # Entry Point React
│   └── index.css        # Import Tailwind & CSS Global (Variables)
├── public/              # Aset Statis (Gambar, Icon)
├── vite.config.ts       # Konfigurasi _Bundler_ Vite
├── tsconfig.json        # Aturan ketat TypeScript
└── package.json         # Konfigurasi library dependensi

🎯 Best Practices & Tips Lumba (Game Frontend)

1. Struktur Folder Scalable

Untuk menjaga kode tetap bersih saat fitur game bertambah, kami menyarankan struktur berikut di dalam src/:

• public/assets/ -> Wajib simpan semua gambar, sprite, dan audio di sini agar bisa diakses langsung via URL (/assets/bg.png).
• src/store/ -> Kumpulan file Zustand (misal useGameState.ts).
• src/components/ui/ -> Komponen antarmuka murni: Button, ScoreBoard, Modal GameOver.
• src/components/game/ -> Komponen inti: CanvasManager.tsx, Joystick.tsx.

2. Optimasi Layout Game dengan Tailwind (Grid / Flexbox)

Jangan ragu menggunakan utillitas modern Tailwind agar tampilan game (Canvas + HUD) selalu proporsional baik di layar besar maupun kecil:

Contoh: Game Wrap Absolute Center Gunakan Flexbox untuk memposisikan Canvas selalu di tengah layar dengan background gelap.

<div className="flex items-center justify-center min-h-screen bg-slate-900 overflow-hidden">
  <div className="relative w-full max-w-4xl aspect-[16/9] bg-black shadow-2xl rounded-lg overflow-hidden">
     <canvas id="gameCanvas" className="w-full h-full object-cover" />
     
     {/* Overlay HUD dengan Absolute */}
     <div className="absolute top-0 left-0 w-full p-4 flex justify-between items-start pointer-events-none">
        <ScoreBoard />
        <PauseButton className="pointer-events-auto" />
     </div>
  </div>
</div>

Kenapa struktur ini bagus?

• aspect-[16/9]: Memaksa rasio aspek (Aspect Ratio) game selalu tetap 16:9 di layar manapun.
• pointer-events-none pada overlay HUD memastikan klik di UI tembus ke Canvas di bawahnya, kecuali di berikan pointer-events-auto pada tombol (contoh: tombol Pause).