> [!NOTE]
> **Konoha Fighting** adalah proyek turunan dari **AETHER CLASH** karya **Bang Tutorial** ([repo asli](https://github.com/bangtutorial/aether-clash), [tutorial YouTube](https://www.youtube.com/watch?v=UN_0bNC2wTU)). Kode asli berlisensi [MIT](LICENSE); aset bawaan (karakter, seni, audio, panduan) berlisensi [CC BY-NC 4.0](LICENSE-ASSETS.md), jadi **tidak untuk penggunaan komersial**. Perubahan di sini: roster karakter diganti dengan karakter parodi buatan sendiri, ditambah mode, toko, efek jurus, dan menu baru. Rincian kredit ada di bagian [Kredit dan lisensi](#kredit-dan-lisensi).

# Konoha Fighting

Game fighting 2D di browser dengan tokoh publik versi parodi: **Bro Wo, Mega Chan, Son of Solo Man, Ethanol Man, A Nice, Solo Man, dan Gufron**, plus 5 slot misteri. Semua karakter adalah karikatur untuk hiburan; nama dan jurus hanya plesetan. Tanpa instalasi, tanpa dependensi.

## Menjalankan

```bash
python3 serve.py 8141   # server lokal tanpa cache
```

Buka `http://localhost:8141/?touch=0`. (Mode sentuh otomatis di HP.)

Cukup server file statis apa pun; tidak ada langkah build. Sajikan lewat `http://localhost` atau HTTPS agar layar loading dan cache service worker aktif. Membuka `index.html` langsung dari disk (`file://`) tetap bisa dimainkan, hanya tanpa cache. Browser yang didukung: Chrome, Edge, Firefox, dan Safari terbaru (desktop dan HP). Audio mulai setelah klik atau ketukan pertama.

## Kontrol

| Tombol | Fungsi |
| --- | --- |
| A D / W / S | jalan, lompat (W dua kali = lompat ganda), jongkok |
| Spasi | serang (ketuk 3x = kombo) |
| ↓ ↓ + Spasi | uppercut (menjatuhkan lawan) |
| ↓ → + Spasi | tinju maju |
| I / O / P | skill 1, skill 2, ultimate |
| K | jurus toko |
| L (tahan) / L (ketuk) | blok / parry |
| J | lempar (menembus blok) |
| Esc | jeda |
| R | ulang (ronde di Latihan, pertandingan di VS Komputer) |
| P2: ← → ↑ N M , . | jalan, lompat, serang, skill 1, skill 2, ultimate |

Di menu: W A S D atau tombol panah untuk memilih, Enter untuk konfirmasi, Esc untuk kembali.

**Sentuh (HP dan tablet):** pad arah di kiri, tombol serang besar dengan skill dan ultimate di kanan lengkap dengan hitungan cooldown, ditambah tombol jurus perintah, blok, dan lempar. HP otomatis membuka `mobile.html` dalam tampilan landscape; `?touch=1` memaksa tampilan sentuh di desktop dan `?touch=0` mematikannya.

## Fitur

- Mode: VS Komputer (4 tingkat, best of 3 ronde), Arcade, Survival, Dua Pemain, dan Latihan.
- Ultimate sinematik dan mode pasca-ultimate untuk setiap karakter (A Nice berubah jadi Senator).
- Efek jurus yang bergerak sendiri (gelombang, jurus area, lari dengan bayangan, genangan) dan rasa kena (hit-stop, getaran layar, K.O. gerak lambat, angka damage, peringkat kombo).
- Blok, parry, dan lempar; koin, toko (jurus toko, varian skill, skin warna), menu Karakter, 20 pencapaian, dan easter egg.
- Peringkat karakter versi simulator (tier S sampai C, bagian kecil di menu Koleksi), dibuat otomatis dari ratusan ronde bot melawan CPU; angkanya bukan kebenaran mutlak.
- Lima arena, pengumuman ronde, dan kutipan acak di layar loading.
- Menu utama berlatar kolase tujuh petarung, tanpa gambar tambahan: seluruhnya disusun dengan CSS dari potret yang sudah ada, dan geraknya menghormati pengaturan "kurangi gerak" di perangkat.
- Daftar "Yang baru" di layar About, dengan pemberitahuan singkat satu kali saat ada pembaruan.
- Rencana pengembangan: [RENCANA.md](RENCANA.md) (urutan kerja) dan [ROADMAP.md](ROADMAP.md) (katalog ide).

## Struktur proyek

```text
.
├── index.html        # pintu masuk desktop: menu, HUD, dialog, urutan skrip
├── mobile.html       # cangkang landscape untuk HP (rotasi, layar penuh)
├── style.css         # HUD arena, cut-in, kontrol sentuh
├── menu.css          # menu utama, pilih karakter dan arena, hasil, latar kolase, About
├── feel.css          # peringkat kombo
├── meta.css          # toko, karakter, koleksi, toast
├── mystery.css       # gaya slot misteri di layar pilih karakter
├── game.js           # mesin: loop, fisika, pertarungan, otak CPU, rendering, HUD
├── menu.js           # menu: alur layar, roster, arena, tingkat kesulitan, kolase latar
├── match.js          # aturan ronde, timer, arena, penyetelan tingkat CPU
├── feel.js           # rasa kena: hit-stop, getaran, K.O. gerak lambat
├── meta.js           # koin, toko, skin, pencapaian, Arcade/Survival
├── mystery.js        # slot misteri yang hidup: siluet dan petunjuk bertahap dari kemajuan pemain
├── brand.js          # kutipan layar loading dan daftar "Yang baru"
├── content/          # data teks: loading.js (kutipan), changelog.js (Yang baru), mystery.js (petunjuk slot misteri), tiers.js (peringkat, dibuat simulator)
├── announcer.js      # antrean suara pengumuman
├── touch.js          # kontrol sentuh di layar
├── browo.js, fenr.js # kit tulisan tangan (karakter lain berbasis data di assets/<id>/manifest.js)
├── preload.js        # layar boot kunjungan pertama, mengisi cache
├── precache.js       # daftar berkas runtime (dibuat oleh tools/build_precache.py)
├── sw.js             # service worker: gambar dari cache, kode dari jaringan dulu
├── tests/            # uji headless (Playwright): node tests/all.mjs (semua), harness.mjs smoke, balance.mjs (simulator)
├── docs/             # catatan mesin untuk pengembang (ENGINE_NOTES.md) dan laporan keseimbangan (balance-report.md)
├── guide/            # panduan produksi warisan AETHER CLASH
├── LICENSE           # MIT (kode)
├── LICENSE-ASSETS.md # CC BY-NC 4.0 (seni, audio, panduan) dan pengecualian
└── assets/
    ├── <petarung>/   # atlas sprite (WebP) + manifest.js, potret, ikon, FX
    ├── audio/        # klip pengumuman dan musik latar
    ├── menu/         # seni pilih karakter dan latar arena
    ├── ui/           # seni HUD bersama
    └── fonts/        # Rajdhani (SIL Open Font License)
```

## Cara kerja

- **Simulasi langkah tetap.** Game maju dalam langkah 1/120 detik dengan pengacak berbenih, jadi pertarungan berjalan sama di setiap perangkat.
- **Sprite.** Tiap petarung berupa atlas sprite WebP (diam, jalan, lari, lompat, jongkok, tiga serangan, dua skill, ultimate, terkena, jatuh, bangun) dengan manifest berisi bingkai, titik pijak, dan titik pukul terukur.
- **Kit.** Aturan tiap petarung (damage, jangkauan, cooldown, perilaku proyektil) ada di data manifest; pemain dan CPU memakai data yang persis sama.
- **Otak CPU.** CPU bereaksi dengan jeda mirip manusia: melompati proyektil, mundur dari serangan, menghukum saat lawan lengah, dan melanjutkan kombo yang benar-benar kena. Tiap tingkat kesulitan mengubah waktu reaksi, agresi, dan kesalahan.
- **Loading.** `precache.js` mendaftar semua berkas runtime beserta hash isinya. `preload.js` mengunduhnya ke Cache Storage di balik layar boot, dan `sw.js` melayani gambar dan font dari sana. Pada kunjungan berikutnya hanya berkas yang berubah yang diunduh lagi. Setelah menambah atau mengubah berkas, jalankan `python3 tools/build_precache.py`.

## Pengujian dan keseimbangan

Uji headless memakai Playwright (sudah terpasang di mesin pengembang) dan tidak perlu `npm install`:

```bash
node tests/all.mjs                  # satu perintah: sintaks semua JS, smoke, 49 pasangan karakter singkat, data peringkat; kode keluar 0 bila lolos
node tests/harness.mjs smoke        # smoke saja (7 karakter melawan CPU, gagal bila ada galat halaman)
BAL_N=8 BAL_WORKERS=2 node tests/harness.mjs tests/balance.mjs 2026-10-05   # simulator keseimbangan, tulis docs/balance-report.md
BAL_TIERS=1 BAL_N=8 node tests/harness.mjs tests/balance.mjs 2026-10-05     # juga membuat ulang content/tiers.js (peringkat di menu Koleksi)
```

Simulator memainkan setiap pasangan 7 x 7 karakter di kedua posisi (bot pemain melawan CPU tingkat hard) tanpa render, lalu menulis tabel menang-kalah dan persen menang per karakter. Cara membaca hasil, riwayat penyetelan angka, dan batasannya ada di [docs/balance-report.md](docs/balance-report.md); rincian env dan struktur kode ada di [docs/ENGINE_NOTES.md](docs/ENGINE_NOTES.md).

## Penerapan

Unggah folder ke hosting file statis (nginx, Apache, LiteSpeed, Caddy, GitHub Pages, Netlify, dan sejenisnya). Semua jalur bersifat relatif, jadi bisa di akar domain atau subfolder. Buka game dengan garis miring penutup, kirim `Cache-Control: no-cache` untuk berkas game, dan sajikan MP3 dan MP4 dengan permintaan rentang dan tanpa gzip. Langkah rinci untuk nginx, Apache/LiteSpeed, dan Caddy, beserta skrip pemeriksa berkas setelah unggah, ada di [DEPLOY.md](DEPLOY.md) (berbahasa Inggris, dari proyek asal). `.htaccess` untuk Apache/LiteSpeed sudah disertakan.

## Kredit dan lisensi

- **Berbasis AETHER CLASH oleh Bang Tutorial** ([repo asli](https://github.com/bangtutorial/aether-clash), [tutorial YouTube](https://www.youtube.com/watch?v=UN_0bNC2wTU)): kerangka mesin, sistem menu, layar loading, pengumuman, kontrol sentuh, dan panduan di folder `guide/` berasal dari karya itu. Game asalnya dibuat langkah demi langkah di YouTube (berbahasa Indonesia).
- **Visual awal** dibuat dengan Higgsfield (GPT Image); **suara dan pengumuman** memakai suara ElevenLabs lewat Higgsfield; **musik latar** "Midday Showdown" dibuat dengan [Suno](https://suno.com).
- **Tipografi**: [Rajdhani](https://fonts.google.com/specimen/Rajdhani) oleh Indian Type Foundry, lisensi SIL Open Font License (lihat `assets/fonts/OFL.txt`).
- **Kode** (HTML, CSS, JavaScript) berlisensi [MIT](LICENSE).
- **Aset bawaan** (karakter, sprite, ilustrasi, efek, video, suara, musik latar, tangkapan layar, dan dokumen `guide/`) berlisensi [CC BY-NC 4.0](LICENSE-ASSETS.md): bebas dibagikan dan diadaptasi dengan menyebut sumber, tetapi **tidak untuk penggunaan komersial**.
- Pengecualian: font Rajdhani tetap di bawah SIL Open Font License. Lihat [LICENSE-ASSETS.md](LICENSE-ASSETS.md).
- Semua karakter di Konoha Fighting adalah karikatur untuk hiburan, bukan pernyataan tentang orang sebenarnya.