-
Notifications
You must be signed in to change notification settings - Fork 34
Frontend Integration Guide
This page goes over the integration between the game engine, the game server, and the frontend and how data flows between each of them.
The GameServer object handles all of the traffic for creating, joining, and communicating with games. We use HTTP methods to handle any requests outside of a lobby or game. These are definied in GameServer.setupAppRoutes. Most of these functions will handle creating a lobby, joining a lobby, and reporting information about all lobbies for use in the frontend.
Once a user joins a lobby we establish a websocket connection where lobby and game messages will be handled. This connection to a game is established in server/gamenode/Lobby.addLobbyUser and connects that socket to a channel so that messages are only received by connections that share the same Lobby.
socket.registerEvent('game', (socket, command, ...args) => this.onGameMessage(socket, command, ...args));
To onGameCommand we pass the the following params:
-
socket: this is mostly passed so we have user data that can be associated with a Game Player. -
command: this command will be the name of a function on Game object. Most of the time this will becardClickedormenuButton. -
...args: This spreads the array of args sent with the message. ForcardClickedthis is typically just the card id, but formenuButton, which is what is sent when responding to a prompt, there may be multiple ards depending on the specific prompt.
These params are then used to call the function on the Game object:
this.game[command](socket.user.username, ...args);
From here the engine will handle the effects of the card/prompt button click and onGameMessage then responds with a gamestate update.
There are 3 main places you'll want to look if you're trying to find the data that gets sent to the frontend on a state update"
-
server/game/core/Game.getState: This is the first function called and will return all of the general information about the game and include information known about each palyer. The function takes in the player we are updating so that it knows who's perspective we are looking from so that it can properly hide information that should not be known to that player. -
server/game/core/Player.getState: Returns general information about the player and is responsible for organizing cards intocardPilesso that we can easily access cards in that palyer's zones. -
server/game/core/card/Card.getSummary: returns general information about the card as well as callsgetCardSelectionStatewhich determines if the card is selected or selectable based on the current gamestate and prompt.
In app/_contexts/Game.context (this is in the client code) we establish our clientside socket connection and listen for gamestate updates. Most components on the gameboard do not use their own state. We get a lot of state information from the gamestate object that is calculated by the engine so we don't have to do that work on the frontend. This includes things like card visibility, selection/selectable state, and what prompts are being displayed to the user.
Most components require very few props, usually just which player they belong to, and will then pull the information it needs directly from state. If there is any information that is needed that is not present in the gamestate object, but is something that would be handled by the engine, you should look at the previously mentioned methods to see if that information can be added there.
Majority of the communication with the server will be handled by the onClick even found on GameCard.ts or through the menuButton events on prompts. If there is some information you are missing and you're not sure where it should come from please bring it up in the frontend discord channel and we'll figure out where that should live.