System Requirements Document for scenic-buatkan

1. Introduction

scenic-buatkan adalah aplikasi game perang (war game) yang dirancang untuk dimainkan sebagai pengalaman bermain game yang bagus dan seru. Produk ini menempatkan pemain langsung ke dalam pertempuran mainan bergaya toy-box — tank, jip, karung pasir, dan pohon palem low-poly — bukan pertempuran militer yang kelam dan realistis.

Maksud produk (source-derived):

• Membuat aplikasi game perang yang bagus dan seru dimainkan.
• Game ditujukan untuk dimainkan oleh pemain sebagai pengalaman bermain game.

Audiens: Pemain kasual yang ingin hiburan langsung dan heroik dalam sesi pendek, terutama di ponsel. Nada emosionalnya adalah playful adrenaline — kegembiraan bertempur mainan, bukan kekerasan grafis.

Batasan cakupan yang jelas: Tidak ada fotografi militer realistis, tidak ada gore, tidak ada desaturasi grimdark. Tidak ada warna biru–indigo di mana pun. Tidak ada template SaaS indigo/biru-putih.

2. System Overview

scenic-buatkan adalah game perang berbasis web yang dapat dimainkan langsung di browser. Pemain memasuki titik masuk anonim, memulai pertempuran, mengendalikan aksi tempur mereka melalui HUD mengambang, dan menerima hasil akhir berupa kemenangan, kekalahan, atau skor.

Aktor:

• Pemain — satu-satunya persona aktif manusia. Memulai permainan, bertempur dalam sesi, dan mencapai hasil.

Perilaku yang diterima:

• Titik masuk anonim yang memperkenalkan game perang dan menyediakan akses untuk memulai permainan.
• Layar utama untuk memulai sesi dan mengendalikan aksi tempur pemain.
• Layar hasil akhir untuk menampilkan kemenangan, kekalahan, atau skor setelah sesi selesai.

Kepemilikan: Ketiga permukaan (Landing, Game, Results) dimiliki oleh aplikasi sebagai halaman kustom. Tidak ada identitas aplikasi yang diperlukan — akses ke semua halaman adalah none (anonim).

Pengecualian sempit: Tidak ada akun, login, atau manajemen pengguna. Tidak ada mode multipemain daring. Tidak ada pembelian dalam aplikasi. Tidak ada papan peringkat global.

2a. Product Interpretation and Delivery Boundary

Pengiriman saat ini: Aplikasi web yang dapat dimainkan langsung di browser tanpa instalasi atau akun. Pemain membuka Landing, menekan tombol mulai, bermain di Game, dan melihat hasil di Results.

Kepemilikan akses: Semua halaman dapat diakses secara anonim. Tidak ada identitas aplikasi yang diperlukan karena tidak ada keadaan pemain yang harus dimiliki secara pribadi, dilanjutkan, atau diikat ke peserta tertentu. Setiap sesi permainan berdiri sendiri.

Batas saat ini vs. masa depan: Semua perilaku yang dijelaskan dalam dokumen ini adalah untuk pengiriman saat ini. Tidak ada fitur masa depan yang dinyatakan dalam sumber.

2b. Source Content Inventory

Tidak ada direktif referensi content_source yang diberikan. Bagian ini dihilangkan.

2c. Page Content and Component Coverage

Landing

Informasi/keadaan:

• Judul besar "PERANG MAINAN" dalam Fredoka SemiBold, flush-left, 56px mobile hingga 120px desktop, dengan text-shadow krem 2px.
• Diorama medan perang gurun low-poly WebGL sebagai latar belakang penuh: tanah krem membulat, tank pemain coral di latar depan kanan bawah, dua tank musuh teal di punggung bukit kiri atas.
• Kamera pada sudut tentara mainan 35°, perlahan mengorbit 8° ke kiri dan kanan.
• Tank coral diam dengan ayunan turret lambat dan goyangan suspensi halus.

Aksi utama:

• Tombol pil coral "MULAI PERTEMPURAN" yang dipasang di kiri bawah, 24px dari tepi, dengan pegas fisika saat ditekan (memampat 4px, memantul kembali dalam 320ms).

Aksi pendukung:

• Tidak ada.

Entitas domain:

• Sesi permainan (belum dimulai).

Tanggung jawab komponen:

• Kanvas WebGL/R3F: merender diorama medan perang low-poly dengan pencahayaan arah lembut dan flat shading.
• Tipografi hero: menampilkan judul "PERANG MAINAN" di atas area langit diorama.
• Tombol CTA: memulai transisi ke halaman Game.

Keadaan:

• Memuat: Kanvas WebGL menampilkan latar belakang krem solid hingga adegan 3D siap.
• Kosong: Tidak berlaku — hero selalu menampilkan diorama.
• Sukses: Diorama dirender, judul dan CTA terlihat, tank diam beranimasi.
• Error: Jika WebGL tidak tersedia, tampilkan pose statis diorama (gambar low-poly statis) dengan judul dan CTA tetap berfungsi.
• Pemulihan: Pemain dapat menekan CTA kapan saja setelah halaman dimuat.

Game

Informasi/keadaan:

• Area bermain layar penuh dengan HUD mengambang.
• Panel HUD kiri atas: kesehatan dan amunisi.
• Panel HUD kanan atas: minimap melingkar.
• Panel HUD kanan bawah: busur tombol aksi yang dapat dijangkau ibu jari.
• Kamera mengikuti pemain dengan ease 200ms.

Aksi utama:

• Mengendalikan tank pemain (gerakan, membidik, menembak).
• Tombol aksi: menembak, bergerak, dan aksi tempur lainnya sesuai busur ibu jari.

Aksi pendukung:

• Melihat kesehatan dan amunisi di HUD.
• Melihat posisi musuh di minimap.

Entitas domain:

• Tank pemain (kesehatan, amunisi, posisi).
• Tank musuh (posisi, status).
• Proyektil (busur dengan gravitasi).
• Ledakan (pop sprite 8 frame).

Tanggung jawab komponen:

• Kanvas WebGL/R3F: merender medan perang low-poly, tank, proyektil, dan ledakan.
• Panel HUD kesehatan/amunisi: menampilkan nilai numerik dengan Fredoka.
• Minimap melingkar: menampilkan posisi relatif pemain dan musuh.
• Busur tombol aksi: menerima input sentuh/klik untuk aksi tempur.
• Kamera: mengikuti pemain dengan ease 200ms.

Keadaan:

• Memuat: Area bermain menampilkan latar krem dengan indikator memuat hingga aset 3D siap.
• Kosong: Tidak berlaku — sesi selalu dimulai dengan tank pemain dan musuh.
• Sukses: Pemain dapat mengendalikan tank, menembak, dan menerima umpan balik visual (proyektil, ledakan, perubahan kesehatan).
• Error: Jika sesi gagal dimuat, tampilkan pesan kesalahan dan tombol untuk kembali ke Landing.
• Pemulihan: Pemain dapat memulai ulang sesi dari Landing jika terjadi kesalahan.

Results

Informasi/keadaan:

• Blok skor besar di tengah (Fredoka, 96px) di atas vignette kemenangan atau kekalahan low-poly.
• Status akhir: menang, kalah, atau skor.

Aksi utama:

• Tombol pil "MAIN LAGI" untuk memulai sesi baru.
• Tautan teks "KEMBALI" untuk kembali ke Landing.

Aksi pendukung:

• Tidak ada.

Entitas domain:

• Hasil sesi (menang/kalah/skor).

Tanggung jawab komponen:

• Blok skor: menampilkan angka skor atau status menang/kalah dalam Fredoka 96px.
• Vignette low-poly: merender adegan kemenangan atau kekalahan.
• Tombol "MAIN LAGI": memulai sesi baru di halaman Game.
• Tautan "KEMBALI": menavigasi ke Landing.

Keadaan:

• Memuat: Menampilkan latar krem solid hingga vignette siap.
• Kosong: Tidak berlaku — hasil selalu ada setelah sesi selesai.
• Sukses: Skor dan status ditampilkan, tombol dan tautan berfungsi.
• Error: Jika vignette gagal dirender, tampilkan blok skor di atas latar krem solid.
• Pemulihan: Pemain dapat menekan "MAIN LAGI" atau "KEMBALI" kapan saja.

