update

.angular-cli.json

-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "mycard-mobile"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "serviceWorker": true,
-      "styles": [
-        "styles.css"
-      ],
-      "scripts": [],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "css",
-    "class": {
-      "spec": false
-    },
-    "component": {
-      "spec": false
-    },
-    "directive": {
-      "spec": false
-    },
-    "guard": {
-      "spec": false
-    },
-    "module": {
-      "spec": false
-    },
-    "pipe": {
-      "spec": false
-    },
-    "service": {
-      "spec": false
-    }
-  }
-}

.gitignore

@@ -30,13 +30,10 @@
 /coverage
 /libpeerconnection.log
 npm-debug.log
+yarn-error.log
 testem.log
 /typings
 
-# e2e
-/e2e/*.js
-/e2e/*.map
-
 # System Files
 .DS_Store
 Thumbs.db

.prettierrc.json

+{
+  "printWidth": 140,
+  "singleQuote": true
+}

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "mycard-mobile": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/favicon.ico",
+              "src/manifest.json"
+            ],
+            "styles": [
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "serviceWorker": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "mycard-mobile:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "mycard-mobile:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "mycard-mobile:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [],
+            "styles": [
+              "src/styles.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "mycard-mobile-e2e": {
+      "root": "",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "mycard-mobile:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "mycard-mobile",
+  "schematics": {
+    "@schematics/angular:class": {
+      "spec": false
+    },
+    "@schematics/angular:component": {
+      "spec": false,
+      "prefix": "app",
+      "styleext": "css"
+    },
+    "@schematics/angular:directive": {
+      "spec": false,
+      "prefix": "app"
+    },
+    "@schematics/angular:guard": {
+      "spec": false
+    },
+    "@schematics/angular:module": {
+      "spec": false
+    },
+    "@schematics/angular:pipe": {
+      "spec": false
+    },
+    "@schematics/angular:service": {
+      "spec": false
+    }
+  }
+}

src/ngsw-config.json → ngsw-config.json

@@ -5,8 +5,7 @@
       "name": "app",
       "installMode": "prefetch",
       "resources": {
-        "files": ["/favicon.ico", "/index.html"],
-        "versionedFiles": ["/*.bundle.css", "/*.bundle.js", "/*.chunk.js"]
+        "files": ["/favicon.ico", "/index.html", "/*.css", "/*.js"]
       }
     },
     {
@@ -14,15 +13,18 @@
       "installMode": "lazy",
       "updateMode": "prefetch",
       "resources": {
-        "files": ["/assets/**"],
-        "versionedFiles": ["/fontawesome-webfont.*", "/MaterialIcons-Regular.*"]
+        "files": ["/assets/**", "/fontawesome-webfont.*", "/MaterialIcons-Regular.*"]
       }
     }
   ],
   "dataGroups": [
     {
       "name": "api-freshness",
-      "urls": ["https://ygobbs.com/top/quarterly.json", "https://mycard.moe/ygopro/api/history", "https://api.mycard.moe/ygopro/arena/user"],
+      "urls": [
+        "https://ygobbs.com/top/quarterly.json",
+        "https://mycard.moe/ygopro/api/history",
+        "https://api.mycard.moe/ygopro/arena/user"
+      ],
       "cacheConfig": {
         "maxSize": 100,
         "maxAge": "3d",
@@ -32,7 +34,12 @@
     },
     {
       "name": "api-performance",
-      "urls": ["https://api.mycard.moe/apps.json", "https://cdn01.moecube.com/avatars/*", "https://ygobbs.com/user_avatar/*", "https://ygobbs.com/uploads/**"],
+      "urls": [
+        "https://api.mycard.moe/apps.json",
+        "https://cdn01.moecube.com/avatars/*",
+        "https://ygobbs.com/user_avatar/*",
+        "https://ygobbs.com/uploads/**"
+      ],
       "cacheConfig": {
         "maxSize": 100,
         "maxAge": "3d",

package.json

 {
   "name": "mycard-mobile",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "license": "UNLISENCED",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --locale zh-CN --aot",
-    "build": "ng build --locale zh-CN --base-href /mobile/ --prod --build-optimizer",
-    "build:dev": "ng build --locale zh-CN --base-href /mobile2/ --prod --build-optimizer && npm run fuck",
-    "fuck": "patch dist/ngsw-worker.js service-worker.patch",
+    "start": "ng serve --aot",
+    "build": "ng build --i18n-locale zh-CN --base-href /mobile/ --prod --build-optimizer",
+    "postinstall": "patch -i webpack.patch -p0 -t",
     "lint": "ng lint"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.10",
-    "@angular/cdk": "^5.2.5",
-    "@angular/common": "^5.2.0",
-    "@angular/compiler": "^5.2.0",
-    "@angular/core": "^5.2.0",
-    "@angular/forms": "^5.2.0",
-    "@angular/http": "^5.2.0",
-    "@angular/material": "^5.2.5",
-    "@angular/platform-browser": "^5.2.0",
-    "@angular/platform-browser-dynamic": "^5.2.0",
-    "@angular/router": "^5.2.0",
-    "@angular/service-worker": "^5.2.0",
-    "core-js": "^2.4.1",
+    "@angular/animations": "6.0.5",
+    "@angular/cdk": "^6.2.1",
+    "@angular/common": "6.0.5",
+    "@angular/compiler": "6.0.5",
+    "@angular/core": "6.0.5",
+    "@angular/forms": "6.0.5",
+    "@angular/http": "6.0.5",
+    "@angular/material": "^6.2.1",
+    "@angular/platform-browser": "6.0.5",
+    "@angular/platform-browser-dynamic": "6.0.5",
+    "@angular/pwa": "^0.6.8",
+    "@angular/router": "6.0.5",
+    "@angular/service-worker": "6.0.5",
     "font-awesome": "^4.7.0",
     "hammerjs": "^2.0.8",
     "lodash": "^4.17.10",
     "material-design-icons": "^3.0.1",
-    "rxjs": "^5.5.6",
+    "rxjs": "^6.2.1",
     "webdav": "^1.5.2",
-    "zone.js": "^0.8.19"
+    "zone.js": "^0.8.26"
   },
   "devDependencies": {
-    "@angular/cli": "~1.7.4",
-    "@angular/compiler-cli": "^5.2.0",
-    "@angular/language-service": "^5.2.0",
-    "@types/lodash": "^4.14.108",
-    "@types/node": "^9.6.6",
+    "@angular-devkit/build-angular": "~0.6.8",
+    "@angular/cli": "^6.0.8",
+    "@angular/compiler-cli": "6.0.5",
+    "@angular/language-service": "6.0.5",
+    "@types/lodash": "^4.14.109",
+    "@types/node": "^10.3.3",
     "codelyzer": "^4.0.1",
     "prettier": "^1.12.1",
     "tslint": "~5.9.1",
-    "typescript": "^2.6.2"
+    "typescript": "2.7.2"
   }
 }

prettier.config.js

-module.exports = {
-  printWidth: 140,
-  singleQuote: true
-};

service-worker.patch

-2112c2112
-<         if (clientId !== null) {
----
->         if (clientId) {

src/app/app.module.ts

@@ -55,7 +55,6 @@ import { HttpModule } from '@angular/http';
     BrowserModule,
     ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production }),
     FormsModule,
-    HttpModule,
     HttpClientModule,
     AppRoutingModule,
     BrowserAnimationsModule,

src/app/lobby/lobby.component.css

@@ -35,7 +35,7 @@ input::placeholder {
 /*color: lightgray;*/
 /*}*/
 
