Mermaid-Sequence-Diagram-for-Networked-Games.md

Mermaid Sequence Diagram for Agar.io-Like

You can find the current version of the sketch that this is based on here.

sequenceDiagram
    participant A as Player A (Josh)
    participant S as Echo Server<br/>(Room 2728038)
    participant B as Player B
    participant C as Player C

    Note over A,C: === INITIAL CONNECTION ===
    
    A->>A: setup() creates sprite
    A->>A: prompt for name "Josh"
    A->>S: connect to server
    S->>A: assign socket.id = "abc123"
    A->>A: player.id = "abc123"
    
    Note over B: Player B connects similarly
    B->>S: connect to server
    S->>B: assign socket.id = "xyz789"
    
    Note over C: Player C connects
    C->>S: connect to server
    S->>C: assign socket.id = "def456"
    
    Note over A,C: === GAME LOOP (60 FPS) ===
    
    loop Every Frame (update cycle)
        A->>A: Check mouse.pressing()
        A->>A: Update position toward mouse
        A->>A: Check spacebar (boost?)
        
        A->>S: emit('update', {<br/>x: 150, y: 200,<br/>id: "abc123",<br/>name: "Josh",<br/>diameter: 52})
        
        S->>B: broadcast update from A
        S->>C: broadcast update from A
        
        B->>B: updateBlob(A's data)
        B->>B: Find/create sprite for A
        B->>B: Update A's position & size
        
        Note over A: Also receives updates from B & C
        S->>A: broadcast B's update
        A->>A: updateBlob(B's data)
    end
    
    Note over A,C: === EATING MORSELS (LOCAL ONLY) ===
    
    A->>A: player.overlaps(morsels)
    A->>A: eat() function triggered
    A->>A: player.diameter++
    A->>A: morsel.delete()
    A->>A: Create new morsel elsewhere
    Note over A: No network message!<br/>Morsels are local to each client
    
    Note over A,C: === ABSORPTION SEQUENCE ===
    
    Note over A,B: Scenario: A (60px) boosts into B (45px)
    
    A->>A: spacebar pressed (boost = true)
    A->>A: player.diameter -= 2 (boost cost)
    A->>A: Check collision with otherPlayers
    A->>A: absorb() function triggered
    
    alt A is 20% larger than B
        A->>A: 60/45 = 1.33 > 1.2 ✓
        A->>A: player.diameter += B.diameter
        A->>A: Now diameter = 103px
        
        A->>S: emit('delete', "xyz789")
        S->>B: broadcast delete "xyz789"
        S->>C: broadcast delete "xyz789"
        
        B->>B: deleteBlob("xyz789")
        B->>B: It's me! I was eaten!
        B->>B: Add 💀 to name
        B->>B: Reset diameter to 50
        B->>B: Respawn at random position
        
        C->>C: deleteBlob("xyz789")
        C->>C: Not me, remove B's sprite
        
    else A is NOT 20% larger
        Note over A: Nothing happens<br/>(No penalty implemented yet!)
    end
    
    Note over A,C: === DISCONNECTION (TODO) ===
    
    B--xS: Connection lost
    Note over S: No disconnect message implemented
    Note over A,C: Ghost sprites remain!<br/>Need cleanup system

Loading