Note: while Puzzle.js puzzles store their state locally (via localStorage), that behavior is inhibited on this page to make it easiest to see exactly what markup produces exactly what result.
This page is a reference for co-op support, as well as a local demo. Co-op support is designed to be server-agnostic, and the demo simulates a server in about 25 lines of JavaScript but runs entirely locally.
On each puzzle where you wish to support cooperative solving, you can programmatically set data-team-id to identify the team and data-player-id to identify the team member. Both of these properties are optional; for example, if no team is specified, then the entire world would be on the same team.
Then, call addEventListener("puzzlechanged", ...), which will notify when a change is made locally. The event.detail property will be an array of seriaizable key-value pairs suitable for storing in a database on the server in last-writer-wins fashion and communicating to other clients. Since there are many different types of servers, the implementation of that part is currently not provided.
When your client receives an array of key-value pairs from the server, it can set them on the puzzle by locating the correct puzzle on the page (if there is more than one) and calling:
p.puzzleEntry.changeWithoutUndo(changes)
Each property change is represented as a tuple of six properties. Four of these properties form a composite key, and two of these properties form a composite value.
puzzleId: the data-puzzle-id of the puzzle that is changing.teamId: the data-team-id of the puzzle that is changing.locationKey: the location of the cell that is changing. Note: The location strings should be considered undocumented at this point, but they will stabilize in the future.propertyKey: the property of the cell that is changing. Note: The property strings should be considered undocumented at this point, but they will stabilize in the future.value: the new value of the property.playerId: the data-player-id for the team member that set the property (can be ignored).When co-op values are set on a puzzle, an attribute is also set on the puzzle of the form data-coop-<propertyKey>-playerId, with a value of the playerId that changed the property. These attributes can be used for styling, like the red/blue coloring in the demo below.