Murder each other while on a train.
Now doesn't that sound like a fun and relaxing afternoon?
The server keeps track of what is going on with a bunch of classes, such as Game and Player and Figure and stuff like that. There is a difference between a "Player" and a "Figure": a figure is the indicator of where the player is on the train, which might not exist. Each player has a reference to its figure, unless that player's figure has been shot off the train.
The client repeatedly requests the game's status from the server and updates both halves of the screen accordingly. However, I wanted cool looking animations for the players. So, there are "fake" players, which are automatically (using CSS) centered inside the cars, and then there are "real" player elements, which are not removed and re-added. Instead, the position of the fake player elements are copied over to the real player elements, which is an operation that can be done with an animation.
sequenceDiagram participant client1 participant server participant client2 client1 ->>+ server: connect server ->>- client1: game state (0 players) client1 ->>+ server: join server ->>- client1: game state (1 player) note over client1: render figure<br>for player 1 client2 ->>+ server: connect server ->>- client2: game state (1 player) note over client2: render figure<br>for player 1 client2 ->>+ server: join server ->> client2: game state (2 players) note over client2: render figure<br>for players 1 and 2 server ->>- client1: game state (2 players) note over client1: render figure<br>for players 1 and 2 client1 ->>+ server: ready server ->> client1: game state (2 players, 1 ready) note over client1: rerender server ->>- client2: game state (2 players, 1 ready) note over client2: rerender client2 ->>+ server: ready note over server: Start a round server ->> client1: game state (2 players, plan) note over client1: show plan dialog server ->> client2: game state (2 players, plan) note over client2: show plan dialog client1 ->> server: submit plan client2 ->> server: submit plan note over server: Execute round step server ->> client1: game state (2 players, execute) note over client1: rerender server ->> client2: game state (2 players, execute) note over client2: rerender client1 ->> server: next step client2 ->> server: next step note over server: Execute round step server ->> client1: game state (2 players, execute) note over client1: rerender server ->> client2: game state (2 players, execute) note over client2: rerender note over client1,client2: ... client1 ->> server: next step client2 ->> server: next step note over server: plan mode again First, everyone joins. Each player has a ready attribute, which is reused so many times it's ridiculous. Once everyone is ready, the game starts.
During the first phase of the game, which is called schemin (no G), everyone chooses 3 cards (in order) from their hand of 5 cards, and submits them. Once everyone has submitted their plans, the server goes through the cards in order. All the clients then update the scene, and then when everyone is ready, the server will go to the next card. Once the server runs out of cards, it goes back to the first phase.