3. Functional Requirements

FR-01 — Memulai permainan dari Landing

• Sebagai Pemain, saya harus dapat membuka Landing dan menekan tombol "MULAI PERTEMPURAN" untuk memulai sesi permainan.
• Provenance: explicit (Membuat aplikasi game perang yang bagus dan seru dimainkan).
• Trigger/input: Pemain membuka Landing dan menekan tombol pil coral "MULAI PERTEMPURAN".
• Hasil yang dapat diamati: Transisi ke halaman Game; sesi permainan dimulai.
• Keadaan akses: Anonim (tidak perlu akun).
• Kegagalan/pemulihan: Jika WebGL tidak tersedia, Landing menampilkan pose statis diorama dan CTA tetap berfungsi.
• Kelanjutan: Pemain berada di halaman Game dan dapat mengendalikan tank.

FR-02 — Mengendalikan aksi tempur di Game

• Sebagai Pemain, saya harus dapat mengendalikan tank saya dan bertempur melawan tank musuh di halaman Game.
• Provenance: explicit (Game ditujukan untuk dimainkan oleh pemain sebagai pengalaman bermain game).
• Trigger/input: Pemain menggunakan tombol aksi di busur ibu jari untuk bergerak, membidik, dan menembak.
• Hasil yang dapat diamati: Tank bergerak, proyektil melengkung dengan gravitasi, ledakan muncul sebagai pop sprite 8 frame, kesehatan dan amunisi berubah di HUD.
• Keadaan akses: Anonim.
• Kegagalan/pemulihan: Jika sesi gagal dimuat, tampilkan pesan kesalahan dan tombol kembali ke Landing.
• Kelanjutan: Pemain terus bertempur hingga sesi selesai.

FR-03 — Melihat status tempur melalui HUD

• Sebagai Pemain, saya harus dapat melihat kesehatan, amunisi, dan posisi musuh melalui HUD mengambang selama pertempuran.
• Provenance: required_inference (diperlukan untuk membuat aksi tempur dapat digunakan).
• Trigger/input: HUD selalu terlihat selama sesi Game.
• Hasil yang dapat diamati: Panel kesehatan/amunisi kiri atas menampilkan nilai numerik; minimap melingkar kanan atas menampilkan posisi relatif; busur tombol aksi kanan bawah tersedia.
• Keadaan akses: Anonim.
• Kegagalan/pemulihan: Tidak berlaku — HUD adalah bagian dari halaman Game.
• Kelanjutan: Pemain menggunakan informasi HUD untuk mengambil keputusan tempur.

FR-04 — Menerima hasil akhir sesi

• Sebagai Pemain, saya harus dapat melihat hasil akhir sesi berupa kemenangan, kekalahan, atau skor di halaman Results.
• Provenance: explicit (Layar hasil akhir untuk menampilkan kemenangan, kekalahan, atau skor setelah sesi selesai).
• Trigger/input: Sesi permainan berakhir (menang atau kalah).
• Hasil yang dapat diamati: Blok skor besar (Fredoka, 96px) ditampilkan di tengah di atas vignette kemenangan atau kekalahan low-poly.
• Keadaan akses: Anonim.
• Kegagalan/pemulihan: Jika vignette gagal dirender, blok skor tetap ditampilkan di atas latar krem solid.
• Kelanjutan: Pemain dapat memilih untuk bermain lagi atau kembali.

FR-05 — Memulai sesi baru dari Results

• Sebagai Pemain, saya harus dapat menekan tombol "MAIN LAGI" di halaman Results untuk memulai sesi permainan baru.
• Provenance: required_inference (diperlukan untuk kelanjutan setelah sesi selesai).
• Trigger/input: Pemain menekan tombol pil "MAIN LAGI".
• Hasil yang dapat diamati: Transisi ke halaman Game; sesi baru dimulai.
• Keadaan akses: Anonim.
• Kegagalan/pemulihan: Jika sesi baru gagal dimuat, tampilkan pesan kesalahan dan tombol kembali ke Landing.
• Kelanjutan: Pemain berada di halaman Game dengan sesi baru.

