Show some stuff!

- add grid table
- move gamesComponent to child route
- fix wrong hazard card amount
- add pirate images

.gitignore

@@ -46,3 +46,4 @@ Thumbs.db
 # Custom
 ._*
 /api
+/design

src/app/core/containers/header/header.component.sass

@@ -3,7 +3,6 @@
 .header
   display: flex
   align-items: center
-  margin-bottom: $spacing-xxl
   padding: $spacing-sm $spacing-default
   border-bottom: $border-light-double
 

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

@@ -1,7 +1 @@
-<app-fr-games></app-fr-games>
-
-<br>
-<hr>
-<br>
-
 <router-outlet></router-outlet>

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

@@ -0,0 +1,5 @@
+@import '~styles/variables'
+
+.games
+  display: block
+  border-bottom: $border-light

src/app/friday/containers/active-game/active-game.component.html

@@ -1,14 +1,99 @@
-<section class="container">
-  <h1>You are in an active game :)</h1>
-  <p>Selected game id: {{ activeGameId }}</p>
-  <p>Current round: {{ currentRound }}</p>
+<section class="container active-game">
+  <header class="header">
+    <h1 class="title">Friday Game {{ activeGameId }} - round {{ currentRound }}</h1>
 
-  <span *ngIf="loading">Loading...</span>
+    <span *ngIf="loading" class="loader">Loading...</span>
 
-  <ng-container *ngIf="!loading && !playing">
-    <button *ngIf="!currentRound" (click)="start()" class="button">Start game #{{ loadedGameId }}</button>
-    <button *ngIf="currentRound" (click)="continue()" class="button">Continue game #{{ loadedGameId }}</button>
-  </ng-container>
+    <ng-container *ngIf="!loading && !playing" class="buttons">
+      <button *ngIf="!currentRound" (click)="start()" class="button">Start game #{{ loadedGameId }}</button>
+      <button *ngIf="currentRound" (click)="continue()" class="button">Continue game #{{ loadedGameId }}</button>
+    </ng-container>
 
-  <a routerLink="/friday">Exit and save</a>
+    <a routerLink="/friday" class="link">Exit and save</a>
+  </header>
+
+  <section *ngIf="playing" class="table">
+    <section class="game-section round">
+      Round: {{ currentRound }}
+    </section>
+
+    <section class="game-section lives">
+      Lives: {{ lives }}
+    </section>
+
+    <section class="game-section destroyed">
+      <div class="pile">
+        Destroyed:
+        <div class="cards">
+          {{ piles.destroyedCards.length }}
+        </div>
+      </div>
+    </section>
+
+    <section class="game-section hazard">
+      <div class="pile">
+        Hazard Cards:
+        <div class="cards">
+          {{ piles.hazardCardPile.length }}
+        </div>
+      </div>
+
+      <div class="pile">
+        Discarded:
+        <div class="cards">
+          {{ piles.hazardCardDiscardPile.length }}
+        </div>
+      </div>
+    </section>
+
+    <section class="game-section robinson">
+      <div class="pile">
+        Robinson Cards:
+        <div class="cards">
+          {{ piles.robinsonCardPile.length }}
+        </div>
+      </div>
+
+      <div class="pile">
+        Discarded:
+        <div class="cards">
+          {{ piles.robinsonCardDiscardPile.length }}
+        </div>
+      </div>
+    </section>
+
+    <section class="game-section aging">
+      <div class="pile">
+        Aging Cards:
+        <div class="cards">
+          {{ piles.agingCardPile.length }}
+        </div>
+      </div>
+    </section>
+
+    <section class="game-section pirates">
+      <figure *ngFor="let pirate of piles.pirateCards">
+        <img src="assets/images/pirate-front-{{pirate.id}}.png">
+        <figcaption class="hide">
+          {{ pirate | json }}
+        </figcaption>
+      </figure>
+    </section>
+
+    <section class="game-section battle">
+      Battle Area:
+      <p>
+        Hazard: {{ battle?.hazard | json }}
+      </p>
+      <p>
+        Battle Points: {{ battle?.battlePoints| json }}
+      </p>
+      <p>
+        Free Battle Cards: {{ battle?.freeBattleCards | json }}
+      </p>
+      <p>
+        Payed Battle Cards: {{ battle?.payedBattleCards | json }}
+      </p>
+    </section>
+  </section>
 </section>

