优化聊天室性能，单人模式增加随机

app/app-detail.component.html

@@ -99,7 +99,21 @@
 </div>
 
 
-<!--<div *ngIf="points" class="row">--><!--<dl class="col-4 row">--><!--<dt i18n class="col-8">竞技排名</dt>--><!--<dd class="col-4">{{points.arena_rank}}</dd>--><!--<dt i18n class="col-8">竞技胜率</dt>--><!--<dd class="col-4">{{points.athletic_wl_ratio}}%</dd>--><!--<dt i18n class="col-8">胜场</dt>--><!--<dd class="col-4">{{points.athletic_win}}</dd>--><!--<dt i18n class="col-8">负场</dt>--><!--<dd class="col-4">{{points.athletic_lose}}</dd>--><!--<dt i18n class="col-8">平局</dt>--><!--<dd class="col-4">{{points.athletic_draw}}</dd>--><!--<dt i18n class="col-8">总场</dt>--><!--<dd class="col-4">{{points.athletic_all}}</dd>--><!--</dl>--><!--<dl class="col-4 row">--><!--<dt i18n class="col-8">娱乐排名</dt>--><!--<dd class="col-4">{{points.exp_rank}}</dd>--><!--<dt i18n class="col-8">经验</dt>--><!--<dd class="col-4">{{points.exp}}</dd>--><!--<dt i18n class="col-8">胜场</dt>--><!--<dd class="col-4">{{points.entertain_win}}</dd>--><!--<dt i18n class="col-8">负场</dt>--><!--<dd class="col-4">{{points.entertain_lose}}</dd>--><!--<dt i18n class="col-8">平局</dt>--><!--<dd class="col-4">{{points.entertain_draw}}</dd>--><!--<dt i18n class="col-8">总场</dt>--><!--<dd class="col-4">{{points.entertain_all}}</dd>--><!--</dl>--><!--</div>-->
+<!--<div class="panel panel-default" *ngIf="currentApp.id === 'ygopro'">-->
+    <!--<h2 i18n>社区</h2>-->
+    <!--<div class="d-flex">-->
+        <!--<div class="card">-->
+            <!--<img src="https://ygobbs.com/uploads/default/original/3X/7/b/7bf0d51bf506678f2660bf427526f4a71d213658.png">-->
+            <!--<p class="card-text">12月13日 MyCard更新RATE,1033.C程序。手动更新以及载入中/版本不匹配等错误解决方法。</p>-->
+        <!--</div>-->
+        <!--<ul>-->
+            <!--<li>决斗都市——ygocore战队联盟站报名贴</li>-->
+            <!--<li>七夕情侣YGOPRO联盟 夏日双打大赛</li>-->
+            <!--<li>蠢鱼的一些关于安装和更新指南</li>-->
+            <!--<li>MyCard V3 使用说明</li>-->
+        <!--</ul>-->
+    <!--</div>-->
+<!--</div>-->
 
 <div class="panel panel-default" *ngIf="news && news.length">
     <h2 i18n>新闻</h2>
@@ -155,6 +169,20 @@
 
 </div>
 
+<!--<div class="panel panel-default">-->
+    <!--<h2 i18n>广告</h2>-->
+    <!--<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
+    <!--&lt;!&ndash; mycard &ndash;&gt;-->
+    <!--<ins class="adsbygoogle"-->
+         <!--style="display:block"-->
+         <!--data-ad-client="ca-pub-1173264056684633"-->
+         <!--data-ad-slot="3903147661"-->
+         <!--data-ad-format="auto"></ins>-->
+    <!--<script>-->
+        <!--(adsbygoogle = window.adsbygoogle || []).push({});-->
+    <!--</script>-->
+<!--</div>-->
+
 <!--安装modal-->
 <div class="modal fade" id="install-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" *ngIf="installOption">
     <div class="modal-dialog" role="document">

app/app-detail.component.ts

@@ -9,9 +9,16 @@ import * as path from 'path';
 import * as fs from 'fs';
 import * as $ from 'jquery';
 import {Points} from './ygopro.component';