FR-06 — Kembali ke Landing dari Results

• Sebagai Pemain, saya harus dapat menekan tautan teks "KEMBALI" di halaman Results untuk kembali ke Landing.
• Provenance: required_inference (diperlukan untuk navigasi keluar dari Results).
• Trigger/input: Pemain menekan tautan teks "KEMBALI".
• Hasil yang dapat diamati: Navigasi ke halaman Landing.
• Keadaan akses: Anonim.
• Kegagalan/pemulihan: Tidak berlaku — navigasi standar.
• Kelanjutan: Pemain berada di Landing dan dapat memulai pertempuran lagi.

4. User Personas

Pemain

Konteks produk: Pemain adalah pengguna utama yang ingin memainkan game perang yang bagus dan seru. Mereka bermain dalam sesi pendek, sering di ponsel, dan mengharapkan hiburan langsung tanpa hambatan.

Tujuan utama: Memulai permainan dengan cepat, bertempur dalam sesi yang memuaskan, dan mencapai hasil seperti menang atau skor tinggi.

Tanggung jawab yang diterima:

• Memulai permainan dari Landing.
• Bertempur dalam sesi permainan di Game.
• Mencapai hasil seperti menang atau skor tinggi di Results.

Input atau keputusan yang relevan:

• Menekan tombol "MULAI PERTEMPURAN" untuk memulai.
• Menggunakan tombol aksi di busur ibu jari untuk bergerak, membidik, dan menembak.
• Memutuskan kapan harus menyerang atau menghindar berdasarkan HUD.
• Memilih "MAIN LAGI" atau "KEMBALI" setelah sesi selesai.

Interaksi dengan peserta lain: Tidak ada peserta manusia lain. Pemain berinteraksi dengan sistem game (tank musuh, proyektil, ledakan) yang dikendalikan oleh aplikasi.

Keberhasilan yang dapat diamati: Sesi permainan yang lancar dan memuaskan, dengan umpan balik visual yang jelas (ledakan, perubahan kesehatan, skor akhir).

Yang membuat peran ini berbeda: Pemain adalah satu-satunya aktor manusia; pekerjaan mereka adalah bermain, bukan mengelola, mengonfigurasi, atau mengelola data. Semua interaksi berpusat pada aksi tempur dan hasil.

5. Core User Flows

Alur 1: Memulai dan Memainkan Pertempuran

1. Konteks awal: Pemain membuka aplikasi di browser ponsel atau desktop. Halaman Landing dimuat.
2. Aksi: Pemain melihat diorama medan perang gurun low-poly dengan judul "PERANG MAINAN" dan tombol pil coral "MULAI PERTEMPURAN" di kiri bawah.
3. Keputusan: Pemain menekan tombol "MULAI PERTEMPURAN".
4. Hasil yang dapat diamati: Transisi ke halaman Game. Area bermain layar penuh dimuat dengan HUD mengambang: kesehatan dan amunisi kiri atas, minimap melingkar kanan atas, busur tombol aksi kanan bawah.
5. Aksi: Pemain menggunakan tombol aksi untuk menggerakkan tank, membidik, dan menembak.
6. Hasil yang dapat diamati: Tank bergerak, proyektil melengkung dengan gravitasi, ledakan muncul sebagai pop sprite 8 frame, kesehatan dan amunisi berubah di HUD, kamera mengikuti pemain dengan ease 200ms.
7. Kelanjutan: Pemain terus bertempur hingga sesi selesai (menang atau kalah).

Alur 2: Melihat Hasil dan Bermain Lagi

1. Konteks awal: Sesi permainan di halaman Game berakhir.
2. Hasil yang dapat diamati: Transisi ke halaman Results. Blok skor besar (Fredoka, 96px) ditampilkan di tengah di atas vignette kemenangan atau kekalahan low-poly.
3. Keputusan: Pemain memilih untuk menekan tombol pil "MAIN LAGI" atau tautan teks "KEMBALI".
4. Jika "MAIN LAGI": Transisi ke halaman Game; sesi baru dimulai. Pemain kembali ke langkah 5 Alur 1.
5. Jika "KEMBALI": Navigasi ke halaman Landing. Pemain dapat memulai pertempuran lagi dari langkah 2 Alur 1.

Alur 3: Pemulihan dari Kegagalan Pemuatan

1. Konteks awal: Pemain membuka Landing atau memulai sesi Game.
2. Kegagalan: WebGL tidak tersedia atau sesi gagal dimuat.
3. Hasil yang dapat diamati (Landing): Pose statis diorama ditampilkan; judul dan CTA tetap berfungsi.
4. Hasil yang dapat diamati (Game): Pesan kesalahan ditampilkan dengan tombol kembali ke Landing.
5. Pemulihan: Pemain dapat menekan CTA di Landing atau tombol kembali untuk melanjutkan.

6. Visuals Colors and Theme

Muse: Bruno Simon — playable worlds, mainan fisika, warna toy-box cerah di atas latar terang, tipografi bulat dan berani.

Judul headline: "PERANG MAINAN"

Palet (mode terang)

Aturan warna: Tidak ada biru di mana pun. Blok warna datar dan percaya diri, bukan gradien.

Tipografi

• Judul: Fredoka SemiBold, tracking ketat (-0.02em), semua huruf besar untuk label HUD dan nama misi, huruf kapital di awal untuk headline.
• Body: Nunito Regular 18px dengan line-height 1.6.
• Label HUD: Nunito Bold 13px huruf besar dengan tracking 0.08em.
• Skala: 1.333 modular: 120/72/40/24/18/16.
• Kontras skala: Headline hero 56px mobile hingga 120px desktop.
• Angka: Fredoka dengan nuansa tabular melalui letter-spacing.

Bahasa Bentuk

• Blok dan kapsul membulat tebal.
• Tombol: pil penuh (border-radius: 999px).
• Kartu: radius 24px dengan bayangan offset lembut 4px dalam warna hangat.
• Panel HUD: persegi panjang membulat dengan radius 16px.
• Bentuk 3D low-poly: geometri bersegi, seperti mainan.
• Tidak ada sudut tajam kecuali pembatas garis hazard yang disengaja.

Tata Letak

• Alur satu kolom mobile-first yang menjadi tata letak dua kolom asimetris pada 1280px: adegan hero kiri (60%), kartu briefing misi kanan (40%).
• Gutter 24px di mobile, margin 64px di desktop.
• Halaman Game: area bermain layar penuh dengan HUD mengambang.
• Halaman Results: blok skor besar di tengah di atas vignette kemenangan atau kekalahan low-poly.

Citra

• Aset 3D low-poly saja: tank bersegi, jip, karung pasir, pohon palem, diorama pulau gurun atau desa reruntuhan.
• Dirender di Three.js dengan flat shading dan pencahayaan arah lembut, tanpa tekstur — warna berasal dari material vertex (coral, teal, mustard, krem, walnut).
• Ikon UI: piktogram membulat tebal dalam palet yang sama.
• Tidak ada fotografi, tidak ada citra militer realistis, tidak ada gore.

7. Signature Design Concept

Konsep: Diorama Perang Mainan yang Dapat Dimainkan

Halaman Landing adalah diorama medan perang gurun low-poly yang dirender secara real-time di WebGL. Ini bukan halaman dengan gambar latar — ini adalah adegan 3D yang hidup dan bernapas.

Komposisi:

• Tanah krem membulat sebagai dasar diorama.
• Tank pemain coral di latar depan kanan bawah, diam dengan ayunan turret lambat dan goyangan suspensi halus.
• Dua tank musuh teal di punggung bukit kiri atas.
• Kamera pada sudut tentara mainan 35°, perlahan mengorbit 8° ke kiri dan kanan.

Tipografi:

• Headline "PERANG MAINAN" dalam Fredoka SemiBold, flush-left, 56px mobile / 120px desktop, diletakkan di atas area langit diorama dengan text-shadow krem 2px untuk keterbacaan.
• Tidak ada tumpukan tengah, tidak ada blob gradien — adegan 3D adalah hero dan tipografi adalah keterangan di atasnya.

