Invite players to join the host in a multiplayer lobby

[samcf]

Sharing the player view window over Discord or Zoom is a decent, effective way to create a collaborative experience. There are some pretty serious limitations, however.

• The operating system doesn't want to update windows that are hidden behind other windows; this forces the host to keep the player view window visible on their own computer.
• Players are limited to telling the host what they'd like their character to do and cannot move their own tokens.
• It is much less of an immersive experience; far removed from the traditional round table setup. Players feel more immersed in the experience if they can directly control the objects on the canvas.
• The visual quality and detail is vastly improved by rendering directly on the player's browser instead of through a video conference.

Many other virtual tabletops allow hosts to invite players to participate in a multiplayer lobby through the browser. This story represents the first step towards a more collaborative tabletop experience.

• The host may turn their session into a public lobby which can be accessed by anyone with the private URL that is shared by the host to the players.
• The players navigate to the given URL and can see the canvas and all the publicly visible elements on it.
• Players are restricted to only being able to move the camera around.

[samcf]

sequenceDiagram
    participant Host
    participant Server
    participant Conns

    Note over Host,Conns: Solid lines are HTTP requests, dashed are WebSocket messages

    Host->>+Server: connect ws://host/ws
    Server->>-Host: upgraded protocol
    Server-->>Host: room key (abc)
    Note over Host,Server: Messages are EDN encoded with type, params

    Conns->>+Server: connect ws://host/ws?key=abc
    Server->>-Conns: upgraded protocol

    loop initial connection
        Conns-->>Server: initial connection
        Server-->>Conns: initial connection
        Server-->>Host: initial connection
        Host-->>Server: initial state
        Server-->>Conns: initial state
    end

    loop broadcast state changes
        Conns-->>Server: operation & params
        Server-->>Conns: operation & params

        Note over Server,Conns: Messages are mirrored to all clients
    end

    loop request image data
        Conns-->>Server: checksum
        Server-->>Host: checksum
        Host-->>Server: data:image/jpg#59;base64,...
        Server-->>Conns: data:image/jpg#59;base64,...
    end

[samcf]

Example WebSocket message (EDN)

{:type   :event
 :name   :initial-connection
 :args   {}
 :sender "1e51189b-e3ea-4e0d-b669-d7c8c1f8b637"}

[samcf]

Server message sent to client upon connecting

{:type :event
 :name :connection-received
 :args {:uuid "1e51189b-e3ea-4e0d-b669-d7c8c1f8b637"}}

[samcf]

DataScript transaction example

{:type   :transaction
 :name   :camera/translate
 :args   [230 400]
 :sender "3e584c31-41c3-4dbd-8498-e5ffc5d94c1a"}

[samcf]

Resolved in #28