Split active game into components

src/app/friday/components/aging-cards/aging-cards.component.html

@@ -0,0 +1,6 @@
+<div class="pile">
+  Aging Cards:
+  <div class="cards">
+    {{ deck.length }}
+  </div>
+</div>

src/app/friday/components/aging-cards/aging-cards.component.sass

@@ -0,0 +1,2 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'

src/app/friday/components/aging-cards/aging-cards.component.spec.ts

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

src/app/friday/components/aging-cards/aging-cards.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core'
+import { BattleComboId } from '../../models/card.interfaces'
+
+@Component({
+  selector: 'app-fr-aging-cards',
+  styleUrls: ['./aging-cards.component.sass'],
+  templateUrl: './aging-cards.component.html',
+})
+export class AgingCardsComponent implements OnInit {
+  @Input() deck: BattleComboId[]
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/friday/components/battle/battle.component.html

@@ -0,0 +1,13 @@
+Battle Area
+
+<p *ngIf="playedHazardId as id">
+  Played hazard:
+  <figure class="played-hazard card">
+    <img src="assets/images/battle-{{ hazardCardEntities[id].battleComboId }}.png">
+    <figcaption></figcaption>
+  </figure>
+</p>
+
+<!-- Battle Points: {{ battle?.battlePoints| json }} -->
+<!-- Free Battle Cards: {{ battle?.freeBattleCards | json }} -->
+<!-- Payed Battle Cards: {{ battle?.payedBattleCards | json }} -->

src/app/friday/components/battle/battle.component.sass

@@ -0,0 +1,6 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'
+
+.played-hazard
+  img
+    transform: rotate(180deg)

src/app/friday/components/battle/battle.component.spec.ts

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

src/app/friday/components/battle/battle.component.ts

@@ -0,0 +1,22 @@
+import { Component, OnInit, Input } from '@angular/core'
+import { HazardCardId } from '../../models/card.interfaces'
+import { HazardCardEntities, HazardComboEntities, BattleComboEntities } from '../../store/reducers/cards.reducer'
+
+@Component({
+  selector: 'app-fr-battle',
+  styleUrls: ['./battle.component.sass'],
+  templateUrl: './battle.component.html',
+})
+export class BattleComponent implements OnInit {
+  @Input() playedHazardId: HazardCardId
+
+  @Input() hazardCardEntities: HazardCardEntities
+  // @Input() hazardComboEntities: HazardComboEntities
+  // @Input() battleComboEntities: BattleComboEntities
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/friday/components/destroyed/destroyed.component.html

@@ -0,0 +1,6 @@
+<div class="pile">
+  Destroyed:
+  <div class="cards">
+    {{ ids.length }}
+  </div>
+</div>

src/app/friday/components/destroyed/destroyed.component.sass

@@ -0,0 +1,2 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'

src/app/friday/components/destroyed/destroyed.component.spec.ts

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

src/app/friday/components/destroyed/destroyed.component.ts

@@ -0,0 +1,17 @@
+import { Component, OnInit, Input } from '@angular/core'
+import { BattleComboId } from '../../models/card.interfaces'
+
+@Component({
+  selector: 'app-fr-destroyed',
+  styleUrls: ['./destroyed.component.sass'],
+  templateUrl: './destroyed.component.html',
+})
+export class DestroyedComponent implements OnInit {
+  @Input() ids: BattleComboId[]
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/friday/components/hazard-cards/hazard-cards.component.html

@@ -0,0 +1,40 @@
+<h1 class="title">Hazard Cards</h1>
+
+<div class="pile">
+  <div class="cards">
+    <figure class="deck card">
+      <img *ngIf="deck.length" src="assets/images/battle-back.png">
+      <figcaption>
+        deck: {{ deck.length }}
+      </figcaption>
+    </figure>
+  </div>
+
+  <button (click)="drawHazardCards.emit()" class="button">
+    draw
+  </button>
+</div>
+
+<div class="pile">
+  <div class="cards">
+    <figure *ngIf="discarded[0] as id" class="discarded card">
+      <img src="assets/images/battle-{{ entities[id].battleComboId }}.png">
+      <figcaption>
+        discarded: {{ discarded.length }}
+      </figcaption>
+    </figure>
+  </div>
+</div>
+
+<div *ngIf="optionIds.length" class="options">
+  Choose a hazard:
+  <figure *ngFor="let id of optionIds" class="option card">
+    <img src="assets/images/battle-{{ entities[id].battleComboId }}.png">
+    <figcaption>
+      {{ entities[id] | json }}
+      <button (click)="playHazardCard.emit(id)" class="button">
+        play this hazard
+      </button>
+    </figcaption>
+  </figure>
+</div>

src/app/friday/components/hazard-cards/hazard-cards.component.sass

@@ -0,0 +1,23 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'
+
+\:host
+  display: flex
+  flex-wrap: wrap
+
+.title
+  flex-basis: 100%
+
+.pile
+  width: 45%
+
+.card img
+  transform: rotate(180deg)
+
+.options
+  flex-basis: 100%
+  display: flex
+
+.discarded
+  img
+    filter: grayscale(70%) brightness(70%)

src/app/friday/components/hazard-cards/hazard-cards.component.spec.ts

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

src/app/friday/components/hazard-cards/hazard-cards.component.ts

@@ -0,0 +1,24 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
+import { HazardCardId } from '../../models/card.interfaces'
+import { HazardCardEntities } from '../../store/reducers/cards.reducer'
+
+@Component({
+  selector: 'app-fr-hazard-cards',
+  styleUrls: ['./hazard-cards.component.sass'],
+  templateUrl: './hazard-cards.component.html',
+})
+export class HazardCardsComponent implements OnInit {
+  @Input() deck: HazardCardId[]
+  @Input() discarded: HazardCardId[]
+  @Input() entities: HazardCardEntities[]
+  @Input() optionIds: HazardCardId[]
+
+  @Output() drawHazardCards = new EventEmitter()
+  @Output() playHazardCard = new EventEmitter<HazardCardId>()
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}

src/app/friday/components/header/header.component.html

@@ -0,0 +1,14 @@
+<header class="header">
+  <h1 class="title">Friday Game {{ activeGameId }} - round {{ currentRound }} - difficulty {{ difficulty }}</h1>
+
+  <span *ngIf="loading" class="loader">Loading...</span>
+
+  <ng-container *ngIf="!(loading || playing)" class="buttons">
+    <button *ngIf="!currentRound" (click)="start.emit(activeGameId)" class="button">Start game #{{ activeGameId }}</button>
+    <button *ngIf="currentRound" (click)="continue.emit(activeGameId)" class="button">Continue game #{{ activeGameId }}</button>
+  </ng-container>
+
+  <a routerLink="/friday" class="link">Exit and save</a>
+</header>
+
+<pre class="dev">available actions: {{ availableActions | json }}</pre>

src/app/friday/components/header/header.component.sass

@@ -0,0 +1,14 @@
+@import '~styles/variables'
+@import '~styles/mixins/__index'
+
+.header
+  display: flex
+  justify-content: space-between
+  align-items: center
+  margin-bottom: $spacing-lg
+  padding-bottom: $spacing-default
+  border-bottom: $border-light
+
+.title
+  margin: 0
+

src/app/friday/components/header/header.component.spec.ts

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

src/app/friday/components/header/header.component.ts

@@ -0,0 +1,27 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'
+import { GameId, GameRound, GameDifficulty } from '../../models/game.interfaces'
+
+@Component({
+  selector: 'app-fr-header',
+  styleUrls: ['./header.component.sass'],
+  templateUrl: './header.component.html',
+})
+export class HeaderComponent implements OnInit {
+  @Input() activeGameId: GameId
+  @Input() currentRound: GameRound
+  @Input() difficulty: GameDifficulty
+
+  @Input() loading: boolean
+  @Input() playing: boolean
+
+  // temp for dev
+  @Input() availableActions: string[]
+
+  @Output() continue = new EventEmitter<GameId>()
+  @Output() start = new EventEmitter<GameId>()
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+}