Multiplayer Crosswords with Multicrosser
This is a Rails Application that uses WebSockets and the react-crossword component to create multiplayer crosswords. You can read a blog post about why I built it and how it works.
You can see a demo at multicrosser.chriszetter.com.
To run this project:
- Install Redis and make sure the server is running
./bin/setupto install dependencies
./bin/rails crosswords:load_from_feedto load the latest crosswords to display on the homepage
./bin/rails serverto start the project
How it works
Sending a Move
Here's what happens when a player types a character:
setCellValueto update the grid
onMovecallback with cell location and value
onMovecallback calls the
movefunction in the action cable subscription
movefunction sends the move to the server
- The move is recorded in Redis
- The move is rebroadcast to others in the channel
- On all clients:
receivedfunction runs in the Action Cable subscriptions which calls the
triggerOnMoveCallbackoption set to
onMoveisn't called again
setCellValueupdates the crossword gird
Working with Intermittent Connections
If the move can't be broadcast with Action Cable it's stored in the
MoveBuffer. On reconnection:
- The remote state of the grid will be received from the server and updated
- The moves in the moves buffer will be replayed
When the move
MoveBuffer is replayed, moves will only apply if the cell they change still has the same character in it when the move was made. For example, if you change an 'A' to a 'B' while offline this move will be discarded if someone has since changed the 'A' to a 'C' and broadcast it to the server before you.
MoveBuffer uses local storage so will persist if the page is refreshed or the browser is closed.
The Source of the Crosswords Data
Crosswords are scraped from the Guardian Crossword pages which contain a JSON representation of each crossword. The crosswords are re-used following their Open Licence Terms.