moonhighway / graphql-fun Goto Github PK

Board Initial State with Connection Message -- Welcome to the game on the board

To Complete

• React Component

Remove global variables for players and teams.

When an audience member presses their button during WeJay, their face should animate across the screen: #25

The screen for participants in WeJay who have been given instruments.

References #9: Playing WeJay

In order to have functional Tests, we need to have the Cucumber Setup Prepared.

TODO

• Setup main files and Packages
• Start and Stop the API
• Start and Stop the Client

related to #52

The screen for participants in WeJay who have been given instruments: #20

Hook app up to Apollo Engine

Handle disconnects and when user logs out.

When Teams have been assigned, the audience faces on the screen should have a color encircling them: #22

Currently we are displaying all environment variables in the console. When the NODE_ENV is production we should not be displaying that information in the browser console.

Set up code splitting

Once a player signs in, they should see a "please wait" screen: #18

When Teams have been assigned, the audience faces on the screen should have a color encircling them.

references #6: Team Mutations + Team Query

To Complete

• React Component
• GraphQL Data <Query query={ALL_TEAMS}>
• Test

It's time to let the player know they have been grouped into a team. The myTeam subscription should return the currentUsers team once teams have been created.

type Subscription {
   myTeam: Team
}

subscription {
    myTeam {
        color
        players {
             name
             avatar
        }
   }
}

Filtering

This code is not exactly correct, but we can use it for reference. graphql-yoga came with a withFilter function, I am assuming apollo-server also has this funciton? You can use it to filter thorugh subscriptions and only reply to the current player or something.

export const Subscription = {
     myTeam: {
          subscribe(_, args, { currentPlayer }) {
                  //
                  //  TODO: Obtain the currentPlayer here, can't subscribe to my team unless logged in
                  //

                  return withFilter(
                          (_, { events }, { pubsub }) => pubsub.asyncIterator(events),
                          ({ teams:{event, color} }, { events }, { currentPlayer }) => {
                                 if ((event === 'TEAMS_CREATED') && currentPlayer) {
                                        let theTeam = teams.find(t => t.color === color)
                                        return theTeam && theTeam.players.map(p => p.login).includes(currentPlayer.login)
              }
              return true
            }
        )
          }
     }
}

TODO

• Setup Playground Test
  • Authorize a fake user
  • Add Token to Header
  • Subscribe to my team
• Push team information when team has been created
• Push team information when team has been destroyed
• Write Tests for this feature

Right now we are skipping all test due to a Server in Use issue that is causing them to occasionally fail.

Add styles for player sign in with GitHub Button: #14

When the WeJay Game is happening, the audience should see the band members faces on screen and when their buttons are pressed: #23

Create styles for Player Welcome Screen: #13.

Sign in with GitHub button for graphql.fun.

Referencing #4: GitHub Authorization

To Complete

• React Component
• GraphQL Data <Mutation mutation={AUTHORIZE_GITHUB}>

Once a player is assigned a color they should see this screen: #19

1. WeJay Performer Play Button Mutation

To Complete

• - Write the resolvers
• - Write test for the mutation

mutation {
  play
}

2. WeJay Performer Pause Button Mutation

To Complete

• - Write the resolvers
• - Write test for the mutation

mutation {
  pause
}

3. WeJay Playing Music Subscription

To Complete

• - Write the resolvers
• - Write test for the subscription

subscription {
  playingMusic
}

1. WeJay Animate Audience Faces Mutation

To Complete

• - Write the resolvers
• - Write test for the subscription

mutation {
  animateFaces
}

Create distinct environments for production and development.

Figure out which version to set in package.json so that subscriptions work.

When the player is assigned as an Audience Member role (i.e. not one of the instrument players) they will see this screen.

references #10: WeJay Audience

When the WeJay Game is happening, the audience should see the band members faces on screen and when their buttons are pressed.

To Complete

• React Component
• GraphQL Data <Mutation mutation={PLAY}> & <Mutation mutation={PAUSE} > <Subscription subscription={PLAYING_MUSIC}
• Test

Once the user has logged in, they should see a message that the game is about to begin.

To Complete

• React Component
• Test

Handle the people who have connected to the session after the teams have been created.

• Assign them to a random team.

Integration Test Simulations for many concurrent users

We should be able to leave or refresh the wejay board and have it still play the tracks that the API say are playing.

When the player's phone gets blasted with a color, it should show up on this screen.

references #6 : Team Mutations + Team Query

To Complete

• React Component
• GraphQL Data <Mutation mutation={CREATE_TEAMS}> & <Mutation mutation={DESTROY_TEAMS}>
• Test

Add styles for Board Welcome Screen: #14

• Create Slide Project
• Create Outline
• Send to Designer
• Bitly or git.io file
• Download Locally

The Heroku NODE_ENV variable had to be development for this to work... but the Heroku environment is production so we need to be able to set that value without it breaking the app.

When Set to Production the application errors and the output reads:

