added basic mock select character component

This commit is contained in:
Gawron 2020-12-19 22:31:38 +01:00
parent 3d33b981fe
commit 1698b66f43
6 changed files with 143 additions and 1 deletions

View File

@ -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'
}
];

View File

@ -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' }),

View File

@ -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%;
}
}

View File

@ -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>

View File

@ -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'])
}
}

View File

@ -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%;