-mat-input-container {
+mat-form-field {
   width: 100%;
 }
 

src/app/lobby/lobby.component.ts

@@ -6,9 +6,8 @@ import { routerTransition2 } from '../router.animations';
 import { StorageService } from '../storage.service';
 import { YGOProService } from '../ygopro.service';
 
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/mergeMap';
-import {HttpClient} from '@angular/common/http';
+import { HttpClient } from '@angular/common/http';
+import { filter, mergeMap } from 'rxjs/internal/operators';
 
 @Component({
   selector: 'app-lobby',
@@ -23,20 +22,16 @@ export class LobbyComponent {
   build: BuildConfig;
 
   searchCtrl = new FormControl();
-  suggestion = this.searchCtrl.valueChanges
-    .filter(name => name)
-    .mergeMap(name => this.http.get(`https://www.ourocg.cn/search/suggest/${name}`));
+  suggestion = this.searchCtrl.valueChanges.pipe(
+    filter(name => name),
+    mergeMap(name => this.http.get(`https://www.ourocg.cn/search/suggest/${name}`))
+  );
 
   key: string;
 
   arena_url: string;
 
-  constructor(
-    public login: LoginService,
-    public ygopro: YGOProService,
-    private http: HttpClient,
-    public storage: StorageService
-  ) {
+  constructor(public login: LoginService, public ygopro: YGOProService, private http: HttpClient, public storage: StorageService) {
     const arena_url = new URL('https://mycard.moe/ygopro/arena');
     arena_url.searchParams.set('sso', login.token);
     this.arena_url = arena_url.toString();

src/app/match/match.component.ts

 import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
-import { Headers, Http } from '@angular/http';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';
-import { Observable } from 'rxjs/Observable';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription, timer } from 'rxjs';
 import { LoginService } from '../login.service';
-import 'rxjs/add/observable/timer';
+import { map } from 'rxjs/internal/operators';
+import { HttpClient } from '@angular/common/http';
+import { MatchResponse } from '../ygopro.service';
 
 const second = 1000;
 const offset = new Date().getTimezoneOffset() * 60 * second;
@@ -15,27 +15,28 @@ const offset = new Date().getTimezoneOffset() * 60 * second;
   styleUrls: ['./match.component.css']
 })
 export class MatchDialogComponent implements OnInit, OnDestroy {
-  expect_wait = this.http.get('https://api.mycard.moe/ygopro/match/stats/' + this.arena).map(response => response.json() * second + offset);
-  actual_wait = Observable.timer(0, second).map(timestamp => timestamp * second + offset);
+  expect_wait = this.http
+    .get('https://api.mycard.moe/ygopro/match/stats/' + this.arena)
+    .pipe(map((data: number) => data * second + offset));
+  actual_wait = timer(0, second).pipe(map(timestamp => timestamp * second + offset));
 
   matching: Subscription;
 
   constructor(
     @Inject(MAT_DIALOG_DATA) public arena: string,
     private dialogRef: MatDialogRef<MatchDialogComponent>,
-    private http: Http,
+    private http: HttpClient,
     private login: LoginService
   ) {}
 
   ngOnInit() {
     this.matching = this.http
-      .post('https://api.mycard.moe/ygopro/match', null, {
-        headers: new Headers({
+      .post<MatchResponse>('https://api.mycard.moe/ygopro/match', null, {
+        headers: {
           Authorization: 'Basic ' + Buffer.from(this.login.user.username + ':' + this.login.user.external_id).toString('base64')
-        }),
+        },
         params: { arena: this.arena, locale: 'zh-CN' }
       })
-      .map(response => response.json())
       .subscribe(
         data => {
           this.dialogRef.close(data);

src/app/new-room/new-room.component.html

 <app-toolbar>创建房间</app-toolbar>
 
 <form (submit)="ygopro.create_room(room, host_password)" ngNativeValidate>
-  <mat-input-container *ngIf="!room.private" class="full-width">
+  <mat-form-field *ngIf="!room.private" class="full-width">
     <input matInput placeholder="游戏标题" name="title" [(ngModel)]="room.title" minlength="1" maxlength="12" required>
     <mat-hint align="end">{{room.title?.length || 0}} / 12</mat-hint>
-  </mat-input-container>
-  <mat-input-container *ngIf="room.private" class="full-width">
+  </mat-form-field>
+  <mat-form-field *ngIf="room.private" class="full-width">
     <mat-placeholder>
       <mat-icon>&#xe0da;</mat-icon><!-- vpn_key -->
       <span>房间密码</span>
@@ -18,7 +18,7 @@
       <mat-icon>share</mat-icon>
     </button>
     <mat-hint align="end">把这个分享给你的朋友</mat-hint>
-  </mat-input-container>
+  </mat-form-field>
   <mat-select class="full-width" placeholder="卡片允许" name="rule" [(ngModel)]="room.options.rule" required>
     <mat-option [value]="0">OCG</mat-option>
     <mat-option [value]="1">TCG</mat-option>
@@ -35,15 +35,15 @@
   <!--<mat-slide-toggle #extra class="example-margin" color="primary">额外选项</mat-slide-toggle>-->
 
 
-  <mat-input-container class="full-width">
+  <mat-form-field class="full-width">
     <input name="start_lp" [(ngModel)]="room.options.start_lp" matInput type="number" min="1" max="65536" placeholder="初始 LP" required>
-  </mat-input-container>
-  <mat-input-container class="full-width">
+  </mat-form-field>
+  <mat-form-field class="full-width">
     <input name="start_hand" [(ngModel)]="room.options.start_hand" matInput type="number" min="0" max="16" placeholder="初始手牌数" required>
-  </mat-input-container>
-  <mat-input-container class="full-width">
+  </mat-form-field>
+  <mat-form-field class="full-width">
     <input name="draw_count" [(ngModel)]="room.options.draw_count" matInput type="number" min="0" max="16" placeholder="每回合抽卡" required>
-  </mat-input-container>
+  </mat-form-field>
 
   <mat-checkbox class="full-width" name="room.private" [(ngModel)]="room.private">私密房间</mat-checkbox>
   <mat-checkbox class="full-width" name="room.enable_priority" [(ngModel)]="room.options.enable_priority">旧规则

src/app/ygopro.service.ts

 import { DataSource } from '@angular/cdk/collections';
 import { Injectable } from '@angular/core';
-import { Http } from '@angular/http';
 import { MatDialog } from '@angular/material';
 import { sortBy } from 'lodash';
-import 'rxjs/add/observable/combineLatest';
-import 'rxjs/add/observable/dom/webSocket';
-import 'rxjs/add/observable/fromEvent';
-import 'rxjs/add/operator/catch';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/scan';
-import { Observable } from 'rxjs/Observable';
+
+import { combineLatest, fromEvent, Observable, of } from 'rxjs';
 import { LoginService } from './login.service';
 import { MatchDialogComponent } from './match/match.component';
 import { ResultDialogComponent } from './result/result.dialog';
 import { StorageService } from './storage.service';
+import { HttpClient } from '@angular/common/http';
+import { catchError, filter, map, scan } from 'rxjs/internal/operators';
+import { webSocket } from 'rxjs/webSocket';
 
 export interface User {
   admin: boolean;
@@ -154,27 +151,23 @@ export class YGOProService {
     }
   ];
 
-  constructor(private login: LoginService, private http: Http, private dialog: MatDialog, private storage: StorageService) {
+  constructor(private login: LoginService, private http: HttpClient, private dialog: MatDialog, private storage: StorageService) {
     this.load().catch(alert);
   }
 
   async load() {
-    const apps: App[] = await this.http
-      .get('https://api.mycard.moe/apps.json')
-      .map(response => response.json())
-      .toPromise();
+    const apps = await this.http.get<App[]>('https://api.mycard.moe/apps.json').toPromise();
     const app = apps.find(_app => _app.id === 'ygopro')!;
     this.news = app.news['zh-CN'];
     this.windbot = (<YGOProData>app.data).windbot['zh-CN'];
-    this.topics = this.http.get('https://ygobbs.com/top/quarterly.json').map(response =>
-      response
-        .json()
-        .topic_list.topics.slice(0, 5)
-        .map((topic: any) => ({
+    this.topics = this.http.get<TopResponse>('https://ygobbs.com/top/quarterly.json').pipe(
+      map(data =>
+        data.topic_list.topics.slice(0, 5).map((topic: any) => ({
           ...topic,
           url: new URL(`/t/${topic.slug}/${topic.id}`, 'https://ygobbs.com').toString(),
           image_url: topic.image_url && new URL(topic.image_url, 'https://ygobbs.com').toString()
         }))
+      )
     );
 
     this.storage.sync('ygopro');
@@ -186,10 +179,10 @@ export class YGOProService {
 
   async load_result(load_points = true) {
     const last = await this.http
-      .get('https://mycard.moe/ygopro/api/history', {
-        params: { username: this.login.user.username, type: 0, page_num: 1 }
+      .get<{ data: any[] }>('https://mycard.moe/ygopro/api/history', {
+        params: { username: this.login.user.username, type: '0', page_num: '1' }
       })
-      .map(response => response.json().data[0])
+      .pipe(map(data => data.data[0]))
       .toPromise();
 
     // 从来没打过
@@ -242,14 +235,14 @@ export class YGOProService {
     const hidden = ['hidden', 'webkitHidden', 'mozHidden', 'msHidden', 'oHidden'].find(prop => prop in document);
     if (hidden) {
       const evtname = hidden.replace(/[H|h]idden/, '') + 'visibilitychange';
-      Observable.fromEvent(document, evtname).subscribe(() => {
+      fromEvent(document, evtname).subscribe(() => {
         if (!document[hidden]) {
           this.load_result();
           this.storage.sync('ygopro');
         }
       });
     } else {
-      Observable.fromEvent(window, 'focus').subscribe(() => {
+      fromEvent(window, 'focus').subscribe(() => {
         this.load_result();
         this.storage.sync('ygopro');
       });
@@ -258,8 +251,7 @@ export class YGOProService {
 
   async load_points() {
     this.points = await this.http
-      .get('https://api.mycard.moe/ygopro/arena/user', { params: { username: this.login.user.username } })
-      .map(response => response.json())
+      .get<Points>('https://api.mycard.moe/ygopro/arena/user', { params: { username: this.login.user.username } })
       .toPromise();
   }
 
@@ -426,19 +418,19 @@ export class RoomListDataSource extends DataSource<Room> {
   empty = false;
   error: any;
 
-  constructor(private servers: Server[], private filter = 'waiting') {
+  constructor(private servers: Server[], private type = 'waiting') {
     super();
   }
 
   /** Connect function called by the table to retrieve one stream containing the data to render. */
   connect(): Observable<Room[]> {
-    return (
-      Observable.combineLatest(
-        this.servers.map(server => {
-          const url = new URL(server.url!);
-          url.searchParams.set('filter', this.filter);
-          // 协议处理
-          return Observable.webSocket<Message>(url.toString()).scan((rooms: Room[], message: Message, index: number) => {
+    return combineLatest(
+      this.servers.map(server => {
+        const url = new URL(server.url!);
+        url.searchParams.set('filter', this.type);
+        // 协议处理
+        return webSocket<Message>(url.toString()).pipe(
+          scan((rooms: Room[], message: Message, index: number) => {
             switch (message.event) {
               case 'init':
                 return message.data.map(room => ({ server: server, ...room }));
@@ -450,39 +442,50 @@ export class RoomListDataSource extends DataSource<Room> {
               case 'delete':
                 return rooms.filter(room => room.id !== message.data);
             }
-          }, []);
-          // 把多个服务器的数据拼接起来，这里是 combineLatest 的第二个参数
-        }),
-        (...sources: Room[][]) => (<Room[]>[]).concat(...sources)
-      )
-        // 房间排序
-        .map(
-          rooms =>
-            sortBy(rooms, room => {
-              if (room.arena === 'athletic') {
-                return 0;
-              } else if (room.arena === 'entertain') {
-                return 1;
-              } else if (room.id!.startsWith('AI#')) {
-                return 5;
-              } else {
-                return room.options.mode + 2;
-              }
-            })
-          // loading、empty、error
-        )
-        .filter(rooms => {
-          this.loading = false;
-          this.empty = rooms.length === 0;
-          return true;
-        })
-        .catch(error => {
-          this.loading = false;
-          this.error = error;
-          return [];
+          }, [])
+        );
+      })
+    ).pipe(
+      // 把多个服务器的数据拼接起来
+      map((sources: Room[][]) => (<Room[]>[]).concat(...sources)),
+
+      // 房间排序
+      map(rooms =>
+        sortBy(rooms, room => {
+          if (room.arena === 'athletic') {
+            return 0;
+          } else if (room.arena === 'entertain') {
+            return 1;
+          } else if (room.id!.startsWith('AI#')) {
+            return 5;
+          } else {
+            return room.options.mode + 2;
+          }
         })
+      ),
+      // loading、empty、error
+      filter(rooms => {
+        this.loading = false;
+        this.empty = rooms.length === 0;
+        return true;
+      }),
+      catchError(error => {
+        this.loading = false;
+        this.error = error;
+        return of([]);
+      })
     );
   }
 
   disconnect() {}
 }
+
+export interface MatchResponse {
+  password: string;
+  address: string;
+  port: number;
+}
+
+export interface TopResponse {
+  topic_list: { topics: { slug: string; id: string }[] };
+}

src/browserslist

+# This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+# For IE 9-11 support, please uncomment the last line of the file and adjust as needed
+> 0.5%
+last 2 versions
+Firefox ESR
+not dead
+# IE 9-11
\ No newline at end of file

src/index.html

@@ -7,6 +7,7 @@
   <meta name="theme-color" content="#673ab7">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <meta name="theme-color" content="#1976d2">
 </head>
 <body>
 <app-root>

src/tsconfig.app.json

@@ -2,8 +2,10 @@
   "extends": "../tsconfig.json",
   "compilerOptions": {
     "outDir": "../out-tsc/app",
-    "baseUrl": "./",
     "module": "es2015",
     "types": ["node"]
-  }
+  },
+  "exclude": [
+    "node_modules"
+  ]
 }

src/tslint.json

+{
+    "extends": "../tslint.json",
+    "rules": {
+        "directive-selector": [
+            true,
+            "attribute",
+            "app",
+            "camelCase"
+        ],
+        "component-selector": [
+            true,
+            "element",
+            "app",
+            "kebab-case"
+        ]
+    }
+}

tsconfig.json

 {
   "compileOnSave": false,
   "compilerOptions": {
+    "baseUrl": "./",
     "outDir": "./dist/out-tsc",
     "sourceMap": true,
     "declaration": false,
     "moduleResolution": "node",
     "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
-    "target": "es2016",
+    "target": "es2017",
     "typeRoots": [
       "node_modules/@types"
     ],

tslint.json

@@ -18,7 +18,6 @@
     "forin": true,
     "import-blacklist": [
       true,
-      "rxjs",
       "rxjs/Rx"
     ],
     "import-spacing": true,
@@ -117,18 +116,6 @@
       "check-separator",
       "check-type"
     ],
-    "directive-selector": [
-      true,
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
     "no-output-on-prefix": true,
     "use-input-property-decorator": true,
     "use-output-property-decorator": true,

webpack.patch

+Index: node_modules/@angular-devkit/build-angular/src/browser/index.js
+IDEA additional info:
+Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
+<+>UTF-8
+===================================================================
+--- node_modules/@angular-devkit/build-angular/src/browser/index.js	(date 1529225778000)
++++ node_modules/@angular-devkit/build-angular/src/browser/index.js	(date 1529225778000)
+@@ -115,6 +115,13 @@
+             webpack_configs_1.getCommonConfig(wco),
+             webpack_configs_1.getBrowserConfig(wco),
+             webpack_configs_1.getStylesConfig(wco),
++            {
++              node: {
++                Buffer: true,
++                path: true,
++                stream: true
++              }
++            }
+         ];
+         if (wco.buildOptions.main || wco.buildOptions.polyfills) {
+             const typescriptConfigPartial = wco.buildOptions.aot