+import {Http} from '@angular/http';
 
 declare const Notification: any;
 
+// declare interface Window {
+//     adsbygoogle: any[];
+// }
+//
+// declare var adsbygoogle: any[];
+
 @Component({
     moduleId: module.id,
     selector: 'app-detail',
@@ -34,16 +41,21 @@ export class AppDetailComponent implements OnInit, OnChanges {
     points: Points;
 
     constructor(private appsService: AppsService, private settingsService: SettingsService,
-                private  downloadService: DownloadService, private ref: ChangeDetectorRef, private el: ElementRef) {
+                private  downloadService: DownloadService, private ref: ChangeDetectorRef, private el: ElementRef,
+                private http: Http) {
     }
 
-    ngOnChanges(changes: SimpleChanges): void {
+    async ngOnChanges(changes: SimpleChanges) {
         if (changes['currentApp']) {
             if (this.currentApp.background) {
                 this.el.nativeElement.style.background = `url("${this.currentApp.background}") rgba(255,255,255,.8)`;
             } else {
                 this.el.nativeElement.style.background = 'white';
             }
+
+            // let top = await this.http.get('https://ygobbs.com/top.json').map(response => response.json()).toPromise();
+            // console.log(top.topic_list.topics);
+            // (adsbygoogle = window['adsbygoogle'] || []).push({});
         }
     }
 

app/candy.component.css

@@ -159,4 +159,9 @@
 /*}*/
 .message-pane {
     -webkit-user-select: auto;
+}
+
+.roster-pane .user {
+    display: inherit;
+    opacity: inherit;
 }
\ No newline at end of file

app/candy.component.ts

@@ -28,7 +28,7 @@ import {LoginService} from './login.service';
 import {SettingsService} from './settings.sevices';
 import {App} from './app';
 import 'node_modules/candy/libs.min.js';
-import 'node_modules/candy/candy.bundle.js';
+import 'node_modules/candy/candy.min.js';
 import 'node_modules/candy-shop/notifyme/candy.js';
 import 'node_modules/candy-shop/namecomplete/candy.js';
 import 'node_modules/candy-shop/modify-role/candy.js';
@@ -57,10 +57,12 @@ Candy.Util.getPosTopAccordingToWindowBounds = new Proxy(Candy.Util.getPosTopAcco
         return target.apply(thisArg, argumentsList);
     }
 });
-Candy.View.Pane.Roster.joinAnimation = function (elementId: string) {
-    $("#" + elementId).show().css({opacity: 'initial'});
+
+// 性能优化：禁用加入动画
+Candy.View.Pane.Roster.joinAnimation = function () {
 };
 
+// 性能优化：禁用用户排序
 declare const Mustache: any;
 Candy.View.Pane.Roster._insertUser = function (roomJid: string, roomId: string, user: any, userId: string, currentUser: any) {
     let contact = user.getContact();
@@ -70,19 +72,134 @@ Candy.View.Pane.Roster._insertUser = function (roomJid: string, roomId: string,
         userJid: user.getJid(),
         realJid: user.getRealJid(),
         status: user.getStatus(),
-        contact_status: contact ? contact.getStatus() : "unavailable",
+        contact_status: contact ? contact.getStatus() : 'unavailable',
         nick: user.getNick(),
         displayNick: Candy.Util.crop(user.getNick(), Candy.View.getOptions().crop.roster.nickname),
         role: user.getRole(),
         affiliation: user.getAffiliation(),
         me: currentUser !== undefined && user.getNick() === currentUser.getNick(),
-        tooltipRole: $.i18n._("tooltipRole"),
-        tooltipIgnored: $.i18n._("tooltipIgnored")
+        tooltipRole: $.i18n._('tooltipRole'),
+        tooltipIgnored: $.i18n._('tooltipIgnored')
     });
-    let rosterPane = Candy.View.Pane.Room.getPane(roomJid, ".roster-pane");
+    let rosterPane = Candy.View.Pane.Room.getPane(roomJid, '.roster-pane');
     rosterPane.append(html);
 };
 
+// 性能优化：将未读消息计数的的 jQuery show() 改为直接置 style
+Candy.View.Pane.Chat.increaseUnreadMessages = function (roomJid: string) {
+    let unreadElem = this.getTab(roomJid).find('.unread');
+    unreadElem.text(unreadElem.text() !== '' ? parseInt(unreadElem.text(), 10) + 1 : 1);
+    unreadElem[0].style.display = 'inherit';
+    // only increase window unread messages in private chats
+    if (Candy.View.Pane.Chat.rooms[roomJid].type === 'chat' || Candy.View.getOptions().updateWindowOnAllMessages === true) {
+        Candy.View.Pane.Window.increaseUnreadMessages();
+    }
+};
+
+// 性能优化：将收到消息时的滚动放进requestIdleCallback
+declare const requestIdleCallback: Function;
+Candy.View.Pane.Message.
+    show = function (roomJid: any, name: any, message: any, xhtmlMessage: any, timestamp: any, from: any, carbon: any, stanza: any) {
+    message = Candy.Util.Parser.all(message.substring(0, Candy.View.getOptions().crop.message.body));
+    if (Candy.View.getOptions().enableXHTML === true && xhtmlMessage) {
+        xhtmlMessage = Candy.Util.parseAndCropXhtml(xhtmlMessage, Candy.View.getOptions().crop.message.body);
+    }
+    timestamp = timestamp || new Date();
+    // Assume we have an ISO-8601 date string and convert it to a Date object
+    if (!timestamp.toDateString) {
+        timestamp = Candy.Util.iso8601toDate(timestamp);
+    }
+    // Before we add the new message, check to see if we should be automatically scrolling or not.
+    let messagePane = Candy.View.Pane.Room.getPane(roomJid, '.message-pane');
+    let enableScroll;
+    if (stanza.children('delay').length > 0) {
+        enableScroll = true;
+    } else {
+        enableScroll =
+            messagePane.scrollTop() + messagePane.outerHeight() === messagePane.prop('scrollHeight') || !$(messagePane).is(':visible');
+    }
+    Candy.View.Pane.Chat.rooms[roomJid].enableScroll = enableScroll;
+    let evtData: any = {
+        roomJid: roomJid,
+        name: name,
+        message: message,
+        xhtmlMessage: xhtmlMessage,
+        from: from,
+        stanza: stanza
+    };
+    if ($(Candy).triggerHandler('candy:view.message.before-show', evtData) === false) {
+        return;
+    }
+    message = evtData.message;
+    xhtmlMessage = evtData.xhtmlMessage;
+    if (xhtmlMessage !== undefined && xhtmlMessage.length > 0) {
+        message = xhtmlMessage;
+    }
+    if (!message) {
+        return;
+    }
+    let renderEvtData = {
+        template: Candy.View.Template.Message.item,
+        templateData: {
+            name: name,
+            displayName: Candy.Util.crop(name, Candy.View.getOptions().crop.message.nickname),
+            message: message,
+            time: Candy.Util.localizedTime(timestamp),
+            timestamp: timestamp.toISOString(),
+            roomjid: roomJid,
+            from: from
+        },
+        stanza: stanza
+    };
+    $(Candy).triggerHandler('candy:view.message.before-render', renderEvtData);
+    let html = Mustache.to_html(renderEvtData.template, renderEvtData.templateData);
+    Candy.View.Pane.Room.appendToMessagePane(roomJid, html);
+    let elem = Candy.View.Pane.Room.getPane(roomJid, '.message-pane').children().last();
+    // click on username opens private chat
+    elem.find('a.label').click(function (event: any) {
+        event.preventDefault();
+        // Check if user is online and not myCandy.View.Pane
+        let room = Candy.Core.getRoom(roomJid);
+        if (room &&
+            name !== Candy.View.Pane.Room.getUser(Candy.View.getCurrent().roomJid).getNick() &&
+            room.getRoster().get(roomJid + '/' + name)) {
+            if (Candy.View.Pane.PrivateRoom.open(roomJid + '/' + name, name, true) === false) {
+                return false;
+            }
+        }
+    });
+    if (!carbon) {
+        let notifyEvtData = {
+            name: name,
+            displayName: Candy.Util.crop(name, Candy.View.getOptions().crop.message.nickname),
+            roomJid: roomJid,
+            message: message,
+            time: Candy.Util.localizedTime(timestamp),
+            timestamp: timestamp.toISOString()
+        };
+        $(Candy).triggerHandler('candy:view.message.notify', notifyEvtData);
+        // Check to see if in-core notifications are disabled
+        if (!Candy.Core.getOptions().disableCoreNotifications) {
+            if (Candy.View.getCurrent().roomJid !== roomJid || !Candy.View.Pane.Window.hasFocus()) {
+                Candy.View.Pane.Chat.increaseUnreadMessages(roomJid);
+                if (!Candy.View.Pane.Window.hasFocus()) {
+                    // Notify the user about a new private message OR on all messages if configured
+                    if (Candy.View.Pane.Chat.rooms[roomJid].type === 'chat' || Candy.View.getOptions().updateWindowOnAllMessages === true) {
+                        Candy.View.Pane.Chat.Toolbar.playSound();
+                    }
+                }
+            }
+        }
+        if (Candy.View.getCurrent().roomJid === roomJid) {
+            requestIdleCallback(function () {
+                Candy.View.Pane.Room.scrollToBottom(roomJid);
+            });
+        }
+    }
+    evtData.element = elem;
+    $(Candy).triggerHandler('candy:view.message.after-show', evtData);
+};
+
 document['__defineGetter__']('cookie', () => 'candy-nostatusmessages');
 document['__defineSetter__']('cookie', () => true);
 
@@ -100,10 +217,10 @@ export class CandyComponent implements OnInit, OnChanges {
     password: string;
     nickname: string;
 
-    constructor (private loginService: LoginService, private settingsService: SettingsService, private element: ElementRef) {
+    constructor(private loginService: LoginService, private settingsService: SettingsService, private element: ElementRef) {
     }
 
-    ngOnInit () {
+    ngOnInit() {
 
         this.jid = this.loginService.user.username + '@mycard.moe';
         this.password = this.loginService.user.external_id.toString();
@@ -161,7 +278,7 @@ export class CandyComponent implements OnInit, OnChanges {
         Candy.Core.connect(this.jid, this.password, this.nickname);
     }
 
-    ngOnChanges (changes: SimpleChanges): void {
+    ngOnChanges(changes: SimpleChanges): void {
         if (!Candy.Core.getConnection()) {
             return;
         }

app/lobby.component.html

@@ -26,31 +26,46 @@
         <span i18n *ngIf="grouped_apps.recommend">推荐</span>
         <ul *ngIf="grouped_apps.recommend" class="nav nav-pills flex-column">
             <li *ngFor="let app of grouped_apps.recommend" class="nav-item">
-                <a (click)="$event.preventDefault(); chooseApp(app)" [href]="'https://mycard.moe/' + app.id" class="nav-link" [class.active]="app===currentApp"><img *ngIf="app.icon" class="icon" [src]="app.icon">{{app.name}}</a>
+                <a (click)="$event.preventDefault(); chooseApp(app)" [href]="'https://mycard.moe/' + app.id" class="nav-link" [class.active]="app===currentApp">
+                    <img *ngIf="app.icon" class="icon" [src]="app.icon">
+                    {{app.name}}
+                </a>
             </li>
         </ul>
         <span i18n *ngIf="grouped_apps.mysterious">迷之物体</span>
         <ul *ngIf="grouped_apps.mysterious" class="nav nav-pills flex-column">
             <li *ngFor="let app of grouped_apps.mysterious" class="nav-item">
-                <a (click)="$event.preventDefault(); chooseApp(app)" [href]="'https://mycard.moe/' + app.id" class="nav-link" [class.active]="app===currentApp"><img *ngIf="app.icon" class="icon" [src]="app.icon">{{app.name}}</a>
+                <a (click)="$event.preventDefault(); chooseApp(app)" [href]="'https://mycard.moe/' + app.id" class="nav-link" [class.active]="app===currentApp">
+                    <img *ngIf="app.icon" class="icon" [src]="app.icon">
+                    {{app.name}}
+                </a>
             </li>
         </ul>
         <span i18n *ngIf="grouped_apps.touhou">东方 Project</span>
         <ul *ngIf="grouped_apps.touhou" class="nav nav-pills flex-column">
             <li *ngFor="let app of grouped_apps.touhou" class="nav-item">
-                <a (click)="$event.preventDefault(); chooseApp(app)" [href]="'https://mycard.moe/' + app.id" class="nav-link" [class.active]="app===currentApp"><img *ngIf="app.icon" class="icon" [src]="app.icon">{{app.name}}</a>
+                <a (click)="$event.preventDefault(); chooseApp(app)" [href]="'https://mycard.moe/' + app.id" class="nav-link" [class.active]="app===currentApp">
+                    <img *ngIf="app.icon" class="icon" [src]="app.icon">
+                    {{app.name}}
+                </a>
             </li>
         </ul>
         <span i18n *ngIf="grouped_apps.touhou_pc98">东方旧作</span>
         <ul *ngIf="grouped_apps.touhou_pc98" class="nav nav-pills flex-column">
             <li *ngFor="let app of grouped_apps.touhou_pc98" class="nav-item">
-                <a (click)="$event.preventDefault(); chooseApp(app)" [href]="'https://mycard.moe/' + app.id" class="nav-link" [class.active]="app===currentApp"><img *ngIf="app.icon" class="icon" [src]="app.icon">{{app.name}}</a>
+                <a (click)="$event.preventDefault(); chooseApp(app)" [href]="'https://mycard.moe/' + app.id" class="nav-link" [class.active]="app===currentApp">
+                    <img *ngIf="app.icon" class="icon" [src]="app.icon">
+                    {{app.name}}
+                </a>
             </li>
         </ul>
         <span i18n *ngIf="grouped_apps.runtime_installed">已安装的运行库</span>
         <ul *ngIf="grouped_apps.runtime_installed" class="nav nav-pills flex-column">
             <li *ngFor="let app of grouped_apps.runtime_installed" class="nav-item">
-                <a (click)="$event.preventDefault(); chooseApp(app)" [href]="'https://mycard.moe/' + app.id" class="nav-link" [class.active]="app===currentApp"><img *ngIf="app.icon" class="icon" [src]="app.icon">{{app.name}}</a>
+                <a (click)="$event.preventDefault(); chooseApp(app)" [href]="'https://mycard.moe/' + app.id" class="nav-link" [class.active]="app===currentApp">
+                    <img *ngIf="app.icon" class="icon" [src]="app.icon">
+                    {{app.name}}
+                </a>
             </li>
         </ul>
     </nav>

app/mycard.component.html

@@ -15,6 +15,9 @@
         <li *ngIf="loginService.logged_in" [ngClass]="{active: currentPage === 'community'}" class="nav-item">
             <a i18n (click)="currentPage='community'" class="nav-link" href="#">社区</a>
         </li>
+        <!--<li *ngIf="loginService.logged_in" [ngClass]="{active: currentPage === 'moesound'}" class="nav-item">-->
+            <!--<a i18n (click)="currentPage='moesound'" class="nav-link" href="#">萌音</a>-->
+        <!--</li>-->
         <!--<li *ngIf="loginService.logged_in" [ngClass]="{active: currentPage === 'about'}" class="nav-item">-->
         <!--<a i18n (click)="currentPage='about'" class="nav-link" href="#">关于</a>-->
         <!--</li>-->
@@ -45,6 +48,7 @@
 <store class="page" *ngIf="loginService.logged_in" [hidden]="currentPage != 'store'"></store>
 <lobby class="page" *ngIf="loginService.logged_in" [hidden]="currentPage != 'lobby'"></lobby>
 <webview class="page" *ngIf="loginService.logged_in" [hidden]="currentPage != 'community'" src="https://ygobbs.com" (new-window)="openExternal($event.url)"></webview>
+<!--<webview #moesound preload="./moesound.js" class="page" *ngIf="loginService.logged_in" [hidden]="currentPage != 'moesound'" src="http://moesound.com/" (new-window)="moesound_newwindow($event.url)" (did-finish-load)="moesound_loaded()"></webview>-->
 <about class="page" *ngIf="loginService.logged_in" [hidden]="currentPage != 'about'"></about>
 
 <!-- Modal -->

app/mycard.component.ts

@@ -36,7 +36,10 @@ export class MyCardComponent implements OnInit {
 
     resizing: HTMLElement | null;
 
-    ngOnInit () {
+    @ViewChild('moesound')
+    moesound: ElementRef;
+
+    ngOnInit() {
         this.update_elements = new Map(Object.entries({
             'error': this.error,
             'checking-for-update': this.checking_for_update,
@@ -50,8 +53,8 @@ export class MyCardComponent implements OnInit {
         // });
     }
 
-    constructor (private renderer: Renderer, private loginService: LoginService, private ref: ChangeDetectorRef,
-                 private settingsService: SettingsService) {
+    constructor(private renderer: Renderer, private loginService: LoginService, private ref: ChangeDetectorRef,
+                private settingsService: SettingsService) {
         // renderer.listenGlobal('window', 'message', (event) => {
         //     console.log(event);
         //     // Do something with 'event'
@@ -80,15 +83,15 @@ export class MyCardComponent implements OnInit {
 
     }
 
-    update_retry () {
+    update_retry() {
         autoUpdater.checkForUpdates();
     }
 
-    update_install () {
+    update_install() {
         autoUpdater.quitAndInstall();
     }
 
-    set_update_status (status: string) {
+    set_update_status(status: string) {
         console.log('autoUpdater', status);
         if (this.update_status) {
             let element = this.update_elements.get(this.update_status);
@@ -105,15 +108,30 @@ export class MyCardComponent implements OnInit {
         }
     }
 
-    openExternal (url: string) {
+    openExternal(url: string) {
         shell.openExternal(url);
     }
 
-    submit () {
+    submit() {
         if (this.locale !== this.settingsService.getLocale()) {
             localStorage.setItem(SettingsService.SETTING_LOCALE, this.locale);
             remote.app.relaunch();
             remote.app.quit();
         }
     }
+    //
+    // moesound_loaded() {
+    //     this.moesound.nativeElement.insertCSS(`
+    //         body > section > header, #bjax-target > div.row.m-t-lg.m-b-lg, #bjax-target > section {
+    //             display: none;
+    //         }
+    //         body > section > section {
+    //             top: 0!important;
+    //         }
+    //     `);
+    // }
+    //
+    // moesound_newwindow(url: string) {
+    //     console.log(url);
+    // }
 }

app/ygopro.component.html

@@ -39,6 +39,7 @@
             <div class="modal-body">
                 <label i18n>选择对手</label>
                 <div id="windbot" class="list-group">
+                    <a i18n href="#" class="list-group-item" (click)="join_windbot()">随机</a>
                     <a *ngFor="let name of windbot" href="#" class="list-group-item" (click)="join_windbot(name)">{{name}}</a>
                 </div>
             </div>

index.html

@@ -46,5 +46,6 @@
     document.body.classList.add(process.platform);
     document.getElementById('version').innerHTML = require('electron').remote.app.getVersion();
 </script>
+<!--<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
 </body>
 </html>

moesound.js

+document.addEventListener("DOMContentLoaded", function(event) {
+    $('#nav,.navbar-header').removeClass('nav-xs');
+});