Complete Multiplayer Flow

🎮 Complete Multiplayer Flow

Halaman ini menjelaskan alur lengkap sistem multiplayer Rapid Texter GUI dari awal sampai akhir, mencakup semua fase permainan.

---

📋 Daftar Isi

• Gambaran Umum
• Diagram Alur Lengkap
• Fase Entry
• Fase Lobby
• Fase Game
• Fase Results
• Alur Tambahan

---

🎯 Gambaran Umum

Sistem multiplayer Rapid Texter memiliki beberapa fase utama:

┌──────────────┐
│    ENTRY     │  ← User memilih Create/Join Room
└──────┬───────┘
       ▼
┌──────────────┐
│    LOBBY     │  ← Menunggu pemain, siap untuk mulai
└──────┬───────┘
       ▼
┌──────────────┐
│     GAME     │  ← Race typing berlangsung
└──────┬───────┘
       ▼
┌──────────────┐
│   RESULTS    │  ← Tampilkan hasil dan ranking
└──────┬───────┘
       ▼
   Play Again?
    ↙      ↘
  Ya       Tidak
   ↓         ↓
LOBBY      EXIT

---

📊 Diagram Alur Lengkap

Diagram Mermaid

flowchart LR
    subgraph ENTRY [" "]
        A([Start: Menu Multiplayer])
        B[/Input: Pilih Create atau Join/]
        C{Create Room?}
    end
    
    subgraph CREATE_FLOW [" "]
        D[Create Room]
        E[Start TCP Server]
        F[Start UDP Broadcast]
    end
    
    subgraph JOIN_FLOW [" "]
        G[Scan for Rooms]
        H[Select Room]
        I[Connect via TCP]
        J[Handshake HELLO]
        K[Build Full Mesh]
    end
    
    subgraph LOBBY [" "]
        L[Lobby State]
        M{Host klik Start?}
        N[Ready Check]
        O[Countdown 3s]
    end
    
    subgraph GAME [" "]
        P[Race Gameplay]
        Q[Progress Updates setiap 50ms]
        R{Selesai mengetik?}
        S[Kirim FINISH]
        T{Semua pemain selesai?}
    end
    
    subgraph RESULTS [" "]
        U[Calculate Rankings]
        V[Show Results]
        W{Play Again?}
    end
    
    subgraph EXIT [" "]
        X([End: Kembali ke menu])
    end
    
    A --> B
    B --> C
    C -->|Ya| D
    D --> E
    E --> F
    F --> L
    C -->|Tidak| G
    G --> H
    H --> I
    I --> J
    J --> K
    K --> L
    L --> M
    M -->|Ya| N
    N --> O
    O --> P
    M -->|Tidak| L
    P --> Q
    Q --> R
    R -->|Ya| S
    R -->|Tidak| P
    S --> T
    T -->|Tidak| P
    T -->|Ya| U
    U --> V
    V --> W
    W -->|Ya| L
    W -->|Tidak| X

Loading

---

🚪 Fase Entry

Menu Multiplayer

User memiliki dua opsi:

Opsi	Aksi
Create Room	Menjadi host dan membuat room baru
Join Room	Menjadi guest dan bergabung ke room yang ada

Create Room Path

1. Create Room
2. Start TCP Server (port 52765)
3. Start UDP Broadcast (port 52766)
4. → Masuk ke Lobby

📖 Detail: Create-Room-Flow

Join Room Path

1. Scan for Rooms (UDP port 52766)
2. Select Room dari daftar
3. Connect via TCP (port 52765)
4. Handshake HELLO
5. Build Full Mesh
6. → Masuk ke Lobby

📖 Detail: Join-Room-Flow dan Full-Mesh-Flow

---

🏠 Fase Lobby

Lobby State

Di lobby, pemain dapat:

• Melihat daftar pemain yang sudah bergabung
• Menunggu pemain lain
• (Host) Memilih teks untuk race
• (Host) Memulai game

Ready Check

Ketika host memulai game:

1. Host klik "Start Game"
2. Broadcast READY_CHECK ke semua peer
3. Setiap peer mengirim READY_RESPONSE
4. Tunggu sampai semua peer ready (timeout 5 detik)
5. Mulai countdown

Countdown

1. Broadcast COUNTDOWN dengan nilai 3
2. Tampilkan countdown di semua client: 3... 2... 1...
3. Broadcast GAME_START
4. Race dimulai!

---

🏃 Fase Game

Race Gameplay

