app-detail.component.html 18.7 KB
Newer Older
1
<div id="main" class="panel">
神楽坂玲奈's avatar
神楽坂玲奈 committed
2
    <img *ngIf="currentApp.cover" class="cover rounded" [src]="currentApp.cover">
3 4 5
    <div id="right">
        <h1>{{currentApp.name}}</h1>
        <div id="time">您已玩了 2564 小时</div>
神楽坂玲奈's avatar
神楽坂玲奈 committed
6 7 8 9 10 11 12 13 14 15 16

        <!--应用未购买-->
        <div *ngIf="!currentApp.isBought()">
            <button i18n type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#purchase-modal">{{currentApp.price.cny | currency:'CNY':true}} 购买</button>

            <!--<button i18n (click)="updateInstallOption(currentApp)" type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#install-modal">我已经购买过</button>-->
        </div>


        <!--应用已购买,未安装-->
        <div *ngIf="currentApp.isBought() && !currentApp.isInstalled()">
17 18 19
            <button i18n (click)="updateInstallOption(currentApp)" type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#install-modal">安装</button>
            <button i18n *ngIf="currentApp.runnable()" (click)="updateInstallOption(currentApp)" type="button" class="btn btn-secondary btn-sm" data-toggle="modal" data-target="#import-modal">导入</button>
        </div>
wudizhanche1000's avatar
wudizhanche1000 committed
20

21 22 23 24 25 26 27 28 29 30
        <!--应用变更中-->
        <div *ngIf="currentApp.isInstalled() && !currentApp.isReady()">
            <div id="status">
                <span i18n *ngIf="currentApp.isDownloading()">正在下载</span>
                <span i18n *ngIf="currentApp.isInstalling()">正在安装...</span>
                <span i18n *ngIf="currentApp.isUninstalling()">正在卸载...</span>
                <span i18n *ngIf="currentApp.isWaiting()">等待安装...</span>
                <span i18n *ngIf="currentApp.isUpdating()">正在更新...</span>
                <span *ngIf="currentApp.status.total">{{(currentApp.status.progress/currentApp.status.total * 100).toFixed()}}%</span>
                <span>{{currentApp.progressMessage()}}</span>
hjistc's avatar
hjistc committed
31
            </div>
32 33
            <progress class="progress" [class.progress-striped]="!currentApp.status.total" [class.progress-animated]="!currentApp.status.total" value="{{currentApp.status.total ? currentApp.status.progress : 1}}" max="{{currentApp.status.total}}"></progress>
        </div>
wudizhanche1000's avatar
wudizhanche1000 committed
34

35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
        <!--应用ready-->
        <div *ngIf="currentApp.isReady() && (currentApp.id != 'ygopro')">
            <button *ngIf="currentApp.runnable()" (click)="runApp(currentApp)" [disabled]="!appsService.allReady(currentApp)" type="button" class="btn btn-primary btn-sm">
                <i class="fa fa-play" aria-hidden="true"></i> <span i18n>运行</span></button>
            <button i18n *ngIf="currentApp.runnable() && currentApp.actions.get('custom')" [disabled]="!appsService.allReady(currentApp)" (click)="custom(currentApp)" type="button" class="btn btn-secondary btn-sm">设置</button>
            <div id="network" *ngIf="currentApp.network && currentApp.network.protocol == 'maotama'">
                <div class="input-group input-group-sm">
                    <input *ngIf="appsService.connections.get(currentApp)" [value]="appsService.connections.get(currentApp).address || 'Loading...'" readonly type="text" class="form-control" title="address">
                    <div class="input-group-btn" style="flex-direction: row">
                        <button i18n *ngIf="!appsService.connections.get(currentApp)" [disabled]="!appsService.allReady(currentApp)" (click)="appsService.network(currentApp, currentApp.network.servers[0])" type="button" class="btn btn-secondary btn-sm">联机</button>
                        <button i18n *ngIf="appsService.connections.get(currentApp)" (click)="copy(appsService.connections.get(currentApp).address)" [disabled]="!appsService.connections.get(currentApp).address" type="button" class="btn btn-secondary btn-sm">复制</button>
                        <button type="button" class="btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown"></button>
                        <div class="dropdown-menu" [class.dropdown-menu-right]="appsService.connections.get(currentApp)">
                            <h6 i18n class="dropdown-header">选择服务器</h6>
                            <a *ngFor="let server of currentApp.network.servers" (click)="appsService.network(currentApp, server)" class="dropdown-item" href="#">{{server.id}}</a>
                            <div *ngIf="appsService.connections.get(currentApp)" class="dropdown-divider"></div>
                            <a i18n *ngIf="appsService.connections.get(currentApp)" (click)="appsService.connections.get(currentApp).connection.close()" class="dropdown-item" href="#">取消</a>
