SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts

@@ -5,6 +5,7 @@ import { RegistrationComponent } from './app/components/registration/registratio
 import {GameMasterDashboardComponent} from './app/components/game-master-dashboard/game-master-dashboard.component';
 import {PlayerDashboardComponent} from './app/components/player-dashboard/player-dashboard.component';
 import { SelectCharacterComponent } from './app/components/select-character/select-character.component';
+import {CreateCharacterComponent} from "./app/components/create-character/create-character.component";
 
 const routes: Routes = [
   {
@@ -37,6 +38,11 @@ const routes: Routes = [
     component: SelectCharacterComponent,
     pathMatch: 'full'
   },
+  {
+    path: 'create-character',
+    component: CreateCharacterComponent,
+    pathMatch: 'full'
+  },
 ];
 
 export  const appRoutingModule = RouterModule.forRoot(routes);

SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts

@@ -62,6 +62,7 @@ import { MessageDialogComponent } from './shared/message-dialog/message-dialog.c
 import { GameMasterTurntrackerComponent } from './components/game-master-turntracker/game-master-turntracker.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog/choose-monster-dialog.component';
+import { CreateCharacterComponent } from './components/create-character/create-character.component';
 
 @NgModule({
   declarations: [
@@ -90,6 +91,7 @@ import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog
     MessageDialogComponent,
     GameMasterTurntrackerComponent,
     ChooseMonsterDialogComponent,
+    CreateCharacterComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -151,6 +153,7 @@ import { ChooseMonsterDialogComponent } from './components/choose-monster-dialog
     MessageDialogComponent,
     GameMasterTurntrackerComponent,
     ChooseMonsterDialogComponent,
+    CreateCharacterComponent,
   ],
 })
 export class AppModule {}

SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.css

@@ -0,0 +1 @@
+@import "../../../styles.css";

SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.html

@@ -0,0 +1,8 @@
+<p>create-character works!</p>
+<button
+  id="create-character-submit-button"
+  mat-raised-button
+  class="btn-primary form-container"
+  (click)="onCreateCharacterButton()">
+  CONTINUE
+</button>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CreateCharacterComponent } from './create-character.component';
+
+describe('CreateCharacterComponent', () => {
+  let component: CreateCharacterComponent;
+  let fixture: ComponentFixture<CreateCharacterComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ CreateCharacterComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(CreateCharacterComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

SessionCompanion/SessionCompanion/ClientApp/src/app/components/create-character/create-character.component.ts

@@ -0,0 +1,19 @@
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-create-character',
+  templateUrl: './create-character.component.html',
+  styleUrls: ['./create-character.component.css']
+})
+export class CreateCharacterComponent implements OnInit {
+
+  constructor(private router: Router) { }
+
+  ngOnInit() {
+  }
+
+  onCreateCharacterButton() {
+    this.router.navigate(['select-character']);
+  }
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.css

@@ -69,3 +69,8 @@ input {
     padding-top: 5%;
   }
 }
+
+.mat-divider--custom-style {
+  background-color: #9e8b6e;
+  box-shadow: 0 1px 0 0 #d8d8d8;
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.html

@@ -1,15 +1,26 @@
 <div class="container">
   <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
-  <div class="primary-text header">Select character</div>
+  <div *ngFor="let character of charactersList" class="primary-text header">Select character</div>
+  <mat-divider *ngFor="let character of charactersList" class="mat-divider--custom-style"></mat-divider>
   <mat-list>
-    <mat-divider></mat-divider>
     <mat-list-item *ngFor="let character of charactersList">
       <mat-icon mat-list-icon>account_circle</mat-icon>
-      <div mat-line>{{character.name}}</div>
+      <div mat-line (click)="onCharacterClick(character.id)">{{character.name}}</div>
       <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCharacterClick(character.id)">arrow_forward</mat-icon>
       <div mat-line> {{character.className}} level: {{character.level}}</div>
-      <mat-divider></mat-divider>
+      <mat-divider class="mat-divider--custom-style"></mat-divider>
     </mat-list-item>
   </mat-list>
+  <div *ngFor="let character of charactersList" class="primary-text header">or</div>
+  <div class="primary-text header">Create character</div>
+  <mat-divider class="mat-divider--custom-style"></mat-divider>
+  <mat-list>
+    <mat-list-item>
+      <mat-icon mat-list-icon>account_circle</mat-icon>
+      <div mat-line>Create character</div>
+      <mat-icon matSuffix class="arrow-forward arrow-select" (click)="onCreateCharacter()">arrow_forward</mat-icon>
+    </mat-list-item>
+  </mat-list>
+  <mat-divider class="mat-divider--custom-style"></mat-divider>
 </div>
 

SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-character/select-character.component.ts

@@ -46,4 +46,8 @@ export class SelectCharacterComponent implements OnInit {
     this.store.dispatch(new ClearUserId());
     this.router.navigate(['login']);
   }
+
+  onCreateCharacter() {
+    this.router.navigate(['create-character']);
+  }
 }