Skip to content

M
mycard
Commit cf5f160b authored by 神楽坂玲奈's avatar 神楽坂玲奈
Browse files
Options

room list

parent 8c895171
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 60 deletions
app/ygopro.component.css
View file @ cf5f160b
#game-list-modal tbody {
display: block;
overflow-y: auto;
height: 21.5rem;
}
#game-list-modal thead {
position: relative;
display: block;
}
#game-list-modal tr {
width: 100%;
display: table;
}
#game-list-modal .table {
margin-bottom: 0;
}
#game-list-modal .avatar {
width: 25px;
height: 25px;
border-radius: 50%;
}
#game-list-modal .players {
padding-top: .5rem;
padding-bottom: .5rem;
}
#game-list-modal .close {
position: absolute;
top: 15px;
right: 15px;
}
#game-list-modal .modal-header {
padding-left: 0;
padding-right: 0;
}
#game-list-modal .modal-header th {
line-height: 36px;
padding-top: 0;
padding-bottom: 0;
border: none;
}
#game-list-modal .modal-body {
padding: 0;
height: 21.4rem;
}
#game-list-modal .modal-body tr:first-child td{
border-top: none;
}
#game-list-modal .modal-body tr:last-child td{
border-bottom: none;
}
/*fixme: auto width*/
#game-list-modal .title {
width: 25%;
}
#game-list-modal .users {
width: 20%;
}
#game-list-modal .mode {
width: 20%;
}
#game-list-modal .extra {
width: 35%;
}
.float-left {
float: left;
}
\ No newline at end of file
app/ygopro.component.html
View file @ cf5f160b
......@@ -58,7 +58,8 @@
<div class="form-group row">
<label for="game-create-title" class="col-sm-2 form-control-label">游戏标题</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="game-create-title" name="title" [(ngModel)]="room.title">
<input type="text" class="form-control" id="game-create-title" name="title"
[(ngModel)]="room.title">
</div>
</div>
<div class="form-group row">
......@@ -118,7 +119,7 @@
</div>
<div class="checkbox">
<label>
<input name="no_check_deck" type="checkbox" [(ngModel)]="room.no_check_deck" >不检查卡组
<input name="no_check_deck" type="checkbox" [(ngModel)]="room.no_check_deck">不检查卡组
</label>
</div>
<div class="checkbox">
......@@ -164,7 +165,25 @@
<th class="extra">额外选项</th>
</tr>
</thead>
<tbody class="modal-body"></tbody>
<tbody class="modal-body">
<tr *ngFor="let room of rooms" class="room" (click)="join_room(room)">
<td class="title">{{room.title}}</td>
<td class="users">
<img *ngFor="let user of room.users" class="avatar"
[src]="'https://ygobbs.com/user_avatar/ygobbs.com/' + user.username + '/25/1.png'">
</td>
<td class="mode">{{{'0': '单局模式', '1': '比赛模式', '2': 'TAG'}[room.mode]}}</td>
<td class="extra">
<span *ngIf="room.rule != default_options.rule">{{{'0': 'OCG', '1': 'TCG', '2': 'O/T', '3': '专有卡禁止'}[room.rule]}}</span>
<span *ngIf="room.start_lp != default_options.start_lp">{{room.start_lp}} LP</span>
<span *ngIf="room.start_hand != default_options.start_hand">{{room.start_hand}} 初始</span>
<span *ngIf="room.draw_count != default_options.draw_count">{{room.draw_count}} 抽卡</span>
<span *ngIf="room.enable_priority != default_options.enable_priority">优先权</span>
<span *ngIf="room.no_check_deck != default_options.no_check_deck">不检查</span>
<span *ngIf="room.no_shuffle_deck != default_options.no_shuffle_deck">不洗卡</span>
</td>
</tbody>
</table>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
......
app/ygopro.component.ts
View file @ cf5f160b
/**
* Created by zh99998 on 16/9/2.
*/
import {Component} from '@angular/core';
import {Component, OnInit, ChangeDetectorRef} from '@angular/core';
import {AppsService} from "./apps.service";
import {RoutingService} from "./routing.service";
declare var process;
declare var System;
declare var $;
......@@ -22,7 +23,7 @@ const electron = System._nodeRequire('electron');
templateUrl: 'app/ygopro.component.html',
styleUrls: ['app/ygopro.component.css'],
})
export class YGOProComponent {
export class YGOProComponent implements OnInit {
app = this.appsService.searchApp('ygopro');
decks = [];
current_deck;
......@@ -33,15 +34,14 @@ export class YGOProComponent {
windbot = ["琪露诺", "谜之剑士LV4", "复制植物", "尼亚"];
servers = [{address:"112.124.105.11", port: 7911}];
servers = [{id: 'tiramisu', url: 'wss://tiramisu.mycard.moe:7923', address: "112.124.105.11", port: 7911}];
user = {external_id: 1, username: 'zh99998'}; // for test
room = {
title: this.user.username + '的房间',
rule: 0,
default_options = {
mode: 1,
rule: 0,
start_lp: 8000,
start_hand: 5,
draw_count: 1,
......@@ -50,56 +50,53 @@ export class YGOProComponent {
no_shuffle_deck: false
};
room = Object.assign({title: this.user.username + '的房间'}, this.default_options);
rooms = [];
constructor(private appsService: AppsService, private routingService: RoutingService) {
this.refresh()
// $('#game-list-modal').on('show.bs.modal', function (event) {
// var tbody = $('#game-list-modal tbody');
// for (let serfer of this.servers) {
//
// if (server.private) return;
// var connection = new ReconnectingWebSocket(server.url);
// connection.onclose = function (event) {
// tbody.children('[data-server-id="' + server.id + '"]').remove()
// };
// connection.onmessage = function (event) {
// console.log(event)
// var message = JSON.parse(event.data);
// switch (message.event) {
// case 'init':
// tbody.children('[data-server-id="' + server.id + '"]').remove();
// for (var i = 0; i < message.data.length; i++) {
// tbody.append(room_template(message.data[i], server));
// }
// break;
// case 'create':
// tbody.append(room_template(message.data, server));
// break;
// case 'update':
// $('#room-' + server.id + '-' + message.data.id).replaceWith(room_template(message.data, server));
// break;
// case 'delete':
// $('#room-' + server.id + '-' + message.data).remove();
// //auto width not works.
// /*var thead = $('#game-list-modal .modal-header th');
// tbody.find('tr:first-child td').each(function (index, element) {
// $(thead[index]).width($(element).width())
// });
// */
// }
// };
// roomlist_connections[server_id] = connection;
//
// }
// });
//
// $('#game-list-modal').on('hide.bs.modal', function (event) {
// for (var i in roomlist_connections) {
// roomlist_connections[i].close();
// }
// });
connections = [];
constructor(private appsService: AppsService, private routingService: RoutingService, private ref: ChangeDetectorRef) {
this.refresh();
}
ngOnInit() {
let modal = $('#game-list-modal');
modal.on('show.bs.modal', (event) => {
this.connections = this.servers.map((server)=> {
let connection = new WebSocket(server.url);
connection.onclose = () => {
this.rooms = this.rooms.filter(room=>room.server != server)
};
connection.onmessage = (event) => {
let message = JSON.parse(event.data);
//console.log(message)
switch (message.event) {
case 'init':
this.rooms = this.rooms.filter(room => room.server != server).concat(message.data.map(data => Object.assign({server: server}, this.default_options, data)));
break;
case 'create':
this.rooms.push(Object.assign({server: server}, this.default_options, message.data));
break;
case 'update':
Object.assign(this.rooms.find(room=>room.server == server && room.id == message.data.id), this.default_options, message.data);
break;
case 'delete':
this.rooms.splice(this.rooms.findIndex(room=>room.server == server && room.id == message.data), 1);
}
this.ref.detectChanges()
};
return connection;
});
});
modal.on('hide.bs.modal', (event) => {
for (let connection of this.connections) {
connection.close();
}
this.connections = []
});
}
refresh = () => {
......@@ -201,7 +198,7 @@ export class YGOProComponent {
};
join_windbot(name) {
this.join('AI#'+name, this.servers[0])
this.join('AI#' + name, this.servers[0])
}
start_game = (args) => {
......@@ -247,6 +244,7 @@ export class YGOProComponent {
$('#game-create-modal').modal('hide');
}
join_room(room) {
this.join(room.id, room.server);
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment