Merge upstream and fix stats for monsters to include shield.

src/app/app.module.ts

@@ -20,15 +20,19 @@ import { MonsterDeckComponent } from './components/monster-deck/monster-deck.com
 import { CombatBandComponent } from './containers/combat-band/combat-band.component';
 import { CombatDeckComponent } from './components/combat-deck/combat-deck.component';
 import { CombatCardComponent } from './components/combat-card/combat-card.component';
+import { TooltipComponent } from './components/tooltip/tooltip.component';
 
 import { FilterPipe } from './pipes/filter.pipe';
 import { OrderByPipe } from './pipes/order-by.pipe';
 
+import { TooltipDirective } from './directives/tooltip.directive';
+
 import { LineParserService } from './services/line-parser.service';
 import { RetrievalService } from './services/retrieval.service';
 import { ScenarioService } from './services/scenario.service';
 import { MonsterCardService } from './services/monster-card.service';
 import { CombatCardService } from './services/combat-card.service';
+import { TooltipService } from './services/tooltip.service';
 
 @NgModule({
   declarations: [
@@ -48,6 +52,8 @@ import { CombatCardService } from './services/combat-card.service';
     SearchDropdownComponent,
     HealthTrackerComponent,
     MonsterHealthComponent,
+    TooltipComponent,
+    TooltipDirective,
     FilterPipe,
     OrderByPipe
   ],
@@ -63,7 +69,11 @@ import { CombatCardService } from './services/combat-card.service';
     RetrievalService,
     ScenarioService,
     MonsterCardService,
-    CombatCardService
+    CombatCardService,
+    TooltipService
+  ],
+  entryComponents: [
+    TooltipComponent
   ],
   bootstrap: [AppComponent]
 })

src/app/components/combat-card/combat-card.component.scss

@@ -109,5 +109,92 @@
   height: 100%;
   top: 0;
   background-size: cover;
-  background-image: url(assets/cards/attack-modifiers/card-parts/attack-card-back.jpg);
+  background-image: url('assets/cards/attack-modifiers/card-parts/attack-card-back.jpg');
 }
+
+.blank-front {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-size: cover;
+  background-image: url('assets/cards/attack-modifiers/card-parts/attack-card-front.jpg');
+}
+
+.denomination {
+  width: 14em;
+  height: 12em;
+  background-size: cover;
+  position: absolute;
+}
+
+  .denomination--min2 {
+    width: 14em;
+    height: 12em;
+    background-size: cover;
+    position: absolute;
+    background-image: url('assets/cards/attack-modifiers/card-parts/minus2.png');
+  }
+
+  .denomination--min1 {
+    width: 14em;
+    height: 12em;
+    background-size: cover;
+    position: absolute;
+    background-image: url('assets/cards/attack-modifiers/card-parts/minus1.png');
+  }
+
+  .denomination--zero {
+    width: 14em;
+    height: 12em;
+    background-size: cover;
+    position: absolute;
+    background-image: url('assets/cards/attack-modifiers/card-parts/plus0.png');
+  }
+
+  .denomination--plus1 {
+    width: 14em;
+    height: 12em;
+    background-size: cover;
+    position: absolute;
+    background-image: url('assets/cards/attack-modifiers/card-parts/plus1.png');
+  }
+
+  .denomination--plus2 {
+    width: 14em;
+    height: 12em;
+    background-size: cover;
+    position: absolute;
+    background-image: url('assets/cards/attack-modifiers/card-parts/plus2.png');
+  }
+
+  .denomination--crit {
+    width: 14em;
+    height: 12em;
+    background-size: cover;
+    position: absolute;
+    background-image: url('assets/cards/attack-modifiers/card-parts/crit.png');
+  }
+
+  .denomination--whiff {
+    width: 14em;
+    height: 12em;
+    background-size: cover;
+    position: absolute;
+    background-image: url('assets/cards/attack-modifiers/card-parts/whiff.png');
+  }
+
+  .denomination--bless {
+    width: 14em;
+    height: 12em;
+    background-size: cover;
+    position: absolute;
+    background-image: url('assets/cards/attack-modifiers/card-parts/crit-bless.png');
+  }
+
+  .denomination--curse {
+    width: 14em;
+    height: 12em;
+    background-size: cover;
+    position: absolute;
+    background-image: url('assets/cards/attack-modifiers/card-parts/whiff-curse.png');
+  }