Aksi:

• Tombol pil coral "MULAI PERTEMPURAN" dipasang di kiri bawah, 24px dari tepi, dengan pegas fisika saat ditekan (memampat 4px, memantul kembali dalam 320ms).

Gerakan khas:

• Adegan 3D real-time sebagai hero dengan kamera mengorbit lambat dan tank diam yang mengayunkan turret — adegan adalah demo produk.
• Headline Fredoka besar yang tumpang tindih dengan langit adegan 3D.
• CTA pil coral dengan pegas fisika.

8. Interaction Model & Motion Direction

Interaction Model: Animated Motion Tempo: cinematic Hero Dimensionality: webgl

Landing Hero Motion Brief

Subjek fokus: Diorama medan perang gurun low-poly dengan tank pemain coral dan dua tank musuh teal.

Tesis input → transformasi → hasil:

• Input: Halaman Landing dimuat; pemain melihat adegan.
• Transformasi: Kamera perlahan mengorbit 8° ke kiri dan kanan; tank coral diam mengayunkan turret dan bergoyang halus pada suspensi.
• Hasil: Adegan terasa hidup dan dapat dimainkan; pemain terdorong untuk menekan "MULAI PERTEMPURAN".

Vokabulari gerakan:

• Orbit kamera lambat dan kontinu.
• Ayunan turret dan goyangan suspensi pada tank diam.
• Pegas fisika pada tombol: memampat 4px, memantul kembali dalam 320ms dengan cubic-bezier(0.34, 1.56, 0.64, 1).
• Kartu misi masuk dengan stagger 120ms saat scroll.

Bingkai pertama yang tersusun:

• Diorama terlihat penuh dengan tanah krem, tank coral di kanan bawah, tank teal di kiri atas.
• Headline "PERANG MAINAN" flush-left di atas langit.
• CTA "MULAI PERTEMPURAN" di kiri bawah.

Keadaan reduced-motion:

• Kamera berhenti mengorbit; adegan ditampilkan sebagai pose statis.
• Tank tidak beranimasi; turret dan suspensi dalam posisi diam.
• Tombol tidak memampat; perubahan keadaan instan.
• Semua konten tetap dapat dibaca dan diakses.

Landing Hero 3D Scene Brief — DIRECTION-DERIVED

Objek/scene: Diorama medan perang gurun low-poly yang dirender secara real-time di WebGL/R3F.

Elemen:

• Tanah krem membulat sebagai dasar.
• Tank pemain coral (latar depan kanan bawah) dengan turret yang dapat berayun.
• Dua tank musuh teal (punggung bukit kiri atas).
• Elemen lingkungan: karung pasir, pohon palem, bebatuan low-poly.

Pencahayaan: Pencahayaan arah lembut, flat shading, tanpa tekstur — warna dari material vertex.

Kamera: Sudut tentara mainan 35°, orbit lambat 8° ke kiri dan kanan.

Keadaan produk yang ditampilkan: Pertempuran mainan yang akan segera dimulai — tank pemain siap, musuh di kejauhan, medan perang terbentang.

9. Non-Functional Requirements

NFR-01 — Keterbacaan di semua viewport

• Provenance: explicit (Creative Direction).
• Constraint: Headline, wordmark, label, angka, teks kartu, dan kontrol tetap seluruhnya di dalam viewport dan kontainernya pada 375px, 768px, dan 1280px, membungkus atau menskalakan (misalnya font-size: clamp(...) dengan ukuran mobile-nya) agar pas.
• Rationale: Memastikan teks dan kontrol dapat dibaca dan digunakan di semua perangkat.

NFR-02 — Dukungan prefers-reduced-motion

• Provenance: explicit (Creative Direction).
• Constraint: Semua gerakan menghormati prefers-reduced-motion dengan beralih ke pose statis dan perubahan keadaan instan.
• Rationale: Aksesibilitas bagi pemain yang sensitif terhadap gerakan.

NFR-03 — Ketersediaan WebGL

