fix

src/app/ygopro/ygopro.component.html

@@ -218,7 +218,7 @@
 </div>
 
 
-<div class="modal fade" #gameReplayModal id="game-replay-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+<div class="modal fade" #gameReplayModal id="game-replay-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true" (click)='watchDropdownBackClick($event)'>
   <div class="modal-dialog modal-lg" role="document">
     <div class="modal-content">
       <!--<div class="modal-header">-->
@@ -256,9 +256,9 @@
               <tr>
                 <th class="mode">
                   <!--<span i18n>游戏模式</span>-->
-                  <div id="watch-filter" class="dropdown">
-                    <button i18n class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="watchDropdownMenuButton" aria-haspopup="true" aria-expanded="false">游戏模式</button>
-                    <div class="dropdown-menu">
+                  <div #watchDropdownMenu id="watch-filter" class="dropdown">
+                    <button i18n class="btn btn-secondary dropdown-toggle btn-sm" type="button" id="watchDropdownMenuButton" aria-haspopup="true" aria-expanded="false" (click)='watchDropdownButtonClick()' [class.show]='watchDropdownMenuShow'>游戏模式</button>
+                    <div class="dropdown-menu" [class.show]='watchDropdownMenuShow'>
                       <h6 i18n class="dropdown-header">匹配</h6>
                       <label class="form-check dropdown-item">
                         <input type="checkbox" class="form-check-input" [(ngModel)]="replay_rooms_filter.athletic" (change)='refresh_replay_rooms()'>

src/app/ygopro/ygopro.component.ts

@@ -13,7 +13,7 @@ import {
   OnDestroy,
   OnInit,
   Output,
-  ViewChild,
+  ViewChild
 } from '@angular/core';
 import { clipboard, shell } from 'electron';
 import * as remote from '@electron/remote';
@@ -127,7 +127,7 @@ let match_started_at: Date;
   moduleId: module.id,
   selector: 'ygopro',
   templateUrl: 'ygopro.component.html',
-  styleUrls: ['ygopro.component.css'],
+  styleUrls: ['ygopro.component.css']
 })
 export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
   @Input()
@@ -175,7 +175,7 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
     no_shuffle_deck: false,
     lflist: 0,
     time_limit: 180,
-    auto_death: false,
+    auto_death: false
   };
   room: Room = { title: this.loginService.user.username + '的房间', options: Object.assign({}, this.default_options) };
   rooms: Room[] = [];
@@ -190,7 +190,7 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
     single: true,
     match: true,
     tag: true,
-    windbot: false,
+    windbot: false
   };
   matching: Subscription | undefined;
   matching_arena: string | undefined;
@@ -203,8 +203,8 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
   gameListModal: ElementRef<HTMLElement>;
   @ViewChild('gameReplayModal')
   gameReplayModal: ElementRef<HTMLElement>;
-  @ViewChild('watchFilter')
-  watchFilter: ElementRef<HTMLElement>;
+  @ViewChild('watchDropdownMenu')
+  watchDropdownMenu: ElementRef<HTMLElement>;
 
   constructor(
     private http: HttpClient,
@@ -221,13 +221,13 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
           '/usr/share/fonts/truetype/DroidSansFallbackFull.ttf',
           '/usr/share/fonts/opentype/noto/NotoSansCJK-Bold.ttc',
           '/usr/share/fonts/google-noto-cjk/NotoSansCJK-Bold.ttc',
-          '/usr/share/fonts/noto-cjk/NotoSansCJK-Bold.ttc',
+          '/usr/share/fonts/noto-cjk/NotoSansCJK-Bold.ttc'
         ];
         this.textfont = [
           '/usr/share/fonts/truetype/DroidSansFallbackFull.ttf',
           '/usr/share/fonts/opentype/noto/NotoSansCJK-Regular.ttc',
           '/usr/share/fonts/google-noto-cjk/NotoSansCJK-Regular.ttc',
-          '/usr/share/fonts/noto-cjk/NotoSansCJK-Regular.ttc',
+          '/usr/share/fonts/noto-cjk/NotoSansCJK-Regular.ttc'
         ];
         break;
       case 'darwin':
@@ -239,7 +239,7 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
         this.textfont = [
           path.join(process.env['SystemRoot']!, 'Fonts', 'msyh.ttc'),
           path.join(process.env['SystemRoot']!, 'Fonts', 'msyh.ttf'),
-          path.join(process.env['SystemRoot']!, 'Fonts', 'simsun.ttc'),
+          path.join(process.env['SystemRoot']!, 'Fonts', 'simsun.ttc')
         ];
         break;
     }
@@ -414,7 +414,7 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
                       Object.assign(
                         {
                           server: server,
-                          private: /^\d+$/.test(room.title!),
+                          private: /^\d+$/.test(room.title!)
                         },
                         room
                       )
@@ -426,7 +426,7 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
                   Object.assign(
                     {
                       server: server,
-                      private: /^\d+$/.test(message.data.title!),
+                      private: /^\d+$/.test(message.data.title!)
                     },
                     message.data
                   )
@@ -451,26 +451,18 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
       }
       this.replay_connections = [];
     });
+  }
 
-    this.watchFilter.nativeElement
-    let watchDropdownMenu = $('#watch-filter');
-
-    watchDropdownMenu.on('change', "input[type='checkbox']", (event) => {
-      // $(event.target).closest("label").toggleClass("active", (<HTMLInputElement> event.target).checked);
-      this.refresh_replay_rooms();
-    });
-
-    // replay_modal.on('click', (event) => {
-    //   if (!watchDropdownMenu.is(event.target) && !watchDropdownMenu.has(event.target).length) {
-    //     watchDropdownMenu.removeClass('show');
-    //   }
-    // });
-
-    // $('#watchDropdownMenuButton').on('click', () => {
-    //   watchDropdownMenu.toggleClass('show');
-    // });
+  watchDropdownMenuShow = false;
 
+  watchDropdownButtonClick() {
+    this.watchDropdownMenuShow = !this.watchDropdownMenuShow;
+  }
 
+  watchDropdownBackClick(event: MouseEvent) {
+    if (!this.watchDropdownMenu.nativeElement.contains(<Node>event.target)) {
+      this.watchDropdownMenuShow = false;
+    }
   }
 
   async refresh(init?: boolean) {
@@ -513,8 +505,8 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
       let points = await lastValueFrom(
         this.http.get<any>('https://mycard.moe/ygopro/api/user', {
           params: {
-            username: this.loginService.user.username,
-          },
+            username: this.loginService.user.username
+          }
         })
       );
       this.points.emit(points);
@@ -555,7 +547,8 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
     if (confirm('确认删除?')) {
       try {
         await fs.unlink(path.join(this.app.ygoproDeckPath!, deck + '.ydk'));
-      } catch (error) {}
+      } catch (error) {
+      }
       return this.refresh();
     }
   }
@@ -610,7 +603,7 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
       server,
       password: name,
       username: this.loginService.user.username,
-      deck: this.current_deck,
+      deck: this.current_deck
     });
   }
 
@@ -666,8 +659,8 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
               page: 1,
               username: this.loginService.user.username,
               type: 0,
-              page_num: 1,
-            },
+              page_num: 1
+            }
           })
         ).then((d) => {
           start_time = d.data[0].start_time;
@@ -694,8 +687,8 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
             username: this.loginService.user.username,
             // username: "星光pokeboy",
             type: 0,
-            page_num: 1,
-          },
+            page_num: 1
+          }
         })
       ).then((d) => {
         data = d.data[0];
@@ -705,8 +698,8 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
       await lastValueFrom(
         this.http.get<any>('https://sapi.moecube.com:444/ygopro/arena/user', {
           params: {
-            username: this.loginService.user.username,
-          },
+            username: this.loginService.user.username
+          }
         })
       ).then((data2) => {
         data.athletic_win = data2.athletic_win;
@@ -732,9 +725,9 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
     options_buffer.writeUInt8(((room.private ? 2 : 1) << 4) | (room.options.duel_rule << 1) | (room.options.auto_death ? 0x1 : 0), 1);
     options_buffer.writeUInt8(
       (room.options.rule << 5) |
-        (room.options.mode << 3) |
-        (room.options.no_check_deck ? 1 << 1 : 0) |
-        (room.options.no_shuffle_deck ? 1 : 0),
+      (room.options.mode << 3) |
+      (room.options.no_check_deck ? 1 << 1 : 0) |
+      (room.options.no_shuffle_deck ? 1 : 0),
       2
     );
     options_buffer.writeUInt16LE(room.options.start_lp, 3);
@@ -757,7 +750,7 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
 
     if (room.private) {
       new Notification('YGOPro 私密房间已建立', {
-        body: `房间密码是 ${this.host_password}, 您的对手可在自定义游戏界面输入密码与您对战。`,
+        body: `房间密码是 ${this.host_password}, 您的对手可在自定义游戏界面输入密码与您对战。`
       });
     }
     this.join(password, this.currentServer);
@@ -815,12 +808,12 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit {
       .post<any>('https://sapi.moecube.com:444/ygopro/match', null, {
         headers: {
           Authorization:
-            'Basic ' + Buffer.from(this.loginService.user.username + ':' + this.loginService.user.external_id).toString('base64'),
+            'Basic ' + Buffer.from(this.loginService.user.username + ':' + this.loginService.user.external_id).toString('base64')
         },
         params: {
           arena,
-          locale: this.locale === 'zh-Hans' ? 'zh-CN' : this.locale,
-        },
+          locale: this.locale === 'zh-Hans' ? 'zh-CN' : this.locale
+        }
       })
       .subscribe(
         (data) => {