feat(items): dynamic x-scale

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

@@ -12,10 +12,10 @@ import {DDragonDirective} from '../../misc/ddragon.directive';
       <p class="name">{{name}}</p>
       <div class="gold">
         <img [ddragon]="'ui/gold.png'">
-        <p>{{item.gold.total}}</p>
+        <p>{{item.gold.total ? item.gold.total : 'Free'}}</p>
       </div>
     </div>
-    <p *ngIf="!name" class="gold">{{item.gold.total}}</p>`
+    <p *ngIf="!name" class="gold">{{item.gold.total ? item.gold.total : ''}}</p>`
 })
 
 export class ItemComponent {

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

@@ -5,20 +5,60 @@ import {Observable} from 'rxjs/Observable';
 import {ItemComponent} from './item.component.ts';
 import {Config} from '../config';
 
+import * as d3 from 'd3'; //TODO: remove test
+
 @Component({
   selector: 'items',
   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: {{i * 50}}px"></item>
+      <item [item]="item" [ngClass]="{disabled: item.disabled}" [attr.title]="item.description" style="left: {{getXScale(item.gold.total)}}px"></item>
     </template>`
 })
 
 export class ItemsComponent implements OnChanges {
   @Input() items: Array<Object>;
   @Input() config: Config;
 
+  // todo: remove test
+  private xScaleTime = d3.scale.linear()
+    .domain([0, 3600000])
+    .range([0, 1500]);
+
   ngOnChanges() {
     // TODO: implement
   }
+
+  getXScale(g: number) {
+    return this.xScaleTime(this.getTime(this.config.g, g));
+  }
+
+  getTime(frames: Array<number>, g: number) {
+    let index = 0;
+    if (!this.getUpperIndex(frames, g, index)) {
+      return -1;
+    }
+
+    let lowerFrame = frames[index - 1];
+    let upperFrame = frames[index];
+
+    let ratio = (g - lowerFrame) / (upperFrame - lowerFrame);
+
+    let sampleTime = this.config.gameTime / this.config.sampleSize;
+    let lowerTime = (index - 1) * sampleTime;
+    let upperTime = index * sampleTime;
+
+    return (upperTime - lowerTime) * ratio;
+  }
+
+  getUpperIndex(frames: Array<number>, g: number, index: number) {
+    index = -1;
+    for (var j = 0; j < frames.length; j++) {
+      if (frames[j] > g) {
+        index = j;
+        return true;
+      }
+    }
+    return false;
+  }
 }

src/app/build/shop/hide.pipe.ts

@@ -11,7 +11,7 @@ export class HidePipe implements PipeTransform {
       return items;
     }
     return items.filter((item) => {
-      return !item.hideFromAll;
+      return !item.hideFromAll && item.inStore !== false;
     });
   }
 }

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

@@ -97,7 +97,44 @@ export class ShopComponent {
     }
   }
 
-  private itemPicked(item: Object) {
-    this.pickedItems.push(item);
+  private itemPicked(pickedItem: Object) {
+    if (this.MaxOwnableExceeded(this.pickedItems, pickedItem)) {
+      // replace the first item in the pickedGroup with the new pickedItems
+      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) {
+      return true;
+    } else {
+      return false;
+    }
   }
 }

src/app/misc/lolapi.service.ts

@@ -37,7 +37,7 @@ export class LolApiService {
   }
 
   public getItems() {
-    return this.http.get(this.linkStaticData() + '/item?itemListData=gold,hideFromAll,image,maps,requiredChampion,tags,tree')
+    return this.http.get(this.linkStaticData() + '/item?itemListData=gold,groups,hideFromAll,image,inStore,maps,requiredChampion,tags,tree')
       .map(res => res.json());
   }
 

src/assets/css/build.css

@@ -309,18 +309,28 @@ shop .items {
 items {
   display: flex;
   position: relative;
-  /*height: 155px;*/
+  height: 155px;
   flex-direction: column;
   flex-wrap: wrap;
 }
 
 items item {
   position: relative;
-  width: 46px;
+  width: 45px;
+}
+
+items item > img {
+  position: absolute;
 }
 
 items item .gold {
-  margin: 28px -42px;
+  position: absolute;
+  background-color: rgba(0,0,0,0.6);
+  margin: 30px 0px 0px 0px;
+  padding: 0px 2px;
+  min-width: 0;
+  border-bottom-left-radius: 5px;
+  border-top-right-radius: 5px;
 }
 
 /* item */
@@ -341,10 +351,9 @@ item {
 }
 
 item > img {
-  height: 39px;
+  height: 45px;
   border-radius: 5px;
   display: inline-block;
-  border: 3px solid #026561;
 }
 
 item > div {