Merge branch 'feature/party'

pokeR/ClientApp/angular.json

@@ -29,7 +29,9 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [
+              "node_modules/canvas-confetti/dist/confetti.browser.js"
+            ]
           },
           "configurations": {
             "production": {

pokeR/ClientApp/package.json

@@ -22,6 +22,7 @@
     "@angular/router": "~7.2.11",
     "@aspnet/signalr": "^1.1.0",
     "@ng-bootstrap/ng-bootstrap": "^4.0.1",
+    "canvas-confetti": "^0.2.0",
     "core-js": "^2.5.4",
     "rxjs": "~6.4.0",
     "tslib": "^1.9.0",

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

@@ -1,9 +1,9 @@
 <div *ngIf="!isInvalid">
   <div class="full-height d-flex flex-column justify-content-center" *ngIf="!isInGame">
     <div class="container card p-3 my-5">
-    <app-room-info class="mb-3" [roomId]="roomId" (roomError)="onRoomError()"></app-room-info>
-    <app-join-room [roomId]="roomId" (joined)="onJoined()"></app-join-room>
-  </div>
+      <app-room-info class="mb-3" [roomId]="roomId" (roomError)="onRoomError()"></app-room-info>
+      <app-join-room [roomId]="roomId" (joined)="onJoined()"></app-join-room>
+    </div>
   </div>
   <div *ngIf="isInGame">
     <app-round-status></app-round-status>
@@ -16,4 +16,5 @@ <h4 class="display-4 mb-5">Room not found 😢</h4>
   <button role="button" routerLink="/" class="btn btn-primary btn-lg">
     Go Home
   </button>
-</div>
+</div>
+<app-confetti></app-confetti>

pokeR/ClientApp/src/app/shared-components/confetti/confetti.component.html

@@ -0,0 +1 @@
+<canvas class="d-none" #canvas></canvas>

pokeR/ClientApp/src/app/shared-components/confetti/confetti.component.scss

@@ -0,0 +1,7 @@
+.confettiHolder {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+}

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

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

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

@@ -0,0 +1,54 @@
+import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
+import { ConfettiService } from './confetti.service';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+declare const confetti;
+
+@Component({
+  selector: 'app-confetti',
+  templateUrl: './confetti.component.html',
+  styleUrls: ['./confetti.component.scss']
+})
+export class ConfettiComponent implements AfterViewInit {
+  @ViewChild('canvas') canvas: ElementRef;
+  private confettiLauncher: any;
+
+  constructor(private service: ConfettiService) { }
+
+  ngAfterViewInit(): void {
+    this.setupConfetti();
+    this.watchRequests().subscribe();
+  }
+
+  setupConfetti = (): void => {
+    this.confettiLauncher = confetti.create(this.canvas.nativeElement, { resize: true });
+    this.confettiLauncher({
+      particleCount: 100,
+      spread: 160
+    });
+  }
+
+  watchRequests = (): Observable<void> => this.service.confettiPlz.pipe(map(this.launch))
+
+  launch = (duration: number): void => {
+    var end = Date.now() + (duration);
+
+    var interval = setInterval(() => {
+      if (Date.now() > end) {
+        return clearInterval(interval);
+      }
+
+      confetti({
+        startVelocity: 30,
+        spread: 360,
+        ticks: 60,
+        origin: {
+          x: Math.random(),
+          // since they fall down, start a bit higher than random
+          y: Math.random() - 0.2
+        }
+      });
+    }, 200);
+  }
+
+}

pokeR/ClientApp/src/app/shared-components/confetti/confetti.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { ConfettiService } from './confetti.service';
+
+describe('ConfettiService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: ConfettiService = TestBed.get(ConfettiService);
+    expect(service).toBeTruthy();
+  });
+});

pokeR/ClientApp/src/app/shared-components/confetti/confetti.service.ts

@@ -0,0 +1,13 @@
+import { Injectable, EventEmitter } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ConfettiService {
+
+  constructor() { }
+
+  public confettiPlz: EventEmitter<number> = new EventEmitter<number>();
+
+  public pop = (): void => this.confettiPlz.emit(5000);
+}

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

@@ -4,6 +4,7 @@ import { User } from 'src/app/models/entities/user';
 import { Observable, forkJoin } from 'rxjs';
 import { map } from 'rxjs/operators';
 import { Card } from 'src/app/models/entities/card';
+import { ConfettiService } from '../confetti/confetti.service';
 
 @Component({
   selector: 'app-playfield',
@@ -14,7 +15,7 @@ export class PlayfieldComponent implements OnInit {
   lastState: Array<User> = new Array<User>();
   isRevealed = false;
 
-  constructor(private service: PokerService) { }
+  constructor(private service: PokerService, private confetti: ConfettiService) { }
 
   ngOnInit() {
     this.watchState().subscribe();
@@ -57,7 +58,13 @@ export class PlayfieldComponent implements OnInit {
   revealCards = (): void => {
     this.isRevealed = true;
     console.log('YOU ACTIVATED MY TRAP CARD!');
+    if (this.lastState.map(s => s.currentCardId).every(i => this.lastState.find(() => true).currentCardId === i)) {
+      console.log('party time!');
+      this.showConfetti();
+    }
   }
 
   getEmblemUrl = (id: number): string => this.service.getEmblemUrl(id);
+
+  private showConfetti = (): void => this.confetti.pop();
 }

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

@@ -11,6 +11,7 @@ import { PlayfieldComponent } from './playfield/playfield.component';
 import { RoundStatusComponent } from './round-status/round-status.component';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { AppRoutingModule } from '../app-routing.module';
+import { ConfettiComponent } from './confetti/confetti.component';
 
 @NgModule({
   declarations: [
@@ -21,7 +22,8 @@ import { AppRoutingModule } from '../app-routing.module';
     JoinRoomComponent,
     CardListComponent,
     PlayfieldComponent,
-    RoundStatusComponent
+    RoundStatusComponent,
+    ConfettiComponent
   ], imports: [
     CommonModule,
     FormsModule,
@@ -35,7 +37,8 @@ import { AppRoutingModule } from '../app-routing.module';
     JoinRoomComponent,
     CardListComponent,
     PlayfieldComponent,
-    RoundStatusComponent
+    RoundStatusComponent,
+    ConfettiComponent
   ]
 })
 export class SharedComponentsModule { }