-
Room not found 😢
-
+
+
Room not found 😢
+
+
+
+
-
\ No newline at end of file
+
diff --git a/pokeR/ClientApp/src/app/pages/ingame/ingame.component.scss b/pokeR/ClientApp/src/app/pages/ingame/ingame.component.scss
index e69de29..7a75df3 100644
--- a/pokeR/ClientApp/src/app/pages/ingame/ingame.component.scss
+++ b/pokeR/ClientApp/src/app/pages/ingame/ingame.component.scss
@@ -0,0 +1,54 @@
+@import "../../../theme/variables";
+
+.enter-form {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ animation: fan-fade-in 1s 1s ease forwards;
+ opacity: 0;
+}
+
+.bg-underlay {
+ z-index: -1;
+}
+
+.contained {
+ max-width: 800px;
+}
+
+.bg-feather-mask {
+ box-shadow: 0 0 $thicc $thicc var(--primary-color);
+ padding: $some;
+ background-color: var(--primary-color);
+ border-radius: 40%;
+}
+
+@keyframes fan-fade-in {
+ from {
+ opacity: 0;
+ transform: scale(0.9);
+ }
+
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+.invalid-container {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ height: 100vh;
+
+ h4 {
+ font-size: 2.3rem;
+ font-weight: lighter;
+ }
+
+ .btn {
+ margin: $some;
+ }
+}
diff --git a/pokeR/ClientApp/src/app/pages/ingame/ingame.component.ts b/pokeR/ClientApp/src/app/pages/ingame/ingame.component.ts
index a03e871..3a4d3b6 100644
--- a/pokeR/ClientApp/src/app/pages/ingame/ingame.component.ts
+++ b/pokeR/ClientApp/src/app/pages/ingame/ingame.component.ts
@@ -3,7 +3,7 @@ import { ActivatedRoute } from '@angular/router';
import { Room } from 'src/app/models/entities/room';
import { Observable } from 'rxjs';
import { PokerService } from 'src/app/services/poker.service';
-import { map, flatMap } from 'rxjs/operators';
+import { map, flatMap, tap } from 'rxjs/operators';
@Component({
selector: 'app-ingame',
@@ -21,16 +21,21 @@ export class IngameComponent implements OnInit {
ngOnInit() {
this.loadRoom().subscribe();
- this.route.params.subscribe(p => {
- this.roomId = p['id'];
- });
}
onRoomError = (): boolean => this.isInvalid = true;
onJoined = (): boolean => this.isInGame = true;
- loadRoom = (): Observable
=> this.route.params
- .pipe(flatMap(p => this.service.getRoom(p['id'])))
- .pipe(map(r => this.room = r))
+ loadRoom = (): Observable => this.route.params.pipe(
+ map(params => params['id']),
+ tap(id => this.roomId = id),
+ flatMap(id => this.service.getRoom(id)),
+ map(room => this.room = room)
+ )
+
+ reload = () => {
+ this.service.getRoom(this.roomId).pipe(map(room => this.room = room)).subscribe();
+ this.isInvalid = false;
+ }
}
diff --git a/pokeR/ClientApp/src/app/pages/landing/landing.component.html b/pokeR/ClientApp/src/app/pages/landing/landing.component.html
index c7a769f..21cb94b 100644
--- a/pokeR/ClientApp/src/app/pages/landing/landing.component.html
+++ b/pokeR/ClientApp/src/app/pages/landing/landing.component.html
@@ -1,15 +1,19 @@
-
-
-
-
-
Planning PokeR
-
- v1.2
-
+
\ No newline at end of file
diff --git a/pokeR/ClientApp/src/app/pages/landing/landing.component.scss b/pokeR/ClientApp/src/app/pages/landing/landing.component.scss
index e69de29..90f1cdb 100644
--- a/pokeR/ClientApp/src/app/pages/landing/landing.component.scss
+++ b/pokeR/ClientApp/src/app/pages/landing/landing.component.scss
@@ -0,0 +1,134 @@
+@import '../../../theme/variables';
+
+.landing-container {
+ width: 100%;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: row;
+ align-items: stretch;
+ overflow: hidden;
+ flex-wrap: wrap;
+
+ .promo-pane {
+ background-color: var(--accent-color);
+ padding: $thicc;
+ flex-grow: 1;
+ position: relative;
+ overflow: hidden;
+ z-index: 0;
+
+ .cards {
+ position: absolute;
+ pointer-events: none;
+ transform: rotate(-36deg);
+ width: 100%;
+ height: 100%;
+ position: absolute;
+
+ .card {
+ width: 340px;
+ height: 410px;
+ border-radius: 48px;
+ display: block;
+ background: linear-gradient(0deg, transparent, var(--primary-color));
+ opacity: 0;
+ position: absolute;
+ animation-name: slide-up;
+ animation-timing-function: ease;
+ animation-duration: .8s;
+ animation-fill-mode: forwards;
+
+ &.pos-a {
+ top: 12%;
+ left: 47%;
+ animation-delay: 0.8s;
+ }
+
+ &.pos-b {
+ top: 18%;
+ left: 15%;
+ animation-delay: 1.1s;
+ }
+
+ &.pos-c {
+ top: 41%;
+ left: 32%;
+ animation-delay: 1.24s;
+ }
+ }
+ }
+
+ .promo-text {
+ z-index: 4;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ height: 100%;
+
+ h1 {
+ font-weight: normal;
+ font-size: 48px;
+ margin: 0;
+ animation: slide-left 0.8s .5s ease forwards;
+ opacity: 0;
+ }
+
+ p {
+ font-size: 20px;
+ animation: slide-left 0.8s .7s ease forwards;
+ opacity: 0;
+ }
+ }
+ }
+
+ .content-pane {
+ flex-grow: 2;
+ background-color: var(--primary-color);
+ padding: $thicc;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: stretch;
+ box-shadow: 0 0 0 0 var(--primary-color);
+ z-index: 1;
+ }
+
+ &.exiting {
+ pointer-events: none;
+
+ .content-pane {
+ &>* {
+ transition: opacity .5s ease;
+ opacity: 0;
+ }
+
+ transition: box-shadow .5s ease;
+ box-shadow: 0 0 0 100vw var(--primary-color);
+ }
+ }
+}
+
+@keyframes slide-up {
+ from {
+ opacity: 0;
+ transform: translateY(168px);
+ }
+
+ to {
+ opacity: 0.35;
+ transform: translateY(0);
+ }
+}
+
+@keyframes slide-left {
+ from {
+ opacity: 0;
+ transform: translateX(-168px);
+ }
+
+ to {
+ opacity: 2;
+ transform: translateX(0);
+ }
+}
\ No newline at end of file
diff --git a/pokeR/ClientApp/src/app/pages/landing/landing.component.ts b/pokeR/ClientApp/src/app/pages/landing/landing.component.ts
index 0a884c5..ccc42ef 100644
--- a/pokeR/ClientApp/src/app/pages/landing/landing.component.ts
+++ b/pokeR/ClientApp/src/app/pages/landing/landing.component.ts
@@ -1,15 +1,23 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
+import { Subscription, of } from 'rxjs';
+import { delay, tap } from 'rxjs/operators';
+import { Router } from '@angular/router';
@Component({
selector: 'app-landing',
templateUrl: './landing.component.html',
styleUrls: ['./landing.component.scss']
})
-export class LandingComponent implements OnInit {
+export class LandingComponent {
+ public exiting = false;
- constructor() { }
-
- ngOnInit() {
- }
+ constructor(
+ private router: Router
+ ) { }
+ onExit = (route: any[]): Subscription => of(null).pipe(
+ tap(() => this.exiting = true),
+ delay(550),
+ tap(() => this.router.navigate(route))
+ ).subscribe()
}
diff --git a/pokeR/ClientApp/src/app/services/poker.service.ts b/pokeR/ClientApp/src/app/services/poker.service.ts
index 9585078..8354c7a 100644
--- a/pokeR/ClientApp/src/app/services/poker.service.ts
+++ b/pokeR/ClientApp/src/app/services/poker.service.ts
@@ -2,10 +2,10 @@ import { Injectable, EventEmitter } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { CreateRoomRequest } from '../models/create-room-request';
import { Deck } from '../models/entities/deck';
-import { of, Observable, from, Subject, forkJoin } from 'rxjs';
+import { of, Observable, from, forkJoin } from 'rxjs';
import { map, flatMap } from 'rxjs/operators';
import { Room } from '../models/entities/room';
-import { HubConnection, HubConnectionBuilder, JsonHubProtocol } from '@aspnet/signalr';
+import { HubConnection, HubConnectionBuilder, JsonHubProtocol } from '@microsoft/signalr';
import { JoinRoomRequest } from '../models/join-room-request';
import { User } from '../models/entities/user';
import { ListChange } from '../models/list-change';
@@ -44,32 +44,32 @@ export class PokerService {
this.initializeHubWatches().subscribe();
}
- public getEmblemUrl = (id: number): string => `api/emblems/${id}/image`;
+ public getEmblemUrl = (id: number): string => `/api/emblems/${id}/image`;
public reset = (): void => this.room = null;
public createRoom = (request: CreateRoomRequest): Observable
=>
- this.http.post('api/rooms', request)
+ this.http.post('/api/rooms', request)
public getDecks = (): Observable =>
this.decks.length ? of(this.decks) :
- this.http.get('api/decks').pipe(map(d => this.decks = d))
+ this.http.get('/api/decks').pipe(map(d => this.decks = d))
public getEmblems = (): Observable =>
this.emblems.length ? of(this.emblems) :
- this.http.get('api/emblems').pipe(map(e => this.emblems = e))
+ this.http.get('/api/emblems').pipe(map(e => this.emblems = e))
public getRoom = (roomId: string): Observable =>
- this.http.get(`api/rooms/${roomId}`).pipe(map(r => this.room = r))
+ this.http.get(`/api/rooms/${roomId}`).pipe(map(r => this.room = r))
public getPlayers = (): Observable> =>
this.room
- ? this.http.get(`api/rooms/${this.room.id}`).pipe(map(r => r.users))
+ ? this.http.get(`/api/rooms/${this.room.id}`).pipe(map(r => r.users))
: of(new Array())
public getTagline = (): Observable =>
this.room
- ? this.http.get(`api/rooms/${this.room.id}`).pipe(map(r => r.tagLine))
+ ? this.http.get(`/api/rooms/${this.room.id}`).pipe(map(r => r.tagLine))
: of('')
public joinRoom = (request: JoinRoomRequest): Observable =>
@@ -100,7 +100,7 @@ export class PokerService {
this.getHub().pipe(flatMap((hub: HubConnection) => from(hub.invoke('switchHost', newHostId))))
public checkAvailability = (id: string): Observable =>
- this.http.get(`api/rooms/available/${id}`, { observe: 'response', responseType: 'text' as 'json' })
+ this.http.get(`/api/rooms/available/${id}`, { observe: 'response', responseType: 'text' as 'json' })
.pipe(map(r => r.body === 'true'))
public getCards = (deckId: number): Observable =>
@@ -118,6 +118,7 @@ export class PokerService {
private prepareHub = (): Promise => {
this.hub = new HubConnectionBuilder()
.withUrl('/notify/room')
+ .withAutomaticReconnect([0, 1000, 2000, 3000, 5000, 10000, 12000, 15000, 30000, null])
.withHubProtocol(new JsonHubProtocol())
.build();
return this.hub.start().catch(console.error).then(() => {
diff --git a/pokeR/ClientApp/src/app/services/theme.service.spec.ts b/pokeR/ClientApp/src/app/services/theme.service.spec.ts
new file mode 100644
index 0000000..a223a14
--- /dev/null
+++ b/pokeR/ClientApp/src/app/services/theme.service.spec.ts
@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ThemeService } from './theme.service';
+
+describe('ThemeService', () => {
+ beforeEach(() => TestBed.configureTestingModule({}));
+
+ it('should be created', () => {
+ const service: ThemeService = TestBed.get(ThemeService);
+ expect(service).toBeTruthy();
+ });
+});
diff --git a/pokeR/ClientApp/src/app/services/theme.service.ts b/pokeR/ClientApp/src/app/services/theme.service.ts
new file mode 100644
index 0000000..971551f
--- /dev/null
+++ b/pokeR/ClientApp/src/app/services/theme.service.ts
@@ -0,0 +1,54 @@
+import { Injectable } from '@angular/core';
+import { ThemeMode } from '../models/theme-mode';
+
+const themes = {
+ dark: {
+ '--primary-color': '#353749',
+ '--accent-color': '#53577D',
+ '--contrast-color': 'white',
+ '--hover-color': 'rgba(255,255,255,0.1)',
+ '--active-color': 'rgba(255,255,255,0.2)',
+ '--font-family': '\'Open Sans\',sans-serif',
+ '--valid-color': 'green',
+ '--invalid-color': '#ff5c5c'
+ }, light: {
+ '--primary-color': '#E9E9E9',
+ '--accent-color': '#9FA2C2',
+ '--contrast-color': '#353749',
+ '--hover-color': 'rgba(0,0,0,0.1)',
+ '--active-color': 'rgba(0,0,0,0.2)',
+ '--font-family': '\'Open Sans\',sans-serif',
+ '--valid-color': 'green',
+ '--invalid-color': 'red'
+ }
+};
+
+@Injectable({
+ providedIn: 'root'
+})
+export class ThemeService {
+
+ constructor() { }
+
+ public applyTheme = (m: ThemeMode): void => {
+ switch (m) {
+ case ThemeMode.automatic:
+ if (this.isInDarkMode()) {
+ this.setVariables(themes.dark);
+ } else {
+ this.setVariables(themes.light);
+ } return;
+ case ThemeMode.dark:
+ this.setVariables(themes.dark);
+ return;
+ case ThemeMode.light:
+ this.setVariables(themes.light);
+ return;
+ }
+ }
+
+ private isInDarkMode = (): boolean => window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+ private setVariables = (map: any) => Object.keys(map)
+ .forEach(k => document.documentElement.style.setProperty(k, map[k]))
+}
diff --git a/pokeR/ClientApp/src/app/shared-components/background-cards/background-cards.component.html b/pokeR/ClientApp/src/app/shared-components/background-cards/background-cards.component.html
new file mode 100644
index 0000000..83ba3fe
--- /dev/null
+++ b/pokeR/ClientApp/src/app/shared-components/background-cards/background-cards.component.html
@@ -0,0 +1,9 @@
+
\ No newline at end of file
diff --git a/pokeR/ClientApp/src/app/shared-components/background-cards/background-cards.component.scss b/pokeR/ClientApp/src/app/shared-components/background-cards/background-cards.component.scss
new file mode 100644
index 0000000..4effdb4
--- /dev/null
+++ b/pokeR/ClientApp/src/app/shared-components/background-cards/background-cards.component.scss
@@ -0,0 +1,52 @@
+@import '../../../theme/variables';
+
+.bg-cards {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ perspective: 900px;
+ pointer-events: none;
+ overflow: hidden;
+
+ .perspective-container {
+ width: 100%;
+ height: 100%;
+ animation: pan-in 20s ease 0s forwards;
+ transform-style: preserve-3d;
+
+ .bg-card {
+ position: absolute;
+ border: $slim solid var(--accent-color);
+ border-radius: $slim;
+ width: 4.5rem;
+ height: 6rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ opacity: .5;
+ transform-style: preserve-3d;
+ background-color: var(--primary-color);
+
+ .card-label {
+ color: var(--accent-color);
+ font-size: 56px;
+ }
+ }
+ }
+}
+
+@keyframes pan-in {
+ 0% {
+ transform: translateZ(-10000px);
+ }
+
+ 5% {
+ transform: translateZ(-240px);
+ }
+
+ 100% {
+ transform: translateZ(0);
+ }
+}
\ No newline at end of file
diff --git a/pokeR/ClientApp/src/app/shared-components/background-cards/background-cards.component.spec.ts b/pokeR/ClientApp/src/app/shared-components/background-cards/background-cards.component.spec.ts
new file mode 100644
index 0000000..e5f6263
--- /dev/null
+++ b/pokeR/ClientApp/src/app/shared-components/background-cards/background-cards.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BackgroundCardsComponent } from './background-cards.component';
+
+describe('BackgroundCardsComponent', () => {
+ let component: BackgroundCardsComponent;
+ let fixture: ComponentFixture;
+
+ beforeEach(async(() => {
+ TestBed.configureTestingModule({
+ declarations: [ BackgroundCardsComponent ]
+ })
+ .compileComponents();
+ }));
+
+ beforeEach(() => {
+ fixture = TestBed.createComponent(BackgroundCardsComponent);
+ component = fixture.componentInstance;
+ fixture.detectChanges();
+ });
+
+ it('should create', () => {
+ expect(component).toBeTruthy();
+ });
+});
diff --git a/pokeR/ClientApp/src/app/shared-components/background-cards/background-cards.component.ts b/pokeR/ClientApp/src/app/shared-components/background-cards/background-cards.component.ts
new file mode 100644
index 0000000..5c8aa1a
--- /dev/null
+++ b/pokeR/ClientApp/src/app/shared-components/background-cards/background-cards.component.ts
@@ -0,0 +1,43 @@
+import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Card } from 'src/app/models/entities/card';
+
+@Component({
+ selector: 'app-background-cards',
+ templateUrl: './background-cards.component.html',
+ styleUrls: ['./background-cards.component.scss']
+})
+export class BackgroundCardsComponent implements OnChanges {
+ @Input() cards: Array = [];
+ cardViews: any[] = [];
+ constructor() { }
+
+ ngOnChanges(changes: SimpleChanges): void {
+ const newCards: Array = changes.cards.currentValue;
+ this.cardViews = this.duplicate(newCards, 2).map(this.getView);
+ }
+
+ private getView = (c: Card): any => ({
+ px: Math.random() * 100,
+ py: Math.random() * 100,
+ zBase: Math.random(),
+ ox: Math.random() * 180 - 90,
+ oy: Math.random() * 180 - 90,
+ oz: Math.random() * 180 - 90,
+ text: c.name
+ })
+
+ getStyle = (v: any): any => ({
+ 'transform': `translateZ(${v.zBase * 1200 - 600}px) rotateX(${v.ox}deg) rotateY(${v.oy}deg) rotateZ(${v.oz}deg)`,
+ 'left': `${v.px}%`,
+ 'top': `${v.py}%`,
+ 'opacity': v.zBase * 0.7 + 0.3
+ })
+
+ private duplicate = (source: Array, count: number): Array => {
+ let result = source;
+ for (let i = 0; i < count; i++) {
+ result = result.concat(result);
+ }
+ return result;
+ }
+}
diff --git a/pokeR/ClientApp/src/app/shared-components/card-list/card-list.component.html b/pokeR/ClientApp/src/app/shared-components/card-list/card-list.component.html
index 1d09c07..58c136e 100644
--- a/pokeR/ClientApp/src/app/shared-components/card-list/card-list.component.html
+++ b/pokeR/ClientApp/src/app/shared-components/card-list/card-list.component.html
@@ -1,7 +1,9 @@
-
-
- {{c.name}}
+
\ No newline at end of file
+
diff --git a/pokeR/ClientApp/src/app/shared-components/card-list/card-list.component.scss b/pokeR/ClientApp/src/app/shared-components/card-list/card-list.component.scss
index 9a4e4ef..a1d2373 100644
--- a/pokeR/ClientApp/src/app/shared-components/card-list/card-list.component.scss
+++ b/pokeR/ClientApp/src/app/shared-components/card-list/card-list.component.scss
@@ -1,17 +1,51 @@
-.cardTray {
- font-size: 1.4rem;
- min-width: 2em;
- padding-top: .5em;
- padding-bottom: .5em;
- text-align: center;
- transition: font-size .2s ease;
-}
+@import "../../../theme/variables";
+
+.card-list {
+ left: 50%;
+ transform: translateX(-50%);
+ animation: slide-up forwards 1s ease;
+ width: 100%;
+ overflow-x: auto;
+
+ & > .card-list__inner {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: flex-end;
+
+ @media screen and (max-width: 768px) {
+ justify-content: flex-start;
+ }
-.cardTray.selected {
- font-size: 2rem;
+ & > .card {
+ font-size: 1.4rem;
+ min-width: 2em;
+ padding-top: 0.5em;
+ padding-bottom: 0.5em;
+ text-align: center;
+ transition: font-size 0.2s ease;
+ border: $thinn solid var(--accent-color);
+ border-radius: $slim;
+ cursor: pointer;
+ margin: $mid;
+
+ &.selected {
+ font-size: 2rem;
+ }
+ }
+ }
}
.fixed-bottom {
- position: fixed;
- bottom: 0;
-}
\ No newline at end of file
+ position: fixed;
+ bottom: 0;
+}
+
+@keyframes slide-up {
+ 0% {
+ transform: translateY(100%) translateX(-50%);
+ }
+ 100% {
+ transform: translateY(0) translateX(-50%);
+ }
+}
diff --git a/pokeR/ClientApp/src/app/shared-components/create-room/create-room.component.html b/pokeR/ClientApp/src/app/shared-components/create-room/create-room.component.html
index d542f60..4a1a860 100644
--- a/pokeR/ClientApp/src/app/shared-components/create-room/create-room.component.html
+++ b/pokeR/ClientApp/src/app/shared-components/create-room/create-room.component.html
@@ -2,67 +2,59 @@
-
-
- This room is available.
-
-
- This room is taken.
-
Join it
-
-
-
- Room ID is required.
+
+
+
+ This room is available.
+
+
+ This room is taken.
+
Join it
+
+
+
+ Room Number is required.
+
-
-
- Name is required.
+
+
+
+ Room Name is required.
+
-
-
- Deck is required.
+
+
+
+ Deck is required.
+
@@ -79,8 +71,7 @@
-
diff --git a/pokeR/ClientApp/src/app/shared-components/create-room/create-room.component.ts b/pokeR/ClientApp/src/app/shared-components/create-room/create-room.component.ts
index dbbbc9b..ac66714 100644
--- a/pokeR/ClientApp/src/app/shared-components/create-room/create-room.component.ts
+++ b/pokeR/ClientApp/src/app/shared-components/create-room/create-room.component.ts
@@ -1,9 +1,8 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, EventEmitter, Output } from '@angular/core';
import { CreateRoomRequest } from 'src/app/models/create-room-request';
import { PokerService } from 'src/app/services/poker.service';
import { Deck } from 'src/app/models/entities/deck';
import { map, debounceTime, flatMap } from 'rxjs/operators';
-import { Router } from '@angular/router';
import { Observable } from 'rxjs';
import { FormGroup, FormControl, Validators } from '@angular/forms';
@@ -15,6 +14,7 @@ import { FormGroup, FormControl, Validators } from '@angular/forms';
export class CreateRoomComponent implements OnInit {
decks: Array = new Array();
isAvailable: boolean;
+ @Output() exit: EventEmitter = new EventEmitter();
submitAttempted = false;
@@ -25,13 +25,15 @@ export class CreateRoomComponent implements OnInit {
deck: new FormControl('', Validators.required)
});
- constructor(private service: PokerService, private router: Router) { }
+ constructor(private service: PokerService) { }
ngOnInit() {
this.service.getDecks().subscribe(d => this.decks = d);
this.watchIdChanges().subscribe();
}
+ join = (): void => this.exit.emit(['/room', this.form.get('roomId').value]);
+
// tslint:disable-next-line:triple-equals
getSelectedDeck = (): Deck => this.decks.find(d => d.id == this.form.get('deck').value);
@@ -40,7 +42,7 @@ export class CreateRoomComponent implements OnInit {
if (this.form.valid && this.isAvailable) {
const snapshot = this.getModel();
this.service.createRoom(snapshot).pipe(map(() => {
- this.router.navigate(['/room', snapshot.id]);
+ this.exit.emit(['/room', snapshot.id]);
})).subscribe();
}
}
@@ -56,7 +58,7 @@ export class CreateRoomComponent implements OnInit {
debounceTime(300),
flatMap(this.service.checkAvailability),
map(r => this.isAvailable = r)
- );
+ )
getDelayStyle = (i: number) => {
'animation-delay': `${i * 60}ms`
diff --git a/pokeR/ClientApp/src/app/shared-components/entryway/entryway.component.html b/pokeR/ClientApp/src/app/shared-components/entryway/entryway.component.html
new file mode 100644
index 0000000..78dd6e8
--- /dev/null
+++ b/pokeR/ClientApp/src/app/shared-components/entryway/entryway.component.html
@@ -0,0 +1,20 @@
+
+
+
+ Join an existing room
+
+
+
+
+
+
+ Create a new room
+
+
+
+
+
+
+
{{currentTagline}}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{getTimeText()}}
+
+
+
+