spectator mode

[jremi]

hi marco,

awesome work on this bomberman game. I was playing around with your codebase. What is the easiest way to setup a "spectator mode"?

So you have the 4 players join the room...

You can have a "spectator" join the same room but is not a player and is hidden. The spectator only will see the game board with all of the players in battle. The spectator has no controls, only viewing the players.

I was messing around with the sockets and the logic you setup. I just have not been successful making it work yet. Let me know if you have any suggestions.

🙏

[Mirkesx]

Hello! Glad you liked it!

Sorry in advance if the code is messy. It was an assignment for a college course, so i did poor designing to be as fast as possible to complete it (and mostly because my teacher kept giving me new stuff to add lol).

Anyway, if i'd want to code the spectator mode, you'd need to change a bit of stuff since it is intended to have only 4 (playing) players during a game.

Serverside (file main.js) it checks whether there are 4 players in a room and it forbids you to enter that room (line 83 main.js). You could try to force the login by changing this stuff and let people enter in the room. The system chooses the first color available from gray -> black -> blue -> red. If there are 4 players you should change it as it gives you none (check main.js line 636).

Another change you must do is the part where it checks all players are ready. Probably the easier work around is to code that when all the players who picked a color are ready (having at least 2, and the host being ready too), the host can start the match (public/assets/settings.js line 34).

Since this game wasn't intended to have more than 4 players in a room, there are few things you have to change on the game logic. When the host starts a game, it calls the method setupGame() (line 24 asssets/js/game.js). Here you have to check whether the players you pass have a color or not and give to the server the filtered list of players. I'd give to the server a second list called "spectators" (the one with the players without a color). This way, the server will send the event to all the people in the room (both spectators and players) setting for all of them the game. Since the spectator list won't be given to the clients, all the spectators won't have a body (startGame gives body for all the players in the list of players) and this should be enough to allow spectators.

Lastly, stop the method allowMovements() (line 610 assets/js/index.js) to give the access to the cursors to spectators (which are players without a color, as i said).

You probably would get some error here and there, but as long as you don't get errors while playing, the client would run and it wouldn't stop the view for the spectators. Plus this way you can be sure that the chat system would work for spectators too.

There are other ways i guess to do this, but this is the first i can think of (unless you want to trait spectators different from normal players, coding methods for them).

Only for test purposes, you can call the setupGame() method from the host's browser console and it would launch the game. This should speed up a bit the testing.

Hope it can help you!

[jremi]

Hi Marco,

Thx for the response. I tried to follow your notes and make some modifications to the cod, but still no luck. I can maybe push some of the lines I changed, but I don't think it will be of much use.

For example you mentioned to check line 636 in main.js for (if 4 players). I believe this is line 216 inside checkValidRoom(). Either way still not getting much further.

I will see if I can get it to work. If you have any snippets or example that I can work from please let me know.

Regards,
J