feat(items/features): further development

src/app/app.component.ts

@@ -1,9 +1,10 @@
 import {Component} from 'angular2/core';
 import {ROUTER_DIRECTIVES, RouteConfig} from 'angular2/router';
 
-import {RegionRoute} from './routes/region.component';
-import {ChooseRoute} from './routes/choose.component';
-import {BuildRoute} from './routes/build.component';
+import {RegionsComponent} from './routes/region.component';
+import {ChampionsComponent} from './routes/champions.component';
+import {FeaturesComponent} from './routes/features.component';
+import {BuildComponent} from './routes/build.component';
 
 @Component({
   selector: 'app',
@@ -12,9 +13,11 @@ import {BuildRoute} from './routes/build.component';
 })
 
 @RouteConfig([
-  { path: '/', component: RegionRoute, as: 'Region' },
-  { path: '/:region', component: ChooseRoute, as: 'Choose' },
-  { path: '/:region/:champion', component: BuildRoute, as: 'Build' }
+  { path: '/', component: RegionsComponent, as: 'Regions' },
+  { path: '/:region', component: ChampionsComponent, as: 'Champions' },
+  { path: '/:region/:champion', component: FeaturesComponent, as: 'Features' },
+  { path: '/:region/:champion/build', component: BuildComponent, as: 'Build' },
+  { path: '/:region/:champion/summoner/:summoner', component: BuildComponent, as: 'BuildSummoner' }
 ])
 
 export class AppComponent { }

src/app/build/graph.component.spec.ts

@@ -0,0 +1,24 @@
+import {ElementRef} from 'angular2/core';
+
+import {it, inject, injectAsync, beforeEachProviders} from 'angular2/testing';
+
+import {GraphComponent} from './graph.component';
+
+describe('GraphComponent', () => {
+  beforeEachProviders(() => [
+    ElementRef,
+
+    GraphComponent
+  ]);
+
+
+  it('should initialise', inject([GraphComponent], (component) => {
+    expect(component.margin).toBeDefined();
+    expect(component.width).toBeDefined();
+    expect(component.height).toBeDefined();
+    expect(component.abilitiesWidth).toBeDefined();
+    expect(component.abilitiesHeight).toBeDefined();
+    expect(component.graphWidth).toBeDefined();
+    expect(component.graphHeight).toBeDefined();
+  }));
+});

src/app/build/graph.component.ts

@@ -69,7 +69,7 @@ export class GraphComponent implements OnChanges, OnInit {
 
   createAxes() {
     this.xScaleTime = d3.scale.linear()
-      .domain([0, 3600000])
+      .domain([0, this.config.gameTime])
       .range([0, this.graphWidth]);
 
     this.yScale = d3.scale.linear()

src/app/build/items/item.component.spec.ts

@@ -0,0 +1,13 @@
+import {it, inject, beforeEachProviders} from 'angular2/testing';
+
+import {ItemComponent} from './item.component';
+
+describe('ItemComponent', () => {
+  beforeEachProviders(() => [
+    ItemComponent
+  ]);
+
+  it('should be initialised', inject([ItemComponent], (component) => {
+    expect(component.item).not.toBeDefined();
+  }));
+});

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

@@ -8,17 +8,10 @@ import {DDragonDirective} from '../../misc/ddragon.directive';
   directives: [NgIf, DDragonDirective],
   template: `
     <img [ddragon]="'item/' + item.image.full">
-    <div *ngIf="name">
-      <p class="name">{{name}}</p>
-      <div class="gold">
-        <img [ddragon]="'ui/gold.png'">
-        <p>{{item.gold.total ? item.gold.total : 'Free'}}</p>
-      </div>
-    </div>
-    <p *ngIf="!name" class="gold">{{item.gold.total ? item.gold.total : ''}}</p>`
+    <p *ngIf="item.bundle > 1" class="bundle">x{{item.bundle}}</p>
+    <p class="gold">{{item.gold.total ? item.gold.total : ''}}</p>`
 })
 
 export class ItemComponent {
   @Input() item;
-  @Input() name;
 }

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

@@ -0,0 +1,74 @@
+//import {spyOn} from 'jasmine';
+import {it, inject, beforeEachProviders, beforeEach} from 'angular2/testing';
+
+import {ItemsComponent} from './items.component';
+
+describe('ItemsComponent', () => {
+  beforeEachProviders(() => [
+    ItemsComponent
+  ]);
+
+  beforeEach(inject([ItemsComponent], (component) => {
+    component.config = { g: [100, 200, 300], gameTime: 200, sampleSize: 20 };
+    component.items = [
+      {
+        'id': 3341,
+        'gold': { 'total': 0 }
+      },
+      {
+        'id': 2003,
+        'gold': { 'total': 50 }
+      },
+      {
+        'id': 2003,
+        'gold': { 'total': 50 }
+      }
+    ];
+  }));
+
+  it('should update on changes', inject([ItemsComponent], (component) => {
+    spyOn(component, 'calculateTime');
+    spyOn(component, 'bundle');
+    expect(component.calculateTime).not.toHaveBeenCalled();
+    expect(component.bundle).not.toHaveBeenCalled();
+    component.ngOnChanges();
+    expect(component.calculateTime).toHaveBeenCalled();
+    expect(component.bundle).toHaveBeenCalled();
+  }));
+
+  it('should calculate time', inject([ItemsComponent], (component) => {
+    component.calculateTime();
+    expect(component.items[0].time).toBe(0);
+    expect(component.items[1].time).toBe(5);
+    expect(component.items[2].time).toBe(5);
+  }));
+
+  it('should not calculate time', inject([ItemsComponent], (component) => {
+    component.items = [
+      {
+        'id': 123,
+        'gold': { 'total': 400 }
+      }
+    ];
+    component.calculateTime();
+    component.bundle();
+    expect(component.items[0].time).toBe(-1);
+  }));
+
+  it('should bundle', inject([ItemsComponent], (component) => {
+    component.calculateTime();
+    component.bundle();
+    expect(component.items.length).toBe(2);
+    expect(component.items[1].bundle).toBe(2);
+  }));
+
+  it('should not bundle', inject([ItemsComponent], (component) => {
+    component.items = false;
+    component.bundle();
+    expect(component.items).toBeFalsy();
+
+    component.items = [{ id: 1, bundle: 1 }, { id: 2, bundle: 1 }];
+    component.bundle();
+    expect(component.items[0].bundle).toBe(1);
+  }));
+});

src/app/build/items/items.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, Output, EventEmitter, OnChanges} from 'angular2/core';
+import {Component, Input, Output, EventEmitter, DoCheck} from 'angular2/core';
 import {NgFor, NgClass} from 'angular2/common';
 import {Observable} from 'rxjs/Observable';
 
@@ -12,53 +12,80 @@ import * as d3 from 'd3'; //TODO: remove test
   directives: [NgFor, NgClass, ItemComponent],
   template: `
     <template ngFor #item [ngForOf]="items" #i="index">
-      <item [item]="item" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description" style="left: {{getXScale(item.gold.total)}}px"></item>
+      <item [item]="item" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description" style="left: {{xScaleTime(item.time)}}px"></item>
     </template>`
 })
 
-export class ItemsComponent implements OnChanges {
+export class ItemsComponent implements DoCheck {
   @Input() items: Array<Object>;
   @Input() config: Config;
 
+  // private itemWidth = 45 ~ 50;
+
   // todo: remove test
   private xScaleTime = d3.scale.linear()
     .domain([0, 3600000])
-    .range([0, 1500]);
+    .range([0, 1460]);
+
+  ngDoCheck() {
+    this.calculateTime();
+    this.bundle();
+  }
 
-  ngOnChanges() {
-    // TODO: implement
+  calculateTime() {
+    let gold = 0;
+    for (let index in this.items) {
+      let item = this.items[index];
+      gold += item['gold']['total'];
+      let time = this.getTime(this.config.g, gold);
+      item['time'] = time;
+    }
   }
 
-  getXScale(g: number) {
-    return this.xScaleTime(this.getTime(this.config.g, g));
+  bundle() {
+    if (!this.items || this.items[0]['bundle']) {
+      return;
+    }
+    this.items.forEach((item) => {
+      item['bundle'] = 1;
+    });
+
+    for (let index = 0; index < this.items.length - 1; index++) {
+      let item = this.items[index];
+      let itemNext = this.items[index + 1];
+      if (item['id'] === itemNext['id'] && item['time'] === itemNext['time']) {
+        item['bundle']++;
+        this.items.splice(index + 1, 1);
+        index--;
+      }
+    }
   }
 
   getTime(frames: Array<number>, g: number) {
-    let index = 0;
-    if (!this.getUpperIndex(frames, g, index)) {
+    let index = this.getUpperIndex(frames, g);
+    if (index <= -1) {
       return -1;
     }
 
-    let lowerFrame = frames[index - 1];
-    let upperFrame = frames[index];
+    let lowerFrame = frames[index];
+    let upperFrame = frames[index + 1];
 
     let ratio = (g - lowerFrame) / (upperFrame - lowerFrame);
 
     let sampleTime = this.config.gameTime / this.config.sampleSize;
-    let lowerTime = (index - 1) * sampleTime;
-    let upperTime = index * sampleTime;
+    let lowerTime = index * sampleTime;
+    let upperTime = (index + 1) * sampleTime;
 
-    return (upperTime - lowerTime) * ratio;
+    let time = lowerTime + ((upperTime - lowerTime) * ratio);
+    return time > 0 && isFinite(time) ? time : 0;
   }
 
-  getUpperIndex(frames: Array<number>, g: number, index: number) {
-    index = -1;
+  getUpperIndex(frames: Array<number>, g: number) {
     for (var j = 0; j < frames.length; j++) {
       if (frames[j] > g) {
-        index = j;
-        return true;
+        return j;
       }
     }
-    return false;
+    return -1;
   }
 }

src/app/build/shop/item.component.spec.ts

@@ -0,0 +1,13 @@
+import {it, inject, beforeEachProviders} from 'angular2/testing';
+
+import {ItemComponent} from './item.component';
+
+describe('ItemComponent', () => {
+  beforeEachProviders(() => [
+    ItemComponent
+  ]);
+
+  it('should be initialised', inject([ItemComponent], (component) => {
+    expect(component.item).not.toBeDefined();
+  }));
+});

src/app/build/shop/item.component.ts

@@ -0,0 +1,22 @@
+import {Component, Input} from 'angular2/core';
+import {NgIf} from 'angular2/common';
+
+import {DDragonDirective} from '../../misc/ddragon.directive';
+
+@Component({
+  selector: 'item',
+  directives: [NgIf, DDragonDirective],
+  template: `
+    <img [ddragon]="'item/' + item.image.full">
+    <div>
+      <p class="name">{{item.name}}</p>
+      <div class="gold">
+        <img [ddragon]="'ui/gold.png'">
+        <p>{{item.gold.total ? item.gold.total : 'Free'}}</p>
+      </div>
+    </div>`
+})
+
+export class ItemComponent {
+  @Input() item;
+}

src/app/build/shop/shop.component.spec.ts

@@ -3,7 +3,7 @@ import {BaseRequestOptions, Http, Response, ResponseOptions} from 'angular2/http
 import {RouteParams} from 'angular2/router';
 import {RootRouter} from 'angular2/src/router/router';
 
-import {it, inject, injectAsync, beforeEachProviders} from 'angular2/testing';
+import {it, inject, injectAsync, beforeEachProviders, beforeEach} from 'angular2/testing';
 import {MockBackend, MockConnection} from 'angular2/http/testing';
 
 import {LolApiService} from '../../misc/lolapi.service';
@@ -30,6 +30,18 @@ describe('ShopComponent', () => {
     ShopComponent
   ]);
 
+  let pickedItem1 = { id: 1, group: 'PinkWards' };
+  let pickedItem2 = { id: 2, group: 'PinkWards' };
+  let pickedItem3 = {};
+  let items = {
+    groups: [
+      {
+        MaxGroupOwnable: 2,
+        key: 'PinkWards'
+      }
+    ]
+  };
+
 
 
   it('should call getData() on contruct', inject([LolApiService], (service) => {
@@ -103,4 +115,29 @@ describe('ShopComponent', () => {
     component.tagChanged(event);
     expect(component.tags).not.toContain('HEALTH');
   }));
+
+
+  it('should add the picked item to picked items', inject([ShopComponent], (component) => {
+    component.pickedItems = [pickedItem1];
+    component.items = items;
+    component.itemPicked(pickedItem2);
+    expect(component.pickedItems.length).toBe(2);
+    expect(component.pickedItems[0]).toHaveEqualContent(pickedItem1);
+    expect(component.pickedItems[1]).toHaveEqualContent(pickedItem2);
+  }));
+
+  it('should replace the first picked item with the new picked item', inject([ShopComponent], (component) => {
+    component.pickedItems = [pickedItem1, pickedItem1];
+    component.items = items;
+    component.itemPicked(pickedItem2);
+    expect(component.pickedItems.length).toBe(2);
+    expect(component.pickedItems[0]).toHaveEqualContent(pickedItem2);
+  }));
+
+  it('should ignore picked items without a group', inject([ShopComponent], (component) => {
+    component.pickedItems = [];
+    component.items = items;
+    component.itemPicked(pickedItem3);
+    expect(component.pickedItems[0]).toHaveEqualContent(pickedItem3);
+  }));
 });

src/app/build/shop/shop.component.ts

@@ -1,7 +1,7 @@
 import {Component, Input, Output, EventEmitter} from 'angular2/core';
 import {NgFor, NgIf, NgClass} from 'angular2/common';
 
-import {ItemComponent} from '../items/item.component.ts';
+import {ItemComponent} from './item.component.ts';
 
 import {DDragonDirective} from '../../misc/ddragon.directive';
 import {LoadingComponent} from '../../misc/loading.component';
@@ -49,7 +49,7 @@ import {LolApiService} from '../../misc/lolapi.service';
       </div>
       <div class="items">
         <template ngFor #item [ngForOf]="items?.data | toIterable | map:11 | champion:123 | hide | tags:tags | name:name | sort">
-          <item [item]="item" [name]="item.name" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description" (click)="itemPicked(item)"></item>
+          <item [item]="item" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description" (click)="itemPicked(item)"></item>
         </template>
         <loading [loading]="loading"></loading>
         <error [error]="error" (retry)="getData()"></error>
@@ -99,7 +99,7 @@ export class ShopComponent {
 
   private itemPicked(pickedItem: Object) {
     if (this.MaxOwnableExceeded(this.pickedItems, pickedItem)) {
-      // replace the first item in the pickedGroup with the new pickedItems
+      // replace the first item in the pickedGroup with the new pickedItem
       this.pickedItems.forEach((item, index) => {
         if (item['group'] === pickedItem['group']) {
           this.pickedItems[index] = pickedItem;