Loop:
    1. User mengetik karakter
    2. Hitung: position, wpm, accuracy, errors
    3. Update progress lokal
    4. Setiap 50ms, broadcast PROGRESS_UPDATE ke semua peer
    5. Terima PROGRESS_UPDATE dari peer, update UI
    6. Jika semua karakter diketik → kirim FINISH

Progress Update Packet

{
    "type": "PROGRESS_UPDATE",
    "uuid": "player-uuid",
    "position": 45,
    "wpm": 78,
    "accuracy": 95.5,
    "errors": 3
}

Finish Packet

{
    "type": "FINISH",
    "uuid": "player-uuid",
    "wpm": 82,
    "accuracy": 97.2,
    "errors": 2,
    "duration": 45.6
}

---

🏆 Fase Results

Calculate Rankings

Authority (biasanya host) menghitung ranking:

Sorting criteria (prioritas tinggi ke rendah):
1. WPM (descending) - lebih tinggi lebih baik
2. Accuracy (descending) - lebih tinggi lebih baik
3. Errors (ascending) - lebih sedikit lebih baik
4. Duration (ascending) - lebih cepat lebih baik

Race Results Packet

{
    "type": "RACE_RESULTS",
    "rankings": [
        {
            "position": 1,
            "uuid": "player-1-uuid",
            "name": "Player1",
            "wpm": 92,
            "accuracy": 98.5,
            "errors": 1
        },
        {
            "position": 2,
            "uuid": "player-2-uuid",
            "name": "Player2",
            "wpm": 85,
            "accuracy": 96.0,
            "errors": 3
        }
    ]
}

Display Results

• Tampilkan ranking dengan posisi 1st, 2nd, 3rd, dst
• Simpan ke MultiplayerHistoryManager
• Tampilkan halaman RaceResultsPage

---

🔄 Alur Tambahan

Play Again Flow

flowchart LR
    A[Race Selesai] --> B{Host?}
    B -->|Ya| C[Klik Play Again]
    C --> D[Broadcast PLAY_AGAIN_INVITE]
    D --> E[Kembali ke Lobby]
    
    B -->|Tidak| F[Terima PLAY_AGAIN_INVITE]
    F --> G[Tampilkan Dialog]
    G --> H{Accept?}
    H -->|Ya| I[Kirim PLAY_AGAIN_RESPONSE accepted]
    I --> J[Kembali ke Lobby]
    H -->|Tidak| K[Kirim PLAY_AGAIN_RESPONSE declined]
    K --> L[Keluar dari Room]

Loading

Player Leave Flow

flowchart LR
    A[Disconnect Detected] --> B{Dalam Game?}
    B -->|Ya| C[Tandai hasLeft]
    C --> D[Pertahankan Data]
    D --> E{Semua Selesai?}
    E -->|Ya| F[Lanjut ke Results]
    E -->|Tidak| G[Lanjutkan Game]
    
    B -->|Tidak| H[Hapus dari Daftar]
    H --> I[Broadcast PLAYER_LEFT]
    
    F --> J{Host yang Leave?}
    J -->|Ya| K[Migrasi Authority]
    K --> L[UUID Terendah jadi Authority]
    J -->|Tidak| M[Selesai]

Loading

---

📊 State Diagram

┌─────────────────────────────────────────────────────────┐
│                     DISCONNECTED                        │
└────────────────────────┬────────────────────────────────┘
                         │ Create/Join Room
                         ▼
┌─────────────────────────────────────────────────────────┐
│                       LOBBY                             │
│  isInLobby = true, isInGame = false                     │
└────────────────────────┬────────────────────────────────┘
                         │ Start Game
                         ▼
┌─────────────────────────────────────────────────────────┐
│                      IN_GAME                            │
│  isInLobby = false, isInGame = true                     │
└────────────────────────┬────────────────────────────────┘
                         │ All Players Finish
                         ▼
┌─────────────────────────────────────────────────────────┐
│                      RESULTS                            │
│  isInLobby = false, isInGame = false                    │
└─────────────────────────────────────────────────────────┘
         │                           │
   Play Again                    Leave Room
         │                           │
         ▼                           ▼
      LOBBY                   DISCONNECTED

---

📚 Dokumentasi Terkait

Tip

Dokumentasi Lebih Lengkap

Untuk dokumentasi lebih lengkap tentang Rapid Texter termasuk mode single player, cara bermain, campaign mode, dan fitur lainnya, silakan kunjungi:

Wiki Rapid Texter (TUI)

---

🔗 Navigasi

◀ Full Mesh Flow • Home