hjistc's avatar
hjistc committed
52 53 54 55
                        </div>
                    </div>
                </div>
            </div>
神楽坂玲奈's avatar
神楽坂玲奈 committed
56
        </div>
57
        <ygopro *ngIf="currentApp.isReady() && (currentApp.id == 'ygopro')" [app]="currentApp" [currentApp]="currentApp" (points)="onPoints($event)"></ygopro>
神楽坂玲奈's avatar
神楽坂玲奈 committed
58
    </div>
wudizhanche1000's avatar
wudizhanche1000 committed
59

60 61
</div>

神楽坂玲奈's avatar
神楽坂玲奈 committed
62
<div id="arena" class="panel panel-default" *ngIf="currentApp.id === 'ygopro' && points ">
63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85
    <h2 i18n>排位成绩</h2>
    <table class="table table-sm">
        <tbody>
        <tr>
            <th i18n>竞技排名</th>
            <td>{{points.arena_rank}}</td>
            <th i18n>娱乐排名</th>
            <td>{{points.exp_rank}}</td>
        </tr>
        <tr>
            <th i18n>竞技胜率</th>
            <td>{{points.athletic_wl_ratio}}%</td>
            <th i18n>经验</th>
            <td>{{points.exp}}</td>
        </tr>
        <tr>
            <th i18n>胜场</th>
            <td>{{points.athletic_win}}</td>
            <th i18n>胜场</th>
            <td>{{points.entertain_win}}</td>
        </tr>
        <tr>
            <th i18n>负场</th>
86
            <td>{{points.athletic_lose}}</td>
87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106
            <th i18n>负场</th>
            <td>{{points.entertain_lose}}</td>
        </tr>
        <tr>
            <th i18n>平局</th>
            <td>{{points.athletic_draw}}</td>
            <th i18n>平局</th>
            <td>{{points.entertain_draw}}</td>
        </tr>
        <tr>
            <th i18n>总场</th>
            <td>{{points.athletic_all}}</td>
            <th i18n>总场</th>
            <td>{{points.entertain_all}}</td>
        </tr>
        </tbody>
    </table>
    <a i18n href="https://mycard.moe/ygopro/arena/" target="_blank" class="moreinfo">更多资料</a>
</div>

107
<div *ngIf="currentApp.description" class="d-flex">
神楽坂玲奈's avatar
神楽坂玲奈 committed
108 109 110 111 112 113 114 115
    <div class="panel" id="game_info">
        <p [innerHTML]="currentApp.description"></p>
        <div id="tags" *ngIf="currentApp.tags">
            <div *ngFor="let tag of currentApp.tags" class="btn btn-xs btn-danger" style="padding:3px 10px; margin:2px">{{tags[tag] || tag}}</div>
        </div>
    </div>
    <div class="panel" id="game_info_2">
        <dl>
神楽坂玲奈's avatar
i18n  
神楽坂玲奈 committed
116
            <dt i18n>开发</dt>
