feat(ongeki): Set deck and user skin

Author: Sanheiii

src/app/dashboard/dashboard.component.html

@@ -49,17 +49,31 @@ <h4 class="mb-1">{{announcement.title}}</h4>
           <h4 class="placeholder mb-1" style="width: 12em"></h4>
         </li>
       </ng-template>
+      <ng-template #announcementError>
+        <li class="list-group-item">
+          <div class="d-flex align-items-center gap-1 mb-1">
+            <div class="fw-light small text-secondary" style="width: 8em"></div>
+          </div>
+          <h4 class="my-2">{{'App.Messages.LoadingFailed' | translate}}</h4>
+        </li>
+      </ng-template>
       <div class="card user-select-none mb-2">
         <ul class="list-group list-group-flush">
           <ng-container *ngIf="loadingAnnouncement">
             <ng-container *ngTemplateOutlet="announcementPlaceholder"/>
           </ng-container>
+          <ng-container *ngIf="!loadingAnnouncement && !announcement">
+            <ng-container *ngTemplateOutlet="announcementError"/>
+          </ng-container>
           <ng-container *ngIf="!loadingAnnouncement && announcement">
             <ng-container *ngTemplateOutlet="announcementItem; context: {announcement: announcement}"/>
           </ng-container>
           <ng-container *ngIf="loadingUpdate">
             <ng-container *ngTemplateOutlet="announcementPlaceholder"/>
           </ng-container>
+          <ng-container *ngIf="!loadingUpdate && !recentUpdate">
+            <ng-container *ngTemplateOutlet="announcementError"/>
+          </ng-container>
           <ng-container *ngIf="!loadingUpdate && recentUpdate">
             <ng-container *ngTemplateOutlet="announcementItem; context: {announcement: recentUpdate}"/>
           </ng-container>
@@ -84,11 +98,11 @@ <h4 class="placeholder mb-1" style="width: 12em"></h4>
           <h3 class="m-0">
             {{'DashboardPage.Profiles' | translate}}
           </h3>
-          <code *ngIf="!loadingProfile" class="small">({{ currentCard || ('DashboardPage.NoBind' | translate) }})</code>
+          <code *ngIf="!loadingProfiles && !profilesError" class="small">({{ currentCard || ('DashboardPage.NoBind' | translate) }})</code>
         </div>
-        <a *ngIf="!loadingProfile" class="more-announcements" routerLink="/cards">{{'DashboardPage.Switch' | translate}}</a>
+        <a *ngIf="!loadingProfiles && !profilesError" class="more-announcements" routerLink="/cards">{{'DashboardPage.Switch' | translate}}</a>
       </div>
-      <ng-container *ngIf="loadingProfile">
+      <ng-container *ngIf="loadingProfiles">
         <div class="card mb-3 placeholder-wave">
           <div class="card-header">
             <span class="placeholder" style="width: 6em;"></span>
@@ -139,11 +153,14 @@ <h3 class="m-0">
           <div>{{'DashboardPage.NoCardMessage' | translate}}<a routerLink="/cards">{{'DashboardPage.GoToCardPage' | translate}}</a></div>
         </div>
       </ng-container>
-      <ng-container *ngIf="!loadingProfile && !noCard && !ongekiProfile && !chusanProfile && !mai2Profile">
-        <div class="card mb-3 placeholder-glow">
-          <div class="card-body">
-            {{'DashboardPage.NoProfileMessage' | translate}}
-          </div>
+      <ng-container *ngIf="!loadingProfiles && !profilesError && !noCard && !ongekiProfile && !chusanProfile && !mai2Profile">
+        <div class="alert alert-warning" role="alert">
+          {{'DashboardPage.NoProfileMessage' | translate}}
+        </div>
+      </ng-container>
+      <ng-container *ngIf="!loadingProfiles && profilesError">
+        <div class="alert alert-danger" role="alert">
+          {{'App.Messages.LoadingFailed' | translate}}
         </div>
       </ng-container>
       <ng-container *ngIf="ongekiProfile">
@@ -262,27 +279,31 @@ <h3 class="mb-3">
     </h3>
     <div class="card mb-3">
       <div class="card-body">