src/app/components/combat-card/combat-card.component.ts

@@ -8,14 +8,20 @@ import { CombatCard } from '../../models/card.model';
     template: `
         <div class="card-back"></div>
         <div class="card-front">
-          <div [ngClass]="getCardValue()"></div>
-          <div></div>
+          <div *ngIf="!showTwo" [ngClass]="getCardValue()"></div>
+          <div *ngIf="showTwo" class="blank-front">
+            <div [ngClass]="'denomination--' + advOne" [ngStyle]="{'left': '-4.5em'}"></div>
+            <div [ngClass]="'denomination--' + advTwo" [ngStyle]="{'left': '4.5em'}"></div>
+          </div>
         </div>
     `
 })
 export class CombatCardComponent {
 
   @Input() card: CombatCard;
+  @Input() showTwo: boolean;
+  @Input() advOne: string;
+  @Input() advTwo: string;
 
   constructor() {}
 

src/app/components/combat-deck/combat-deck.component.scss

@@ -1,40 +0,0 @@
-.denomination {
-  position: relative;
-  display: inline-block;
-
-  &-min2 {
-    background-image: url("assets/cards/attack-modifiers/card-parts/minus2.png");
-  }
-
-  &-min1 {
-    background-image: url("assets/cards/attack-modifiers/card-parts/minus1.png");
-  }
-
-  &-plus0 {
-    background-image: url("assets/cards/attack-modifiers/card-parts/plus0.png");
-  }
-
-  &-plus1 {
-    background-image: url("assets/cards/attack-modifiers/card-parts/plus1.png");
-  }
-
-  &-plus2 {
-    background-image: url("assets/cards/attack-modifiers/card-parts/plus2.png");
-  }
-
-  &-crit {
-    background-image: url("assets/cards/attack-modifiers/card-parts/crit.png");
-  }
-
-  &-whiff {
-    background-image: url("assets/cards/attack-modifiers/card-parts/whiff.png");
-  }
-
-  &-bless {
-    background-image: url("assets/cards/attack-modifiers/card-parts/crit-bless.png");
-  }
-
-  &-curse {
-    background-image: url("assets/cards/attack-modifiers/card-parts/whiff-curse.png");
-  }
-}

src/app/components/combat-deck/combat-deck.component.ts

@@ -13,7 +13,10 @@ import { Card, CombatCard } from '../../models/card.model';
               'flipped flip-to-front': toFlip,
               'send-to-back': !toFlip
           }"
