ygopro

app/ygopro.component.html

@@ -11,10 +11,12 @@
 </form>
 
 <div>
-    <button type="button" class="btn btn-primary">竞技匹配</button>
-    <button type="button" class="btn btn-secondary">娱乐匹配</button>
-    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#game-create-modal">创建房间</button>
-    <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#game-list-modal">房间列表</button>
+    <button (click)="request_match('athletic')" *ngIf="matching_arena != 'athletic'" [disabled]="matching" type="button" class="btn btn-primary">竞技匹配</button>
+    <button (click)="cancel_match()" *ngIf="matching_arena == 'athletic'" type="button" class="btn btn-primary">取消等待</button>
+    <button (click)="request_match('entertain')" *ngIf="matching_arena != 'entertain'" [disabled]="matching" type="button" class="btn btn-secondary">娱乐匹配</button>
+    <button (click)="cancel_match()" *ngIf="matching_arena == 'entertain'" type="button" class="btn btn-secondary">取消等待</button>
+    <button [disabled]="matching" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#game-create-modal">创建房间</button>
+    <button [disabled]="matching" type="button" class="btn btn-secondary" data-toggle="modal" data-target="#game-list-modal">房间列表</button>
     <button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#game-create-windbot">单人模式</button>
 </div>
 

app/ygopro.component.ts

@@ -11,6 +11,9 @@ import {remote} from "electron";
 import * as ini from "ini";
 import {EncodeOptions} from "ini";
 import {LoginService} from "./login.service";
+import {Http, Headers, URLSearchParams} from "@angular/http";
+import "rxjs/Rx";
+import {ISubscription} from "rxjs/Subscription";
 
 declare var $;
 
@@ -41,8 +44,8 @@ interface SystemConf {
 }
 
 interface Server {
-    id: string
-    url: string
+    id?: string
+    url?: string
     address: string
     port: number
 }
@@ -102,7 +105,7 @@ export class YGOProComponent implements OnInit {
 
     connections: WebSocket[] = [];
 
-    constructor(private appsService: AppsService, private loginService: LoginService, private ref: ChangeDetectorRef) {
+    constructor(private http: Http, private appsService: AppsService, private loginService: LoginService, private ref: ChangeDetectorRef) {
         this.refresh();
     }
 
@@ -297,4 +300,36 @@ export class YGOProComponent implements OnInit {
 
         this.join(password, room.server);
     }
+
+    matching: ISubscription | null;
+    matching_arena: string | null;
+
+    request_match(arena = 'entertain') {
+        let headers = new Headers();
+        headers.append("Authorization", "Basic " + btoa(this.loginService.user.username + ":" + this.loginService.user.external_id));
+        let search = new URLSearchParams();
+        search.set("arena", arena);
+        this.matching_arena = arena;
+        this.matching = this.http.post('https://mycard.moe/ygopro/match', null, {
+            headers: headers,
+            search: search
+        }).map(response=>response.json())
+            .subscribe((data)=> {
+                this.join(data['password'], {
+                    address: data['address'],
+                    port: data['port']
+                });
+            }, (error)=> {
+                alert(`匹配失败\n${error}`)
+            }, ()=> {
+                this.matching = null;
+                this.matching_arena = null;
+            });
+    }
+
+    cancel_match() {
+        this.matching.unsubscribe();
+        this.matching = null;
+        this.matching_arena = null;
+    }
 }