-        <div *ngIf="checkingUpdate || (loadingDatabase && downloadingPreloadTaskCount == 0)" class="mb-2">
+        <div *ngIf="checkingUpdateState == 'checking' || (loadingDatabase && downloadingPreloadTaskCount == 0)" class="mb-2">
           <span class="pe-2">{{'DashboardPage.CheckingUpdate' | translate}}</span>
           <span class="spinner-border spinner-border-sm" role="status">
             <span class="visually-hidden">Loading...</span>
           </span>
         </div>
-        <div *ngIf="!checkingUpdate && loadingDatabase && downloadingPreloadTaskCount > 0" class="d-flex align-items-center mb-2">
+        <div *ngIf="checkingUpdateState != 'checking' && loadingDatabase && downloadingPreloadTaskCount > 0" class="d-flex align-items-center mb-2">
           <span class="pe-2">{{'DashboardPage.Downloading' | translate}}{{'Common.Colon' | translate}}{{completedPreloadTaskCount}}/{{totalPreloadTaskCount}}</span>
           <span class="spinner-border spinner-border-sm" role="status">
             <span class="visually-hidden">Loading...</span>
           </span>
         </div>
-        <div *ngIf="!checkingUpdate && !loadingDatabase && errorPreloadTaskCount == 0" class="d-flex align-items-center mb-2">
+        <div *ngIf="checkingUpdateState == 'completed' && !loadingDatabase && errorPreloadTaskCount == 0" class="d-flex align-items-center mb-2">
           <ng-icon name="bootstrap-check-lg" class="d-flex align-items-center me-2 text-success"></ng-icon>
           <span class="pe-2">{{'DashboardPage.Version' | translate}}{{'Common.Colon' | translate}}{{dbVersion}}</span>
         </div>
-        <div *ngIf="!checkingUpdate && !loadingDatabase && errorPreloadTaskCount > 0" class="d-flex align-items-center mb-2">
+        <div *ngIf="checkingUpdateState == 'error' && !loadingDatabase && errorPreloadTaskCount == 0" class="d-flex align-items-center mb-2">
+          <ng-icon name="bootstrap-question-lg" class="d-flex align-items-center me-2 text-warning"></ng-icon>
+          <span class="pe-2">{{'DashboardPage.Version' | translate}}{{'Common.Colon' | translate}}{{dbVersion}}</span>
+        </div>
+        <div *ngIf="checkingUpdateState != 'checking' && !loadingDatabase && errorPreloadTaskCount > 0" class="d-flex align-items-center mb-2">
           <ng-icon name="bootstrap-x-lg" class="d-flex align-items-center me-2 text-danger"></ng-icon>
           <span class="pe-2">{{'DashboardPage.DownloadFailed' | translate}}{{'Common.Colon' | translate}}{{completedPreloadTaskCount}}/{{totalPreloadTaskCount}}</span>
         </div>
-        <button [class.disabled]="checkingUpdate || loadingDatabase" class="btn btn-danger btn-sm mt-1" (click)="reload()">{{'DashboardPage.Reload' | translate}}</button>
+        <button [class.disabled]="checkingUpdateState == 'checking' || loadingDatabase" class="btn btn-danger btn-sm mt-1" (click)="reload()">{{'DashboardPage.Reload' | translate}}</button>
       </div>
     </div>
   </div>

src/app/dashboard/dashboard.component.ts

