Add leave lobby button to example

Author: erikdubbelboer

docs/api-reference.md

@@ -38,6 +38,9 @@ interface LobbyOptions {
 ##### `join(code: string, password?: string): Promise<void>`
 Joins an existing lobby.
 
+##### `leave(): Promise<void>`
+Leaves the current lobby without closing the network.
+
 ##### `list(filter?: object): Promise<Lobby[]>`
 Lists available lobbies with optional MongoDB-style filtering.
 ```typescript

example/index.html

@@ -31,6 +31,7 @@
 
   <a href="javascript:void(0)" data-action="create">create lobby</a>
   <a href="javascript:void(0)" data-action="join">join custom lobby</a>
+  <a href="javascript:void(0)" data-action="leave">leave lobby</a>
   <script src="./main.ts" type="module"></script>
 </body>
 </html>

example/main.ts

@@ -55,6 +55,12 @@ n.on('ready', () => {
     }
   })
 
+  document.querySelector('a[data-action="leave"]')?.addEventListener('click', () => {
+    if (n.currentLobby !== undefined) {
+      void n.leave()
+    }
+  })
+
   const queryLobbies = (): void => {
     console.log('querying lobbies...')
     let filter = {}
@@ -100,6 +106,10 @@ n.on('lobby', code => {
   log(`lobby code ready: ${code} (and you are ${n.id})`)
 })
 
+n.on('leave', () => {
+  log('left lobby')
+})
+
 n.on('signalingerror', console.error.bind(console.error))
 n.on('rtcerror', console.error.bind(console.error))
 

features/basic.feature

@@ -66,3 +66,12 @@ Feature: Players can create and connect a network of players
     Then "yellow" receives the network event "close"
     Then "blue" receives the network event "disconnected" with the argument "[Peer: h5yzwyizlwao]"
     Then "green" receives the network event "disconnected" with the argument "[Peer: h5yzwyizlwao]"
+
+  Scenario: A player leaves the lobby but stays connected
+    Given "blue" is connected as "1u8fw4aph5ypt" and ready for game "4307bd86-e1df-41b8-b9df-e22afcf084bd"
+    And "yellow" is connected as "h5yzwyizlwao" and ready for game "4307bd86-e1df-41b8-b9df-e22afcf084bd"
+
+    Given "blue,yellow" are joined in a lobby
+    When "yellow" leaves the lobby
+    Then "yellow" receives the network event "leave"
+    Then "blue" receives the network event "disconnected" with the argument "[Peer: h5yzwyizlwao]"

features/support/steps/network.ts

@@ -202,6 +202,14 @@ When('{string} disconnects', async function (this: World, playerName: string) {
   player.network.close()
 })
 
+When('{string} leaves the lobby', async function (this: World, playerName: string) {
+  const player = this.players.get(playerName)
+  if (player == null) {
+    throw new Error('no such player')
+  }
+  await player.network.leave()
+})
+
 When('{string} requests all lobbies', async function (this: World, playerName: string) {
   const player = this.players.get(playerName)
   if (player == null) {

features/support/types.ts

@@ -6,7 +6,7 @@ interface RecordedEvent {
   eventPayload: IArguments
 }
 
-const allEvents = ['close', 'ready', 'lobby', 'connected', 'disconnected', 'reconnecting', 'reconnected', 'message', 'signalingerror', 'signalingreconnected', 'leader', 'lobbyUpdated']
+const allEvents = ['close', 'ready', 'lobby', 'leave', 'connected', 'disconnected', 'reconnecting', 'reconnected', 'message', 'signalingerror', 'signalingreconnected', 'leader', 'lobbyUpdated']
 
 export class Player {
   public lastReceivedLobbies: LobbyListEntry[] = []

internal/signaling/peer.go

@@ -108,6 +108,16 @@ func (p *Peer) HandlePacket(ctx context.Context, typ string, raw []byte) error {
 			return fmt.Errorf("unable to handle packet: %w", err)
 		}
 
+	case "leaveLobby":
+		packet := LeaveLobbyPacket{}
+		if err := json.Unmarshal(raw, &packet); err != nil {
+			return fmt.Errorf("unable to unmarshal json: %w", err)
+		}
+		err = p.HandleLeaveLobbyPacket(ctx, packet)
+		if err != nil {
+			return fmt.Errorf("unable to handle packet: %w", err)
+		}
+
 	case "list":
 		packet := ListPacket{}
 		if err := json.Unmarshal(raw, &packet); err != nil {
@@ -311,6 +321,37 @@ func (p *Peer) HandleClosePacket(ctx context.Context, packet ClosePacket) error
 	return nil
 }
 
+func (p *Peer) HandleLeaveLobbyPacket(ctx context.Context, packet LeaveLobbyPacket) error {
+	logger := logging.GetLogger(ctx)
+
+	if p.ID == "" {
+		return fmt.Errorf("peer not connected")
+	}
+	if p.Lobby == "" {
+		return fmt.Errorf("not in a lobby")
+	}
+
+	err := p.store.LeaveLobby(ctx, p.Game, p.Lobby, p.ID)
+	if err != nil {
+		return err
+	}
+	disc := DisconnectPacket{Type: "disconnect", ID: p.ID}
+	data, err := json.Marshal(disc)
+	if err == nil {
+		if err := p.store.Publish(ctx, p.Game+p.Lobby, data); err != nil {
+			logger.Error("failed to publish disconnect packet", zap.Error(err))
+		}
+	}
+	_, err = p.doLeaderElectionAndPublish(ctx)
+	if err != nil {
+		return err
+	}
+
+	p.Lobby = ""
+
+	return p.Send(ctx, LeftLobbyPacket{RequestID: packet.RequestID, Type: "leftLobby"})
+}
+
 func (p *Peer) HandleListPacket(ctx context.Context, packet ListPacket) error {
 	if p.ID == "" {
 		return fmt.Errorf("peer not connected")

internal/signaling/types.go

@@ -94,6 +94,16 @@ type LobbyUpdatedPacket struct {
 	LobbyInfo stores.Lobby `json:"lobbyInfo"`
 }
 
+type LeaveLobbyPacket struct {
+	RequestID string `json:"rid"`
+	Type      string `json:"type"`
+}
+
+type LeftLobbyPacket struct {
+	RequestID string `json:"rid"`
+	Type      string `json:"type"`
+}
+
 type ConnectPacket struct {
 	Type string `json:"type"`
 

lib/network.ts

@@ -9,6 +9,7 @@ import Credentials from './credentials'
 interface NetworkListeners {
   ready: () => void | Promise<void>
   lobby: (code: string, lobbyInfo: LobbyListEntry) => void | Promise<void>
+  leave: () => void | Promise<void>
   leader: (leader: string) => void | Promise<void>
   lobbyUpdated: (code: string, settings: LobbySettings) => void | Promise<void>
   connecting: (peer: Peer) => void | Promise<void>
@@ -102,6 +103,14 @@ export default class Network extends EventEmitter<NetworkListeners> {
     return true
   }
 
+  async leave (): Promise<void> {
+    if (this._closing || this.signaling.receivedID === undefined || this.signaling.currentLobby === undefined) {
+      return
+    }
+    await this.signaling.request({ type: 'leaveLobby' })
+    this.peers.forEach(peer => peer.close('left lobby'))
+  }
+
   close (reason?: string): void {
     if (this._closing || this.signaling.receivedID === undefined) {
       return

lib/signaling.ts

@@ -245,6 +245,13 @@ export default class Signaling extends EventEmitter<SignalingListeners> {
           this.network.emit('lobbyUpdated', packet.lobbyInfo.code, packet.lobbyInfo)
           break
 
+        case 'leftLobby':
+          this.currentLobby = undefined
+          this.currentLeader = undefined
+          this.currentLobbyInfo = undefined
+          this.network.emit('leave')
+          break
+
         case 'connect':
           if (this.receivedID === packet.id) {
             return // Skip self