房间列表现在loading/空列表

app/ygopro.component.html

@@ -55,7 +55,9 @@
         <div class="modal-content flex-row">
 
             <div id="game-list">
-                <table class="table table-striped table-hover">
+                <div i18n class="p-2" *ngIf="rooms_loading">正在读取游戏列表...</div>
+                <div i18n class="p-2" *ngIf="!rooms_loading && this.rooms.length === 0">现在没有等待中的游戏，可以自行创建一个房间或者去匹配</div>
+                <table *ngIf="!this.rooms_loading && this.rooms.length > 0" class="table table-striped table-hover">
                     <thead>
                     <tr>
                         <th i18n class="title">游戏标题</th>

app/ygopro.component.ts

@@ -140,6 +140,7 @@ export class YGOProComponent implements OnInit, OnDestroy {
 
     servers: Server[] = [];
 
+    rooms_loading = true;
 
     default_options: Options = {
         mode: 1,
@@ -283,17 +284,23 @@ export class YGOProComponent implements OnInit, OnDestroy {
         let modal = $('#game-list-modal');
 
         modal.on('show.bs.modal', () => {
+            this.rooms_loading = true;
             this.connections = this.servers.filter(server => server.custom).map((server) => {
                 let url = new URL(server.url!);
                 url['searchParams'].set('filter', 'waiting');
                 let connection = new WebSocket(url.toString());
-                connection.onclose = () => {
+                connection.onclose = (event: CloseEvent) => {
+                    this.rooms = this.rooms.filter(room => room.server !== server);
+                };
+                connection.onerror = (event: ErrorEvent) => {
+                    console.log('error', server.id, event);
                     this.rooms = this.rooms.filter(room => room.server !== server);
                 };
                 connection.onmessage = (event) => {
                     let message = JSON.parse(event.data);
                     switch (message.event) {
                         case 'init':
+                            this.rooms_loading = false;
                             this.rooms = this.rooms.filter(room => room.server !== server).concat(
                                 message.data.map((room: Room) => Object.assign({server: server}, room))
                             );