2018-08-01T01:06:35.616356+00:00 app[web.1]: Error: Cannot find module '/app'
2018-08-01T01:06:35.616358+00:00 app[web.1]: at Function.Module._resolveFilename (module.js:547:15)
2018-08-01T01:06:35.616359+00:00 app[web.1]: at Function.Module._load (module.js:474:25)
2018-08-01T01:06:35.616361+00:00 app[web.1]: at Function.Module.runMain (module.js:693:10)
2018-08-01T01:06:35.616363+00:00 app[web.1]: at startup (bootstrap_node.js:191:16)
2018-08-01T01:06:35.616364+00:00 app[web.1]: at bootstrap_node.js:612:3
2018-08-01T01:06:35.625064+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2018-08-01T01:06:35.629523+00:00 app[web.1]: npm ERR! errno 1
2018-08-01T01:06:35.631517+00:00 app[web.1]: npm ERR! Exit status 1
2018-08-01T01:06:35.631315+00:00 app[web.1]: npm ERR! [email protected] start: `node .`
2018-08-01T01:06:35.631824+00:00 app[web.1]: npm ERR!
2018-08-01T01:06:35.632037+00:00 app[web.1]: npm ERR! Failed at the [email protected] start script.

1. Start WeJay Game

To Complete

• - Write the resolvers
• - Write test for the mutation

mutation start {
  startGame(title: "wejay") {
    title
    playerCount
    tracks {
      name
      instrument
    }
  }
}

2. End WeJay Game Mutation

To Complete

• - Write the resolvers
• - Write test for the mutation

mutation {
  endGame
}

When the player is assigned as an Audience Member role (i.e. not one of the instrument players) they will see this screen: #21

Price is Right screen for the board. Should have the Price is Right Mutation to call on someone and a Kick Out Mutation to kick someone out.

• Referencing #7 in the API project

When the WeJay game is going on, music should be playing: #24

Create a mutation to authorize a user with GitHub.

To Complete

• - Authorizes fake user in development environment
• - Authorizes real user in production environment
• - authorizeWithGithub mutation
• - me query
• - logout mutation
• - Test the authorizeWithGithub mutation
• - Test the me query
• - Test the logout mutation

This initial query will query allPlayers including their login, avatar, and name. It will also get the playerCount.

To Complete

• - playerCount resolver
• - allPlayers resolver
• - Test the query

query {
  playerCount
  allPlayers {
    login
    avatar
    name
  }
}

Come on down Price is Right Board: #16

When the WeJay game is going on, music should be playing

references #9: Playing WeJay

To Complete

• React Component
• GraphQL Data <Mutation mutation={PLAY}> & <Mutation mutation={PAUSE} > <Subscription subscription={PLAYING_MUSIC}
• Test

When an audience member presses their button during WeJay, their face should animate across the screen.

references #10: WeJay Audience

To Complete

• React Component
• GraphQL Data <Mutation mutation={PLAY}> & <Mutation mutation={PAUSE} > <Subscription subscription={PLAYING_MUSIC}
• Test

Document the entire schema so the playground looks good when looking at it. But specifically hit these types

• Player
• Subscriptions
• Game, Callout
• allPlayers, totalPlayers query

Whenever any loading is happening, we want to see the loading component. Right now, when a person logs in, they see the GraphQL Fun logo at the same time as the loading animation.

Follow these steps to close this bug:

• Set up apollo-link-state
• Create a resolver and a mutation for loading
• When loading, only show the loading screen
• When Logging In, Have GraphQL Logo disappear this.state.signingIn
• Remove this.state.signingIn

1. Create a mutation for Creating Teams

To Complete

• - Write the resolvers
• - Write test for the mutation

mutation {
  createTeams(count: 2) {
    color
    players {
      name
    }
  }
}

2. Create a mutation for Destroying Teams

To Complete

• - Write the resolvers
• - Write test for the mutation

mutation {
  destroyTeams
}

3. Create a Query for Team

To Complete

• - Write the resolvers to fulfill the query
• - Write test for the mutation

query {
  Team(color: "red") {
    color
    players {
      login
      name
      avatar
    }
  }
}

1. Create a mutation for starting the Price is Right game

To Complete

• - Write the resolvers
• - Write test for the mutation

mutation {
  comeOnDown {
    login
    avatar
    name
  }
}

2. Create a Mutation to Kick Someone out of Game

To Complete

• - Write the resolvers
• - Write test for the mutation

mutation {
  kickOut(login: "1") {
    name
    login
  }
}

Jest is really for unit testing. We are doing more of a functional thing with jest right now. Let's leave the unit tests on the JEST side and setup cucumber for our functional API and Client Testing.

Todo

• Setup Cucumber
• Move API Tests to Cucumber
• Jest Component Test Start
• Jest Unit Test for both API/Client ready

The welcome screen when people first open the browser and go to graphql.fun.

should contain:

1. GraphQL Logo & GraphQL Fun Info
2. Authorized Player Component

To Complete

• React Component
• GraphQL Data <Query query={ME}>