Description
The current game state is a mess of variables that surely could be organized better. For starters, the game state should be as similar as possible on the clients and the server!
Update (2017-07-03): Merged in issue #5 ("Consolidate the playerListChange and updateState events"), since I can't really test my changes to the events without also changing the data model!
Table of Contents:
- Current data model
- Server
- Client
- Current events list
- New game state data model
- New events list
Current data model
Current server data model and state
-
playerList: an array of players' SocketIO IDs
-
playerData: an object containing keys matching each player's SocketIO ID, which each point to an object containing the player's username and profile photo URL
-
editorContent: a string of all the text in the shared Ace Editor
-
editorCursorAndSelection: an object containing two nested objects, one with the column and row of the shared cursor (
{column, row}
), and one with the shared selection range object:{ end: {column, row}, start: {column, row} }
-
editorScroll: an object containing the shared scroll position, with properties for
scrollLeft
andscrollTop
-
currentGist: an object containing the ID, URL, and owner of the current Gist
-
timerId: the ID for the server's
setInterval
instance used for the repeating turn timer -
nextTurnChangeTimestamp: an integer for the timestamp of the next turn change, for keeping clients in sync
-
currentPlayerIndex: an integer for the index of the current player, which iterates on each turn, pointing to the corresponding player's SocketIO ID in the
playerList
array
Current client data model and state
-
currentPlayerId: the SocketIO ID of the current player
-
nextPlayerId: the SocketIO ID of the next player
-
animationId: the ID for the client's timer animation
-
currentGist: an object containing the ID and URL of the current Gist
-
currentAccessToken: the current user's GitHub access token (this is probably very bad in terms of security!)
-
turnData: an object containing
{millisRemaining: nextTurnChangeTimestamp - Date.now(), current: {id: currentPlayerId, name: currentPlayerName}, next: {id: nextPlayerId, name: nextPlayerName}, gist: currentGist}
Current events list
Here's a simplified list (more details in my project blog posts and in the README file):
userLogin
playerListChange
updateState
turnChange
createNewGist
newGistLink
- Local Ace editor listeners and
editorTextChange
,editorCursorChange
,editorScrollChange
disconnect
connection
New game state data model
Now the game state will look pretty much the same on the client and the server, with the exception that the client-side game state handles the editor data differently:
{
timeRemaining,
turnIndex,
currentGist: {id, url, owner},
players:
[
{id, login,avatar_url}, { ... }, { ... }, ...
],
editor:
{
content,
cursorAndSelection: { cursor: {column, row}, range: { end: {column, row}, start: {column, row} },
scroll: {scrollLeft, scrollTop}
}
}
New events list
Event Name | Sent By | Sent To | Data | Description |
---|---|---|---|---|
playerJoined |
Client | Server | {login, avatar_url} |
When new player completes login process |
playerJoined |
Server | All other clients | {id, login, avatar_url} |
Update other clients with new player data |
gameState |
Server | One client | See game state model in section above! | Initialize game state for new player that just logged in, and trigger new gist creation if game is just starting! |
playerLeft |
Server | All other clients | id |
Update other clients to remove disconnected player |
turnChange |
Server | All clients | onDisconnect (Boolean) |
Trigger clients to change the turn |
newGist |
Client | Server | {id, url, owner} |
Broadcast new Gist data |
editorTextChange |
Client | Server | "current content, just a string!" |
Broadcast changes to code editor content |
editorCursorChange |
Client | Server | { cursor: {column, row}, range: { end: {column, row}, start: {column, row} } |
Broadcast cursor moves or selection changes |
editorScrollChange |
Client | Server | {scrollLeft, scrollTop} |
Broadcast changes to code editor content |
disconnect |
Client | Server | ... | When clients disconnect from server (SocketIO function) |
connection |
Client | Server | ... | When clients connect to server (SocketIO function) |