Synchronized gamepieces guide

Thanks to Socket.IO, gamepieces have the ability to have their current state synchronized across all clients, such that everyone currently in a simulation sees the same thing happening at any point in time. This is a guide for implementing new gamepieces that use this synchronized method.

Adding to canvas

Creating synchronized game pieces involves passing a special set of props into the game piece component when being added into Canvas.jsx or CanvasGame.jsx:

getInteractiveProps(id)

... where id is collected from the game piece's data found in the simulation game parameters. Must be unique! An example with Connect4, found in CanvasGame.jsx:

Storing data

The extra props passed into the component are comprised of two variables:

• updateStatus, which is a function that can be called when you want to send data about a game piece's state to the server. It takes an object as its single argument. An example found in TicTacToe.jsx:

• status, which is the game piece's state currently stored on the server. As other clients call updateStatus, the status object is changed accordingly, with an empty object being its initial value. You can also listen for changes with the useEffect hook. This example from TicTacToe.jsx uses destructuring (with optional default values when the status has not yet been changed):

This is meant to function similarly to how a regular state hook would. Note that clients are also only synchronized when they are in the game; in edit mode, states are simply stored in memory.