From ead2acc2d43f07e8a39eb5a21f9ffb6f5f80be63 Mon Sep 17 00:00:00 2001
From: Steve Van Opstal <stevevanopstal@gmail.com>
Date: Sat, 16 Apr 2016 10:47:14 +0200
Subject: [PATCH] feat(preview): initial implementation

---
 .../build/items/item-slot.component.spec.ts   |  56 ++++++++
 src/app/build/items/item-slot.component.ts    | 112 +++++++++++++++
 src/app/build/items/item.component.ts         |   2 +-
 src/app/build/items/items.component.spec.ts   | 104 +++++---------
 src/app/build/items/items.component.ts        | 124 +++++++----------
 src/app/build/shop/item.component.ts          |   3 +-
 src/app/build/shop/preview/item-bundle.ts     |   4 +
 src/app/build/shop/preview/item.component.ts  |  15 ++
 .../shop/preview/items-from.component.ts      |  25 ++++
 .../build/shop/preview/preview.component.ts   |  99 ++++++++++++++
 src/app/build/shop/shop.component.spec.ts     |  54 ++++----
 src/app/build/shop/shop.component.ts          | 129 ++++++++++--------
 src/app/misc/lolapi.service.ts                |   2 +-
 src/app/routes/build.component.ts             |   5 +-
 src/assets/css/base.css                       |   2 +-
 src/assets/css/build.css                      | 124 ++++++++++++++---
 16 files changed, 599 insertions(+), 261 deletions(-)
 create mode 100644 src/app/build/items/item-slot.component.spec.ts
 create mode 100644 src/app/build/items/item-slot.component.ts
 create mode 100644 src/app/build/shop/preview/item-bundle.ts
 create mode 100644 src/app/build/shop/preview/item.component.ts
 create mode 100644 src/app/build/shop/preview/items-from.component.ts
 create mode 100644 src/app/build/shop/preview/preview.component.ts

