feat(items): item discounts

src/client/build/build.component.ts

@@ -2,6 +2,7 @@ import {Component, OnInit, ViewEncapsulation} from '@angular/core';
 
 import {LolApiService} from '../services/lolapi.service';
 import {ItemsComponent} from './items/items.component';
+import {ShopComponent} from './shop/shop.component';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
@@ -16,14 +17,15 @@ import {ItemsComponent} from './items/items.component';
     <lb-graph></lb-graph>
     <lb-abilities></lb-abilities>
     <lb-masteries></lb-masteries>
-    <lb-items #items></lb-items>
-    <lb-shop (itemPicked)="items.addItem($event)"></lb-shop>
+    <lb-items (itemSelected)="shop.selectItem($event)" #items></lb-items>
+    <lb-shop (itemPicked)="items.addItem($event)" #shop></lb-shop>
     <lb-loading [loading]="loading"></lb-loading>
     <lb-retry [error]="error" (retry)="ngOnInit()"></lb-retry>`
 })
 
 export class BuildComponent implements OnInit {
   items: ItemsComponent;
+  shop: ShopComponent;
   champion: any;
   loading: boolean = true;
   error: boolean = false;

src/client/build/build.css

@@ -606,6 +606,25 @@ lb-item .gold p {
   margin: 0 -8px;
 }
 
+lb-item .gold.reduced .total {
+  color: #c20100;
+  display: none;
+  text-decoration: line-through;
+}
+
+lb-item:hover .gold.reduced .total {
+  display: inherit;
+}
+
+lb-item:hover .gold.reduced {
+  margin: 14px 0 0;
+}
+
+lb-item .gold.reduced {
+  display: flex;
+  flex-direction: column;
+}
+
 lb-item:hover {
   background-color: #ccc;
 }
@@ -615,12 +634,19 @@ lb-item-slot lb-item p.gold {
   background-color: rgba(0,0,0,.7);
   border-bottom-left-radius: 5px;
   border-top-right-radius: 5px;
-  margin: 30px 0 0 0;
   min-width: 0;
   padding: 0 2px;
   position: absolute;
 }
 
+lb-preview lb-item p.gold {
+  margin: 30px 0 0 0;
+}
+
+lb-item-slot lb-item p.gold {
+  margin: 31px 0 0 0;
+}
+
 /* lb-item-slot */
 
 lb-item-slot {

src/client/build/item.ts

@@ -12,4 +12,8 @@ export interface Item {
 
   time?: number;
   bundle?: number;
+  offset?: number;
+  discount?: number;
+  contained?: boolean;
+  contains?: Array<Item>;
 }

src/client/build/items/item-slot.component.ts

@@ -1,6 +1,8 @@
-import {Component, EventEmitter, OnInit, Output} from '@angular/core';
+import {Component, DoCheck, EventEmitter, OnInit, Output} from '@angular/core';
+import {QueryList, ViewChildren} from '@angular/core';
 
 import {LolApiService} from '../../services/lolapi.service';
+import {TimeScale} from '../graph/scales';
 import {Item} from '../item';
 
 import {ItemComponent} from './item.component';
@@ -10,45 +12,69 @@ import {ItemComponent} from './item.component';
   template: `
     <template ngFor let-item [ngForOf]="items">
       <div class="dropzone"
-           [style.width]="lbItem.offset + 'px'"
+           [style.width]="item.offset + 'px'"
            [ngClass]="{draghover: draghover}"
            (dragenter)="draghover=true"
            (dragleave)="draghover=false"
-           (dragover)="dragover()"
-           (drop)="drop(item)">
+           (dragover)="false"
+           (drop)="itemDrop.emit(item)">
       </div>
       <lb-item #lbItem
                [item]="item"
-               [ngClass]="{disabled: item.disabled, dragging: dragging}"
+               [ngClass]="{disabled: item.disabled}"
+               (click)="this.itemSelected.emit(item)"
                (contextmenu)="rightClicked(item)"
                draggable="true"
