add filter username

src/app/ygopro/ygopro.component.css

@@ -305,3 +305,7 @@ form {
 .btn-sm {
   margin-right: 4px;
 }
+
+#title-filter-username {
+  margin-left: 6px;
+}

src/app/ygopro/ygopro.component.html

@@ -286,7 +286,12 @@
                     </div>
                   </div>
                 </th>
-                <th i18n class="title">游戏标题</th>
+                <th class="title">
+                  <div class="d-flex">
+                    <span i18n class="align-self-end">游戏标题</span>
+                    <input i18n-placeholder type="text" class="col-sm-6 form-control form-control-sm" id="title-filter-username" placeholder="支持玩家名称搜索房间" [(ngModel)]="replay_rooms_filter.username" (ngModelChange)="title_username_change_handler($event)" />
+                  </div>
+                </th>
                 <th i18n class="users">玩家</th>
                 <th i18n class="extra">额外选项</th>
               </tr>

src/app/ygopro/ygopro.component.ts

@@ -221,7 +221,8 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit, OnChan
     single: true,
     match: true,
     tag: true,
-    windbot: false
+    windbot: false,
+    username: ''
   };
   matching: Subscription | undefined;
   matching_arena: string | undefined;
@@ -230,6 +231,8 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit, OnChan
   match_interval: Timer | undefined;
   join_password: string;
   host_password = (this.loginService.user.external_id ^ 0x54321).toString();
+  title_username_change_handler = _.debounce(this.title_username_change, 500);
+
   @ViewChild('gameListModal')
   gameListModal: ElementRef<HTMLElement>;
   @ViewChild('gameReplayModal')
@@ -327,8 +330,38 @@ export class YGOProComponent implements OnInit, OnDestroy, AfterViewInit, OnChan
         });
         return a_priority - b_priority;
       });
+    if (this.replay_rooms_filter.username.length > 0) {
+      this.handle_filter_username();
+    }
+  }
+
+  handle_filter_username() {
+    const filter_username = this.replay_rooms_filter.username.toLowerCase().trim();
+    if (filter_username === '') return;
+    let username_filter_rooms: Room[] = [];
+    this.replay_rooms_show.forEach(room => {
+      const [user_a, user_b] = room.users!;
+      const user_a_name = (user_a && user_a.username.toLowerCase()) || '';
+      const user_b_name = (user_b && user_b.username.toLowerCase()) || '';
+      if (user_a_name !== '' || user_b_name !== '') {
+        const targetStr = `${user_a_name}/${user_b_name}`;
+        if (targetStr.includes(filter_username)) {
+          username_filter_rooms.push(room);
+        }
+      }
+    });
+    this.replay_rooms_show = username_filter_rooms;
+  }
+
+  title_username_change(input_value: string) {
+    if (input_value.length) {
+      this.handle_filter_username();
+    } else {
+      this.refresh_replay_rooms();
+    }
   }
 
+
   getYGOProData(app: App) {
     const ygoproData = <YGOProData>app.data;
     for (const child of this.appsService.findChildren(app)) {