@@ -32,10 +32,11 @@ export class DashboardComponent implements OnInit {
   recentUpdate: Announcement;
   loadingUpdate = true;
   loadingDatabase = true;
-  loadingProfile = true;
+  loadingProfiles = true;
+  profilesError = false;
   loadingKeychip = true;
   loadingTrustedKeychip = true;
-  checkingUpdate = true;
+  checkingUpdateState = 'checking';
   dbVersion = 0;
   currentCard = undefined;
   noCard = false;
@@ -76,7 +77,7 @@ export class DashboardComponent implements OnInit {
     this.addStatusSubscribe(this.preload.chusanSymbolChatState);
     this.addStatusSubscribe(this.preload.maimai2MusicState);
     this.preload.checkingUpdateObservable.subscribe(checkingUpdate => {
-      this.checkingUpdate = checkingUpdate;
+      this.checkingUpdateState = checkingUpdate;
     });
     this.preload.dbVersionObservable.subscribe(dbVersion => {
       this.dbVersion = dbVersion;
@@ -111,13 +112,15 @@ export class DashboardComponent implements OnInit {
           }
           else{
             this.messageService.notice(resp.status.message);
+            this.profilesError = true;
           }
-          this.loadingProfile = false;
         }
+        this.loadingProfiles = false;
       },
       error => {
         this.messageService.notice(error);
-        this.loadingProfile = false;
+        this.loadingProfiles = false;
+        this.profilesError = true;
       });
   }
 

src/app/dashboard/dashboard.module.ts

@@ -11,7 +11,8 @@ import {NgIconsModule} from '@ng-icons/core';
 import {
   bootstrapBell,
   bootstrapCheckLg,
-  bootstrapXLg
+  bootstrapXLg,
+  bootstrapQuestionLg
 } from '@ng-icons/bootstrap-icons';
 import { AppRoutingModule } from '../app-routing.module';
 import { AnnouncementComponent } from '../announcements/announcement/announcement.component';
@@ -42,7 +43,8 @@ export function HttpLoaderFactory(http: HttpClient) {
         NgIconsModule.withIcons({
             bootstrapBell,
             bootstrapCheckLg,
-            bootstrapXLg
+            bootstrapXLg,
+            bootstrapQuestionLg
         }),
         ToolsModule,
         V2Module

src/app/database/preload.service.ts

@@ -60,7 +60,7 @@ export class PreloadService {
   private dbVersion = new ReplaySubject<number>();
   dbVersionObservable = this.dbVersion.asObservable();
 
-  private checkingUpdate = new ReplaySubject<boolean>();
+  private checkingUpdate = new ReplaySubject<'checking'|'completed'|'error'>();
   checkingUpdateObservable = this.checkingUpdate.asObservable();
 
   constructor(
@@ -120,7 +120,7 @@ export class PreloadService {
   }
 
   checkDbUpdate() {
-    this.checkingUpdate.next(true);
+    this.checkingUpdate.next('checking');
     this.api.get('api/static/dbVersion').subscribe(
       resp => {
         if (resp?.state.toLowerCase().includes('success')) {
@@ -133,14 +133,14 @@ export class PreloadService {
               });
             } else {
               this.load();
-              this.checkingUpdate.next(false);
+              this.checkingUpdate.next('completed');
             }
           });
         }
       },
       error => {
         this.load();
-        this.checkingUpdate.next(false);
+        this.checkingUpdate.next('error');
         this.messageService.notice(error);
       });
   }

src/app/sega/ongeki/ongeki-card-gallery/ongeki-card-gallery.component.css

@@ -0,0 +1,52 @@
+.btn-top {
+  width: 5em;
+}
+
+.cards-col {
+  width: 100%;
+  perspective: 1500px;
+  transform-style: preserve-3d;
+  --rotator-transition: all .6s ease-out;
+
+  --rotator-global-rotate-y: 0deg;
+  --rotator-rotate-x: 0deg;
+  --rotator-rotate-y: 0deg;
+  --pseudo-opacity: 0;
+  --pseudo-left: 50%;
+  --pseudo-top: 50%;
+
+  --holo-sheet-bottom: none;
+  --holo-sheet-middle: none;
+  --holo-sheet-top: none;
+}
+
+.card-picking {
+  --rotator-global-rotate-y: 360deg;
+}
+
+.card-backdrop {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: black;
+  opacity: .8;
+  top: 0;
+  left: 0;
+  z-index: 1099;
+  transition: opacity 1s linear;
+  visibility: visible;
+}
+
+.card-backdrop-hidden {
+  visibility: hidden;
+  opacity: .0;
+  transition: opacity 1s linear, visibility 0s linear 1s;
+}
+
+.card-details-table{
+
+}
+
+.card-details-table td{
+  width: 50%;
+}