UI components for the Allumette matchmaking server.
npm install @bascanada/allumette-webUI components for the Allumette matchmaking server.
A component that displays a list of available lobbies and allows users to create, join, and delete lobbies.
#### Props
- onJoinLobby (optional): A callback function that will be called when a user clicks the join/start game button. This allows parent components to handle game launching.
#### Callback Signature
``javascript`
onJoinLobby({ lobbyId, token, players, isPrivate, gameId })
Parameters:
- lobbyId (string): The UUID of the lobbytoken
- (string): The JWT authentication token for the current userplayers
- (array): Array of public keys of players in the lobbyisPrivate
- (boolean): Whether the lobby is privategameId
- (string): The ID of the game (e.g. "chess", "poker")
#### Example Usage
`svelte
`
#### Using as Web Component
`html
`
1. Clear Lobby IDs: Lobby IDs are now displayed as shortened codes instead of empty input fields
2. Player Names: Players are shown with their usernames (if they're friends) instead of cropped public keys
3. Current User Highlighting: Your own player entry is highlighted in the player list
4. Visual Status: Lobbies you're in are highlighted with a green background
5. Smart Actions: The join button only shows for lobbies you're not in; delete button only shows for lobbies you're in
- 🔒 Private - Yellow badge for private lobbies
- 🌐 Public - Blue badge for public lobbies
- Current user: Username (You) in blue
- Friends: Username from friends list
- Others: Player
The system now intelligently handles lobby removal based on ownership:
- Owner: When the lobby creator clicks "🗑️ Delete Lobby", the entire lobby is destroyed and all players are removed
- Members: When a non-owner player clicks "🚪 Leave", only that player is removed from the lobby (lobby continues to exist)
This provides a better user experience and prevents accidental lobby deletion by non-owners.