117 118 119 120 121
            <dd>
                <div *ngFor="let developer of currentApp.developers">
                    <a *ngIf="developer.url" target="_blank" [href]="developer.url">{{developer.name}}</a>
                    <span *ngIf="!developer.url">{{developer.name}}</span>
                </div>
122
            </dd>
123

神楽坂玲奈's avatar
i18n  
神楽坂玲奈 committed
124
            <dt i18n>发行日期</dt>
神楽坂玲奈's avatar
神楽坂玲奈 committed
125 126 127 128
            <dd>{{currentApp.released_at | date:'mediumDate'}}</dd>
        </dl>
    </div>
</div>
129 130 131 132

<div class="panel panel-default" *ngIf="news && news.length">
    <h2 i18n>新闻</h2>
    <div id="news" *ngFor="let item of news">
神楽坂玲奈's avatar
神楽坂玲奈 committed
133
        <h3><a class="title" [href]="item.url" target="_blank">{{item.title}}</a></h3>
神楽坂玲奈's avatar
神楽坂玲奈 committed
134
        <span>{{item.updated_at | date:'shortDate'}}</span>
135 136 137 138 139
        <p>{{item.text}}</p>
        <a i18n *ngIf="item.url" [href]="item.url" target="_blank">了解更多</a>
    </div>
    <!--<a href="https://mycard.moe/ygopro/arena/" target="_blank" class="moreinfo">查看所有新闻</a>-->
</div>
神楽坂玲奈's avatar
fix  
神楽坂玲奈 committed
140

hjistc's avatar
hjistc committed
141

142 143 144 145
<div *ngIf="currentApp.isReady()">
    <div *ngIf="mods && mods.length">
        <table class="table table-striped">
            <thead class="thead-inverse">
wudizhanche1000's avatar
wudizhanche1000 committed
146
            <tr>
147 148 149
                <th>#</th>
                <th i18n>名称</th>
                <th i18n>操作</th>
wudizhanche1000's avatar
wudizhanche1000 committed
150
            </tr>
151 152 153 154 155 156 157 158 159 160 161 162 163 164 165
            </thead>
            <tbody>
            <tr *ngFor="let mod of mods; let i = index">
                <th scope="row">{{i + 1}}</th>
                <td>{{mod.name}}</td>
                <td *ngIf="mod.isReady()">
                    <button i18n type="button" [disabled]="mod.isInstalled()&&!appsService.allReady(mod)" (click)="uninstall(mod)" class="btn btn-danger btn-sm">卸载</button>
                </td>
                <td *ngIf="!mod.isInstalled()">
                    <button i18n (click)="installMod(mod)" [disabled]="mod.isInstalled()&&!appsService.allReady(mod)" type="button" *ngIf="!mod.isInstalled()" class="btn btn-primary btn-sm">安装</button>
                </td>
                <td *ngIf="mod.isInstalled()&&!mod.isReady()">
                    <progress class="progress progress-striped progress-animated" value="{{mod.status.total ? mod.status.progress : 1}}" max="{{mod.status.total}}"></progress>
                    <!--<div i18n *ngIf="mod.isWaiting()">等待安装...</div>-->
                </td>
wudizhanche1000's avatar
wudizhanche1000 committed
166 167 168
            </tr>
            </tbody>
        </table>
hjistc's avatar
hjistc committed
169 170 171
    </div>


172 173 174 175 176 177
    <div class="panel panel-default" id="local">
        <h2 i18n>本地文件</h2>
        <div>
            <button i18n (click)="appsService.browse(currentApp)" [disabled]="!appsService.allReady(currentApp)" type="button" class="btn btn-secondary btn-sm">浏览本地文件</button>
            <button i18n type="button" (click)="verifyFiles(currentApp)" [disabled]="!appsService.allReady(currentApp)" class="btn btn-secondary btn-sm">校验完整性</button>
            <button i18n (click)="uninstall(currentApp)" [disabled]="!appsService.allReady(currentApp)" type="button" class="btn btn-secondary btn-sm">卸载</button>
