added join and create screens

graphql.config.json

@@ -0,0 +1,25 @@
+{
+  "schema": {
+    "request": {
+      "url": "http://localhost:3000/graphql",
+      "method": "POST",
+      "postIntrospectionQuery": true,
+      "options": {
+        "headers": {
+          "user-agent": "JS GraphQL"
+        }
+      }
+    }
+  },
+  "endpoints": [
+    {
+      "name": "Default",
+      "url": "http://localhost:3000/graphql",
+      "options": {
+        "headers": {
+          "user-agent": "JS GraphQL"
+        }
+      }
+    }
+  ]
+}

packages/client/package.json

@@ -8,7 +8,9 @@
     "build": "ng build",
     "test": "ng test",
     "lint": "ng lint",
-    "e2e": "ng e2e"
+    "e2e": "ng e2e",
+    "prestart": "yarn generate:types",
+    "generate:types": "gql-gen --url http://localhost:3000/graphql --template typescript --out src/app/types.d.ts -- ./src/app/**/graphql/*.ts "
   },
   "private": true,
   "dependencies": {
@@ -24,9 +26,14 @@
     "@angular/platform-browser-dynamic": "^4.0.0",
     "@angular/router": "^4.0.0",
     "angular-cesium": "^0.0.13",
+    "apollo-angular": "^0.13.0",
+    "apollo-client": "^1.9.1",
     "cesium": "^1.36.0",
     "core-js": "^2.4.1",
+    "graphql-code-generator": "^0.8.10",
+    "graphql-tag": "^2.4.2",
     "rxjs": "^5.4.1",
+    "subscriptions-transport-ws": "^0.8.2",
     "zone.js": "^0.8.14"
   },
   "devDependencies": {

packages/client/src/app/.gitignore

@@ -0,0 +1 @@
+types.d.ts

packages/client/src/app/app.module.routing.ts

@@ -1,13 +1,18 @@
 import { NgModule } from '@angular/core';
 import { RouterModule, Routes } from '@angular/router';
-import { MainComponent } from './game/main/main.component';
+import { MainComponent } from './game/views/main/main.component';
 import { GameModule } from './game/game.module';
+import { GameRoomComponent } from './game/views/game-room/game-room.component';
 
 const routes: Routes = [
   {
     path: '',
     component: MainComponent,
   },
+  {
+    path: 'room',
+    component: GameRoomComponent,
+  },
   {
     path: '**',
     component: MainComponent,

packages/client/src/app/app.module.ts

@@ -1,8 +1,9 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-
+import { ApolloModule } from 'apollo-angular';
 import { AppComponent } from './app.component';
 import { AppRoutingModule } from './app.module.routing';
+import { getApolloClient } from './core/network/apollo-client';
 
 @NgModule({
   declarations: [
@@ -11,6 +12,7 @@ import { AppRoutingModule } from './app.module.routing';
   imports: [
     BrowserModule,
     AppRoutingModule,
+    ApolloModule.forRoot(getApolloClient),
   ],
   providers: [],
   bootstrap: [AppComponent]

packages/client/src/app/core/network/apollo-client.ts

@@ -0,0 +1,16 @@
+import { ApolloClient, createNetworkInterface } from 'apollo-client';
+import { AuthorizationMiddleware } from './authorization-middleware';
+
+const networkInterface = createNetworkInterface({
+  uri: 'http://localhost:3000/graphql'
+});
+
+networkInterface.use([new AuthorizationMiddleware()]);
+
+const apolloClient = new ApolloClient({
+  networkInterface,
+});
+
+export function getApolloClient() {
+  return apolloClient;
+}

packages/client/src/app/core/network/authorization-middleware.ts

@@ -0,0 +1,20 @@
+export class AuthorizationMiddleware {
+  static token;
+
+  static setToken(token) {
+    AuthorizationMiddleware.token = token;
+  }
+
+  static removeToken() {
+    AuthorizationMiddleware.token = undefined;
+  }
+
+  applyMiddleware(req, next) {
+    req.options.headers = {
+      ...req.options.headers,
+      'player-token': AuthorizationMiddleware.token || '',
+    };
+
+    next();
+  }
+}

packages/client/src/app/game/game.module.ts

@@ -1,17 +1,28 @@
 import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-import { MainComponent } from './main/main.component';
 import { AngularCesiumModule } from 'angular-cesium';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MdButtonModule, MdCardModule, MdDialogModule } from '@angular/material';
-import { CreateNewGameDialogComponent } from './create-new-game-dialog/create-new-game-dialog.component';
-import { JoinGameDialogComponent } from './join-game-dialog/join-game-dialog.component';
+import {
+  MdButtonModule, MdCardModule, MdDialogModule, MdGridListModule, MdInputModule,
+  MdProgressSpinnerModule
+} from '@angular/material';
+
+import { MainComponent } from './views/main/main.component';
+import { CreateNewGameDialogComponent } from './views/create-new-game-dialog/create-new-game-dialog.component';
+import { JoinGameDialogComponent } from './views/join-game-dialog/join-game-dialog.component';
+import { CharacterPickerComponent } from './views/character-picker/character-picker.component';
+import { GameService } from './services/game.service';
+import { ActiveGameService } from './services/active-game.service';
+import { GameRoomComponent } from './views/game-room/game-room.component';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
   declarations: [
     MainComponent,
     CreateNewGameDialogComponent,
-    JoinGameDialogComponent
+    JoinGameDialogComponent,
+    CharacterPickerComponent,
+    GameRoomComponent,
   ],
   imports: [
     BrowserModule,
@@ -20,11 +31,19 @@ import { JoinGameDialogComponent } from './join-game-dialog/join-game-dialog.com
     MdButtonModule,
     MdCardModule,
     MdDialogModule,
+    MdGridListModule,
+    MdProgressSpinnerModule,
+    MdInputModule,
+    FormsModule,
   ],
   exports: [
     MainComponent,
+    GameRoomComponent,
+  ],
+  providers: [
+    GameService,
+    ActiveGameService,
   ],
-  providers: [],
   entryComponents: [
     CreateNewGameDialogComponent,
     JoinGameDialogComponent,

packages/client/src/app/game/services/active-game.service.ts

@@ -0,0 +1,14 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class ActiveGameService {
+  private _currentId: string = null;
+
+  get current(): string {
+    return this._currentId;
+  }
+
+  set current(value: string) {
+    this._currentId = value;
+  }
+}

packages/client/src/app/game/services/game.service.ts

@@ -0,0 +1,32 @@
+import { Injectable } from '@angular/core';
+import { Apollo } from 'apollo-angular';
+import { createNewGameMutation } from '../../graphql/create-new-game.mutation';
+import { ApolloQueryResult } from 'apollo-client';
+import { Observable } from 'rxjs/Observable';
+import { CreateNewGame, JoinGame } from '../../types';
+import { joinGameMutation } from '../../graphql/join-game.mutation';
+
+@Injectable()
+export class GameService {
+  constructor(private apollo: Apollo) {
+  }
+
+  createNewGame(character: string): Observable<ApolloQueryResult<CreateNewGame.Mutation>> {
+    return this.apollo.mutate<CreateNewGame.Mutation>({
+      mutation: createNewGameMutation,
+      variables: {
+        character,
+      },
+    });
+  }
+
+  joinGame(gameCode: string, character: string): Observable<ApolloQueryResult<JoinGame.Mutation>> {
+    return this.apollo.mutate<JoinGame.Mutation>({
+      mutation: joinGameMutation,
+      variables: {
+        gameCode,
+        character,
+      },
+    });
+  }
+}

packages/client/src/app/game/views/character-picker/character-picker.component.html

@@ -0,0 +1,16 @@
+<div class="character-picker">
+  <md-grid-list gutterSize="20" cols="3" rowHeight="300px">
+    <md-grid-tile *ngFor="let character of availableCharacters">
+      <md-card class="character-item" (click)="select.emit(character.name)"
+               [ngClass]="{'selected' : selectedCharacter === character.name}">
+        <md-card-title>
+          {{ character.name }}
+        </md-card-title>
+        <img md-card-image [src]="character.imageUrl" />
+        <md-card-content>
+          {{ character.description }}
+        </md-card-content>
+      </md-card>
+    </md-grid-tile>
+  </md-grid-list>
+</div>

packages/client/src/app/game/views/character-picker/character-picker.component.scss

@@ -0,0 +1,16 @@
+.character-picker {
+  flex-direction: column;
+
+  .character-item {
+    img {
+      max-height: 200px;
+      object-fit: cover;
+    }
+
+    cursor: pointer;
+  }
+
+  .selected {
+    background-color: khaki;
+  }
+}