Skip to content

M
moecube
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 {
float: left; float: left;
} }
\ No newline at end of file
app/ygopro.component.html
View file @ cf5f160b
...@@ -58,7 +58,8 @@ ...@@ -58,7 +58,8 @@
<div class="form-group row"> <div class="form-group row">
<label for="game-create-title" class="col-sm-2 form-control-label">游戏标题</label> <label for="game-create-title" class="col-sm-2 form-control-label">游戏标题</label>
<div class="col-sm-10"> <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> </div>
<div class="form-group row"> <div class="form-group row">
...@@ -118,7 +119,7 @@ ...@@ -118,7 +119,7 @@
</div> </div>
<div class="checkbox"> <div class="checkbox">
<label> <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> </label>
</div> </div>
<div class="checkbox"> <div class="checkbox">
...@@ -164,7 +165,25 @@ ...@@ -164,7 +165,25 @@
<th class="extra">额外选项</th> <th class="extra">额外选项</th>
</tr> </tr>
</thead> </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> </table>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"> <button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span> <span aria-hidden="true">&times;</span>
......
app/ygopro.component.ts
View file @ cf5f160b
/** /**
* Created by zh99998 on 16/9/2. * 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 {AppsService} from "./apps.service";
import {RoutingService} from "./routing.service"; import {RoutingService} from "./routing.service";
declare var process; declare var process;
declare var System; declare var System;
declare var $; declare var $;
...@@ -22,7 +23,7 @@ const electron = System._nodeRequire('electron'); ...@@ -22,7 +23,7 @@ const electron = System._nodeRequire('electron');
templateUrl: 'app/ygopro.component.html', templateUrl: 'app/ygopro.component.html',
styleUrls: ['app/ygopro.component.css'], styleUrls: ['app/ygopro.component.css'],
}) })
export class YGOProComponent { export class YGOProComponent implements OnInit {
app = this.appsService.searchApp('ygopro'); app = this.appsService.searchApp('ygopro');
decks = []; decks = [];
current_deck; current_deck;
...@@ -33,15 +34,14 @@ export class YGOProComponent { ...@@ -33,15 +34,14 @@ export class YGOProComponent {
windbot = ["琪露诺", "谜之剑士LV4", "复制植物", "尼亚"]; 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 user = {external_id: 1, username: 'zh99998'}; // for test
room = { default_options = {
title: this.user.username + '的房间',
rule: 0,
mode: 1, mode: 1,
rule: 0,
start_lp: 8000, start_lp: 8000,
start_hand: 5, start_hand: 5,
draw_count: 1, draw_count: 1,
...@@ -50,56 +50,53 @@ export class YGOProComponent { ...@@ -50,56 +50,53 @@ export class YGOProComponent {
no_shuffle_deck: false no_shuffle_deck: false
}; };
room = Object.assign({title: this.user.username + '的房间'}, this.default_options);
rooms = []; rooms = [];
constructor(private appsService: AppsService, private routingService: RoutingService) { connections = [];
this.refresh()
constructor(private appsService: AppsService, private routingService: RoutingService, private ref: ChangeDetectorRef) {
// $('#game-list-modal').on('show.bs.modal', function (event) { this.refresh();
// var tbody = $('#game-list-modal tbody'); }
// for (let serfer of this.servers) {
// ngOnInit() {
// if (server.private) return; let modal = $('#game-list-modal');
// var connection = new ReconnectingWebSocket(server.url);
// connection.onclose = function (event) { modal.on('show.bs.modal', (event) => {
// tbody.children('[data-server-id="' + server.id + '"]').remove() this.connections = this.servers.map((server)=> {
// }; let connection = new WebSocket(server.url);
// connection.onmessage = function (event) { connection.onclose = () => {
// console.log(event) this.rooms = this.rooms.filter(room=>room.server != server)
// var message = JSON.parse(event.data); };
// switch (message.event) { connection.onmessage = (event) => {
// case 'init': let message = JSON.parse(event.data);
// tbody.children('[data-server-id="' + server.id + '"]').remove(); //console.log(message)
// for (var i = 0; i < message.data.length; i++) { switch (message.event) {
// tbody.append(room_template(message.data[i], server)); 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; break;
// case 'create': case 'create':
// tbody.append(room_template(message.data, server)); this.rooms.push(Object.assign({server: server}, this.default_options, message.data));
// break; break;
// case 'update': case 'update':
// $('#room-' + server.id + '-' + message.data.id).replaceWith(room_template(message.data, server)); Object.assign(this.rooms.find(room=>room.server == server && room.id == message.data.id), this.default_options, message.data);
// break; break;
// case 'delete': case 'delete':
// $('#room-' + server.id + '-' + message.data).remove(); this.rooms.splice(this.rooms.findIndex(room=>room.server == server && room.id == message.data), 1);
// //auto width not works. }
// /*var thead = $('#game-list-modal .modal-header th'); this.ref.detectChanges()
// tbody.find('tr:first-child td').each(function (index, element) { };
// $(thead[index]).width($(element).width()) return connection;
// }); });
// */ });
// }
// }; modal.on('hide.bs.modal', (event) => {
// roomlist_connections[server_id] = connection; for (let connection of this.connections) {
// connection.close();
// } }
// }); this.connections = []
// });
// $('#game-list-modal').on('hide.bs.modal', function (event) {
// for (var i in roomlist_connections) {
// roomlist_connections[i].close();
// }
// });
} }
refresh = () => { refresh = () => {
...@@ -201,7 +198,7 @@ export class YGOProComponent { ...@@ -201,7 +198,7 @@ export class YGOProComponent {
}; };
join_windbot(name) { join_windbot(name) {
this.join('AI#'+name, this.servers[0]) this.join('AI#' + name, this.servers[0])
} }
start_game = (args) => { start_game = (args) => {
...@@ -247,6 +244,7 @@ export class YGOProComponent { ...@@ -247,6 +244,7 @@ export class YGOProComponent {
$('#game-create-modal').modal('hide'); $('#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