BABA_YAGA/BABA_YAGA_Updater/sections/05_networking.md

<div id="networking"></div>

## <img src="https://api.iconify.design/lucide/globe-2.svg?color=%2333CCFF" width="28" height="28" style="vertical-align: middle;"> Kiến trúc Netcode (Deterministic Networking)

<div align="center">
  <img src="https://img.shields.io/badge/ENGINE-PHOTON_FUSION_2.0-0055FF?style=for-the-badge&logo=purescript&logoColor=white" />
  <img src="https://img.shields.io/badge/TOPOLOGY-CLIENT_HOSTED_SERVER-FF3333?style=for-the-badge&logo=server&logoColor=white" />
  <img src="https://img.shields.io/badge/TICKRATE-60_Hz-00FF55?style=for-the-badge&logo=activity&logoColor=black" />
</div>

> Tựa game với nhịp độ sinh tồn căng thẳng không có chỗ cho sự sai lệch (Desync). **BABA_YAGA** vận hành trên kiến trúc **State Sync (Đồng bộ Trạng thái)** kết hợp quy trình **Dự đoán phía Client (Client-Side Prediction)** và **Bù trừ Độ trễ (Lag Compensation)**, mang lại cảm giác phản hồi tức thì "Zero-Latency" ngay cả ở mức Ping 100ms+.

<br>

<table width="100%" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border: none;">
  <tr>
    <td width="50%" style="padding: 15px; background: rgba(51,204,255,0.05); border-left: 3px solid #33CCFF; border-bottom: 1px solid rgba(255,255,255,0.05);">
      <strong style="color: #33CCFF;"><img src="https://api.iconify.design/lucide/fast-forward.svg?color=%2333CCFF" width="18" style="vertical-align: middle;"> Client-Side Prediction (Dự đoán cục bộ)</strong><br>
      <p style="font-size: 13px; color: #AAA; margin-top: 8px;">Người chơi nội bộ (Local Player) thực thi các lệnh di chuyển, lướt, rọi đèn pin <b>ngay lập tức</b> mà không cần đợi Server cho phép. Tạo cảm giác điều khiển mượt mà như game Offline.</p>
    </td>
    <td width="50%" style="padding: 15px; background: rgba(255,51,51,0.05); border-left: 3px solid #FF3333; border-bottom: 1px solid rgba(255,255,255,0.05);">
      <strong style="color: #FF3333;"><img src="https://api.iconify.design/lucide/shield-check.svg?color=%23FF3333" width="18" style="vertical-align: middle;"> Server Reconciliation (Thuật toán Đối chiếu)</strong><br>
      <p style="font-size: 13px; color: #AAA; margin-top: 8px;">Máy chủ vẫn nắm quyền tối thượng (Authority). Nếu Client dự đoán sai (do va chạm với bẫy hoặc bị kẹt), Server sẽ ép Client "Rollback" về trạng thái chuẩn trong tích tắc (Snap Correction).</p>
    </td>
  </tr>
</table>

<br>

### <img src="https://api.iconify.design/lucide/satellite-dish.svg?color=%23E0E0E0" width="22" height="22" style="vertical-align: middle;"> Network Data Flow (Luồng Đồng bộ Hóa)

> Sơ đồ biểu diễn vòng đời của một **Network Tick** từ khi người chơi nhấn phím đến khi hình ảnh được kết xuất (Render) trên màn hình của những người chơi khác.

```mermaid
sequenceDiagram
    autonumber

    box rgba(51, 204, 255, 0.05) "⚡ LOCAL ENVIRONMENT (Client Auth)"
        participant IR as "🖱️ Input"
        participant CP as "💻 Local Player"
    end

    box rgba(255, 51, 51, 0.05) "👑 SERVER ENVIRONMENT (State Auth)"
        participant NT as "📡 Network Layer"
        participant S as "🖥️ Server Tick"
    end

    box rgba(255, 215, 0, 0.05) "👁️ REMOTE OBSERVERS"
        participant RP as "👥 Proxies"
    end

    Note over IR,CP: [PHASE 1] DATA ACQUISITION
    IR->>CP: OnMove / OnAbility (Raw Input)
    CP->>CP: 📦 Pack NetworkInputStruct

    Note over CP: [PHASE 2] FORWARD PREDICTION
    CP->>CP: ⚡ Run Local Kinematics (Tick N)
    CP->>NT: 📤 Transmit Input Payload

    rect rgba(255, 51, 51, 0.1)
        Note over NT,S: [PHASE 3] SERVER VALIDATION (Simulation)
        NT->>S: Deliver UDP Packet
        S->>S: 🛡️ Validate Rules & Apply Physics
        S-->>NT: 📢 Broadcast State Snapshot (Tick N)
    end

    Note over NT,CP: [PHASE 4] RECONCILIATION PROTOCOL
    NT-->>CP: State Snapshot (Global Truth)
    CP->>CP: ⚖️ Check Desync (Threshold)
    CP->>CP: 🔄 Snap Pos & Resimulate if Error

    Note over NT,RP: [PHASE 5] PROXY INTERPOLATION
    NT-->>RP: State Snapshot
    RP->>RP: 〰️ Lerp Position / Rotation Smoothly

    Note over CP,RP: [PHASE 6] VISUAL RENDERING
    CP->>CP: 🎥 Update Local VFX / Camera Shake
    RP->>RP: 👻 Update Animator & Mesh Transforms
```
<br>
<div align="center">
<img src="https://api.iconify.design/lucide/shield-alert.svg?color=%23555555" width="16" style="vertical-align: middle;">
<small style="color: #888;"><i>Tất cả Logic Va chạm (Collision) và Phát hiện Âm thanh (Noise Detection) được phân tách hoàn toàn khỏi luồng Render đồ họa, ngăn chặn hiện tượng rách hình ảnh (Tearing) do lag mạng.</i></small>
</div>
```