feat(masteries): update to league client v7

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

@@ -3,7 +3,6 @@ import {MockBackend} from '@angular/http/testing';
 
 import {IconErrorComponent} from '../../assets/icon-error.component';
 import {IconLoadComponent} from '../../assets/icon-load.component';
-import {IconRankComponent} from '../../assets/icon-rank.component';
 import {IconRefreshComponent} from '../../assets/icon-refresh.component';
 import {LolApiService} from '../../services/lolapi.service';
 import {DDragonPipe} from '../../shared/ddragon.pipe';
@@ -16,6 +15,7 @@ import {MasteriesComponent} from './masteries.component';
 import {MasteryCategoryComponent} from './mastery-category.component';
 import {MasteryTierComponent} from './mastery-tier.component';
 import {MasteryComponent} from './mastery.component';
+import {RankComponent} from './rank.component';
 
 const masteriesData = {
   tree: {
@@ -69,7 +69,7 @@ let providers = () => {
       providers: [MasteriesComponent, LolApiService],
       declarations: [
         MasteriesComponent, MasteryCategoryComponent, MasteryTierComponent, MasteryComponent,
-        LoadingComponent, RetryComponent, ErrorComponent, IconRankComponent, IconLoadComponent,
+        LoadingComponent, RetryComponent, ErrorComponent, RankComponent, IconLoadComponent,
         IconRefreshComponent, IconErrorComponent, DDragonPipe
       ],
       imports: [TestModule]

src/client/build/masteries/masteries.module.ts

@@ -8,10 +8,13 @@ import {MasteriesComponent} from './masteries.component';
 import {MasteryCategoryComponent} from './mastery-category.component';
 import {MasteryTierComponent} from './mastery-tier.component';
 import {MasteryComponent} from './mastery.component';
+import {RankComponent} from './rank.component';
 
 @NgModule({
-  declarations:
-      [MasteriesComponent, MasteryCategoryComponent, MasteryTierComponent, MasteryComponent],
+  declarations: [
+    MasteriesComponent, MasteryCategoryComponent, MasteryTierComponent, MasteryComponent,
+    RankComponent
+  ],
   imports: [CommonModule, AssetsModule, SharedModule],
   exports: [MasteriesComponent]
 })

src/client/build/masteries/mastery-category.component.spec.ts

@@ -1,13 +1,13 @@
 import {TestBed} from '@angular/core/testing';
 
-import {IconRankComponent} from '../../assets/icon-rank.component';
 import {LolApiService} from '../../services/lolapi.service';
 import {DDragonPipe} from '../../shared/ddragon.pipe';
 import {TestModule} from '../../testing';
 
 import {MasteryCategoryComponent} from './mastery-category.component';
 import {MasteryTierComponent} from './mastery-tier.component';
 import {MasteryComponent} from './mastery.component';
+import {RankComponent} from './rank.component';
 
 const data = {
   name: 'Ferocity',
@@ -31,8 +31,7 @@ describe('MasteryCategoryComponent', () => {
     TestBed.configureTestingModule({
       providers: [MasteryCategoryComponent, LolApiService],
       declarations: [
-        MasteryCategoryComponent, MasteryTierComponent, MasteryComponent, IconRankComponent,
-        DDragonPipe
+        MasteryCategoryComponent, MasteryTierComponent, MasteryComponent, RankComponent, DDragonPipe
       ],
       imports: [TestModule]
     });

src/client/build/masteries/mastery-category.component.ts

@@ -11,13 +11,15 @@ type EventData = {
 @Component({
   selector: 'lb-mastery-category',
   template: `
+    <p class="total">{{totalRank}}</p>
+    <hr>
+    <p class="name">{{data.name}}</p>
     <lb-mastery-tier [data]="tier"
                   [index]="i"
                   *ngFor="let tier of data.tiers; let i = index"
                   (rankAdded)="rankAdd($event)"
                   (rankRemoved)="rankRemove($event)">
-    </lb-mastery-tier>
-    <p class="total">{{data.name + ': ' + totalRank}}</p>`
+    </lb-mastery-tier>`
 })
 
 export class MasteryCategoryComponent {

src/client/build/masteries/mastery-tier.component.spec.ts

@@ -1,12 +1,12 @@
 import {TestBed} from '@angular/core/testing';
 
-import {IconRankComponent} from '../../assets/icon-rank.component';
 import {LolApiService} from '../../services/lolapi.service';
 import {DDragonPipe} from '../../shared/ddragon.pipe';
 import {TestModule} from '../../testing';
 
 import {MasteryTierComponent} from './mastery-tier.component';
 import {MasteryComponent} from './mastery.component';
+import {RankComponent} from './rank.component';
 
 const data = [
   {id: 0, description: ['test6121'], image: {full: '6121.png'}, ranks: 5}, null,
@@ -19,7 +19,7 @@ describe('MasteryTierComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [MasteryTierComponent, LolApiService],
-      declarations: [MasteryTierComponent, MasteryComponent, IconRankComponent, DDragonPipe],
+      declarations: [MasteryTierComponent, MasteryComponent, RankComponent, DDragonPipe],
       imports: [TestModule]
     });
 

src/client/build/masteries/mastery.component.spec.ts

@@ -1,12 +1,11 @@
 import {TestBed} from '@angular/core/testing';
 
-import {Colors} from '../../assets/icon-rank.component';
-import {IconRankComponent} from '../../assets/icon-rank.component';
 import {LolApiService} from '../../services/lolapi.service';
 import {DDragonPipe} from '../../shared/ddragon.pipe';
 import {TestModule} from '../../testing';
 
 import {MasteryComponent} from './mastery.component';
+import {RankComponent} from './rank.component';
 
 const data = {
   id: 0,
@@ -21,7 +20,7 @@ describe('MasteryComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       providers: [LolApiService],
-      declarations: [MasteryComponent, IconRankComponent, DDragonPipe],
+      declarations: [MasteryComponent, RankComponent, DDragonPipe],
       imports: [TestModule]
     });
 
@@ -96,19 +95,16 @@ describe('MasteryComponent', () => {
     expect(component.getRank()).toBe(2);
   });
 
-  it('should set active and color when enabled', () => {
+  it('should set active when enabled', () => {
     component.enable();
     component.setRank(1);
     expect(component.getActive()).toBeTruthy();
-    expect(component.getColor()).toBe(Colors.yellow);
     component.setRank(0);
     expect(component.getActive()).toBeFalsy();
-    expect(component.getColor()).toBe(Colors.blue);
   });
-  it('should set active and color when disabled', () => {
+  it('should set active when disabled', () => {
     component.disable();
     expect(component.getActive()).toBeFalsy();
-    expect(component.getColor()).toBe(Colors.gray);
   });
 
   it('should trigger tier rankAdd event', () => {
@@ -158,8 +154,7 @@ describe('MasteryComponent', () => {
     component.data.description = ['test1', 'test2'];
     component.rank = 0;
     component.update();
-    expect(component.description)
-        .toBe('Mastery level 1:<br>test1<br><br>Mastery level 2:<br>test2<br><br>');
+    expect(component.description).toBe('test1/2');
   });
 
   it('should add the mastery description of the associated rank', () => {

src/client/build/masteries/mastery.component.ts

@@ -1,16 +1,14 @@
 import {Component, EventEmitter, Input, OnChanges, Output} from '@angular/core';
 
-import {Colors} from '../../assets/icon-rank.component';
-
 @Component({
   selector: 'lb-mastery',
   template: `
     <div *ngIf="data"
-         [ngClass]="{enabled: enabled, active: active}"
+         [ngClass]="{enabled: enabled, active: active, ranked: data.ranks > 1}"
          (click)="clicked()"
          (contextmenu)="rightClicked()"
          (dragend)="dragEnd()">
-      <lb-icon-rank [rank]="rank" [maxRank]="data.ranks" [color]="color"></lb-icon-rank>
+      <lb-rank *ngIf="data.ranks > 1 && rank > 0" [rank]="rank" [maxRank]="data.ranks"></lb-rank>
       <img [attr.alt]="data.name" [attr.src]="'mastery/' + data.image.full | lbDDragon">
       <div class="description">
         <h2>{{data.name}}</h2>
@@ -26,10 +24,10 @@ export class MasteryComponent implements OnChanges {
   @Output() rankAdded: EventEmitter<any> = new EventEmitter<any>();
   @Output() rankRemoved: EventEmitter<any> = new EventEmitter<any>();
 
+  name: string;
   description: string;
 
   rank: number = 0;
-  color: string = Colors.gray;
 
   active: boolean = false;
   private locked: boolean = false;
@@ -102,10 +100,6 @@ export class MasteryComponent implements OnChanges {
     return this.active;
   }
 
-  getColor() {
-    return this.color;
-  }
-
   rankRemove() {
     if (!this.enabled || this.locked) {
       return;
@@ -133,28 +127,98 @@ export class MasteryComponent implements OnChanges {
   private update() {
     if (this.enabled) {
       this.active = this.rank !== 0;
-      this.color = this.active ? Colors.yellow : Colors.blue;
     } else {
       this.active = false;
-      this.color = Colors.gray;
     }
 
     if (this.data && this.data.description) {
       if (this.data.description.length === 1) {
         this.description = this.data.description[0];
       } else if (this.rank === 0) {
-        let description = '';
-        for (let i in this.data.description) {
-          description += 'Mastery level ' + (parseInt(i, 10) + 1) + ':<br>';
-          description += this.data.description[i];
-          description += '<br><br>';
-        }
-        this.description = description;
+        this.description = this.createBurns(this.data.description);
       } else if (this.rank <= this.data.description.length) {
         this.description = this.data.description[this.rank - 1];
       } else {
         this.description = this.data.description[this.data.description.length - 1];
       }
     }
   }
+
+  private createBurns(descriptions: Array<string>): string {
+    let chops = this.chopAll(descriptions);
+    let result = '';
+    for (let index in chops[0]) {
+      let mergedChops = this.mergeChops(chops, parseInt(index, 10));
+      if (this.AllEqual(mergedChops)) {
+        result += chops[0][index];
+      } else {
+        result += this.burn(mergedChops);
+      }
+    }
+    return result;
+  }
+
+  private mergeChops(chops: Array<Array<string>>, index: number): Array<string> {
+    let result = Array<string>();
+    for (let c of chops) {
+      result.push(c[index]);
+    }
+    return result;
+  }
+
+  private AllEqual(array: Array<string>): boolean {
+    let ref = array[0];
+    for (let str of array) {
+      if (ref.indexOf(str) < 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  private burn(array: Array<string>): string {
+    return array.join('/');
+  }
+
+  private chopAll(descriptions: Array<string>): Array<Array<string>> {
+    let result = [];
+    for (let description of descriptions) {
+      result.push(this.chop(description));
+    }
+    return result;
+  }
+
+  private chop(description: string): Array<string> {
+    let result = Array<string>();
+    let start = 0;
+    let numericSequence = this.isNumeric(description, 0);
+    for (let index = 0; index < description.length; index++) {
+      let numeric = this.isNumeric(description, index);
+      if ((numericSequence && !numeric) || (!numericSequence && numeric)) {
+        result.push(description.substr(start, index - start));
+        start = index;
+        numericSequence = !numericSequence;
+      }
+    }
+    result.push(description.substr(start));
+    return result;
+  }
+
+  private isNumeric(str: string, index: number): boolean {
+    let char = str[index];
+    if (char === ' ') {
+      return false;
+    }
+    if (this.isNumber(char)) {
+      return true;
+    }
+    if (char === '.' && (this.isNumber(str[index - 1]) || this.isNumber(str[index + 1]))) {
+      return true;
+    }
+    return false;
+  }
+
+  private isNumber(char: string) {
+    return !isNaN(Number(char.charAt(0)));
+  }
 }

src/client/build/masteries/rank.component.ts

@@ -0,0 +1,18 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'lb-rank',
+  template: `
+    <svg xmlns="http://www.w3.org/2000/svg" class="rank" width="30" height="16">
+      <rect x="0" y="0" width="30" height="16" fill="#0D141C"/>
+      <rect x="0" y="0" width="30" height="16" stroke="#868691" stroke-width="2"/>
+      <text x="15" y="12" fill="#938F82" text-anchor="middle" font-size="12">
+        {{rank + '/' + maxRank}}
+      </text>
+    </svg>`
+})
+
+export class RankComponent {
+  @Input() rank: number;
+  @Input() maxRank: number;
+}