openDrawer, backHome, share

src/app/lobby/lobby.component.html

 <md-toolbar color="primary">
-  <button id="menu" md-icon-button>
+  <button id="menu" md-icon-button (click)="ygopro.openDrawer()">
     <md-icon>menu</md-icon>
   </button>
   <form (submit)="search(key)">
@@ -71,7 +71,7 @@
     <md-icon fontSet="fa" fontIcon="fa-trophy"></md-icon>
     <br>决斗数据库</a></md-grid-tile>
   <md-grid-tile>
-    <button md-raised-button><span class="icon">233</span><br>直连</button>
+    <button md-raised-button (click)="ygopro.backHome()"><span class="icon">233</span><br>直连</button>
   </md-grid-tile>
 </md-grid-list>
 

src/app/login.service.ts

@@ -14,4 +14,8 @@ export class LoginService {
     localStorage.setItem('login', token);
   }
 
+  avatar(username) {
+    return 'https://ygobbs.com/user_avatar/ygobbs.com/' + username + '/25/1.png';
+  }
+
 }

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

@@ -42,7 +42,7 @@ export class NewRoomComponent {
   }
 
   share(host_password: string) {
-
+    this.ygopro.share('房间密码是' + host_password);
   }
 
 }

src/app/room-list/room-list.component.css

 .avatar {
-  width: 1em;
-  height: 1em;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  vertical-align: middle;
 }
 
 .game-title {

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

@@ -15,7 +15,7 @@
   <ng-container cdkColumnDef="users">
     <md-header-cell *cdkHeaderCellDef>玩家</md-header-cell>
     <md-cell *cdkCellDef="let room">
-      <img *ngFor="let user of room.users" class="avatar" [src]="'https://ygobbs.com/user_avatar/ygobbs.com/' + user.username + '/25/1.png'">
+      <img *ngFor="let user of room.users" class="avatar" [src]="login.avatar(user.username)">
     </md-cell>
   </ng-container>
 

src/app/room-list/room-list.component.ts

@@ -3,6 +3,7 @@ import 'rxjs/add/observable/merge';
 import 'rxjs/add/operator/map';
 import 'rxjs/add/operator/startWith';
 import 'rxjs/Rx';
+import { LoginService } from '../login.service';
 import { RoomListDataSource, YGOProService } from '../ygopro.service';
 
 @Component({
@@ -14,7 +15,7 @@ export class RoomListComponent {
   displayedColumns = ['title', 'users', 'mode', 'extra'];
   dataSource = new RoomListDataSource(this.ygopro.servers.filter(server => server.custom));
 
-  constructor(public ygopro: YGOProService, private changeDetector: ChangeDetectorRef) {
+  constructor(public login: LoginService, public ygopro: YGOProService, private changeDetector: ChangeDetectorRef) {
   }
 
   ngOnInit() {

src/app/watch/watch.component.css

 .avatar {
-  width: 1em;
-  height: 1em;
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  vertical-align: middle;
 }
 
 .game-title {

src/app/watch/watch.component.html

@@ -32,7 +32,7 @@
   <ng-container cdkColumnDef="users">
     <md-header-cell *cdkHeaderCellDef>玩家</md-header-cell>
     <md-cell *cdkCellDef="let room">
-      <img *ngFor="let user of room.users" class="avatar" [src]="'https://ygobbs.com/user_avatar/ygobbs.com/' + user.username + '/25/1.png'">
+      <img *ngFor="let user of room.users" class="avatar" [src]="login.avatar(user.username)">
     </md-cell>
   </ng-container>
 

src/app/watch/watch.component.ts

 import { ChangeDetectorRef, Component, OnInit } from '@angular/core';
+import { LoginService } from '../login.service';
 import { RoomListDataSource, YGOProService } from '../ygopro.service';
 
 @Component({
@@ -11,7 +12,7 @@ export class WatchComponent implements OnInit {
   displayedColumns = ['mode', 'title', 'users', 'extra'];
   dataSource = new RoomListDataSource(this.ygopro.servers, 'started');
 
-  constructor(public ygopro: YGOProService, private changeDetector: ChangeDetectorRef) {
+  constructor(public login: LoginService, public ygopro: YGOProService, private changeDetector: ChangeDetectorRef) {
   }
 
   ngOnInit() {

src/app/windbot/windbot.component.css

+.avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  vertical-align: middle;
+}

src/app/windbot/windbot.component.html

@@ -2,6 +2,12 @@
 
 <md-list>
   <h3 md-subheader>选择对手</h3>
-  <md-list-item (click)="ygopro.join_windbot()">随机</md-list-item>
-  <md-list-item *ngFor="let windbot of ygopro.windbot" (click)="ygopro.join_windbot(windbot)">{{windbot}}</md-list-item>
+  <md-list-item (click)="ygopro.join_windbot()">
+    <md-icon md-list-icon>airplanemode_active</md-icon>
+    <h4 md-line>随机</h4>
+  </md-list-item>
+  <md-list-item *ngFor="let windbot of ygopro.windbot" (click)="ygopro.join_windbot(windbot)">
+    <img md-list-icon [src]="login.avatar(windbot)">
+    <h4 md-line>{{windbot}}</h4>
+  </md-list-item>
 </md-list>

src/app/windbot/windbot.component.ts

 import { Component } from '@angular/core';
+import { LoginService } from '../login.service';
 import { YGOProService } from '../ygopro.service';
 
 @Component({
@@ -8,6 +9,6 @@ import { YGOProService } from '../ygopro.service';
 })
 export class WindbotComponent {
 
-  constructor(public ygopro: YGOProService) {
+  constructor(public login: LoginService, public ygopro: YGOProService) {
   }
 }

src/app/ygopro.service.ts

@@ -233,6 +233,33 @@ export class YGOProService {
     }
   }
 
+  openDrawer() {
+    try {
+      window.ygopro.openDrawer();
+    } catch (error) {
+      console.error(error);
+      alert(JSON.stringify({ method: 'openDrawer', params: [] }));
+    }
+  }
+
+  backHome() {
+    try {
+      window.ygopro.backHome();
+    } catch (error) {
+      console.error(error);
+      alert(JSON.stringify({ method: 'backHome', params: [] }));
+    }
+  }
+
+  share(text: string) {
+    try {
+      window.ygopro.share(text);
+    } catch (error) {
+      console.error(error);
+      alert(JSON.stringify({ method: 'share', params: [text] }));
+    }
+  }
+
 }
 
 
@@ -305,6 +332,9 @@ declare global {
       // 残局模式
       puzzle_mode(): void
 
+      openDrawer(): void
+      backHome(): void
+      share(text: string): void
     };
   }
 }