-          [card]="activeCard">
+          [card]="activeCard"
+          [showTwo]="showTwo"
+          [advOne]="card1"
+          [advTwo]="card2">
       </combat-card>
     `
 })
@@ -24,7 +27,10 @@ export class CombatDeckComponent implements OnInit{
 
     deck: CombatDeck;
     activeCard: CombatCard;
-    toFlip: boolean;
+    private toFlip: boolean;
+    private showTwo: boolean = false;
+    private card1: string;
+    private card2 : string;
 
     ngOnInit() {
       this.activeCard = new CombatCard(null, '');
@@ -37,6 +43,7 @@ export class CombatDeckComponent implements OnInit{
     shuffle() {
       this.deck.shuffle();
       this.toFlip = false;
+      this.showTwo = false;
 
       setTimeout(() => {
         this.activeCard = this.deck.drawCard() as CombatCard;
@@ -49,10 +56,14 @@ export class CombatDeckComponent implements OnInit{
       this.toFlip = false;
       card1 = this.deck.drawCard() as CombatCard;
       card2 = this.deck.drawCard() as CombatCard;
+      console.log(card1.value + ", " + card2.value);
+      this.card1 = card1.value;
+      this.card2 = card2.value;
+      this.showTwo = true;
 
       this.toFlip = true;
 
-      this.activeCard = this.deck.drawCard() as CombatCard;
+      // this.activeCard = this.deck.drawCard() as CombatCard;
     }
 
     resetDeck() {
@@ -63,6 +74,7 @@ export class CombatDeckComponent implements OnInit{
     flip() {
       // Flip over previous card, show current one
       this.toFlip = false;
+      this.showTwo = false;
       if (['curse', 'bless'].includes(this.activeCard.value)) {
         this.deck.removeCard(this.activeCard);
       }

src/app/components/monster-card/monster-card.component.scss

@@ -123,13 +123,10 @@
   }
 
   .shuffle {
-    grid-column-start: shuffle;
-    grid-column-end: span end-col;
-    grid-row-start: shuffle-row;
-    grid-row-end: span end-row;
     align-self: end;
-    position: relative;
-    top: -1em;
+    position: absolute;
+    top: 82%;
+    left: 89%;
     width: 2em;
     height: 2em;
   }
@@ -143,4 +140,4 @@
   top: 0;
   background-size: cover;
   background-image: url(assets/cards/monster-ability-back.jpg);
-}
+}

src/app/components/tooltip/tooltip.component.scss

@@ -0,0 +1,7 @@
+.tooltip-container {
+     background-color: black;
+     color: #fff;
+     display: inline-block;
+     padding: 0.5em;
+     position: relative;
+}

src/app/components/tooltip/tooltip.component.ts

@@ -0,0 +1,32 @@
+import { Component, Input, ElementRef, ChangeDetectorRef, AfterViewInit,
+  ViewChild, Inject, Directive } from "@angular/core";
+import { TooltipDirective } from '../../directives/tooltip.directive';
+
+@Directive({
+  selector: '.tooltip-container'
+})
+export class TooltipContainerDirective {
+}
+
+@Component({
+  styles: ['tooltip.component.scss'],
+  template: `
+    <div class="tooltip-container" [ngStyle]="{top: top}">
+      <ng-content></ng-content>
+    </div>
+  `
+})
+export class TooltipComponent implements AfterViewInit {
+  top: string;
+  @ViewChild(TooltipContainerDirective, { read: ElementRef }) private tooltipContainer;
+
+  constructor(@Inject('tooltipConfig') private config) { }
+
+  ngAfterViewInit() {
+    const {top} = this.config.host.getBoundingClientRect();
+    const {height} = this.tooltipContainer.nativeElement.getBoundingClientRect();
+    this.top = `${top - height}px`;
+    console.log("Hello");
+  }
+
+}

src/app/containers/combat-band/combat-band.component.scss

@@ -35,14 +35,14 @@ combat-deck {
   background-image: url("assets/icons/shuffle-black.png");
 }
 
-.strengthen {
+.draw-two {
   position: relative;
   display: inline-block;
-  background-image: url("assets/status/strengthen.png");
+  background-image: url("assets/icons/advantage.png");
 }
 
-.muddle {
+.reset-deck {
   position: relative;
   display: inline-block;
-  background-image: url("assets/status/muddle.png");
+  background-image: url("assets/icons/reset-deck.png");
 }

src/app/containers/combat-band/combat-band.component.ts

@@ -6,6 +6,7 @@ import { CombatCard } from '../../models/card.model';
 
 import { CombatCardService } from '../../services/combat-card.service';
 import { CombatDeckComponent } from '../../components/combat-deck/combat-deck.component';
+import { TooltipComponent } from '../../components/tooltip/tooltip.component';
 
 import 'rxjs/add/operator/map';
 
@@ -19,8 +20,8 @@ import 'rxjs/add/operator/map';
         <div class="icon curse" (click)="addTempCard('curse')"></div>
         <div class="icon bless" (click)="addTempCard('bless')"></div>
         <div class="icon shuffle" (click)="shuffleDeck()"></div>
-        <div class="icon strengthen" (click)="drawTwo()"></div>
-        <div class="icon muddle" (click)="resetDeck()"></div>
+        <div class="icon draw-two" (click)="drawTwo()"></div>
+        <div class="icon reset-deck" (click)="resetDeck()"></div>
       </div>
     </div>
   `