[ongeki] Add achievement icon

src/app/sega/ongeki/ongeki-recent/ongeki-recent.component.css

@@ -62,6 +62,11 @@
   font-size: 1.5rem;
 }
 
+.achievement-value img {
+  max-width: 60px;
+  max-height: 60px;
+}
+
 .score-value {
   font-size: 1.4rem;
 }
@@ -106,4 +111,9 @@
   .score-area .score-element {
     margin-bottom: 10px;
   }
+
+  .achievement-value img {
+    max-width: 42px;
+    max-height: 42px;
+  }
 }

src/app/sega/ongeki/ongeki-recent/ongeki-recent.component.html

@@ -33,7 +33,10 @@
               <span *ngIf="item.overDamageNewRecord">NEW RECORD<br></span>
             </div>
             <div class="score-element">
-              <span class="achievement-value">{{battleRank[item.battleScoreRank]}}</span><br>
+              <div class="achievement-value">
+                <img [alt]="battleRank[item.battleScoreRank]"
+                     src="{{host}}ongeki/gameUi/{{item.battleScoreRank | toBattleSprite}}">
+              </div>
             </div>
           </div>
           <div class="score-area">
@@ -43,7 +46,10 @@
               <span *ngIf="item.techNewRecord">NEW RECORD<br></span>
             </div>
             <div class="score-element">
-              <span class="achievement-value">{{technicalRank[item.techScoreRank]}}</span><br>
+              <div class="achievement-value">
+                <img [alt]="technicalRank[item.techScoreRank]"
+                     src="{{host}}ongeki/gameUi/{{item.techScoreRank | toTechSprite}}">
+              </div>
             </div>
           </div>
           <div class="score-area">

src/app/sega/ongeki/ongeki.module.ts

@@ -15,6 +15,8 @@ import {FlexLayoutModule} from '@angular/flex-layout';
 import {OngekiBattlePointComponent} from './ongeki-battle-point/ongeki-battle-point.component';
 import {OngekiRatingComponent} from './ongeki-rating/ongeki-rating.component';
 import {ToLevelDecimalPipe} from './util/to-level-decimal.pipe';
+import {ToBattleSpritePipe} from './util/to-battle-sprite.pipe';
+import {ToTechSpritePipe} from './util/to-tech-sprite.pipe';
 
 
 @NgModule({
@@ -27,7 +29,9 @@ import {ToLevelDecimalPipe} from './util/to-level-decimal.pipe';
     OngekiSongListComponent,
     OngekiBattlePointComponent,
     OngekiRatingComponent,
-    ToLevelDecimalPipe
+    ToLevelDecimalPipe,
+    ToBattleSpritePipe,
+    ToTechSpritePipe
   ],
   imports: [
     CommonModule,

src/app/sega/ongeki/util/to-battle-sprite.pipe.spec.ts

@@ -0,0 +1,8 @@
+import {ToBattleSpritePipe} from './to-battle-sprite.pipe';
+
+describe('ToBattleSpritePipe', () => {
+  it('create an instance', () => {
+    const pipe = new ToBattleSpritePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/sega/ongeki/util/to-battle-sprite.pipe.ts

@@ -0,0 +1,38 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {BattleRank} from '../model/OngekiEnums';
+
+@Pipe({
+  name: 'toBattleSprite'
+})
+export class ToBattleSpritePipe implements PipeTransform {
+
+
+  transform(value: number): string {
+    switch (BattleRank[value]) {
+      case 'Yu':
+        return 'SB_RES_ScoreStamp_Great.png';
+      case 'Ryo':
+        return 'SB_RES_ScoreStamp_Good.png';
+      case 'Fuka':
+        return 'SB_RES_ScoreStamp_NoGood.png';
+      case 'Shu':
+        return 'SB_RES_ScoreStamp_Excellent.png';
+      case 'Ka':
+        return 'SB_RES_ScoreStamp_Usually.png';
+      case 'Goku':
+        return 'SB_RES_ScoreStamp_Unbelievable.png';
+      case 'Goku1':
+        return 'SB_RES_ScoreStamp_Unbelievable.png';
+      case 'Goku2':
+        return 'SB_RES_ScoreStamp_Unbelievable.png';
+      case 'Goku3':
+        return 'SB_RES_ScoreStamp_Unbelievable.png';
+      case 'Goku4':
+        return 'SB_RES_ScoreStamp_Unbelievable.png';
+      case 'Goku5':
+        return 'SB_RES_ScoreStamp_Unbelievable.png';
+    }
+    return null;
+  }
+
+}

src/app/sega/ongeki/util/to-tech-sprite.pipe.spec.ts

@@ -0,0 +1,8 @@
+import {ToTechSpritePipe} from './to-tech-sprite.pipe';
+
+describe('ToTechSpritePipe', () => {
+  it('create an instance', () => {
+    const pipe = new ToTechSpritePipe();
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/sega/ongeki/util/to-tech-sprite.pipe.ts

@@ -0,0 +1,39 @@
+import {Pipe, PipeTransform} from '@angular/core';
+import {TechnicalRank} from '../model/OngekiEnums';
+
+@Pipe({
+  name: 'toTechSprite'
+})
+export class ToTechSpritePipe implements PipeTransform {
+
+  transform(value: number): string {
+    switch (TechnicalRank[value]) {
+      case 'D':
+        return 'SB_RES_ScoreRank_D.png';
+      case 'C':
+        return 'SB_RES_ScoreRank_C.png';
+      case 'B':
+        return 'SB_RES_ScoreRank_B.png';
+      case 'BB':
+        return 'SB_RES_ScoreRank_BB.png';
+      case 'BBB':
+        return 'SB_RES_ScoreRank_BBB.png';
+      case 'A':
+        return 'SB_RES_ScoreRank_A.png';
+      case 'AA':
+        return 'SB_RES_ScoreRank_AA.png';
+      case 'AAA':
+        return 'SB_RES_ScoreRank_AAA.png';
+      case 'S':
+        return 'SB_RES_ScoreRank_S.png';
+      case 'SS':
+        return 'SB_RES_ScoreRank_SS.png';
+      case 'SSS':
+        return 'SB_RES_ScoreRank_SSS.png';
+      case 'SSS1':
+        return 'SB_RES_ScoreRank_SSS+.png';
+    }
+    return null;
+  }
+
+}