feat: format code & tweak style

package-lock.json

@@ -5,7 +5,6 @@
   "requires": true,
   "packages": {
     "": {
-      "name": "mycard",
       "version": "3.1.0",
       "dependencies": {
         "@electron/remote": "^2.0.1",

src/app/ygopro/ygopro.component.css

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

src/app/ygopro/ygopro.component.html

@@ -287,9 +287,11 @@
                   </div>
                 </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 class="row">
+                    <span i18n class="col-auto align-self-end">游戏标题</span>
+                    <div class="col-sm-6">
+                      <input i18n-placeholder type="text" class="form-control form-control-sm" id="title-filter-username" placeholder="支持玩家名称搜索房间" [(ngModel)]="replay_rooms_filter.username" (ngModelChange)="titleUsernameChangeHandler($event)" />
+                    </div>
                   </div>
                 </th>
                 <th i18n class="users">玩家</th>

src/app/ygopro/ygopro.component.ts

@@ -231,7 +231,7 @@ 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);
+  titleUsernameChangeHandler = _.debounce(this.titleUsernameChange, 500);
 
   @ViewChild('gameListModal')
   gameListModal: ElementRef<HTMLElement>;
@@ -331,31 +331,31 @@ 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();
+      this.handleFilterUsername();
     }
   }
 
-  handle_filter_username() {
-    const filter_username = this.replay_rooms_filter.username.toLowerCase().trim();
-    if (filter_username === '') return;
-    let username_filter_rooms: Room[] = [];
+  handleFilterUsername() {
+    const filterUserName = this.replay_rooms_filter.username.toLowerCase().trim();
+    if (filterUserName === '') return;
+    let usernameFilterRooms: 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);
+      const [userAlpha, userBeta] = room.users!;
+      const userAlphaName = (userAlpha && userAlpha.username.toLowerCase()) || '';
+      const userBetaName = (userBeta && userBeta.username.toLowerCase()) || '';
+      if (userAlphaName !== '' || userBetaName !== '') {
+        const targetStr = `${userAlphaName}/${userBetaName}`;
+        if (targetStr.includes(filterUserName)) {
+          usernameFilterRooms.push(room);
         }
       }
     });
-    this.replay_rooms_show = username_filter_rooms;
+    this.replay_rooms_show = usernameFilterRooms;
   }
 
-  title_username_change(input_value: string) {
-    if (input_value.length) {
-      this.handle_filter_username();
+  titleUsernameChange(inputValue: string) {
+    if (inputValue.length) {
+      this.handleFilterUsername();
     } else {
       this.refresh_replay_rooms();
     }