moonhighway / graphql-fun Goto Github PK
View Code? Open in Web Editor NEWAn app to encourage collaboration and learning about GraphQL
An app to encourage collaboration and learning about GraphQL
Once the user has logged in, they should see a message that the game is about to begin.
When the WeJay game is going on, music should be playing: #24
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.
Hook app up to Apollo Engine
When the WeJay Game is happening, the audience should see the band members faces on screen and when their buttons are pressed.
<Mutation mutation={PLAY}>
& <Mutation mutation={PAUSE} > <Subscription subscription={PLAYING_MUSIC}
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
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
}
}
}
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
}
)
}
}
}
This initial query will query allPlayers
including their login, avatar, and name. It will also get the playerCount
.
playerCount
resolverallPlayers
resolverquery {
playerCount
allPlayers {
login
avatar
name
}
}
mutation {
play
}
mutation {
pause
}
subscription {
playingMusic
}
When the WeJay Game is happening, the audience should see the band members faces on screen and when their buttons are pressed: #23
Create a mutation to authorize a user with GitHub.
authorizeWithGithub
mutationme
querylogout
mutationauthorizeWithGithub
mutationme
querylogout
mutationDocument the entire schema so the playground looks good when looking at it. But specifically hit these types
When an audience member presses their button during WeJay, their face should animate across the screen.
references #10: WeJay Audience
<Mutation mutation={PLAY}>
& <Mutation mutation={PAUSE} > <Subscription subscription={PLAYING_MUSIC}
The welcome screen when people first open the browser and go to graphql.fun
.
should contain:
<Query query={ME}>
When Teams have been assigned, the audience faces on the screen should have a color encircling them: #22
Handle disconnects and when user logs out.
Create distinct environments for production and development.
When Teams have been assigned, the audience faces on the screen should have a color encircling them.
references #6: Team Mutations + Team Query
<Query query={ALL_TEAMS}>
mutation {
animateFaces
}
The screen for participants in WeJay who have been given instruments.
References #9: Playing WeJay
mutation start {
startGame(title: "wejay") {
title
playerCount
tracks {
name
instrument
}
}
}
mutation {
endGame
}
We should be able to leave or refresh the wejay board and have it still play the tracks that the API say are playing.
Come on down Price is Right Board: #16
Set up code splitting
Remove global variables for players and teams.
Once a player signs in, they should see a "please wait" screen: #18
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.
Board Initial State with Connection Message -- Welcome to the game on the board
mutation {
comeOnDown {
login
avatar
name
}
}
mutation {
kickOut(login: "1") {
name
login
}
}
Add styles for player sign in with GitHub Button: #14
Once a player is assigned a color they should see this screen: #19
Right now we are skipping all test due to a Server in Use issue that is causing them to occasionally fail.
In order to have functional Tests, we need to have the Cucumber Setup Prepared.
related to #52
Integration Test Simulations for many concurrent users
mutation {
createTeams(count: 2) {
color
players {
name
}
}
}
mutation {
destroyTeams
}
query {
Team(color: "red") {
color
players {
login
name
avatar
}
}
}
Handle the people who have connected to the session after the teams have been created.
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.
The screen for participants in WeJay who have been given instruments: #20
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.
Sign in with GitHub button for graphql.fun
.
Referencing #4: GitHub Authorization
<Mutation mutation={AUTHORIZE_GITHUB}>
When the player is assigned as an Audience Member role (i.e. not one of the instrument players) they will see this screen: #21
When an audience member presses their button during WeJay, their face should animate across the screen: #25
Figure out which version to set in package.json so that subscriptions work.
Add styles for Board Welcome Screen: #14
When the WeJay game is going on, music should be playing
references #9: Playing WeJay
<Mutation mutation={PLAY}>
& <Mutation mutation={PAUSE} > <Subscription subscription={PLAYING_MUSIC}
When the player's phone gets blasted with a color, it should show up on this screen.
references #6 : Team Mutations + Team Query
<Mutation mutation={CREATE_TEAMS}>
& <Mutation mutation={DESTROY_TEAMS}>
Create styles for Player Welcome Screen: #13.
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:
this.state.signingIn
this.state.signingIn
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.