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

@@ -6,6 +6,7 @@ import {GameMasterDashboardComponent} from './app/components/game-master-dashboa
 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";
+import {PersonalizeTemplateComponent} from "./app/components/personalize-template/personalize-template.component";
 
 const routes: Routes = [
   {
@@ -39,10 +40,15 @@ const routes: Routes = [
     pathMatch: 'full'
   },
   {
-    path: 'create-character',
+    path: 'create-character-step-1',
     component: CreateCharacterComponent,
     pathMatch: 'full'
   },
+  {
+    path: 'create-character-step-2',
+    component: PersonalizeTemplateComponent,
+    pathMatch: 'full'
+  }
 ];
 
 export  const appRoutingModule = RouterModule.forRoot(routes);

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

@@ -63,6 +63,7 @@ import { GameMasterTurntrackerComponent } from './components/game-master-turntra
 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';
+import { PersonalizeTemplateComponent } from './components/personalize-template/personalize-template.component';
 
 @NgModule({
   declarations: [
@@ -92,6 +93,7 @@ import { CreateCharacterComponent } from './components/create-character/create-c
     GameMasterTurntrackerComponent,
     ChooseMonsterDialogComponent,
     CreateCharacterComponent,
+    PersonalizeTemplateComponent,
   ],
   imports: [
     BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),
@@ -154,6 +156,7 @@ import { CreateCharacterComponent } from './components/create-character/create-c
     GameMasterTurntrackerComponent,
     ChooseMonsterDialogComponent,
     CreateCharacterComponent,
+    PersonalizeTemplateComponent,
   ],
 })
 export class AppModule {}

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

@@ -1,6 +1,7 @@
 <div class="container">
   <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
-  <div class="primary-text header">Create character from Template</div>
+  <div class="primary-text header">Create character</div>
+  <div class="primary-text header">Step 1 - Choose one of template</div>
   <mat-divider class="mat-divider--custom-style"></mat-divider>
   <mat-list>
     <mat-list-item *ngFor="let character of charactersTemplateList">
@@ -11,11 +12,4 @@
       <mat-divider class="mat-divider--custom-style"></mat-divider>
     </mat-list-item>
   </mat-list>
-  <!--<button
-    id="create-character-submit-button"
-    mat-raised-button
-    class="btn-primary form-container"
-    (click)="onCreateCharacterButton()">
-    CONTINUE
-  </button>-->
 </div>

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

@@ -6,8 +6,8 @@ import { first } from 'rxjs/operators';
 import { ErrorResponse } from '../../../types/ErrorResponse';
 import { HttpErrorResponse } from '@angular/common/http';
 import { CharacterFromTemplatesViewModel } from '../../../types/viewmodels/character-viewmodels/CharacterFromTemplatesViewModel';
-import {CharacterService } from '../../../services/character.service';
+import { CharacterService } from '../../../services/character.service';
-import {AddCharacterId, CreateCharacterFromTemplate} from "../../store/actions/player.action";
+import { CreateCharacterFromTemplate } from '../../store/actions/player.action';
 
 @Component({
   selector: 'app-create-character',
@@ -23,16 +23,13 @@ export class CreateCharacterComponent implements OnInit {
     this.getTemplateCharacters();
   }
 
-  onCreateCharacterButton() {
-    this.router.navigate(['select-character']);
-  }
-
   onArrowBackClick() {
     this.router.navigate(['select-character']);
   }
 
   onCharacterClick() {
     this.store.dispatch(new CreateCharacterFromTemplate);
+    this.router.navigate(['create-character-step-2']);
   }
 
   getTemplateCharacters() {

SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.css

@@ -0,0 +1,77 @@
+@import '../../../styles.css';
+
+mat-form-field {
+  color: #df7c0f;
+}
+
+:host {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+input {
+  min-width: 150px;
+  max-width: 500px;
+  width: 100%;
+}
+
+.container {
+  margin: 5%;
+  display: flex;
+  flex-direction: column;
+}
+.container h1 {
+  margin-bottom: 1rem;
+}
+
+.form-container {
+  padding: 10px;
+  margin: 5px;
+}
+
+.primary-text {
+  height: 100px;
+  color: #df7c0f;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 1%;
+  margin: 1%;
+}
+
+.header {
+  font-size: 20px;
+}
+
+.mat-divider--custom-style {
+  background-color: #9e8b6e;
+  box-shadow: 0 1px 0 0 #d8d8d8;
+}
+
+@media (max-width: 400px) {
+  .container {
+    margin-left: 0%;
+    width: 300px;
+    padding-top: 5%;
+  }
+}
+
+@media (min-width: 401px) {
+  .container {
+    margin-left: 1%;
+    width: 450px;
+    padding-top: 10%;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    width: 550px;
+    padding-top: 5%;
+  }
+}

SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.html

@@ -0,0 +1,12 @@
+<div class="container">
+  <mat-icon matSuffix class="arrow-back arrow-select" (click)="onArrowBackClick()">arrow_back</mat-icon>
+  <div class="primary-text header">Create character</div>
+  <div class="primary-text header">Step 2 - Personalize template</div>
+  <button
+    id="create-character-submit-button"
+    mat-raised-button
+    class="btn-primary form-container"
+    (click)="onCreateCharacterButton()">
+    CONTINUE
+  </button>
+</div>

SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.spec.ts

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

SessionCompanion/SessionCompanion/ClientApp/src/app/components/personalize-template/personalize-template.component.ts

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

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

@@ -48,6 +48,6 @@ export class SelectCharacterComponent implements OnInit {
   }
 
   onCreateCharacter() {
-    this.router.navigate(['create-character']);
+    this.router.navigate(['create-character-step-1']);
   }
 }