Merge branch 'multiserver'

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,
@@ -41,6 +41,7 @@ import * as Raven from 'raven-js';
 import { DecksComponent } from './decks/decks.component';
 import { ConfirmDialogComponent } from './confirm-dialog/confirm-dialog.component';
 import { LogoutDialogComponent } from './logout-dialog/logout-dialog.component';
+import { ServerSelectComponent } from './server-select/server-select.component';
 
 export class RavenErrorHandler implements ErrorHandler {
   handleError(err: any): void {
@@ -69,7 +70,8 @@ if (environment.production) {
     ResultDialogComponent,
     DecksComponent,
     ConfirmDialogComponent,
-    LogoutDialogComponent
+    LogoutDialogComponent,
+    ServerSelectComponent
   ],
   imports: [
     BrowserModule,

src/app/lobby/lobby.component.html

@@ -46,16 +46,16 @@
       <br>娱乐匹配
     </button>
   </mat-grid-tile>
-  <mat-grid-tile><a mat-raised-button color="primary" 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" 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 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 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/room-list/room-list.component.ts

@@ -15,7 +15,7 @@ export class RoomListComponent implements OnInit {
   @HostBinding('@routerTransition') animation;
 
   displayedColumns = ['title', 'users', 'mode', 'extra'];
-  dataSource = new RoomListDataSource(this.ygopro.servers.filter(server => server.custom!));
+  dataSource = new RoomListDataSource(this.ygopro);
 
   constructor(public login: LoginService, public ygopro: YGOProService, private changeDetector: ChangeDetectorRef) {}
 

src/app/server-select/server-select.component.css

+mat-form-field {
+  width: 100px;
+}
+
+mat-select::ng-deep .mat-select-arrow-wrapper {
+  transform: initial;
+}
+
+mat-form-field::ng-deep .mat-form-field-underline {
+  display: none;
+}
+
+mat-form-field::ng-deep .mat-form-field-wrapper, mat-form-field::ng-deep .mat-form-field-flex {
+  padding: initial;
+}
+
+mat-form-field::ng-deep .mat-form-field-infix {
+  padding: initial;
+  border: initial;
+}

src/app/server-select/server-select.component.html

+环境:
+<mat-form-field appearance='standard'>
+  <mat-select [formControl]='ygopro.serverForm' [(ngModel)]='ygopro.currentServer'>
+    <mat-option *ngFor='let server of ygopro.selectableServers' [value]='server'>
+      {{server.name}}
+    </mat-option>
+  </mat-select>
+</mat-form-field>

src/app/server-select/server-select.component.ts

+import { Component, OnInit } from '@angular/core';
+import { YGOProService } from '../ygopro.service';
+
+@Component({
+  selector: 'app-server-select',
+  templateUrl: './server-select.component.html',
+  styleUrls: ['./server-select.component.css']
+})
+export class ServerSelectComponent implements OnInit {
+
+  constructor(public ygopro: YGOProService) {
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/toolbar/toolbar.component.css

@@ -2,3 +2,7 @@ button {
   margin-left: -8px;
   margin-right: 24px;
 }
+
+span {
+  flex: 1
+}

src/app/toolbar/toolbar.component.html

@@ -3,4 +3,5 @@
     <mat-icon>arrow_back</mat-icon>
   </button>
   <span><ng-content></ng-content></span>
+  <app-server-select></app-server-select>
 </mat-toolbar>

src/app/watch/watch.component.ts

@@ -14,7 +14,7 @@ export class WatchComponent implements OnInit {
   @HostBinding('@routerTransition') animation;
 
   displayedColumns = ['mode', 'title', 'users', 'extra'];
-  dataSource = new RoomListDataSource(this.ygopro.servers, 'started');
+  dataSource = new RoomListDataSource(this.ygopro, 'started');
 
   constructor(public login: LoginService, public ygopro: YGOProService, private changeDetector: ChangeDetectorRef) {}
 

src/app/windbot/windbot.component.html

@@ -6,7 +6,7 @@
     <mat-icon mat-list-icon>&#xe195;</mat-icon><!-- airplanemode_active -->
     <h4 mat-line>随机</h4>
   </mat-list-item>
-  <mat-list-item *ngFor="let windbot of ygopro.windbot | async" (click)="ygopro.join_windbot(windbot)">
+  <mat-list-item *ngFor="let windbot of (ygopro.currentServer ? ygopro.currentServer.windbot : [])" (click)="ygopro.join_windbot(windbot)">
     <img mat-list-icon [src]="login.avatar(windbot)">
     <h4 mat-line>{{windbot}}</h4>
   </mat-list-item>

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
  */