diff --git a/src/app/build/items/item-slot.component.spec.ts b/src/app/build/items/item-slot.component.spec.ts
new file mode 100644
index 0000000..32815a2
--- /dev/null
+++ b/src/app/build/items/item-slot.component.spec.ts
@@ -0,0 +1,56 @@
+//import {spyOn} from 'jasmine';
+import {it, inject, beforeEachProviders, beforeEach} from 'angular2/testing';
+
+import {ItemsComponent} from './items.component';
+import {ItemSlotComponent} from './item-slot.component';
+
+describe('ItemSlotComponent', () => {
+  beforeEachProviders(() => [
+    ItemsComponent,
+
+    ItemSlotComponent
+  ]);
+
+  let item1;
+  let item2;
+
+  beforeEach(inject([ItemSlotComponent], (component) => {
+    item1 = {
+      'id': 3341,
+      'gold': { 'total': 0 }
+    };
+
+    item2 = {
+      'id': 2003,
+      'gold': { 'total': 50 }
+    };
+
+    component.config = { g: [0, 100, 200, 300], gameTime: 200, sampleSize: 20 };
+    component.items = [item1, item2, item2, item2];
+  }));
+
+  it('should add an item', inject([ItemSlotComponent], (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);
+  }));
+
+  it('should calculate time', inject([ItemSlotComponent], (component) => {
+    component.addTime(item1);
+    expect(item1['time']).toBe(0);
+    component.addTime(item2);
+    expect(item2['time']).toBe(5);
+  }));
+
+  it('should bundle', inject([ItemSlotComponent], (component) => {
+    component.addTime(item2);
+    component.addBundle(item2);
+    expect(component.items.length).toBe(2);
+    expect(component.items[1].bundle).toBe(3);
+  }));
+});
diff --git a/src/app/build/items/item-slot.component.ts b/src/app/build/items/item-slot.component.ts
new file mode 100644
index 0000000..e80bb52
--- /dev/null
+++ b/src/app/build/items/item-slot.component.ts
@@ -0,0 +1,112 @@
+import {Component, Input, Inject, forwardRef, OnInit} from 'angular2/core';
+import {NgClass} from 'angular2/common';
+import {Observable} from 'rxjs/Observable';
+
+import {ItemsComponent} from './items.component';
+import {ItemComponent} from './item.component';
+import {Config} from '../config';
+
+import * as d3 from 'd3'; //TODO: remove test
+
+@Component({
+  selector: 'item-slot',
+  directives: [NgClass, ItemComponent],
+  template: `
+    <template ngFor #item [ngForOf]="items">
+      <item [item]="item" [ngClass]="{disabled: item.disabled}" style="left: {{xScaleTime(item.time)}}px" (contextmenu)="rightClicked(item)"></item>
+    </template>`
+})
+
+export class ItemSlotComponent implements OnInit {
+  @Input() id: number;
+  @Input() config: Config;
+  private items: Array<Object> = new Array<Object>();
+
+  // TODO: move to itemComponent when angular allows attributes on <template>
+  // TODO: get this scale from shopComponent
+  private xScaleTime = d3.scale.linear()
+    .domain([0, 3600000])
+    .range([0, 1460]);
+
+  constructor( @Inject(forwardRef(() => ItemsComponent)) private itemsComponent: ItemsComponent) {
+  }
+
+  ngOnInit() {
+    this.itemsComponent.addItemSlotComponent(this);
+  }
+
+  addItem(item: Object) {
+    this.addTime(item);
+    this.addBundle(item);
+    this.items.push(item);
+  }
+
+  removeItem(item: Object) {
+    this.items.splice(this.items.indexOf(item), 1);
+  }
+
+  compatible(item: Object) {
+    if (!this.items.length) {
+      return true;
+    }
+    let from = this.items[this.items.length - 1]['from'];
+    if (!from) {
+      return true;
+    }
+    return from.indexOf(item['id']) > -1;
+  }
+
+  private addTime(item: Object) {
+    item['time'] = this.getTime(this.config.g, item['gold']['total'], this.config.gameTime, this.config.sampleSize);
+  }
+
+  private addBundle(item: Object) {
+    if (!this.items || !this.items.length) {
+      return;
+    }
+
+    item['bundle'] = 1;
+    for (let index = 0; index < this.items.length - 1; index++) {
+      if (item['id'] === this.items[index]['id'] && item['time'] === this.items[index]['time']) {
+        item['bundle']++;
+        this.items.splice(index + 1, 1);
+        index--;
+      }
+    }
+  }
+
+  private getTime(frames: Array<number>, value: number, totalTime: number, sampleSize: number) {
+    let index = this.getUpperIndex(frames, value);
+    if (index <= -1) {
+      return -1;
+    }
+
+    let lowerFrame = frames[index];
+    let upperFrame = frames[index + 1];
+
+    let ratio = (value - lowerFrame) / (upperFrame - lowerFrame);
+
+    let sampleTime = totalTime / sampleSize;
+    let lowerTime = index * sampleTime;
+    let upperTime = (index + 1) * sampleTime;
+
+    let time = lowerTime + ((upperTime - lowerTime) * ratio);
+    time = isFinite(time) ? time : lowerTime;
+    return time > 0 ? time : 0;
+  }
+
+  private getUpperIndex(frames: Array<number>, gold: number) {
+    for (var j = 0; j < frames.length; j++) {
+      if (frames[j] > gold) {
+        return j;
+      }
+    }
+    return -1;
+  }
+
+  // TODO: move to itemComponent when angular allows events on <template>
+  private rightClicked(item: Object) {
+    this.removeItem(item);
+    return false; // stop context menu from appearing
+  }
+}
diff --git a/src/app/build/items/item.component.ts b/src/app/build/items/item.component.ts
index 511084f..f48d3f6 100644
--- a/src/app/build/items/item.component.ts
+++ b/src/app/build/items/item.component.ts
@@ -13,5 +13,5 @@ import {DDragonDirective} from '../../misc/ddragon.directive';
 })
 
 export class ItemComponent {
-  @Input() item;
+  @Input() item: Object;
 }
diff --git a/src/app/build/items/items.component.spec.ts b/src/app/build/items/items.component.spec.ts
index d889bcc..b5c31a2 100644
--- a/src/app/build/items/items.component.spec.ts
+++ b/src/app/build/items/items.component.spec.ts
@@ -2,78 +2,46 @@
 import {it, inject, beforeEachProviders, beforeEach} from 'angular2/testing';
 
 import {ItemsComponent} from './items.component';
+import {ItemSlotComponent} from './item-slot.component';
+
+// class MockItemSlotComponent implements ItemSlotComponent {
+
+// }
 
 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 }
