Merge pull request #31 from halomademeapc/feature/#17-mid-game-player…

…-editing

Feature/#17 mid game player editing

pokeR/ClientApp/src/app/pages/ingame/ingame.component.html

@@ -9,6 +9,7 @@
   </div>
   <div *ngIf="isInGame">
     <app-roster></app-roster>
+    <app-player-settings></app-player-settings>
     <app-host-controls></app-host-controls>
     <app-playfield></app-playfield>
     <app-card-list [cards]="room?.deck?.cards"></app-card-list>

pokeR/ClientApp/src/app/services/poker.service.ts

@@ -29,6 +29,7 @@ export class PokerService {
 
   public userJoins: EventEmitter<ListChange<User>> = new EventEmitter<ListChange<User>>();
   public userLeaves: EventEmitter<ListChange<User>> = new EventEmitter<ListChange<User>>();
+  public userUpdates: EventEmitter<ListChange<User>> = new EventEmitter<ListChange<User>>();
   public roomClosing: EventEmitter<void> = new EventEmitter<void>();
   public cardPlays: EventEmitter<ListChange<User>> = new EventEmitter<ListChange<User>>();
   public hostChanges: EventEmitter<ListChange<User>> = new EventEmitter<ListChange<User>>();
@@ -78,6 +79,15 @@ export class PokerService {
   public leaveRoom = (): Observable<void> =>
     this.getHub().pipe(flatMap((hub: HubConnection) => from(hub.invoke('leaveRoom'))))
 
+  public updateUser = (updated: JoinRoomRequest): Observable<void> => {
+    if (this.player) {
+      this.player.displayName = updated.name;
+      this.player.emblemId = updated.emblemId;
+    }
+
+    return this.getHub().pipe(flatMap((hub: HubConnection) => from(hub.invoke('updateUser', updated))))
+  }
+
   public playCard = (cardId: number): Observable<void> =>
     this.getHub().pipe(flatMap((hub: HubConnection) => from(hub.invoke('playCard', cardId))))
 
@@ -129,7 +139,8 @@ export class PokerService {
 
   private initializeHubWatches = (): Observable<void> => forkJoin(
     this.watchUsersJoin(),
-    this.watchusersLeave(),
+    this.watchUsersLeave(),
+    this.watchUsersUpdate(),
     this.watchRoomClose(),
     this.watchCardPlays(),
     this.watchRoundStarts(),
@@ -147,12 +158,18 @@ export class PokerService {
       this.userJoins.emit(d);
     })))
 
-  private watchusersLeave = (): Observable<void> =>
+  private watchUsersLeave = (): Observable<void> =>
     this.getHub().pipe(map(h => h.on('UserLeft', (d: ListChange<User>) => {
       this.users = d.collection;
       this.userLeaves.emit(d);
     })))
 
+  private watchUsersUpdate = (): Observable<void> =>
+    this.getHub().pipe(map(h => h.on('UserUpdated', (d: ListChange<User>) => {
+      this.users = d.collection;
+      this.userUpdates.emit(d);
+    })))
+
   private watchRoomClose = (): Observable<void> =>
     this.getHub().pipe(map(h => h.on('RoomClosed', () => {
       this.roomClosing.emit();

pokeR/ClientApp/src/app/shared-components/join-room/join-room.component.html

@@ -1,4 +1,4 @@
-<form class="join-form" (submit)="join()" [formGroup]="form">
+<form class="join-form" (submit)="submit()" [formGroup]="form">
   <div class="input-group">
     <input class="form-control" type="text" name="name" formControlName="name" [class.is-valid]="form.get('name').valid"
       [class.is-invalid]="(submitAttempted || form.get('name').touched) && !form.get('name').valid" autofocus required>
@@ -24,6 +24,6 @@
   </div>
 
   <button [class.disabled]="!form.valid" type="submit">
-    Join Room
+    {{isUpdate ? 'Update' : 'Join Room'}}
   </button>
 </form>

pokeR/ClientApp/src/app/shared-components/join-room/join-room.component.ts

@@ -15,6 +15,9 @@ export class JoinRoomComponent implements OnChanges, OnInit {
   @Input()
   roomId: string;
 
+  @Input()
+  isUpdate: boolean;
+
   @Output()
   joined: EventEmitter<boolean> = new EventEmitter<boolean>();
 
@@ -37,6 +40,9 @@ export class JoinRoomComponent implements OnChanges, OnInit {
     if (changes.roomId.currentValue) {
       this.form.get('roomId').setValue(changes.roomId.currentValue);
     }
+    if (changes.isUpdate && changes.isUpdate.currentValue) {
+      this.initializeUpdate();
+    }
   }
 
   loadEmblems = (): Observable<Emblem[]> =>
@@ -46,10 +52,14 @@ export class JoinRoomComponent implements OnChanges, OnInit {
 
   getEmblemUrl = (id: number): string => this.service.getEmblemUrl(id);
 
-  join = (): void => {
+  submit = (): void => {
     this.submitAttempted = true;
     if (this.form.valid) {
-      this.service.joinRoom(this.getModel()).subscribe(() => this.joined.emit(true));
+      if (this.isUpdate) {
+        this.service.updateUser(this.getModel()).subscribe();
+      } else {
+        this.service.joinRoom(this.getModel()).subscribe(() => this.joined.emit(true));
+      }
     }
   }
 
@@ -60,4 +70,9 @@ export class JoinRoomComponent implements OnChanges, OnInit {
     name: this.form.get('name').value,
     emblemId: this.form.get('emblemId').value
   }
+
+  private initializeUpdate = (): void => {
+    this.form.get('name').setValue(this.service.player.displayName);
+    this.form.get('emblemId').setValue(this.service.player.emblemId);
+  }
 }

pokeR/ClientApp/src/app/shared-components/pane-drawer/pane-drawer.component.html

@@ -3,7 +3,7 @@
   <div class="pane">
     <div class="tab" (click)="togglePanel()">
       <i class="mdi mdi-chevron-right tab__icon"></i>
-      {{ label }}
+      <span>{{ label }}</span>
     </div>
     <div class="pane__content">
       <ng-content></ng-content>

pokeR/ClientApp/src/app/shared-components/pane-drawer/pane-drawer.component.scss

@@ -19,7 +19,7 @@ $tab-width: 24px;
   }
 
   & > .pane {
-    background-color: var(--accent-color);
+    background-color: var(--primary-color);
     width: 100%;
     height: 100%;
     padding: $some;
@@ -45,7 +45,10 @@ $tab-width: 24px;
       position: absolute;
       padding-top: $mid;
       padding-bottom: $mid;
-      transition: right 0.2s ease;
+      transition: all 0.2s ease;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
 
       & > .tab__icon::before {
         transition: transform 0.2s ease;
@@ -65,6 +68,7 @@ $tab-width: 24px;
 
       & > .tab {
         right: 0;
+        background-color: var(--primary-color);
 
         & > .tab__icon::before {
           transform: rotate(180deg);
@@ -73,24 +77,32 @@ $tab-width: 24px;
     }
   }
 
-  &.right {
+  &.pane-drawer--right {
     right: 0;
     animation: slide-in-right 1s forwards ease;
 
+    & > .shade {
+      right: 0;
+    }
+
     & > .pane {
       transform: translateX(100%);
 
       & > .tab {
-        writing-mode: vertical-rl;
         right: unset;
         left: -1 * $tab-width;
+
+        & > span {
+          transform: rotate(180deg);
+        }
       }
     }
 
     &.active {
       & > .pane {
         padding-right: $some;
         padding-left: $some + $tab-width;
+        transform: translateX(0);
 
         & > .tab {
           left: 0;

pokeR/ClientApp/src/app/shared-components/player-settings/player-settings.component.html

@@ -0,0 +1,5 @@
+<app-pane-drawer [label]="playerName" direction="right">
+  <div class="player-settings">
+    <app-join-room [isUpdate]="true" [roomId]="roomId"></app-join-room>
+  </div>
+</app-pane-drawer>

pokeR/ClientApp/src/app/shared-components/player-settings/player-settings.component.scss

@@ -0,0 +1,7 @@
+.player-settings {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: stretch;
+  min-height: 100%;
+}

pokeR/ClientApp/src/app/shared-components/player-settings/player-settings.component.spec.ts

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

pokeR/ClientApp/src/app/shared-components/player-settings/player-settings.component.ts

@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { PokerService } from 'src/app/services/poker.service';
+
+@Component({
+  selector: 'app-player-settings',
+  templateUrl: './player-settings.component.html',
+  styleUrls: ['./player-settings.component.scss']
+})
+export class PlayerSettingsComponent implements OnInit {
+  roomId: string;
+  get playerName(): string {
+    return this.service.player.displayName;
+  }
+
+  constructor(private service: PokerService) {
+    this.roomId = service.player.roomId;
+  }
+
+  ngOnInit() {
+  }
+}

pokeR/ClientApp/src/app/shared-components/playfield/playfield.component.ts

@@ -37,7 +37,8 @@ export class PlayfieldComponent implements OnInit, OnDestroy {
       this.watchPlays(),
       this.watchRoundEnd(),
       this.watchParts(),
-      this.watchRoundStart()
+      this.watchRoundStart(),
+      this.watchUserChanges()
     ).pipe(map(() => { }))
 
   watchPlays = (): Observable<void> =>
@@ -62,6 +63,13 @@ export class PlayfieldComponent implements OnInit, OnDestroy {
       this.updateState(this.lastState.filter(u => u.id !== c.delta.id));
     }))
 
+    watchUserChanges = (): Observable<void> =>
+    this.service.userUpdates.pipe(map(c => {
+      // temporarily remove old card to trigger change checking
+      this.updateState(this.lastState.filter(u => u.id !== c.delta.id));
+      this.updateState(c.collection);
+    }))
+
   getActiveCards = (): Array<User> => this.lastState.filter((u: User) => u.currentCard !== null);
 
   animateCardPlay = (c: Card, emblemId: number, userName: string) => console.log(`showing card FACE DOWN!: `, c);

pokeR/ClientApp/src/app/shared-components/roster/roster.component.ts

@@ -29,6 +29,7 @@ export class RosterComponent implements OnInit {
       this.watchParts(),
       this.watchRoundStart(),
       this.watchJoins(),
+      this.watchUserUpdates(),
       this.watchPlayerChanges(),
       this.watchHostChanges()
     )
@@ -56,6 +57,11 @@ export class RosterComponent implements OnInit {
       this.users = c.collection;
     }))
 
+  watchUserUpdates = (): Observable<void> =>
+    this.service.userUpdates.pipe(map(c => {
+      this.users = c.collection;
+    }))
+
   watchPlayerChanges = (): Observable<void> =>
     this.service.playerChanges.pipe(map(p => {
       this.player = p;

pokeR/ClientApp/src/app/shared-components/shared-components.module.ts

@@ -19,6 +19,7 @@ import { PaneDrawerComponent } from './pane-drawer/pane-drawer.component';
 import { HostControlsComponent } from './host-controls/host-controls.component';
 import { TooltipModule } from 'ng2-tooltip-directive';
 import { PlayfieldCardComponent } from './playfield-card/playfield-card.component';
+import { PlayerSettingsComponent } from './player-settings/player-settings.component';
 
 @NgModule({
   declarations: [
@@ -37,7 +38,8 @@ import { PlayfieldCardComponent } from './playfield-card/playfield-card.componen
     BackgroundCardsComponent,
     PaneDrawerComponent,
     HostControlsComponent,
-    PlayfieldCardComponent
+    PlayfieldCardComponent,
+    PlayerSettingsComponent
   ], imports: [
     CommonModule,
     FormsModule,
@@ -57,7 +59,8 @@ import { PlayfieldCardComponent } from './playfield-card/playfield-card.componen
     ThemeSwitcherComponent,
     BackgroundCardsComponent,
     PaneDrawerComponent,
-    HostControlsComponent
+    HostControlsComponent,
+    PlayerSettingsComponent
   ],
   entryComponents: [
     NotificationComponent,

pokeR/ClientApp/src/index.html

@@ -16,7 +16,6 @@
   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
-  <link rel="manifest" href="/site.webmanifest">
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#007bff">
   <meta name="msapplication-TileColor" content="#007bff">
   <meta name="theme-color" content="#007bff">