# PRD — CABLE CONNECT TOUCHSCREEN
> **Tagline:** *CONNECT • THINK • REPAIR • RACE*  
> *(Colok Tepat. Perbaiki Cepat. Kuasai Koneksi!)*

---

## 1. Ringkasan Produk
**CABLE CONNECT** adalah permainan edukasi interaktif berbasis web tentang kabel, konektor, dan port perangkat keras komputer. Berbeda dari kuis teks biasa, pemain benar-benar melakukan simulasi fisik digital: **menyentuh, menyeret (*drag & drop*), memasang (*snap & connect*), dan memvalidasi koneksi kabel ke port perangkat yang tepat**.

Game ini dirancang untuk **1 hingga 4 pemain pada satu layar sentuh besar (*Interactive Flat Panel / Smart Board 55–86 inci*)**, dengan fokus utama kompetisi balapan 2–4 pemain secara simultan.

---

## 2. Target Pengguna & Spesifikasi Perangkat
* **Target Pengguna**: Siswa SMK TKJ / TJKT / RPL, siswa SMP/SMA kelas Informatika, teknisi komputer pemula, dan peserta praktikum perakitan PC.
* **Perangkat Layar**: Interactive Flat Panel (IFP), Smart Board, atau Monitor Touchscreen 55–86 inci.
* **Orientasi Layar**: Landscape 16:9 (1280×720, 1366×768, 1920×1080 Full HD, hingga 3840×2160 4K).
* **Multi-Touch Native**: Multi-pointer simultan tanpa interupsi antar pemain.

---

## 3. Core Gameplay Loop
```text
OBSERVE → IDENTIFY → TOUCH → DRAG CABLE → SMART SNAP → CONNECT → SCORE → COMBO → NEXT LEVEL → RACE → FINISH
```
1. Pemain mengamati perangkat target (misal: Monitor, Router, PC Backplate, SSD, Speaker).
2. Pemain membaca kebutuhan koneksi dan mengenali jenis port pada perangkat.
3. Pemain menyentuh dan menyeret (*drag*) konektor kabel yang sesuai (misal: HDMI, DisplayPort, VGA, USB-C, RJ-45 LAN, SATA, Power AC).
4. Saat konektor mendekati port yang kompatibel, sistem memberikan efek **Smart Snap** & cahaya magnetik.
5. Saat dilepas (*release*):
   * **Benar**: Kabel terkunci dengan animasi mekanik & partikel, perolehan +100 XP + Speed Bonus + Combo Streak, penjelasan edukatif tampil, dan avatar maju di lintasan balap.
   * **Salah**: Kabel berguncang (*shake*), memantul kembali ke dok awal, penalti nilai diterapkan, dan combo direset.

---

## 4. Multi-Touch & Anti-Interferensi Antar Pemain
* Menggunakan standar modern **Pointer Events** (`pointerId` tracking).
* Setiap pemain memiliki area interaksi (*interaction zone*) tersendiri.
* Player 1 dapat menyeret kabel HDMI pada saat yang bersamaan dengan Player 2 yang sedang menyeret kabel LAN, tanpa saling mengganggu touch state masing-masing.
* Dilengkapi dukungan **Tap-to-Connect** sebagai alternatif drag untuk fleksibilitas sentuhan.

---

## 5. Layout Layar Sentuh (Landscape 16:9)
* **Header Bar**:
  * Lintasan balap bersama (*Shared Race Track*) dengan progres 0–100%.
  * Kontrol audio & tombol keluar.
* **Arena Pemain**:
  * **2 Pemain**: Split screen (Player 1 Kiri, Player 2 Kanan).
  * **3 Pemain**: 3 Kolom simetris.
  * **4 Pemain**: Grid 2×2 (masing-masing sudut memiliki dok kabel dan port sendiri).
* **Komponen Panel Pemain**:
  1. *Player Header*: Avatar, nama pemain, XP, combo streak, timer bar.
  2. *Device Target Zone*: Foto perangkat asli, kotak soket port target yang menyala (*glowing target zone*).
  3. *Cable Dock*: Pilihan kabel dengan visual konektor nyata dan kabel lentur dinamis (*Bezier curve wire*).
  4. *Banner Edukatif*: Penjelasan fungsi kabel setelah berhasil terkoneksi.

---

## 6. Pengetahuan Kabel & Port yang Diajarkan
1. **Display**: HDMI, DisplayPort (DP), VGA (D-Sub 15-pin).
2. **Peripheral & Data**: USB Type-A, USB Type-C.
3. **Networking**: RJ-45 Ethernet / LAN UTP.
4. **Internal Storage**: Kabel Data SATA (Serial ATA).
5. **Power**: Kabel Power AC C13 (Stopkontak PC & Monitor).
6. **Audio**: Jack Audio 3.5mm Stereo TRS.

---

## 7. Sistem Skor, Combo Streak, & Penalti
* **Koneksi Berhasil**:
  * `+100 XP` (Base XP).
  * `+0 s/d +50 XP` (*Speed Bonus* sesuai sisa waktu ronde).
* **Combo Streak (Dapat Dikonfigurasi)**:
  * `ON`: Sukses berturut-turut memicu pengali (x2: +20 XP, x3: +40 XP, x4: +70 XP, x5+: +100 XP).
  * `OFF`: Skor datar tanpa pengali.
* **Penalti Salah Pasang (Dapat Dikonfigurasi)**:
  * Pilihan: `0 XP` (bebas penalti), `-15 XP`, `-25 XP` (standar), atau `-50 XP` (hardcore).
  * Menyeret kabel ke port yang salah mereset combo ke 0.

---

## 8. Pengaturan Permainan (Setup Screen)
Sebelum pertandingan dimulai, guru atau operator dapat mengatur:
1. **Jumlah Teknisi (Pemain)**: 2 Pemain (Split L-R), 3 Pemain (3 Kolom), atau 4 Pemain (Grid 2×2).
2. **Target Level Puzzle**: 5 Level (Sprint Kilat), 10 Level (Standar Demo), 15 Level (Tantangan), atau 20 Level (Grand Prix).
3. **Durasi Waktu per Level**: 5 Detik (Kilat ⚡), 10 Detik (Standar ★), 15 Detik (Santai 🍃), atau 20 Detik (Latihan 🎯).
4. **Sistem Combo Streak**: AKTIF: ON 🔥 (Bonus x2 s/d x5+) vs NONAKTIF: OFF ❌ (Skor Datar).
5. **Penalti Salah Colok**: 0 XP, -15 XP, -25 XP (Standar), atau -50 XP (Hardcore).
6. **Fitur Audio & Efek**: Toggle Sound ON/OFF dan Efek Partikel ON/OFF.
7. **Identitas Teknisi**: Kustomisasi nama pemain (P1 s/d P4).

---

## 9. Struktur Direktori Mandiri
```text
cable-connect/
├── PRD.md                       # Dokumen spesifikasi teknis lengkap game ini
├── index.html                   # Entry point aplikasi game
├── css/
│   └── game.css                 # Styling arcade touchscreen & kabel fleksibel
├── js/
│   ├── levels.js                # Bank 24 level puzzle kabel & LevelManager (Hybrid API + Offline)
│   ├── touch.js                 # Multi-pointer drag & drop & smart snap engine
│   ├── timer.js                 # Timer presisi tinggi per-pemain
│   ├── scoring.js               # Kalkulasi skor, combo, penalti
│   ├── sound.js                 # Synthesizer audio Web Audio API offline
│   ├── animation.js             # Engine partikel confetti & visual snap
│   ├── player.js                # Controller panel dan interaksi per-pemain
│   └── game.js                  # Engine utama game flow, race, & API match sync
└── assets/
    ├── cables/                  # 9 Foto asli kabel komputer resolusi tinggi
    ├── devices/                 # 10 Foto perangkat target nyata
    └── avatars/                 # 4 Karakter racer SVG (P1 s/d P4)
```

---

## 10. Integrasi Laravel 13, MySQL 8.4, & CMS Input Level
Game terintegrasi penuh dengan ekosistem Laravel & MySQL platform:
* **Database Table**: `cable_levels` menyimpan daftar soal puzzle (nama perangkat, gambar target, jenis port, 4 kabel dok, kunci jawaban, dan penjelasan edukatif).
* **REST API Endpoints**:
  * `GET /api/cable-levels`: Mengambil seluruh koleksi level dari MySQL secara dinamis.
  * `POST /api/cable-levels`: Menambahkan puzzle level baru dari antarmuka CMS.
  * `DELETE /api/cable-levels/{id}`: Menghapus puzzle level.
  * `POST /api/match/finish`: Menyimpan statistik pertandingan balap kabel.
* **Input Interface / CMS**: `/manage` (Tab Cable Connect) untuk menambah puzzle baru, memilih foto target perangkat, menentukan port target, menyusun 4 kabel dok interaktif, serta live preview instan.
* **Offline-Ready Resilience**: Jika server web atau MySQL tidak aktif, game otomatis beralih ke cache lokal 24 puzzle bawaan tanpa hambatan (*zero downtime*).