complete most

src/app/app.module.ts

-import { ErrorHandler, isDevMode, NgModule, Provider } from '@angular/core';
+import { ErrorHandler, NgModule, Provider } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import {
   MatAutocompleteModule,

src/app/lobby/lobby.component.html

@@ -35,27 +35,27 @@
   <!--<a href="https://accounts.moecube.com/profiles" id="avatar" mat-raised-button [style.background-image]="'url(' + login.user.avatar_url + ')'">{{login.user.username}}</a>-->
   <!--</mat-grid-tile>-->
   <mat-grid-tile>
-    <button mat-raised-button color="primary" [disabled]='ygopro.currentServer && ygopro.currentServer.id !== "tiramisu"' (click)="ygopro.request_match('athletic')">
+    <button mat-raised-button color="primary" (click)="ygopro.request_match('athletic')">
       <mat-icon fontSet="fa" fontIcon="fa-futbol-o"></mat-icon>
       <br>竞技匹配
     </button>
   </mat-grid-tile>
   <mat-grid-tile>
-    <button mat-raised-button color="primary" [disabled]='ygopro.currentServer && ygopro.currentServer.id !== "tiramisu"' (click)="ygopro.request_match('entertain')">
+    <button mat-raised-button color="primary" (click)="ygopro.request_match('entertain')">
       <mat-icon>toys</mat-icon>
       <br>娱乐匹配
     </button>
   </mat-grid-tile>
-  <mat-grid-tile><a mat-raised-button color="primary" [disabled]='ygopro.currentServer && !ygopro.currentServer.custom' routerLink="/ygopro/rooms">
+  <mat-grid-tile><a mat-raised-button color="primary" (click)='reloadServers(["custom"])' routerLink="/ygopro/rooms">
     <mat-icon>games</mat-icon>
     <br>房间列表</a></mat-grid-tile>
-  <mat-grid-tile><a mat-raised-button color="primary" [disabled]='ygopro.currentServer && !ygopro.currentServer.custom' routerLink="/ygopro/rooms/new">
+  <mat-grid-tile><a mat-raised-button color="primary" (click)='reloadServers(["custom"])' routerLink="/ygopro/rooms/new">
     <mat-icon>&#xe146;</mat-icon><!--add_box-->
     <br>创建房间</a></mat-grid-tile>
-  <mat-grid-tile><a mat-raised-button [disabled]='ygopro.currentServer && !ygopro.currentServer.windbot' routerLink="/ygopro/windbot">
+  <mat-grid-tile><a mat-raised-button (click)='reloadServers(["windbot"])' routerLink="/ygopro/windbot">
     <mat-icon>&#xe195;</mat-icon><!-- airplanemode_active -->
     <br>单人模式</a></mat-grid-tile>
-  <mat-grid-tile><a mat-raised-button [disabled]='ygopro.currentServer && !ygopro.currentServer.replay' routerLink="/ygopro/watch">
+  <mat-grid-tile><a mat-raised-button  (click)='reloadServers(["replay"])' routerLink="/ygopro/watch">
     <mat-icon>&#xe417;</mat-icon><!--remove_red_eye-->
     <br>观战</a></mat-grid-tile>
   <!--<mat-grid-tile>-->

src/app/lobby/lobby.component.ts

@@ -4,13 +4,14 @@ import { environment } from '../../environments/environment';
 import { LoginService } from '../login.service';
 import { routerTransition } from '../router.animations';
 import { StorageService } from '../storage.service';
-import { YGOProService } from '../ygopro.service';
+import { YGOProService, Server } from '../ygopro.service';
 
 import { HttpClient } from '@angular/common/http';
 import { distinctUntilChanged, filter, map, switchMap } from 'rxjs/internal/operators';
 import { MatDialog } from '@angular/material';
 import { LogoutDialogComponent } from '../logout-dialog/logout-dialog.component';
 
+
 @Component({
   selector: 'app-lobby',
   templateUrl: 'lobby.component.html',
@@ -57,6 +58,10 @@ export class LobbyComponent {
     }
   }
 
+  reloadServers(fields: (keyof Server)[]) {
+    this.ygopro.reloadSelectableServers(s => fields.some((field) => !!s[field]));
+  }
+
   search(key: string) {
     const url = new URL('http://www.ourocg.cn/S.aspx');
     url.searchParams.set('key', key);

src/app/ygopro.service.ts

@@ -140,6 +140,18 @@ export class YGOProService {
   selectableServers: Server[] = [];
   currentServer: Server;
 
+  reloadSelectableServers(condition: (server: Server) => boolean = () => true) {
+    this.selectableServers = this.servers.filter(s => {
+      if (s.hidden) {
+        return false;
+      }
+      return condition(s);
+    });
+    if(!this.currentServer || !this.selectableServers.includes(this.currentServer)) {
+      this.currentServer = this.selectableServers[0];
+    }
+  }
+
   constructor(private login: LoginService, private http: HttpClient, private dialog: MatDialog, private storage: StorageService) {
     const app = this.http.get<App[]>('https://sapi.moecube.com:444/apps.json').pipe(map(apps => apps.find(_app => _app.id === 'ygopro')!), publishLast(), refCount());
 
@@ -153,8 +165,7 @@ export class YGOProService {
 
     this.serversPromise.then((servers) => {
       this.servers = servers;
-      this.selectableServers = servers.filter(s => !s.hidden);
-      this.currentServer = this.selectableServers[0];
+      this.reloadSelectableServers();
     })
 
     this.news = app
@@ -461,7 +472,7 @@ export class RoomListDataSource extends DataSource<Room> {
       // 筛选一下房间，只扔进去当前房间或者竞技匹配的
       // 房间排序
       map(rooms =>
-        sortBy(rooms.filter(r => r.arena || r.server === this.ygopro.currentServer), room => {
+        sortBy(rooms.filter(r => (r.arena && this.ygopro.currentServer && this.ygopro.currentServer.id === 'tiramisu') || r.server === this.ygopro.currentServer), room => {
           if (room.arena === 'athletic') {
             return 0;
           } else if (room.arena === 'entertain') {

src/assets/Spinner-1s-200px.svg

-<svg class="lds-spinner" width="200px"  height="200px"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;"><g transform="rotate(0 50 50)">
+<svg class='lds-spinner' width='200px' height='200px' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'
+     preserveAspectRatio='xMidYMid' style='background: none;'><g transform="rotate(0 50 50)">
   <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#4b99ea">
     <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"></animate>
   </rect>
@@ -46,4 +47,4 @@
   <rect x="47" y="24" rx="9.4" ry="4.8" width="6" height="12" fill="#4b99ea">
     <animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animate>
   </rect>
-</g></svg>
\ No newline at end of file
+</g></svg>

src/polyfills.ts

@@ -44,6 +44,10 @@
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
 // import 'core-js/es7/reflect';
 import 'core-js/fn/symbol/async-iterator';
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js/dist/zone'; // Included with Angular CLI.
 
 /**
  * Required to support Web Animations `@angular/platform-browser/animations`.
@@ -66,11 +70,6 @@ import 'core-js/fn/symbol/async-iterator';
  */
 // (window as any).__Zone_enable_cross_context_check = true;
 
-/***************************************************************************************************
- * Zone JS is required by default for Angular itself.
- */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
-
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */