Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify the game state data model and events on client and server #16

Closed
LearningNerd opened this issue Jun 28, 2017 · 0 comments · Fixed by #32
Closed

Simplify the game state data model and events on client and server #16

LearningNerd opened this issue Jun 28, 2017 · 0 comments · Fixed by #32

Comments

@LearningNerd
Copy link
Member

LearningNerd commented Jun 28, 2017

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 and scrollTop

  • 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)
@LearningNerd LearningNerd changed the title Simplify the game state data model on server and client Simplify the game state data model and events on client and server Jul 3, 2017
LearningNerd added a commit that referenced this issue Jul 10, 2017
Close #16, strip out and refactor all the guts of the app!
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant