Simple web lobby implementation

scally commented 6 years ago

As a followup to #189 , we will need a simple implementation of a web lobby utilizing the new API

No real persistence. Just have the user fill in their username (no password) and have some UI to create games and allow others to join. This will create a good base for people that want to add OAuth or something else on top of that.

MrRhodes commented 6 years ago

Has anyone picked this up ?

nicolodavis commented 6 years ago

I'm not sure if @scally posted this as a way of documenting what he would work on next, or if this is open. Let's check with him.

scally commented 6 years ago

@MrRhodes @nicolodavis this is open -- I haven't started in on this yet, was thinking it over a bit. I think it could use a bit of brainstorming still as to how it will work, but if one of you have an idea let's get it down :)

nicolodavis commented 6 years ago

I'm a big fan of minimalist (mostly text) UI that provides hooks for people to customize if they want a different look and feel. Here are some thoughts on what it could look / behave like:

there is a text field somewhere on the page (top right perhaps?) that allows you to enter your handle name
prior to entering your handle name, you still see everything on the page (you just can't interact)
the middle area should probably have a list of currently active games (separated into different tabs like OPEN / RUNNING) displayed in a tabular format
any OPEN game should have a "join" button next to any player seat that isn't currently taken
a full game should have a link that takes you to the game page where you actually play

We can probably store player credentials (required to join a game) in either cookies or local storage.

nicolodavis commented 6 years ago

We could also actually start even smaller:

Just a simple "Create Game" button at the center of the page. This just creates a game with a URL that you can share with your friends.
The second page just contains "Join Game" buttons.
Once everyone is in, the game starts.

amitport commented 6 years ago

added an Angular initial lobby example in https://github.com/turn-based/boardgame.io-angular/tree/master/src/app/examples/lobby

The most obvious gap exemplified this implementation is that there is missing server APIs for: 1 game session metadata- Specifically, numOfPlayers + current players metadata (index id and name). 2 getting all those game sessions for the lobby (possibly with filter parameters like gametype)

nicolodavis commented 6 years ago

Thanks for uncovering those, Amit! I'll add them to the roadmap. Feel free to also send me a PR if you have time to work on these yourself.

francoijs commented 6 years ago

A few things may still be missing to finish the initial lobby implementation:

numPlayers of a new game instance: each child of class Game could provide 2 properties minNumPlayers and maxNumPlayers ; the actual numPlayers of a game instance will be chosen inside those boundaries at creation
ability for server to notify lobbies that a player seat has been taken/released
ability for server to notify lobbies that a game has changed state (OPEN/RUNNING/OVER) -> ultimately it could be implemented though a redux store for each game instance? Before that we could simply make the lobby poll the server periodically (using the present RESTful API) to detect a change of state for the game instances We may also need some kind of 'leave' request (symmetrical to 'join'): when the game is OPEN, it would mean that the player leaves the seat ; when the game is RUNNING, that the player abandons.

chonghorizons commented 6 years ago

I'm new to boardgame.io and interested in the lobby feature. I found and read through this code that seems to do a robust job of creating game lobbies and managing sockets:

https://github.com/falconscript/gamelobby

I'm going to read through the above items of this issue #197 (including amitport's Angular implementation) and see if I can contribute to this feature. I'm new, so no promises on my ability to make a good contribution, but I'll try!

francoijs commented 6 years ago

@chonghorizons we have another primitive lobby implementation in #256 if you want to have a look.

francoijs commented 5 years ago

Request for advice: I'm working on factoring out of PR #256 a generic lobby component in lobby/lobby.js @nicolodavis how do you see it?

should it be a react component by itself, which provides the lobby mechanic and a default UI (with a minimalist render method) ?
or a more generic object that provides hooks for events like newGame, playerJoined... and handles players actions like connect, join, ... ? This component would be encapsulated by the react component of the lobby UI (with a first example in examples/react/modules/lobby/).

francoijs commented 5 years ago

PR #294 ready for review!

vdfdev commented 5 years ago

PR #294 was merged, do we have any examples using it? If not, I think I can help adding one

vdfdev commented 5 years ago

We do! But I am getting an error:

I will try to debug.

vdfdev commented 5 years ago

Ok, sorry, this error seems to be happening only in my ChromeOS because of this bug: https://bugs.chromium.org/p/chromium/issues/detail?id=848127

They only foward some ports by default 8000 is one but 8001 is not, and if I try to use the domain instead I get a CORS because of the lack of HTTPS :(

nicolodavis commented 5 years ago

Looks like you need #343.

nicolodavis commented 5 years ago

Closing this in favor of #354

boardgameio / boardgame.io

Simple web lobby implementation #197