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

@@ -4,6 +4,7 @@ import { SignInComponent } from './app/components/sign-in/sign-in.component';
 import { RegistrationComponent } from './app/components/registration/registration.component';
 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';
 
 const routes: Routes = [
   {
@@ -30,6 +31,11 @@ const routes: Routes = [
     path: 'player',
     component: PlayerDashboardComponent,
     pathMatch: 'full'
+  },
+  {
+    path: 'select-character',
+    component: SelectCharacterComponent,
+    pathMatch: 'full'
   }
 ];
 

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

@@ -10,6 +10,7 @@ import { SignInComponent } from './components/sign-in/sign-in.component';
 import { RegistrationComponent } from './components/registration/registration.component';
 import { GameMasterDashboardComponent} from './components/game-master-dashboard/game-master-dashboard.component';
 import {PlayerDashboardComponent} from './components/player-dashboard/player-dashboard.component';
+import { SelectCharacterComponent } from './components/select-character/select-character.component';
 import {
   MatCardModule,
   MatTabsModule,
@@ -28,7 +29,8 @@ import {UserService} from '../services/user.service';
     SignInComponent,
     RegistrationComponent,
     GameMasterDashboardComponent,
-    PlayerDashboardComponent
+    PlayerDashboardComponent,
+    SelectCharacterComponent,
   ],
   imports: [
 BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }),

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

@@ -0,0 +1,75 @@
+@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;
+}
+
+.align-to-right {
+  text-align: right;
+}
+
+@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/select-character/select-character.component.html

@@ -0,0 +1,21 @@
+<div class="container">
+  <mat-icon matSuffix class="arrow-back" (click)="onArrowBackClick()">arrow_back</mat-icon>
+  <div class="primary-text header">Select character</div>
+    <mat-list >
+    <mat-divider></mat-divider>
+    <mat-list-item> Oweja 
+    <mat-icon matSuffix class="arrow-forward align-to-right" (click)="onCharacterClick()">arrow_forward</mat-icon>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+    <mat-list-item> James 
+      <mat-icon matSuffix class="arrow-forward align-to-right" (click)="onCharacterClick()">arrow_forward</mat-icon>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+    <mat-list-item> Legolas 
+      <mat-icon matSuffix class="arrow-forward align-to-right" (click)="onCharacterClick()">arrow_forward</mat-icon>
+    </mat-list-item>
+    <mat-divider></mat-divider>
+   </mat-list>
+
+</div>
+

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

@@ -0,0 +1,30 @@
+import { Component } from '@angular/core';
+import { Router } from '@angular/router';
+
+@Component({
+  selector: 'app-select-character',
+  templateUrl: './select-character.component.html',
+  styleUrls: ['./select-character.component.css']
+})
+export class SelectCharacterComponent {
+  isExpanded = false;
+
+  collapse() {
+    this.isExpanded = false;
+  }
+
+  toggle() {
+    this.isExpanded = !this.isExpanded;
+  }
+
+  constructor(private router: Router) {}
+
+  onCharacterClick(){
+    this.router.navigate(['player'])
+  }
+
+  onArrowBackClick(){
+    this.router.navigate(['login'])
+  }
+}
+

SessionCompanion/SessionCompanion/ClientApp/src/styles.css

@@ -57,6 +57,14 @@
   background-color: #df7c0f !important;
 }
 
+::ng-deep mat-list-item {
+  color: #df7c0f !important;
+}
+
+mat-divider {
+  border-top-color: #e9cca7 !important;
+}
+
 html,
 body {
   height: 100%;