-      },
-      {
-        'id': 2003,
-        'gold': { 'total': 50 }
-      }
-    ];
-  }));
-
-  it('should update on changes', 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();
-  }));
-
-  it('should calculate time', inject([ItemsComponent], (component) => {
-    component.addTime();
-    expect(component.items[0].time).toBe(0);
-    expect(component.items[1].time).toBe(0);
-    expect(component.items[2].time).toBe(0);
-    expect(component.items[3].time).toBe(5);
-  }));
-
-  it('should not calculate time', inject([ItemsComponent], (component) => {
-    component.items = [
-      {
-        'id': 123,
-        'gold': { 'total': 400 }
-      }
-    ];
-    component.addTime();
-    component.addBundle();
-    expect(component.items[0].time).toBe(-1);
-  }));
-
-  it('should bundle', inject([ItemsComponent], (component) => {
-    component.addTime();
-    component.addBundle();
-    expect(component.items.length).toBe(3);
-    expect(component.items[1].bundle).toBe(2);
-  }));
-
-  it('should not bundle', inject([ItemsComponent], (component) => {
-    component.items = [];
-    component.addBundle();
-    expect(component.items).toHaveEqualContent([]);
-
-    component.items = [{ id: 1, bundle: 1 }, { id: 2, bundle: 1 }];
-    component.addBundle();
-    expect(component.items[0].bundle).toBe(1);
-  }));
+  // beforeEach(inject([ItemsComponent], (component) => {
+  //   component.config = { g: [100, 200, 300], gameTime: 200, sampleSize: 20 };
+  //   component.itemSlotComponents = [
+  //     {
+  //       'id': 3341,
+  //       'gold': { 'total': 0 }
+  //     },
+  //     {
+  //       'id': 2003,
+  //       'gold': { 'total': 50 }
+  //     },
+  //     {
+  //       'id': 2003,
+  //       'gold': { 'total': 50 }
+  //     },
+  //     {
+  //       'id': 2003,
+  //       'gold': { 'total': 50 }
+  //     }
+  //   ];
+  // }));
+
+  // 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();
+  // }));
 });
diff --git a/src/app/build/items/items.component.ts b/src/app/build/items/items.component.ts
index 7cc0869..604258c 100644
--- a/src/app/build/items/items.component.ts
+++ b/src/app/build/items/items.component.ts
@@ -1,97 +1,69 @@
-import {Component, Input, Output, EventEmitter, DoCheck} from 'angular2/core';
+import {Component, Input} from 'angular2/core';
 import {NgFor, NgClass} from 'angular2/common';
 import {Observable} from 'rxjs/Observable';
 
-import {ItemComponent} from './item.component.ts';
+import {ItemSlotComponent} from './item-slot.component';
 import {Config} from '../config';
 
