From 012c8828e12d80b9cbd0ec98b747e92b23de2dfe Mon Sep 17 00:00:00 2001 From: Natalia Gawron Date: Fri, 11 Dec 2020 21:57:52 +0100 Subject: [PATCH] SES-87 defined default style, created LoginUI component --- .../SessionCompanion.ViewModels.xml | 1137 +++++++++-------- .../ClientApp/src/app.routing.ts | 6 + .../ClientApp/src/app/app.module.ts | 22 +- .../select-role/select-role.component.css | 16 +- .../select-role/select-role.component.ts | 1 - .../components/sign-in/sign-in.component.css | 57 + .../components/sign-in/sign-in.component.html | 53 +- .../components/sign-in/sign-in.component.ts | 24 + .../SessionCompanion/ClientApp/src/styles.css | 65 +- .../SessionCompanion/SessionCompanion.xml | 94 +- 10 files changed, 857 insertions(+), 618 deletions(-) diff --git a/SessionCompanion/SessionCompanion.ViewModels/SessionCompanion.ViewModels.xml b/SessionCompanion/SessionCompanion.ViewModels/SessionCompanion.ViewModels.xml index 88ffc4e..6ff6f0c 100644 --- a/SessionCompanion/SessionCompanion.ViewModels/SessionCompanion.ViewModels.xml +++ b/SessionCompanion/SessionCompanion.ViewModels/SessionCompanion.ViewModels.xml @@ -1,553 +1,584 @@ - - - - SessionCompanion.ViewModels - - - - - Identyfikator przynależności postaci - - - - - Identyfikator przeszłości postaci - - - - - Identyfikator biografii postaci - - - - - Identyfikator postaci - - - - - Nazwa postaci - - - - - Identyfikator klasy postaci - - - - - Identyfikator przynależności postaci - - - - - Identyfikator przeszłości postaci - - - - - Płeć postaci - - - - - Identyfikator postaci - - - - - Nazwa postaci - - - - - Poziom postaci - - - - - Aktualna ilość życia postaci - - - - - Identyfikator postaci - - - - - Id użytkownika do którego przypisana jest postać - - - - - Nazwa postaci - - - - - Nazwa klasy postaci - - - - - Poziom postaci - - - - - Identyfikator postaci - - - - - Id użytkownika do którego przypisana jest postać - - - - - Identyfikator charyzmy postaci - - - - - Identyfikator postaci - - - - - Wartość charyzmy - - - - - Modyfikator rzutów - - - - - Modyfikator rzutów obronnych - - - - - Czy postać posiada biegłość w charyźmie - - - - - Wartość umiejętności oszustwa - - - - - Czy postać posiada biegłość w oszustwie - - - - - Wartość umiejętności zastraszania - - - - - Czy postać posiada biegłość w zastraszaniu - - - - - Wartość umiejętności występowania - - - - - Czy postać posiada biegłość w występowaniu - - - - - Wartość umiejętności perswazji - - - - - Czy postać posiada biegłość w perswazji - - - - - Identyfikator klasy postaci - - - - - Nazwa klasy - - - - - Identyfikator kondycji postaci - - - - - Identyfikator postaci - - - - - Wartość kondycji - - - - - Modyfikator rzutów - - - - - Modyfikator rzutów obronnych - - - - - Czy postać posiada biegłość w kondycji - - - - - Identyfikator zręczności postaci - - - - - Identyfikator postaci - - - - - Wartość zręczności - - - - - Modyfikator rzutów - - - - - Modyfikator rzutów obronnych - - - - - Czy postać posiada biegłość w zręczności - - - - - Wartość umiejętności akrobatyki - - - - - Czy postać posiada biegłość w akrobatyce - - - - - Wartość umiejętności zwinnych dłoni - - - - - Czy postać posiada biegłość w zwinnych dłoniach - - - - - Wartość umiejętności skradania się - - - - - Czy postać posiada biegłość w skradaniu się - - - - - Identyfikator inteligencji postaci - - - - - Identyfikator postaci - - - - - Wartość inteligencji - - - - - Modyfikator rzutów - - - - - Modyfikator rzutów obronnych - - - - - Czy postać posiada biegłość w inteligencji - - - - - Wartość umiejętności wiedzy tejemnej - - - - - Czy postać posiada biegłość w wiedzy tejemnej - - - - - Wartość umiejętności historii - - - - - Czy postać posiada biegłość w historii - - - - - Wartość umiejętności śledztwa - - - - - Czy postać posiada biegłość w śledztwie - - - - - Wartość umiejętności przyrody - - - - - Czy postać posiada biegłość w przyrodzie - - - - - Wartość umiejętności religii - - - - - Czy postać posiada biegłość w religii - - - - - Identyfikator rasy postaci - - - - - Nazwa rasy - - - - - Identyfikator statystyk postaci - - - - - Identyfikator postaci - - - - - Ilość punktów doświadczenia - - - - - Poziom postaci - - - - - Szybkość postaci - - - - - Inicjatywa postaci - - - - - Maksymalna wartość punktów życia - - - - - Aktualna wartość punktów życia - - - - - Klasa pancerza - - - - - Premia z biegłości - - - - - Identyfikator siły postaci - - - - - Identyfikator postaci - - - - - Wartość siły - - - - - Modyfikator rzutów - - - - - Modyfikator rzutów obronnych - - - - - Czy postać posiada biegłość w sile - - - - - Wartość umiejętności atletyki - - - - - Czy postać posiada biegłość w atletyce - - - - - Identyfikator użytkownika - - - - - Nazwa użytkowika - - - - - Hasło użytkownika - - - - - Identyfikator mądrości postaci - - - - - Identyfikator postaci - - - - - Wartość mądrości - - - - - Modyfikator rzutów - - - - - Modyfikator rzutów obronnych - - - - - Czy postać posiada biegłość w mądrości - - - - - Wartość umiejętności opieki nad zwierzętami - - - - - Czy postać posiada biegłość w opiece nad zwierzętami - - - - - Wartość umiejętności intuicji - - - - - Czy postać posiada biegłość w intuicji - - - - - Wartość umiejętności medycyny - - - - - Czy postać posiada biegłość w medycynie - - - - - Wartość umiejętności percepcji - - - - - Czy postać posiada biegłość w percepcji - - - - - Wartość umiejętności sztuki przetrwania - - - - - Czy postać posiada biegłość w sztuce przetrwania - - - - + + + + SessionCompanion.ViewModels + + + + + Identyfikator przynależności postaci + + + + + Kod błędu + + + + + Wiadomość błędu do pokazania + + + + + Wiadomość mówiąca o poprawnym wykonaniu zadania + + + + + Konstruktor obiektu + + Wiadomość dotycząca operacji + + + + Kod odpowiedzi, domyślnie nadawany jest 200 + + + + + Wiadomość dotycząca wykoanania operacji + + + + + Identyfikator przeszłości postaci + + + + + Identyfikator biografii postaci + + + + + Identyfikator postaci + + + + + Nazwa postaci + + + + + Identyfikator klasy postaci + + + + + Identyfikator przynależności postaci + + + + + Identyfikator przeszłości postaci + + + + + Płeć postaci + + + + + Identyfikator postaci + + + + + Nazwa postaci + + + + + Poziom postaci + + + + + Aktualna ilość życia postaci + + + + + Identyfikator postaci + + + + + Id użytkownika do którego przypisana jest postać + + + + + Nazwa postaci + + + + + Nazwa klasy postaci + + + + + Poziom postaci + + + + + Identyfikator postaci + + + + + Id użytkownika do którego przypisana jest postać + + + + + Identyfikator charyzmy postaci + + + + + Identyfikator postaci + + + + + Wartość charyzmy + + + + + Modyfikator rzutów + + + + + Modyfikator rzutów obronnych + + + + + Czy postać posiada biegłość w charyźmie + + + + + Wartość umiejętności oszustwa + + + + + Czy postać posiada biegłość w oszustwie + + + + + Wartość umiejętności zastraszania + + + + + Czy postać posiada biegłość w zastraszaniu + + + + + Wartość umiejętności występowania + + + + + Czy postać posiada biegłość w występowaniu + + + + + Wartość umiejętności perswazji + + + + + Czy postać posiada biegłość w perswazji + + + + + Identyfikator klasy postaci + + + + + Nazwa klasy + + + + + Identyfikator kondycji postaci + + + + + Identyfikator postaci + + + + + Wartość kondycji + + + + + Modyfikator rzutów + + + + + Modyfikator rzutów obronnych + + + + + Czy postać posiada biegłość w kondycji + + + + + Identyfikator zręczności postaci + + + + + Identyfikator postaci + + + + + Wartość zręczności + + + + + Modyfikator rzutów + + + + + Modyfikator rzutów obronnych + + + + + Czy postać posiada biegłość w zręczności + + + + + Wartość umiejętności akrobatyki + + + + + Czy postać posiada biegłość w akrobatyce + + + + + Wartość umiejętności zwinnych dłoni + + + + + Czy postać posiada biegłość w zwinnych dłoniach + + + + + Wartość umiejętności skradania się + + + + + Czy postać posiada biegłość w skradaniu się + + + + + Identyfikator inteligencji postaci + + + + + Identyfikator postaci + + + + + Wartość inteligencji + + + + + Modyfikator rzutów + + + + + Modyfikator rzutów obronnych + + + + + Czy postać posiada biegłość w inteligencji + + + + + Wartość umiejętności wiedzy tejemnej + + + + + Czy postać posiada biegłość w wiedzy tejemnej + + + + + Wartość umiejętności historii + + + + + Czy postać posiada biegłość w historii + + + + + Wartość umiejętności śledztwa + + + + + Czy postać posiada biegłość w śledztwie + + + + + Wartość umiejętności przyrody + + + + + Czy postać posiada biegłość w przyrodzie + + + + + Wartość umiejętności religii + + + + + Czy postać posiada biegłość w religii + + + + + Identyfikator rasy postaci + + + + + Nazwa rasy + + + + + Identyfikator statystyk postaci + + + + + Identyfikator postaci + + + + + Ilość punktów doświadczenia + + + + + Poziom postaci + + + + + Szybkość postaci + + + + + Inicjatywa postaci + + + + + Maksymalna wartość punktów życia + + + + + Aktualna wartość punktów życia + + + + + Klasa pancerza + + + + + Premia z biegłości + + + + + Identyfikator siły postaci + + + + + Identyfikator postaci + + + + + Wartość siły + + + + + Modyfikator rzutów + + + + + Modyfikator rzutów obronnych + + + + + Czy postać posiada biegłość w sile + + + + + Wartość umiejętności atletyki + + + + + Czy postać posiada biegłość w atletyce + + + + + Identyfikator użytkownika + + + + + Nazwa użytkowika + + + + + Hasło użytkownika + + + + + Identyfikator mądrości postaci + + + + + Identyfikator postaci + + + + + Wartość mądrości + + + + + Modyfikator rzutów + + + + + Modyfikator rzutów obronnych + + + + + Czy postać posiada biegłość w mądrości + + + + + Wartość umiejętności opieki nad zwierzętami + + + + + Czy postać posiada biegłość w opiece nad zwierzętami + + + + + Wartość umiejętności intuicji + + + + + Czy postać posiada biegłość w intuicji + + + + + Wartość umiejętności medycyny + + + + + Czy postać posiada biegłość w medycynie + + + + + Wartość umiejętności percepcji + + + + + Czy postać posiada biegłość w percepcji + + + + + Wartość umiejętności sztuki przetrwania + + + + + Czy postać posiada biegłość w sztuce przetrwania + + + + diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts index 5618a57..1495863 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app.routing.ts @@ -1,6 +1,7 @@ import { RouterModule, Routes } from '@angular/router'; import { SelectRoleComponent } from './app/components/select-role/select-role.component'; import { SignInComponent } from './app/components/sign-in/sign-in.component'; +import { RegistrationComponent } from './app/components/registration/registration.component'; const routes: Routes = [ { @@ -13,6 +14,11 @@ const routes: Routes = [ component: SignInComponent, pathMatch: 'full' }, + { + path: 'register', + component: RegistrationComponent, + pathMatch: 'full' + }, ]; export const appRoutingModule = RouterModule.forRoot(routes); diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts index 518f9cc..19bfa46 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/app.module.ts @@ -6,15 +6,24 @@ import { AppComponent } from './app.component'; import { SelectRoleComponent } from './components/select-role/select-role.component'; import { appRoutingModule } from '../app.routing'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; -import { MatButtonModule } from '@angular/material/button'; -import { MatCardModule } from '@angular/material/card'; import { SignInComponent } from './components/sign-in/sign-in.component'; +import { RegistrationComponent } from './components/registration/registration.component'; +import { + MatCardModule, + MatTabsModule, + MatFormFieldModule, + MatInputModule, + MatButtonModule, + MatCheckboxModule, + MatIconModule +} from '@angular/material'; @NgModule({ declarations: [ AppComponent, SelectRoleComponent, - SignInComponent + SignInComponent, + RegistrationComponent, ], imports: [ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), @@ -22,8 +31,13 @@ BrowserModule.withServerTransition({ appId: 'ng-cli-universal' }), FormsModule, appRoutingModule, BrowserAnimationsModule, - MatButtonModule, + MatInputModule, MatCardModule, + MatTabsModule, + MatFormFieldModule, + MatButtonModule, + MatCheckboxModule, + MatIconModule, ], providers: [], bootstrap: [AppComponent] diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css index 4500b88..946e5cb 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.css @@ -4,18 +4,24 @@ align-items: center; flex-wrap: wrap; padding: 10%; + top: 50%; } .button { border-radius: 15px; + border: #e9cca7 1px solid; +} + +.button:hover { + opacity: 0.5; } #player-button { - background-color: #2699fb; + background-color: #df7c0f; } #game-master-button { - background-color: #440505; + background-color: #291f28; } .font { @@ -25,6 +31,9 @@ } @media (max-width: 768px) { + .container { + padding-top: 70%; + } .button { margin: 10px; padding: 10px; @@ -37,6 +46,9 @@ } @media (min-width: 768px) { + .container { + padding-top: 20%; + } .button { margin: 20px; padding: 20px; diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts index 6ccd92c..b55c819 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/select-role/select-role.component.ts @@ -1,6 +1,5 @@ import { Component } from '@angular/core'; import { Router } from '@angular/router'; -import { SignInComponent } from './../sign-in/sign-in.component'; @Component({ selector: 'app-select-role', diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css index e69de29..4ea546d 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.css @@ -0,0 +1,57 @@ +@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%; +} +@media (max-width: 768px) { + .container { + width: 350px; + padding-top: 50%; + } +} + +@media (min-width: 768px) { + .container { + width: 550px; + padding-top: 20%; + } +} diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html index 2b2ebb2..303bc0f 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.html @@ -1 +1,52 @@ -

Sign in

\ No newline at end of file +
+ arrow_back + + + Username is required + person + + + + + lock + + Password is required + + + Password must be of length 6 + + + + + +
Not a member?
+ +
+ diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts index b1b1961..d4c960d 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts +++ b/SessionCompanion/SessionCompanion/ClientApp/src/app/components/sign-in/sign-in.component.ts @@ -1,4 +1,5 @@ import { Component } from '@angular/core'; +import { Router } from '@angular/router'; @Component({ selector: 'app-sign-in', @@ -8,6 +9,29 @@ import { Component } from '@angular/core'; export class SignInComponent { isExpanded = false; + username = ""; + password = ""; + + constructor(private router: Router) {} + + ngOnInit(): void { + } + + onLoginButtonClick(){ + //TODO connect with backend and added router + console.log("Clicked Login"); + } + + onRegisterButtonClick(){ + this.router.navigate(['register']) + //TODO connect with backend + console.log("Clicked Register"); + } + + onArrowBackClick(){ + this.router.navigate(['']) + } + collapse() { this.isExpanded = false; } diff --git a/SessionCompanion/SessionCompanion/ClientApp/src/styles.css b/SessionCompanion/SessionCompanion/ClientApp/src/styles.css index 250ee17..5fcfd4a 100644 --- a/SessionCompanion/SessionCompanion/ClientApp/src/styles.css +++ b/SessionCompanion/SessionCompanion/ClientApp/src/styles.css @@ -1,22 +1,67 @@ @import "@angular/material/prebuilt-themes/deeppurple-amber.css"; -a { - color: #0366d6; -} - -code { - color: #e01a76; -} - .btn-primary { color: #fff; - background-color: #1b6ec2; - border-color: #1861ac; + background-color: #df7c0f; + border-color: #e9cca7 1px solid; + border-radius: 4px; + opacity: 1; +} +.btn-primary:hover { + opacity: 0.5; + color: #e9cca7; +} + +.btn-secondary { + color: #e9cca7; + background-color: #102028; + border-color: #e9cca7 1px solid; + border-radius: 4px; + opacity: 1; +} + +.btn-secondary:hover { + opacity: 0.5; + color: #df7c0f; +} + +.input-basic { + border: #e9cca7 1px solid; +} + +.arrow-back:hover { + opacity: 0.5; +} + +/* icon in mat-form-field*/ +::ng-deep mat-form-field { + color: #df7c0f !important; +} + +/* label of input in mat-form-field*/ +::ng-deep mat-form-field .mat-form-field-label { + color: #df7c0f !important; +} + +/* default color of underline */ +::ng-deep mat-form-field .mat-form-field-underline { + background-color: #e9cca7 !important; +} + +::ng-deep mat-form-field .mat-input-element { + caret-color: #ffffff !important; +} + +/* color line when somebody is typing in input*/ +::ng-deep mat-form-field .mat-form-field-ripple { + background-color: #df7c0f !important; } html, body { height: 100%; + background-color: #102028; + color: #e9cca7; } body { margin: 0; diff --git a/SessionCompanion/SessionCompanion/SessionCompanion.xml b/SessionCompanion/SessionCompanion/SessionCompanion.xml index 7ec5749..e075b64 100644 --- a/SessionCompanion/SessionCompanion/SessionCompanion.xml +++ b/SessionCompanion/SessionCompanion/SessionCompanion.xml @@ -1,47 +1,47 @@ - - - - SessionCompanion - - - - - Metoda zwraca postać ze wskazanym identyfikatorem - - Identyfikator postaci - ViewModel Postaci - - - - Lista zalogowanych graczy i identyfikator wybranej postaci - - - - - Status, czy GM został już zalogowany - - - - - Metoda nadpisuje istniejącą metodę wywoływaną na utratę połączenia. - Ma ona za zadanie usunąć odłączonego gracza z listy zalogowanych. - Pozostałe ekrany zostają powiadomione wiadomością "GoodBye" - - Błąd/przyczyna odłączenia - - - - Logowanie do Huba dla GM - Wysyła wiadomość "Welcome" do wszystkich zalogowanych użytkoników - - Zwraca true - jeśli udało się zalogować, false - jesli ktoś zalogował się już jako GM - - - - Logowanie do Huba dla Gracza - - Identyfikator zalogowanego bohatera - Wysyła wiadomość "Welcome" do wszystkich zalogowanych użytkoników - - - + + + + SessionCompanion + + + + + Metoda zwraca postać ze wskazanym identyfikatorem + + Identyfikator postaci + ViewModel Postaci + + + + Lista zalogowanych graczy i identyfikator wybranej postaci + + + + + Status, czy GM został już zalogowany + + + + + Metoda nadpisuje istniejącą metodę wywoływaną na utratę połączenia. + Ma ona za zadanie usunąć odłączonego gracza z listy zalogowanych. + Pozostałe ekrany zostają powiadomione wiadomością "GoodBye" + + Błąd/przyczyna odłączenia + + + + Logowanie do Huba dla GM + Wysyła wiadomość "Welcome" do wszystkich zalogowanych użytkoników + + Zwraca true - jeśli udało się zalogować, false - jesli ktoś zalogował się już jako GM + + + + Logowanie do Huba dla Gracza + + Identyfikator zalogowanego bohatera + Wysyła wiadomość "Welcome" do wszystkich zalogowanych użytkoników + + +