src/app/friday/containers/active-game/active-game.component.sass

@@ -0,0 +1,60 @@
+@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
+
+.table
+  display: grid
+  height: 80vh
+  grid-template-columns: 1fr 1fr 1fr 1fr
+  grid-template-rows: 1fr 3fr 1fr
+  grid-gap: $spacing-xs
+  grid-template-areas: "destroyed pirates pirates aging" "hazard main main robinson" "round main main lives"
+
+.game-section
+  display: flex
+  padding: $spacing-sm
+  background: lighten($green, 60%)
+
+  &.round
+    grid-area: round
+
+  &.lives
+    grid-area: lives
+
+  &.destroyed
+    grid-area: destroyed
+
+  &.hazard
+    grid-area: hazard
+
+  &.robinson
+    grid-area: robinson
+
+  &.aging
+    grid-area: aging
+
+  &.pirates
+    grid-area: pirates
+
+  &.battle
+    grid-area: main
+    background: lighten($red, 40%)
+
+.pile
+  margin: 0 $spacing-sm $spacing-sm 0
+
+.cards
+  width: 2em
+  padding: $spacing-sm 0
+  text-align: center
+  border: 1px solid $gray-darker-1

src/app/friday/containers/active-game/active-game.component.ts

@@ -33,6 +33,8 @@ export class ActiveGameComponent implements OnInit, OnDestroy {
       select(fromStore.getActiveGameId),
     ).subscribe(activeId => {
       if (activeId && activeId !== this.loadedGameId) {
+        if (this.loadedGameId) this.save()
+
         this.store.dispatch(new fromStore.ResetActiveGameState())
         this.store.dispatch(new fromStore.LoadGameDetails(activeId))
       }

src/app/friday/containers/games/games.component.html

@@ -1,33 +1,35 @@
-<section class="container">
-  <h1>Welcome to Friday, the game!</h1>
-  loading: {{ loading }}
+<div class="container">
+  <section class="games">
+    <h1>Welcome to Friday, the game!</h1>
+    loading: {{ loading }}
 
-  <ng-container *ngIf="user; else login">
-    <header>
-      <p>Choose your game from the list or start a new one:</p>
+    <ng-container *ngIf="user; else login">
+      <header>
+        <p>Choose your game from the list or start a new one:</p>
 
-      <button (click)="createGame(user.id, 1)" class="button -warning" [disabled]="loading">Create a new game (difficulty: 1)</button>
-      <button (click)="createGame(user.id, 2)" class="button -warning" [disabled]="loading">Create a new game (difficulty: 2)</button>
-      <button (click)="createGame(user.id, 3)" class="button -warning" [disabled]="loading">Create a new game (difficulty: 3)</button>
-      <button (click)="createGame(user.id, 4)" class="button -warning" [disabled]="loading">Create a new game (difficulty: 4)</button>
+        <button (click)="createGame(user.id, 1)" class="button -warning" [disabled]="loading">Create a new game (difficulty: 1)</button>
+        <button (click)="createGame(user.id, 2)" class="button -warning" [disabled]="loading">Create a new game (difficulty: 2)</button>
+        <button (click)="createGame(user.id, 3)" class="button -warning" [disabled]="loading">Create a new game (difficulty: 3)</button>
+        <button (click)="createGame(user.id, 4)" class="button -warning" [disabled]="loading">Create a new game (difficulty: 4)</button>
 
-      <button (click)="reset()" class="button -danger">Reset games state</button>
-    </header>
+        <button (click)="reset()" class="button -danger">Reset games state</button>
+      </header>
 
-    <ul class="list">
-      <li *ngFor="let game of (games$ | async)" class="item">
-        <a routerLink="{{game.id}}" >Select this game: #{{ game.id }}, level: {{ game.difficulty }}</a>
+      <ul class="list">
+        <li *ngFor="let game of (games$ | async)" class="item">
+          <a routerLink="{{game.id}}">Select this game: #{{ game.id }}, level: {{ game.difficulty }}</a>
 
-        created: {{ game.createdAt | date:'medium' }}
+          created: {{ game.createdAt | date:'medium' }}
 
-        <button (click)="deleteGame(game.id)" class="button -danger" [disabled]="loading">
-          <app-icon name="trash"></app-icon>
-        </button>
-      </li>
-    </ul>
-  </ng-container>
+          <button (click)="deleteGame(game.id)" class="button -danger" [disabled]="loading">
+            <app-icon name="trash"></app-icon>
+          </button>
+        </li>
+      </ul>
+    </ng-container>
 
-  <ng-template #login>
-    <a routerLink="/login">Login</a>
-  </ng-template>
-</section>
+    <ng-template #login>
+      <a routerLink="/login">Login</a>
+    </ng-template>
+  </section>
+</div>

src/app/friday/containers/games/games.component.sass

@@ -1,4 +1 @@
 @import '~styles/variables'
-
-header
-  margin-bottom: $spacing-sm

src/app/friday/data/hazard-cards.data.ts

@@ -144,7 +144,7 @@ export const HAZARD_CARDS: HazardCardRemote[] = [
   },
 
   {
-    amount: 1,
+    amount: 2,
     // WEAPON - 4
     battleDataId: 37,
     hazardId: 5,

src/app/friday/friday.routes.ts

@@ -10,6 +10,10 @@ export const routes: Routes = [
     path: '',
     component: fromComponents.FridayComponent,
     children: [
+      {
+        path: '',
+        component: fromContainers.GamesComponent,
+      },
       {
         path: ':gameId',
         component: fromContainers.ActiveGameComponent,

src/app/friday/models/friday-game-details.model.ts

@@ -11,21 +11,21 @@ export enum GameRound {
 }
 
 export interface Battle {
-  activeBattlePoints: number
-  activeFreeBattleCards: BattleCard[]
-  activeHazard: Hazard
-  activePayedBattleCards: BattleCard[]
+  battlePoints: number
+  freeBattleCards: BattleCard[]
+  hazard: Hazard
+  payedBattleCards: BattleCard[]
 }
 
 export interface CardPiles {
   destroyedCards: BattleCard[]
 
   agingCardPile: BattleCard[]
-  hazardCardPile: HazardCardInterface[]
   hazardCardDiscardPile: HazardCardInterface[]
+  hazardCardPile: HazardCardInterface[]
   pirateCards: PirateCardRemote[]
-  robinsonCardPile: BattleCard[]
   robinsonCardDiscardPile: BattleCard[]
+  robinsonCardPile: BattleCard[]
 }
 
 export class FridayGameDetails {

src/app/friday/services/games.service.ts

@@ -20,7 +20,7 @@ export class GamesService {
     const url = environment.api.friday.games
 
     return this.http.post(url, game).pipe(
-      delay(1000),
+      delay(200),
     ) as Observable<FridayGame>
   }
 
@@ -29,39 +29,39 @@ export class GamesService {
     const body = new FridayGameDetails(game)
 
     return this.http.post(url, body).pipe(
-      delay(1000),
+      delay(200),
     ) as Observable<FridayGameDetails>
   }
 
   deleteGame(gameId: GameId) {
     const url = environment.api.friday.games + '/' + gameId
 
     return this.http.delete(url).pipe(
-      delay(1000),
+      delay(200),
     ) as Observable<GameId>
   }
 
   deleteGameDetails(gameId: GameId) {
     const url = environment.api.friday.gameDetails + '/' + gameId
 
     return this.http.delete(url).pipe(
-      delay(1000),
+      delay(200),
     ) as Observable<GameId>
   }
 
   getGamesByUser(userId: number) {
     const url = environment.api.friday.games + `?userId=${userId}`
 
     return this.http.get(url).pipe(
-      delay(1000),
+      delay(200),
     ) as Observable<FridayGame[]>
   }
 
   getGameDetails(gameId: GameId) {
     const url = environment.api.friday.gameDetails + '/' + gameId
 
     return this.http.get(url).pipe(
-      delay(1000),
+      delay(200),
     ) as Observable<FridayGameDetails>
   }
 
@@ -70,7 +70,7 @@ export class GamesService {
     const body = gameDetails
 
     return this.http.put(url, body).pipe(
-      delay(1000),
+      delay(200),
     ) as Observable<FridayGameDetails>
   }
 }