-               (dragstart)="dragstart(item)"
-               (dragend)="dragend()">
+               (dragstart)="itemDragStart.emit(item)"
+               (dragend)="itemDragEnd.emit(null)">
       </lb-item>
     </template>`
 })
 
-export class ItemSlotComponent implements OnInit {
+export class ItemSlotComponent implements OnInit, DoCheck {
+  @ViewChildren(ItemComponent) children: QueryList<ItemComponent>;
+
+  @Output() itemSelected: EventEmitter<Item> = new EventEmitter<Item>();
   @Output() itemRemoved: EventEmitter<Item> = new EventEmitter<Item>();
   @Output() itemDragStart: EventEmitter<Item> = new EventEmitter<Item>();
   @Output() itemDragEnd: EventEmitter<any> = new EventEmitter<any>();
   @Output() itemDrop: EventEmitter<Item> = new EventEmitter<Item>();
   items = Array<Item>();
 
   lbItem: ItemComponent;
-  dragging = false;
   draghover = false;
 
+  private xScaleTime = new TimeScale([0, 1380]);
   private allItems: any;
 
-  constructor(private lolApi: LolApiService) {}
+  constructor(private lolApi: LolApiService) {
+    this.xScaleTime.create();
+  }
 
   ngOnInit() {
     this.lolApi.getItems().subscribe(res => {
       this.allItems = res.data;
     });
   }
 
+  ngDoCheck() {
+    let prevOffset = 0;
+    for (let item of this.items) {
+      item.offset = this.xScaleTime.get()(item.time) - prevOffset;
+      if (item === this.items[0]) {
+        prevOffset += item.offset;
+        if (item.offset > 0) {
+          item.offset += 56;
+        }
+      } else {
+        if (prevOffset > 0) {
+          item.offset -= 60;
+        }
+        prevOffset += item.offset;
+      }
+    }
+  }
+
   compatible(subject: Item): boolean {
     if (!this.items.length) {
       return true;
@@ -61,32 +87,16 @@ export class ItemSlotComponent implements OnInit {
     return false;  // stop context menu from appearing
   }
 
-  dragstart(item: Item) {
-    this.dragging = true;
-    this.itemDragStart.emit(item);
-  }
-
-  dragover() {
-    return false;  // allow drop
-  }
-
-  dragend() {
-    this.dragging = false;
-    this.itemDragEnd.emit(null);
-  }
-
-  drop(item: Item) {
-    this.dragging = false;
-    this.itemDrop.emit(item);
+  lastItem() {
+    return this.items[this.items.length - 1];
   }
 
   private compatibleWithItem(subject: Item): boolean {
-    let lastItem = this.items[this.items.length - 1];
-    return this.buildsFrom(subject, lastItem);
+    return this.buildsFrom(subject, this.lastItem());
   }
 
   private compatibleWithConsumable(subject: Item): boolean {
-    let lastItem = this.items[this.items.length - 1];
+    let lastItem = this.lastItem();
 
     if (lastItem.time !== subject.time) {
       return lastItem.consumed;

src/client/build/items/item.component.ts

@@ -1,6 +1,5 @@
-import {Component, DoCheck, Input} from '@angular/core';
+import {Component, Input} from '@angular/core';
 
-import {TimeScale} from '../graph/scales';
 import {Item} from '../item';
 
 @Component({
@@ -10,27 +9,16 @@ import {Item} from '../item';
          [attr.src]="'sprite/'+item.image.sprite | lbDDragon"
          [style.object-position]="'-' + item.image.x + 'px -' + item.image.y + 'px'">
     <p *ngIf="item.bundle > 1" class="bundle">x{{item.bundle}}</p>
-    <p class="gold">{{item.gold.total ? item.gold.total : ''}}</p>`
+    <p class="gold" [ngClass]="{reduced : item?.discount}">
+      <span class="total">
+        {{ item?.gold?.total ? item?.gold?.total : '' }}
+      </span>
+      <span class="discount" *ngIf="item?.gold.total && item?.discount">
+        {{ item?.gold?.total - item?.discount }}
+      </span>
+    </p>`
 })
 
-export class ItemComponent implements DoCheck {
+export class ItemComponent {
   @Input() item: Item;
-  itemPrev: Item;
-  offset: number;
-  private xScaleTime = new TimeScale([0, 1380]);
-
-  constructor() {
-    this.xScaleTime.create();
-  }
-
-  ngDoCheck() {
-    if (!this.item) {
-      return;
-    }
-    this.offset = this.xScaleTime.get()(this.item.time);
-    if (this.offset > 0) {
-      this.offset += 60;
-    }
-    this.itemPrev = this.item;
-  }
 }

src/client/build/items/items.component.spec.ts

@@ -1,11 +1,16 @@
 import {inject, TestBed} from '@angular/core/testing';
 
+import {settings} from '../../../../config/settings';
+import {LolApiService} from '../../services/lolapi.service';
 import {StatsService} from '../../services/stats.service';
+import {TestModule} from '../../testing';
+
 import {ItemsComponent} from './items.component';
 
 describe('ItemsComponent', () => {
   beforeEach(() => {
-    TestBed.configureTestingModule({providers: [ItemsComponent, StatsService]});
+    TestBed.configureTestingModule(
+        {providers: [ItemsComponent, LolApiService, StatsService], imports: [TestModule]});
   });
 
   beforeEach(inject([ItemsComponent], (component) => {
@@ -15,4 +20,53 @@ describe('ItemsComponent', () => {
       {'id': 2003, 'gold': {'total': 50}}, {'id': 2003, 'gold': {'total': 50}}
     ];
   }));
+
+  let item1;
+  let item2;
+
+  beforeEach(inject([ItemsComponent], (component) => {
+    item1 = {item: {id: 3341, gold: {total: 0}}, slotId: 0};
+    item1 = {item: {id: 2003, gold: {total: 50}}, slotId: 0};
+
+    component.samples = {gold: [0, 100, 200, 300]};
+    component.slotItems = [item1, item2, item2, item2];
+  }));
+
+  // it('should add item', inject([ItemsComponent], (component) => {
+  //   spyOn(component, 'addTime');
+  //   spyOn(component, 'addBundle');
+  //   expect(component.addTime).not.toHaveBeenCalled();
+  //   expect(component.addBundle).not.toHaveBeenCalled();
+  //   component.ngDoCheck();
+  //   expect(component.addTime).toHaveBeenCalled();
+  //   expect(component.addBundle).toHaveBeenCalled();
+  // }));
+
+  xit('should add an item', inject([ItemsComponent], (component) => {
+        spyOn(component, 'addTime');
+        spyOn(component, 'addBundle');
+        expect(component.addTime).not.toHaveBeenCalled();
+        //  expect(component.addBundle).not.toHaveBeenCalled();
+        component.addItem(item1);
+        expect(component.addTime).toHaveBeenCalled();
+        //  expect(component.addBundle).toHaveBeenCalled();
+        expect(component.items[4]).toHaveEqualContent(item1);
+      }));
+
+  xit('should calculate time', inject([ItemsComponent], (component) => {
+        component.addTime(item1);
+        expect(item1.time).toBe(0);
+        component.addTime(item2);
+        expect(item2.time)
+            .toBe(
+                (settings.gameTime / settings.matchServer.sampleSize) / component.samples.gold[1] *
+                item2.gold.total);
+      }));
+
+  xit('should bundle', inject([ItemsComponent], (component) => {
+        component.addTime(item2);
+        component.addBundle(item2);
+        expect(component.items.length).toBe(2);
+        expect(component.items[1].bundle).toBe(3);
+      }));
 });