• Provenance: required_inference.
• Constraint: Jika WebGL tidak tersedia, aplikasi menampilkan pose statis diorama dan tetap dapat dimainkan.
• Rationale: Memastikan game dapat diakses bahkan pada perangkat tanpa dukungan WebGL.

NFR-04 — Performa pemuatan

• Provenance: required_inference.
• Constraint: Aset 3D low-poly harus dioptimalkan untuk pemuatan cepat di perangkat mobile.
• Rationale: Pengalaman bermain yang lancar dan memuaskan.

NFR-05 — Tidak ada biru–indigo

• Provenance: explicit (Creative Direction).
• Constraint: Tidak ada warna biru–indigo (#0057FF, #2563EB, #6366F1 dan tetangganya) di mana pun.
• Rationale: Palet adalah coral, teal, mustard, krem, walnut.

NFR-06 — Tidak ada fotografi militer realistis atau gore

• Provenance: explicit (Creative Direction).
• Constraint: Tidak ada fotografi militer realistis, gore, atau desaturasi grimdark.
• Rationale: Ini adalah game perang mainan, bukan simulasi militer yang kelam.

10. Tech Stack

Frontend:

• React — untuk membangun antarmuka pengguna.
• Three.js / React Three Fiber (R3F) — untuk merender diorama medan perang low-poly 3D dan adegan permainan.
• Drei — untuk kontrol dan helper R3F.

Styling:

• CSS dengan font Fredoka dan Nunito (diimpor dari Google Fonts atau di-host sendiri).

Backend:

• Tidak ada backend yang diperlukan untuk pengiriman saat ini. Game berjalan sepenuhnya di browser.

Penyimpanan:

• Tidak ada penyimpanan persisten yang diperlukan. Setiap sesi berdiri sendiri.

Deployment:

• Aplikasi web statis yang dapat di-host di layanan hosting statis apa pun.

11. Assumptions and Constraints

Asumsi:

• A-01: Pemain memiliki browser modern yang mendukung WebGL. Jika tidak, pose statis ditampilkan.
• A-02: Pemain bermain dalam sesi pendek, sering di ponsel.
• A-03: Tidak ada identitas aplikasi yang diperlukan karena tidak ada keadaan pemain yang harus dimiliki secara pribadi atau dilanjutkan.
• A-04: Setiap sesi permainan berdiri sendiri; tidak ada penyimpanan skor atau riwayat antar sesi.

Batasan:

• C-01: Tidak ada akun, login, atau manajemen pengguna.
• C-02: Tidak ada mode multipemain daring.
• C-03: Tidak ada pembelian dalam aplikasi.
• C-04: Tidak ada papan peringkat global.
• C-05: Tidak ada fotografi militer realistis, gore, atau desaturasi grimdark.
• C-06: Tidak ada warna biru–indigo di mana pun.
• C-07: Tidak ada template SaaS indigo/biru-putih.
• C-08: Tidak ada gradien-blob hero atau panel glassmorphism.
• C-09: Tidak ada grid kartu hover-lift yang identik.
• C-10: Tidak ada tumpukan headline + subteks + tombol yang terpusat.
• C-11: Tidak ada sudut tajam pada elemen interaktif.

12. Glossary

Diorama: Adegan 3D low-poly yang dirender secara real-time, menampilkan medan perang gurun dengan tank dan elemen lingkungan.

HUD (Heads-Up Display): Panel mengambang di halaman Game yang menampilkan kesehatan, amunisi, minimap, dan tombol aksi.

Low-poly: Gaya grafis 3D dengan geometri bersegi dan jumlah poligon rendah, menyerupai mainan.

Pemain: Persona aktif manusia tunggal yang memainkan game perang.

Sesi: Satu putaran permainan dari mulai hingga selesai (menang atau kalah).

Toy-box: Gaya visual yang menyerupai mainan — warna cerah, bentuk membulat, geometri bersegi.

Vignette: Adegan 3D low-poly kecil yang ditampilkan di halaman Results untuk menggambarkan kemenangan atau kekalahan.

WebGL: Teknologi rendering 3D real-time di browser yang digunakan untuk menampilkan diorama dan adegan permainan.