feat(ongeki/profile): add ongeki rating light emitting

Author: xuanxuan-0403

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

@@ -143,6 +143,7 @@
   bottom: -2%;
   display: flex;
   align-items: flex-end;
+  gap: 2px;
 }
 
 .rating-num-integer{
@@ -156,12 +157,21 @@
   margin-right: -20%;
 }
 
+.rating-new-num-dot {
+  margin-left: -23%;
+  margin-right: -26%;
+}
+
 .rating-num-fractional{
   height: 90%;
   margin-inline: -10%;
   margin-bottom: 4%;
 }
 
+.rating-new-num-fractional {
+  margin-inline: -13%;
+}
+
 .rating-highest{
   font-size: 3cqw;
   white-space:nowrap;
@@ -239,3 +249,32 @@
 .profile-table th{
   font-weight: 500;
 }
+
+.rating-new-num-mask {
+  background: linear-gradient(to right,
+  rgba(255, 255, 255, 0.1) 0%,
+  rgba(255, 255, 255, 0.55) 57.5%,
+  rgba(255, 255, 255, 0.55) 62.5%,
+  rgba(255, 255, 255, 0.1) 100%);
+  mask-mode: alpha;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+}
+
+.rating-num-clip-path {
+  clip-path: polygon(110% 120%, 240% -190%, 160% 100%, 100% 100%);
+  animation: clipMoveFull 3.3s ease-in-out infinite;
+}
+
+
+@keyframes clipMoveFull {
+  0% {
+    clip-path: polygon(-140% 120%, -10% -190%, -80% 100%, -150% 100%);
+  }
+  70% {
+    clip-path: polygon(190% 120%, 330% -190%, 250% 100%, 180% 100%);
+  }
+  100% {
+    clip-path: polygon(190% 120%, 330% -190%, 250% 100%, 180% 100%);
+  }
+}

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

@@ -36,12 +36,34 @@
         <div class="rating">
           <img *ngIf="Math.floor(profile.newPlayerRating / 10000) > 0" class="rating-num-integer" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_{{getNewRatingType(profile.newPlayerRating)}}/{{Math.floor(profile.newPlayerRating / 10000)}}.webp">
           <img class="rating-num-integer" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_{{getNewRatingType(profile.newPlayerRating)}}/{{Math.floor(profile.newPlayerRating / 1000) % 10}}.webp">
-          <img class="rating-num-dot" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_{{getNewRatingType(profile.newPlayerRating)}}/dot.webp">
-          <img class="rating-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" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_{{getNewRatingType(profile.newPlayerRating)}}/{{Math.floor(profile.newPlayerRating / 10) % 10}}.webp">
-          <img class="rating-num-fractional" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_{{getNewRatingType(profile.newPlayerRating)}}/{{Math.floor(profile.playerRating) % 10}}.webp">
+          <img class="rating-num-dot rating-new-num-dot" src="{{host}}/assets/ongeki/gameUi/UI_NUM_30pt_Rating_{{getNewRatingType(profile.newPlayerRating)}}/dot.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 / 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">
+          </div>
+        </ng-template>
       </ng-template>
     </div>
     <div class="chara-container">