-import * as d3 from 'd3'; //TODO: remove test
-
 @Component({
   selector: 'items',
-  directives: [NgFor, NgClass, ItemComponent],
+  directives: [NgFor, NgClass, ItemSlotComponent],
   template: `
-    <template ngFor #item [ngForOf]="items" #i="index">
-      <item [item]="item" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description" style="left: {{xScaleTime(item.time)}}px" (contextmenu)="rightClicked(item)"></item>
-    </template>`
+    <item-slot [id]="0" [config]="config"></item-slot>
+    <item-slot [id]="1" [config]="config"></item-slot>
+    <item-slot [id]="2" [config]="config"></item-slot>
+    <item-slot [id]="3" [config]="config"></item-slot>
+    <item-slot [id]="4" [config]="config"></item-slot>
+    <item-slot [id]="5" [config]="config"></item-slot>`
 })
 
-export class ItemsComponent implements DoCheck {
-  @Input() items: Array<Object>;
+export class ItemsComponent {
   @Input() config: Config;
 
-  // private itemWidth = 45 ~ 50;
-
-  // todo: remove test
-  private xScaleTime = d3.scale.linear()
-    .domain([0, 3600000])
-    .range([0, 1460]);
+  private itemSlotComponents: Array<ItemSlotComponent> = [];
 
-  ngDoCheck() {
-    this.addTime();
-    this.addBundle();
+  addItemSlotComponent(slot: ItemSlotComponent) {
+    this.itemSlotComponents[slot.id] = slot;
   }
 
-  addTime() {
-    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, this.config.gameTime, this.config.sampleSize);
-      item['time'] = time;
-    }
+  addItem(item: Object) {
+    this.addToFirstCompatibleSlot(item);
   }
 
-  addBundle() {
-    if (!this.items || !this.items.length || 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--;
+  private addToFirstCompatibleSlot(item: Object) {
+    let s;
+    this.itemSlotComponents.forEach((slot: ItemSlotComponent) => {
+      if (slot.compatible(item) && !s) {
+        s = slot;
       }
-    }
-  }
-
-  private getTime(frames: Array<number>, gold: number, gameTime: number, sampleSize: number) {
-    let index = this.getUpperIndex(frames, gold);
-    if (index <= -1) {
-      return -1;
-    }
-
-    let lowerFrame = frames[index];
-    let upperFrame = frames[index + 1];
-
-    let ratio = (gold - lowerFrame) / (upperFrame - lowerFrame);
-
-    let sampleTime = gameTime / sampleSize;
-    let lowerTime = index * sampleTime;
-    let upperTime = (index + 1) * sampleTime;
-
-    let time = lowerTime + ((upperTime - lowerTime) * ratio);
-    time = isFinite(time) ? time : lowerTime;
-    return time > 0 ? time : 0;
-  }
-
-  private getUpperIndex(frames: Array<number>, gold: number) {
-    for (var j = 0; j < frames.length; j++) {
-      if (frames[j] > gold) {
-        return j;
-      }
-    }
-    return -1;
+    });
+    s.addItem(item);
   }
 
-  private rightClicked(item: Object) {
-    this.items.splice(this.items.indexOf(item), 1);
-    return false; // stop context menu from appearing
-  }
+  // private MaxOwnableExceeded(pickedItems: Array<Object>, pickedItem: Object) {
+  //   let pickedGroup = pickedItem['group'];
+  //   if (!pickedGroup) {
+  //     return false;
+  //   }
+
+  //   let pickedGroupCount = 0;
+  //   pickedItems.forEach((item) => {
+  //     if (item['group'] === pickedGroup) {
+  //       pickedGroupCount++;
+  //     }
+  //   });
+
+  //   let pickedGroupMaxOwnable = 0;
+  //   this.items['groups'].forEach((group) => {
+  //     if (pickedGroup.indexOf(group['key']) !== -1) {
+  //       pickedGroupMaxOwnable = group['MaxGroupOwnable'];
+  //     }
+  //   });
+
+  //   if (pickedGroupCount >= pickedGroupMaxOwnable && pickedGroupMaxOwnable >= 0) {
+  //     return true;
+  //   } else {
+  //     return false;
+  //   }
+  // }
 }
diff --git a/src/app/build/shop/item.component.ts b/src/app/build/shop/item.component.ts
index ae3cf75..d028bd6 100644
--- a/src/app/build/shop/item.component.ts
+++ b/src/app/build/shop/item.component.ts
@@ -1,11 +1,10 @@
 import {Component, Input} from 'angular2/core';
-import {NgIf} from 'angular2/common';
 
 import {DDragonDirective} from '../../misc/ddragon.directive';
 
 @Component({
   selector: 'item',
-  directives: [NgIf, DDragonDirective],
+  directives: [DDragonDirective],
   template: `
     <img [ddragon]="'item/' + item.image.full">
     <div>
diff --git a/src/app/build/shop/preview/item-bundle.ts b/src/app/build/shop/preview/item-bundle.ts
new file mode 100644
index 0000000..8ca0e63
--- /dev/null
+++ b/src/app/build/shop/preview/item-bundle.ts
@@ -0,0 +1,4 @@
+export interface ItemBundle {
+  item: Object;
+  children?: Array<ItemBundle>;
+}
diff --git a/src/app/build/shop/preview/item.component.ts b/src/app/build/shop/preview/item.component.ts
new file mode 100644
index 0000000..1d735fd
--- /dev/null
+++ b/src/app/build/shop/preview/item.component.ts
@@ -0,0 +1,15 @@
+import {Component, Input, Inject, forwardRef} from 'angular2/core';
+
+import {DDragonDirective} from '../../../misc/ddragon.directive';
+
+@Component({
+  selector: 'item',
+  directives: [DDragonDirective],
+  template: `
+    <img [ddragon]="'item/' + item.image.full">
+    <p class="gold">{{item.gold.total ? item.gold.total : ''}}</p>`
+})
+
+export class ItemComponent {
+  @Input() item: Object;
+}
diff --git a/src/app/build/shop/preview/items-from.component.ts b/src/app/build/shop/preview/items-from.component.ts
new file mode 100644
index 0000000..39bef57
--- /dev/null
+++ b/src/app/build/shop/preview/items-from.component.ts
@@ -0,0 +1,25 @@
+import {Component, Input, Output, EventEmitter} from 'angular2/core';
+
+import {ItemComponent} from './item.component';
+import {ItemBundle} from './item-bundle';
+
+@Component({
+  selector: 'items-from',
+  directives: [ItemComponent, ItemsFromComponent],
+  template: `
+    <template ngFor #bundle [ngForOf]="items">
+      <div>
+        <item [item]="bundle.item" [attr.title]="bundle.item.name" (click)="leftClick(bundle.item)"></item>
+        <items-from [items]="bundle.children" (itemPicked)="leftClick($event)"></items-from>
+      </div>
+    </template>`
+})
+
+export class ItemsFromComponent {
+  @Input() items: Array<ItemBundle>;
+  @Output() itemPicked: EventEmitter<any> = new EventEmitter<any>();
+
+  leftClick(item: Object) {
+    this.itemPicked.next(item);
+  }
+}
diff --git a/src/app/build/shop/preview/preview.component.ts b/src/app/build/shop/preview/preview.component.ts
new file mode 100644
index 0000000..ff26566
--- /dev/null
+++ b/src/app/build/shop/preview/preview.component.ts
@@ -0,0 +1,99 @@
+import {Component, Input, OnChanges} from 'angular2/core';
+import {NgIf} from 'angular2/common';
+
+import {DDragonDirective} from '../../../misc/ddragon.directive';
+
+import {ItemComponent} from './item.component';
+import {ItemsFromComponent} from './items-from.component';
+import {ItemBundle} from './item-bundle';
+
+@Component({
+  selector: 'preview',
+  directives: [NgIf, DDragonDirective, ItemComponent, ItemsFromComponent],
+  template: `
+    <div class="into">
+      <template ngFor #item [ngForOf]="itemsInto">
+        <item [item]="item" [attr.title]="item.name" (click)="leftClick(item)"></item>
+      </template>
+    </div>
+    <div class="tree">
+      <div class="item" *ngIf="item">
+        <h2>{{item.name}}</h2>
+        <img [ddragon]="'item/' + item.image.full">
+      </div>
+      <div class="from">
+        <items-from [items]="itemsFrom" (itemPicked)="leftClick($event)"></items-from>
+      </div>
+      <p class="gold">{{item?.gold?.total ? item?.gold?.total : ''}}</p>
+      <p class="description">{{item?.description}}</p>
+    </div>`
+})
+
+export class PreviewComponent implements OnChanges {
+  @Input() item;
+  @Input() items;
+
+  private itemsFrom: Array<ItemBundle> = new Array<ItemBundle>();
+  private itemsInto: Array<Object> = new Array<Object>();
+
+  ngOnChanges() {
+    if (!this.item) {
+      return;
+    }
+    this.itemsFrom = new Array<ItemBundle>();
+    this.itemsInto = new Array<Object>();
+    if (this.item['from']) {
+      this.getItemsFrom();
+    }
+    if (this.item['into']) {
+      this.getItemsInto();
+    }
+  }
+
+  private getItemsFrom() {
+    this.itemsFrom = this.getChildren(this.item);
+  }
+
+  private getChildren(item: Object): Array<ItemBundle> {
+    return this.recur(this.getItems(item, (item: Object) => {
+      return item['from'];
+    }));
+  }
+
+  private recur(items: Array<Object>): Array<ItemBundle> {
+    if (!items) {
+      return;
+    }
+    let arr = Array<ItemBundle>();
+    items.forEach((item: Object) => {
+      arr.push({
+        item: item, children: this.getChildren(item)
+      });
+    });
+    return arr;
+  }
+
+  private getItemsInto() {
+    this.itemsInto = this.getItems(this.item, (item: Object) => {
+      return item['into'];
+    });
+  }
+
+  private getItems(item: Object, callback: (item: Object) => Array<string>): Array<Object> {
+    if (!this.items) {
+      return;
+    }
+    let ids = callback(item);
+    if (!ids || !ids.length) {
+      return;
+    }
+    return this.items.filter((item: Object) => {
+      return ids.indexOf(item['id'].toString()) > -1;
+    });
+  }
+
+  private leftClick(item) {
+    this.item = item;
+    this.ngOnChanges();
+  }
+}
diff --git a/src/app/build/shop/shop.component.spec.ts b/src/app/build/shop/shop.component.spec.ts
index ecfc46c..48bc6a7 100644
--- a/src/app/build/shop/shop.component.spec.ts
+++ b/src/app/build/shop/shop.component.spec.ts
@@ -19,7 +19,7 @@ describe('ShopComponent', () => {
     BaseRequestOptions,
     MockBackend,
     provide(Http, {
-      useFactory: function(backend, defaultOptions) {
+      useFactory: function (backend, defaultOptions) {
         return new Http(backend, defaultOptions);
       },
       deps: [MockBackend, BaseRequestOptions]
@@ -122,34 +122,32 @@ describe('ShopComponent', () => {
   }));
 
 
-  it('should add the picked item to picked items', inject([ShopComponent], (component) => {
-    component.pickedItems = [pickedItem1];
+  it('should emit pickeditem', inject([ShopComponent], (component) => {
+    spyOn(component.itemPicked, 'next');
     component.items = items;
-    component.itemPicked(pickedItem2);
-    expect(component.pickedItems.length).toBe(2);
-    expect(component.pickedItems[0]).toHaveEqualContent(pickedItem1);
-    expect(component.pickedItems[1]).toHaveEqualContent(pickedItem2);
+    component.leftClick(pickedItem2);
+    expect(component.itemPicked.next).toHaveBeenCalled();
   }));
 
-  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 not mark an item as MaxOwnableExceeded when it has no group', inject([ShopComponent], (component) => {
-    component.pickedItems = [];
-    component.items = items;
-    component.itemPicked(pickedItem3);
-    expect(component.pickedItems[0]).toHaveEqualContent(pickedItem3);
-  }));
-
-  it('should not mark an item as MaxOwnableExceeded when it has a MaxGroupOwnable of -1', inject([ShopComponent], (component) => {
-    component.pickedItems = [];
-    component.items = items;
-    component.itemPicked(pickedItem4);
-    expect(component.pickedItems[0]).toHaveEqualContent(pickedItem4);
-  }));
+  // 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 not mark an item as MaxOwnableExceeded when it has no group', inject([ShopComponent], (component) => {
+  //   component.pickedItems = [];
+  //   component.items = items;
+  //   component.itemPicked(pickedItem3);
+  //   expect(component.pickedItems[0]).toHaveEqualContent(pickedItem3);
+  // }));
+
+  // it('should not mark an item as MaxOwnableExceeded when it has a MaxGroupOwnable of -1', inject([ShopComponent], (component) => {
+  //   component.pickedItems = [];
+  //   component.items = items;
+  //   component.itemPicked(pickedItem4);
+  //   expect(component.pickedItems[0]).toHaveEqualContent(pickedItem4);
+  // }));
 });
diff --git a/src/app/build/shop/shop.component.ts b/src/app/build/shop/shop.component.ts
index 7c60cd7..c345ef1 100644
--- a/src/app/build/shop/shop.component.ts
+++ b/src/app/build/shop/shop.component.ts
@@ -1,7 +1,10 @@
 import {Component, Input, Output, EventEmitter} from 'angular2/core';
 import {NgFor, NgIf, NgClass} from 'angular2/common';
 
-import {ItemComponent} from './item.component.ts';
+import {PreviewComponent} from './preview/preview.component';
+
+import {ItemsComponent} from '../items/items.component';
+import {ItemComponent} from './item.component';
 
 import {DDragonDirective} from '../../misc/ddragon.directive';
 import {LoadingComponent} from '../../misc/loading.component';
@@ -21,8 +24,8 @@ import {LolApiService} from '../../misc/lolapi.service';
 
 @Component({
   selector: 'shop',
-  providers: [LolApiService],
-  directives: [NgFor, NgIf, NgClass, ItemComponent, DDragonDirective, LoadingComponent, ErrorComponent],
+  providers: [LolApiService, ItemsComponent],
+  directives: [NgFor, NgIf, NgClass, PreviewComponent, ItemComponent, DDragonDirective, LoadingComponent, ErrorComponent],
   pipes: [ToIterablePipe, TranslatePipe, CapitalizePipe, MapPipe, ChampionPipe, HidePipe, TagsPipe, NamePipe, SortPipe],
   template: `
     <div class="left">
@@ -35,36 +38,42 @@ import {LolApiService} from '../../misc/lolapi.service';
           <span *ngIf="tag != '_SORTINDEX'">{{tag | translate | capitalize}}</span>
         </label>
       </div>
-    </div> 
-    <div class="right">
-      <div class="search">
-        <input type="text" name="name" placeholder="Name" (keyup)="name=$event.target.value">
-        <button type="button" name="show-disabled" title="Display hidden items">
-          <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon eye" width="24" height="24" viewBox="0 0 24 24">
-            <path d="M0 0h24v24H0z" fill="none"/>
-            <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 
-            3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
-          </svg>
-        </button>
+    </div>
+    <div class="right-container">
+      <div class="middle">
+        <div class="search">
+          <input type="text" name="name" placeholder="Name" (keyup)="name=$event.target.value">
+          <button type="button" name="show-disabled" title="Display hidden items">
+            <svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="icon eye" width="24" height="24" viewBox="0 0 24 24">
+              <path d="M0 0h24v24H0z" fill="none"/>
+              <path d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 
+              3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"/>
+            </svg>
+          </button>
+        </div>
+        <div class="items">
+          <template ngFor #item [ngForOf]="items?.data | toIterable | map:11 | champion:123 | hide | tags:tags | name:name | sort">
+            <item [item]="item" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description" (click)="leftClick(item)"></item>
+          </template>
+          <loading [loading]="loading"></loading>
+          <error [error]="error" (retry)="getData()"></error>
+        </div>
       </div>
-      <div class="items">
-        <template ngFor #item [ngForOf]="items?.data | toIterable | map:11 | champion:123 | hide | tags:tags | name:name | sort">
-          <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>
+      <div class="right">
+        <preview [item]="pickedItem" [items]="items?.data | toIterable | map:11 | champion:123"></preview>
       </div>
     </div>`
 })
 
 export class ShopComponent {
-  @Input() pickedItems: Array<Object>;
+  @Output() itemPicked: EventEmitter<any> = new EventEmitter<any>();
 
   private items: Object;
   private loading: boolean = true;
   private error: boolean = false;
 
   private tags: Array<string> = [];
+  private pickedItem: Object;
 
   constructor(private lolApi: LolApiService) {
     this.getData();
@@ -97,44 +106,46 @@ export class ShopComponent {
     }
   }
 
-  private itemPicked(pickedItem: Object) {
-    if (this.MaxOwnableExceeded(this.pickedItems, pickedItem)) {
-      // 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;
-          return;
-        }
-      });
-    } else {
-      this.pickedItems.push(pickedItem);
-    }
+  private leftClick(pickedItem: Object) {
+    this.pickedItem = pickedItem;
+    this.itemPicked.next(pickedItem);
+    // if (this.MaxOwnableExceeded(this.pickedItems, pickedItem)) {
+    //   // 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;
+    //       return;
+    //     }
+    //   });
+    // } else {
+    //   this.pickedItems.push(pickedItem);
+    // }
   }
 
-  private MaxOwnableExceeded(pickedItems: Array<Object>, pickedItem: Object) {
-    let pickedGroup = pickedItem['group'];
-    if (!pickedGroup) {
-      return false;
-    }
-
-    let pickedGroupCount = 0;
-    this.pickedItems.forEach((item) => {
-      if (item['group'] === pickedGroup) {
-        pickedGroupCount++;
-      }
-    });
-
-    let pickedGroupMaxOwnable = 0;
-    this.items['groups'].forEach((group) => {
-      if (pickedGroup.indexOf(group['key']) !== -1) {
-        pickedGroupMaxOwnable = group['MaxGroupOwnable'];
-      }
-    });
-
-    if (pickedGroupCount >= pickedGroupMaxOwnable && pickedGroupMaxOwnable >= 0) {
-      return true;
-    } else {
-      return false;
-    }
-  }
+  // private MaxOwnableExceeded(pickedItems: Array<Object>, pickedItem: Object) {
+  //   let pickedGroup = pickedItem['group'];
+  //   if (!pickedGroup) {
+  //     return false;
+  //   }
+
+  //   let pickedGroupCount = 0;
+  //   this.pickedItems.forEach((item) => {
+  //     if (item['group'] === pickedGroup) {
+  //       pickedGroupCount++;
+  //     }
+  //   });
+
+  //   let pickedGroupMaxOwnable = 0;
+  //   this.items['groups'].forEach((group) => {
+  //     if (pickedGroup.indexOf(group['key']) !== -1) {
+  //       pickedGroupMaxOwnable = group['MaxGroupOwnable'];
+  //     }
+  //   });
+
+  //   if (pickedGroupCount >= pickedGroupMaxOwnable && pickedGroupMaxOwnable >= 0) {
+  //     return true;
+  //   } else {
+  //     return false;
+  //   }
+  // }
 }
diff --git a/src/app/misc/lolapi.service.ts b/src/app/misc/lolapi.service.ts
index 99abc2f..3b5ab7f 100644
--- a/src/app/misc/lolapi.service.ts
+++ b/src/app/misc/lolapi.service.ts
@@ -37,7 +37,7 @@ export class LolApiService {
   }
 
   public getItems() {
-    return this.http.get(this.linkStaticData() + '/item?itemListData=gold,groups,hideFromAll,image,inStore,maps,requiredChampion,tags,tree')
+    return this.http.get(this.linkStaticData() + '/item?itemListData=all')
       .map(res => res.json());
   }
 
diff --git a/src/app/routes/build.component.ts b/src/app/routes/build.component.ts
index 5faab3b..776546b 100644
--- a/src/app/routes/build.component.ts
+++ b/src/app/routes/build.component.ts
@@ -31,8 +31,8 @@ import {Config} from '../build/config';
     </div>
     <graph [champion]="champion" [config]="config"></graph>
     <masteries></masteries>
-    <items [items]="pickedItems" [config]="config"></items>
-    <shop [(pickedItems)]="pickedItems"></shop>
+    <items [config]="config" #items></items>
+    <shop (itemPicked)="items.addItem($event)"></shop>
     <loading [loading]="loading"></loading>
     <error [error]="error" (retry)="getData()"></error>`
 })
@@ -44,7 +44,6 @@ export class BuildComponent {
   private error: boolean = false;
 
   private config: Config = new Config();
-  private pickedItems: Array<Object> = new Array<Object>();
 
   constructor(params: RouteParams, private lolApi: LolApiService) {
     this.championKey = params.get('champion');
diff --git a/src/assets/css/base.css b/src/assets/css/base.css
index a26eeea..d1724d0 100644
--- a/src/assets/css/base.css
+++ b/src/assets/css/base.css
@@ -12,7 +12,7 @@ h1 {
 }
 
 h2 {
-  font-size: 1.2em;
+  font-size: 1.5em;
 }
 
 p {
diff --git a/src/assets/css/build.css b/src/assets/css/build.css
index b5f7e10..48c2310 100644
--- a/src/assets/css/build.css
+++ b/src/assets/css/build.css
@@ -259,8 +259,16 @@ shop .left label:hover {
   display: block;
 }
 
+shop .right-container {
+  display: flex;
+}
+
+shop .middle {
+  width: 70%;
+}
+
 shop .right {
-  width: 100%;
+  width: 30%;
 }
 
 
@@ -304,40 +312,32 @@ shop .items {
   min-height: 1000px;
 }
 
+shop .items item {
+  width: 32%;
+}
+
 /* items */
 
 items {
-  position: relative;
-  height: 155px;
+  display: block;
+  height: 300px;
 }
 
 items item {
+  display: inline-block;
   position: relative;
-  width: 45px;
 }
 
 items item > img {
   position: absolute;
 }
 
-items item p {
-  position: absolute;
-  background-color: rgba(0,0,0,0.7);
-}
-
-items item .gold {
-  margin: 30px 0px 0px 0px;
-  padding: 0px 2px;
-  min-width: 0;
-  border-bottom-left-radius: 5px;
-  border-top-right-radius: 5px;
-}
-
 items item .bundle {
+  position: absolute;
   font-size: 0.8em;
   color: #866B00;
-  margin: 0px 0px 0px 27px;
-  padding: 0px 2px;
+  margin: 0 0 0 27px;
+  padding: 0 2px;
   border-bottom-left-radius: 5px;
   border-top-right-radius: 5px;
 }
@@ -351,9 +351,8 @@ item {
   -o-user-select: none;
   user-select: none;
   height: 45px;
-  width: 24%;
   display: flex;
-  margin: 3px;
+  margin: 2.5px;
   background-color: #EEE;
   border-radius: 5px;
   cursor: pointer;
@@ -372,7 +371,7 @@ item > div {
 }
 
 item > div > p {
-  margin: 0px;
+  margin: 0;
   font-size: 1em;
   display: inline;
   font-family: sans-serif;
@@ -402,6 +401,87 @@ item:hover {
   background-color: #CCC;
 }
 
+preview item p.gold,
+item-slot item p.gold {
+  position: absolute;
+  margin: 30px 0 0 0;
+  padding: 0 2px;
+  background-color: rgba(0,0,0,0.7);
+  min-width: 0;
+  border-bottom-left-radius: 5px;
+  border-top-right-radius: 5px;
+}
+
+/* item-slot */
+
+item-slot {
+  display: block;
+  height: 50px;
+}
+
+/* preview */
+
+preview {
+  display: block;
+  border: 1px solid #CCC;
+  background-color: cadetblue;
+  margin: 5px 0;
+  min-height: 1100px;
+}
+
+preview h2 {
+  text-align: center;
+}
+
+preview .into {
+  display: flex;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  height: 70px;
+  padding: 2.5px 5px 0 5px;
+}
+
+preview .tree {
+  padding: 5px;
+}
+
+preview item {
+  position: relative;
+  display: inline-block;
+  width: 45px;
+}
+
+preview item p.gold {
+  margin: -19px 0 0 0;
+}
+
+preview .item img {
+  display: block;
+  border-radius: 8px;
+  margin: 0 auto;
+}
+
+/* items-from */
+
+items-from {
+  display: flex;
+  justify-content: center;
+}
+
+items-from div {
+  padding-top: 14px;
+}
+
+items-from item {
+  display: block;
+  margin: 0 auto;
+  padding: 0 8px;
+  background-color: cadetblue;
+}
+
+items-from item:hover {
+  background-color: cadetblue;
+}
 
 /* media */