社区热帖

src/app/lobby/lobby.component.css

@@ -64,14 +64,10 @@ md-card-content {
 [md-card-avatar] {
   width: 128px;
   height: 72px;
-  background-size: cover;
+  object-fit: cover;
   border-radius: initial;
 }
 
-#avatar {
-  background-size: cover;
-}
-
 [fontSet] {
   font-size: 24px;
 }

src/app/lobby/lobby.component.html

@@ -78,14 +78,38 @@
 <md-card *ngFor="let item of ygopro.news" class="example-card">
   <a [href]="item.url" target="_blank">
     <md-card-header>
-      <div *ngIf="item.image" md-card-avatar [style.background-image]="'url(' + item.image + ')'"></div>
+      <img *ngIf="item.image" md-card-avatar [src]="item.image">
       <md-card-title>{{item.title}}</md-card-title>
       <md-card-subtitle>{{item.updated_at | date:"mediumDate"}}</md-card-subtitle>
     </md-card-header>
   </a>
+</md-card>
+
+<!--<md-card *ngFor="let item of ygopro.topics | async">-->
+  <!--<a [href]="item.url" target="_blank">-->
+  <!--<md-card-header>-->
+    <!--<img *ngIf="item.image_url" md-card-avatar [src]="item.image_url">-->
+    <!--<md-card-title>{{item.title}}</md-card-title>-->
+    <!--<md-card-subtitle>by {{item.last_poster_username}} / {{item.last_posted_at | date:"mediumDate"}}</md-card-subtitle>-->
+  <!--</md-card-header>-->
+  <!--</a>-->
 
+  <!---->
+  <!--<md-card-header>-->
+    <!--<img [src]="item.created_by.avatar_url" md-card-avatar class="example-header-image">-->
+    <!--<md-card-title>{{item.title}}</md-card-title>-->
+    <!--&lt;!&ndash;<md-card-subtitle>Dog Breed</md-card-subtitle>&ndash;&gt;-->
+  <!--</md-card-header>-->
+  <!--<img md-card-image [src]="item.image_url">-->
   <!--<md-card-content>-->
-  <!--<img src="https://material.angular.io/assets/img/examples/shiba2.jpg">-->
-  <!--<p>{{item.text}}</p>-->
+    <!--&lt;!&ndash;<p [innerHTML]="item.description">&ndash;&gt;-->
+    <!--&lt;!&ndash;The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.&ndash;&gt;-->
+    <!--&lt;!&ndash;A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally&ndash;&gt;-->
+    <!--&lt;!&ndash;bred for hunting.&ndash;&gt;-->
+    <!--&lt;!&ndash;</p>&ndash;&gt;-->
   <!--</md-card-content>-->
-</md-card>
+  <!--<md-card-actions>-->
+    <!--<button md-button>LIKE</button>-->
+    <!--<button md-button>SHARE</button>-->
+  <!--</md-card-actions>-->
+<!--</md-card>-->

src/app/login.service.ts

 import { Injectable } from '@angular/core';
 import { fromPairs } from 'lodash';
-import { TextDecoder, TextEncoder } from 'text-encoding';
 import { User } from './ygopro.service';
 
 @Injectable()

src/app/ygopro.service.ts

@@ -71,6 +71,7 @@ export class YGOProService {
 
   news: News[];
   windbot: string[];
+  topics: Observable<any>;
 
   readonly default_options: Options = {
     mode: 1,
@@ -110,6 +111,16 @@ export class YGOProService {
     const app = apps.find(app => app.id === 'ygopro');
     this.news = app.news['zh-CN'];
     this.windbot = (<YGOProData>app.data).windbot['zh-CN'];
+    // this.topics = this.http.get('https://ygobbs.com/top.json').flatMap(response => promisify(parseString)(response.text())).map(doc => {
+    //   console.log(doc['rss'].channel[0].item)
+    //   return doc['rss'].channel[0].item;
+    // });
+    this.topics = this.http.get('https://ygobbs.com/top/quarterly.json').map(response => response.json().topic_list.topics.map(topic => ({
+      ...topic,
+      url: new URL(`/t/${topic.slug}/${topic.id}`, 'https://ygobbs.com').toString(),
+      image_url: topic.image_url && new URL(topic.image_url, 'https://ygobbs.com').toString()
+    })));
+
   }
 
   create_room(room: Room, host_password: string) {