hjistc's avatar
hjistc committed
178
        </div>
wudizhanche1000's avatar
wudizhanche1000 committed
179
    </div>
hjistc's avatar
hjistc committed
180 181


182
</div>
hjistc's avatar
hjistc committed
183

神楽坂玲奈's avatar
神楽坂玲奈 committed
184
<!--<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>-->
185

186 187 188 189 190 191 192 193 194
<!--安装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">
        <form id="install-form" class="modal-content" (ngSubmit)="install(currentApp,installOption,referencesInstall)" #theForm="ngForm">
            <div class="modal-header">
                <h5 i18n class="modal-title" id="myModalLabel">安装 {{currentApp.name}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
hjistc's avatar
hjistc committed
195
            </div>
196 197 198 199 200 201 202 203 204 205 206 207 208
            <div class="modal-body">
                <p i18n>即将开始安装 {{currentApp.name}}</p>
                <h4 i18n>安装位置</h4>
                <div class="form-group">
                    <select class="form-control" name="installPath" (change)="selectLibrary()" [(ngModel)]="installOption.installLibrary" title="path">
                        <option *ngFor="let library of libraries" value="{{library}}"> {{library}}</option>
                        <option *ngFor="let library of availableLibraries" value="create_{{library}}">在 {{library}}\ 盘新建 MyCard 库</option>
                    </select></div>
                <h4 i18n>快捷方式</h4>
                <div class="checkbox">
                    <input id="create_application_shortcut" type="checkbox" name="application" [(ngModel)]="installOption.createShortcut">
                    <label i18n *ngIf="platform == 'darwin'" for="create_application_shortcut">创建 LaunchPad 快捷方式</label>
                    <label i18n *ngIf="platform == 'win32'" for="create_application_shortcut">创建开始菜单快捷方式</label>
神楽坂玲奈's avatar
神楽坂玲奈 committed
209
                </div>
210 211 212
                <div class="checkbox">
                    <input id="create_desktop_shortcut" type="checkbox" name="desktop" [(ngModel)]="installOption.createDesktopShortcut">
                    <label i18n for="create_desktop_shortcut">创建桌面快捷方式</label>
神楽坂玲奈's avatar
神楽坂玲奈 committed
213
                </div>
214 215 216 217 218 219 220
                <h4 i18n *ngIf="references.length>0">扩展内容</h4>
                <div *ngFor="let reference of references"><label>
                    <input type="checkbox" [(ngModel)]="referencesInstall[reference.id]" name="references"> {{reference.name}}
                </label></div>
                <div *ngIf="currentApp.findDependencies().length">
                    <span i18n>依赖:</span>
                    <span class="dependency" *ngFor="let dependency of currentApp.findDependencies()">{{dependency.name}}</span>
221
                </div>
222 223 224 225 226 227
            </div>
            <div class="modal-footer">
                <button i18n type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button i18n type="submit" [disabled]="!theForm.form.valid" class="btn btn-primary">安装</button>
            </div>
        </form>
神楽坂玲奈's avatar
神楽坂玲奈 committed
228
    </div>
229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252
</div>

<div class="modal fade" id="import-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" *ngIf="installOption">
    <div class="modal-dialog" role="document">
        <form id="import-form" class="modal-content" (ngSubmit)="importGame(currentApp,installOption,referencesInstall)" #theForm="ngForm">
            <div class="modal-header">
                <h5 i18n class="modal-title">导入 {{currentApp.name}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p i18n>选择主程序 {{currentApp.actions.get('main').execute}}</p>
                <label class="custom-file" lang="en">
                    <input (click)="$event.preventDefault();selectImport(currentApp)" type="file" id="file" class="custom-file-input">
                    <span class="custom-file-control">{{import_path || currentApp.actions.get('main').execute}}</span>
                </label>

                <h4 i18n>导入到</h4>
                <div class="form-group">
                    <select class="form-control" name="installPath" (change)="selectLibrary()" [(ngModel)]="installOption.installLibrary" title="path">
                        <option *ngFor="let library of libraries" value="{{library}}"> {{library}}</option>
                        <option *ngFor="let library of availableLibraries" value="create_{{library}}">在 {{library}}\ 盘新建 MyCard 库</option>
                    </select>
神楽坂玲奈's avatar
神楽坂玲奈 committed
253
                </div>
254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270
                <!--<h4 i18n>快捷方式</h4>-->
                <!--<div class="checkbox">-->
                <!--<input id="create_application_shortcut" type="checkbox" name="application" [(ngModel)]="installOption.createShortcut">-->
                <!--<label i18n *ngIf="platform == 'darwin'" for="create_application_shortcut">创建 LaunchPad 快捷方式</label>-->
                <!--<label i18n *ngIf="platform == 'win32'" for="create_application_shortcut">创建开始菜单快捷方式</label>-->
                <!--</div>-->
                <!--<div class="checkbox">-->
                <!--<input id="create_desktop_shortcut" type="checkbox" name="desktop" [(ngModel)]="installOption.createDesktopShortcut">-->
                <!--<label i18n for="create_desktop_shortcut">创建桌面快捷方式</label>-->
                <!--</div>-->
                <h4 i18n *ngIf="references.length>0">扩展内容</h4>
                <div *ngFor="let reference of references"><label>
                    <input type="checkbox" [(ngModel)]="referencesInstall[reference.id]" name="references"> {{reference.name}}
                </label></div>
                <div *ngIf="currentApp.findDependencies().length">
                    <span i18n>依赖:</span>
                    <span class="dependency" *ngFor="let dependency of currentApp.findDependencies()">{{dependency.name}}</span>
hjistc's avatar
hjistc committed
271
                </div>
272 273 274 275 276 277
            </div>
            <div class="modal-footer">
                <button i18n type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button i18n type="submit" [disabled]="import_path && !theForm.form.valid" class="btn btn-primary">导入</button>
            </div>
        </form>
神楽坂玲奈's avatar
modal  
神楽坂玲奈 committed
278
    </div>
神楽坂玲奈's avatar
神楽坂玲奈 committed
279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308
</div>


<div class="modal fade" id="purchase-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" *ngIf="!currentApp.isBought()">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 i18n class="modal-title">购买 {{currentApp.name}}</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <div class="d-flex justify-content-between">
                    <img *ngIf="currentApp.cover" [src]="currentApp.cover" class="banner">
                    <span class="p-2">{{currentApp.name}}</span>
                    <span class="p-2 ml-auto">{{currentApp.price.cny | currency:'CNY':true}}</span>
                </div>
                <form id="purchase-form" class="form-inline">
                    <!--<fieldset class="form-group">-->
                    <legend>支付方式</legend>
                    <div class="form-check">
                        <input id="alipay" type="radio" class="form-check-input" name="optionsRadios" value="alipay" checked>
                        <label for="alipay" class="form-check-label">支付宝</label>
                    </div>
                    <div class="form-check">
                        <input id="wechat" type="radio" class="form-check-input" name="optionsRadios" value="alipay" checked>
                        <label for="wechat" class="form-check-label">微信</label>
                    </div>
                    <!--<div class="form-check">-->
309 310
                    <!--<input id="paypal" type="radio" class="form-check-input" name="optionsRadios" value="alipay" checked>-->
                    <!--<label for="paypal" class="form-check-label">PayPal</label>-->
神楽坂玲奈's avatar
神楽坂玲奈 committed
311 312 313 314 315 316 317 318 319 320 321
                    <!--</div>-->
                    <!--</fieldset>-->
                </form>

            </div>
            <div class="modal-footer">
                <button i18n type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                <button i18n type="submit" [disabled]="import_path && !theForm.form.valid" class="btn btn-primary">购买</button>
            </div>
        </div>
    </div>
神楽坂玲奈's avatar
i18n  
神楽坂玲奈 committed
322
</div>