style(ongeki/profile): update rating image code,add -webkit mask image

Author: xuanxuan-0403

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

@@ -259,6 +259,7 @@
   mask-mode: alpha;
   mask-repeat: no-repeat;
   mask-size: contain;
+  transform: scale(0.86);
 }
 
 .rating-num-clip-path {

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

@@ -40,28 +40,16 @@
           <img class="rating-num-fractional rating-new-num-fractional" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_{{getNewRatingType(profile.newPlayerRating)}}/{{Math.floor(profile.newPlayerRating / 100) % 10}}.webp">
           <img class="rating-num-fractional rating-new-num-fractional" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_{{getNewRatingType(profile.newPlayerRating)}}/{{Math.floor(profile.newPlayerRating / 10) % 10}}.webp">
           <img class="rating-num-fractional rating-new-num-fractional" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_{{getNewRatingType(profile.newPlayerRating)}}/{{Math.floor(profile.newPlayerRating) % 10}}.webp">
-          <div class="rating-highest text-nowrap">(Max: {{(profile.newHighestRating / 1000) | number: '0.2-3'}})</div>
         </div>
         <ng-template [ngIf]="profile.newPlayerRating >= 20000">
           <div class="rating rating-num-clip-path">
-            <img
-              [style.mask-image]="'url(' + host + 'assets/ongeki/gameUi/UI_NUM_30pt_Rating_' + getNewRatingType(profile.newPlayerRating) + '/' + Math.floor(profile.newPlayerRating / 10000) + '.webp)'"
-              class="rating-num-integer rating-new-num-mask" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_09Rainbow/0-no.webp">
-            <img
-              [style.mask-image]="'url(' + host + 'assets/ongeki/gameUi/UI_NUM_30pt_Rating_' + getNewRatingType(profile.newPlayerRating) + '/' + Math.floor(profile.newPlayerRating / 1000) % 10 + '.webp)'"
-              class="rating-num-integer rating-new-num-mask" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_09Rainbow/0-no.webp">
-            <img
-              [style.mask-image]="'url(' + host + 'assets/ongeki/gameUi/UI_NUM_30pt_Rating_' + getNewRatingType(profile.newPlayerRating) + '/dot.webp)'"
-              class="rating-num-dot rating-new-num-dot rating-new-num-mask" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_09Rainbow/dot-no.webp">
-            <img
-              [style.mask-image]="'url(' + host + 'assets/ongeki/gameUi/UI_NUM_30pt_Rating_' + getNewRatingType(profile.newPlayerRating) + '/' + Math.floor(profile.newPlayerRating / 100) % 10 + '.webp)'"
-              class="rating-num-fractional rating-new-num-fractional rating-new-num-mask" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_09Rainbow/0-no.webp">
-            <img
-              [style.mask-image]="'url(' + host + 'assets/ongeki/gameUi/UI_NUM_30pt_Rating_' + getNewRatingType(profile.newPlayerRating) + '/' + Math.floor(profile.newPlayerRating / 10) % 10 + '.webp)'"
-              class="rating-num-fractional rating-new-num-fractional rating-new-num-mask" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_09Rainbow/0-no.webp">
-            <img
-              [style.mask-image]="'url(' + host + 'assets/ongeki/gameUi/UI_NUM_30pt_Rating_' + getNewRatingType(profile.newPlayerRating) + '/' + Math.floor(profile.newPlayerRating % 10) + '.webp)'"
-              class="rating-num-fractional rating-new-num-fractional rating-new-num-mask" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_09Rainbow/0-no.webp">
+            <img *ngFor="let digit of maskDigits; let i = index"
+                 [style.mask-image]="getMaskImage(digit, i)"
+                 [style.-webkit-mask-image]="getMaskImage(digit, i)"
+                 [class]="getMaskClass(i)"
+                 src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_09Rainbow/0-no.webp"
+                 alt=""
+            />
           </div>
         </ng-template>
       </ng-template>

src/app/sega/ongeki/ongeki-profile/ongeki-profile.component.ts

@@ -140,4 +140,27 @@ export class OngekiProfileComponent implements OnInit {
     return operator === '>=';
   }
 
+  get maskDigits(): number[] {
+    const rating = this.profile.newPlayerRating;
+    return [
+      Math.floor(rating / 10000),
+      Math.floor(rating / 1000) % 10,
+      -1, // -1 代表小数点
+      Math.floor(rating / 100) % 10,
+      Math.floor(rating / 10) % 10,
+      Math.floor(rating % 10)
+    ];
+  }
+
+  getMaskImage(digit: number, index: number): string {
+    const basePath = `${this.host}assets/ongeki/gameUi/UI_NUM_30pt_Rating_${this.getNewRatingType(this.profile.newPlayerRating)}`;
+    if (digit === -1) { return `url(${basePath}/dot.webp)`; }
+    return `url(${basePath}/${digit}.webp)`;
+  }
+
+  getMaskClass(index: number): string {
+    if (index < 2) { return 'rating-num-integer rating-new-num-mask'; }
+    if (index === 2) { return 'rating-num-dot rating-new-num-dot rating-new-num-mask'; }
+    return 'rating-num-fractional rating-new-num-fractional rating-new-num-mask';
+  }
 }