so far

src/app/ygopro/ygopro.component.html

@@ -354,3 +354,18 @@
     </div>
   </div>
 </div>
+
+<!-- Modal -->
+<div #resultModal class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body">
+        ...
+      </div>
+    </div>
+  </div>
+</div>

src/app/ygopro/ygopro.component.ts

@@ -30,6 +30,7 @@ import { HttpClient } from '@angular/common/http';
 import { lastValueFrom, Subscription } from 'rxjs';
 import WillNavigateEvent = Electron.WillNavigateEvent;
 import Timer = NodeJS.Timer;
+import {Modal} from 'bootstrap';
 
 interface SystemConf {
   use_d3d: string;
@@ -151,6 +152,11 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
   @ViewChild('youtube')
   youtube: ElementRef;
 
+  @ViewChild('resultModal')
+  resultModal: ElementRef<HTMLElement>;
+
+  ygoproMatchResultModel: Modal;
+
   // points: Points;
   servers: Server[];
   selectableServers: Server[];
@@ -162,7 +168,7 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
   /*reloadCurrentServer() {
       this.currentServer = this.servers.find(s => s.id === this.selectingServerId);
   }*/
-  lastDeckFormat: RegExp;
+  lastDeckFormat?: RegExp;
   default_options: Options = {
     mode: 1,
     rule: this.locale.startsWith('zh') ? 0 : 1,
@@ -314,7 +320,8 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
     return ygoproData;
   }
 
-  async ngOnInit() {
+  async refreshYGOProData() {
+    console.log(`Refreshing YGOPro Data.`);
     const ygoproData = this.getYGOProData(this.app);
     this.servers = ygoproData.servers;
     this.selectableServers = this.servers.filter((s) => !s.hidden);
@@ -324,16 +331,22 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
     if (ygoproData.ygopro.lastDeckFormat) {
       // console.log(`Deck format pattern: ${ygoproData.ygopro.lastDeckFormat}`)
       this.lastDeckFormat = new RegExp(ygoproData.ygopro.lastDeckFormat);
+    } else {
+      this.lastDeckFormat = undefined;
     }
 
+    this.system_conf = this.app.systemConfPath;
+    console.log(`Will load system conf file from ${this.system_conf}`);
+    await this.refresh(true);
+  }
+
+  async ngOnInit() {
+    this.ygoproMatchResultModel = new Modal(this.resultModal.nativeElement, {keyboard: false})
+    await this.refreshYGOProData();
     remote.ipcMain.on('YGOPro', (e: any, type: string) => {
       console.log('rrrrr');
       this.request_match(type);
     });
-
-    this.system_conf = this.app.systemConfPath;
-    console.log(`Will load system conf file from ${this.system_conf}`);
-    await this.refresh(true);
   }
 
   ngAfterViewInit() {
@@ -711,7 +724,8 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
         data.exp_rank_ex = exp_rank_ex;
         data.arena_rank_ex = arena_rank_ex;
         // if (start_time !== data.start_time) {
-        this.appsService.showResult('projects/ygopro-result/end_YGOPro_single.html', data, 202, 222);
+        // this.appsService.showResult('projects/ygopro-result/end_YGOPro_single.html', data, 202, 222);
+
         // }
       });
     } catch (error) {