styles and animation aditions

assets/javascripts/discourse/components/reports/best-posts.gjs

@@ -9,7 +9,6 @@ export default class BestPosts extends Component {
     <div class="rewind-report-page -best-posts">
       <h2 class="rewind-report-title">Your 3 best posts</h2>
       <div class="rewind-report-container">
-        {{log @report.data}}
         {{#each @report.data as |post|}}
           <div class="rewind-card">
             <div class="best-posts__post">{{htmlSafe (get post "5")}}</div>

assets/javascripts/discourse/components/reports/best-topics.gjs

@@ -1,23 +1,45 @@
 import Component from "@glimmer/component";
 import { concat } from "@ember/helper";
+import { htmlSafe } from "@ember/template";
+import emoji from "discourse/helpers/emoji";
 
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class BestTopics extends Component {
+  rank(idx) {
+    return idx + 1;
+  }
+
+  emojiName(rank) {
+    if (rank + 1 === 1) {
+      return "1st_place_medal";
+    } else if (rank + 1 === 2) {
+      return "2nd_place_medal";
+    } else if (rank + 1 === 3) {
+      return "3rd_place_medal";
+    } else {
+      return "medal";
+    }
+  }
+
   <template>
     <div class="rewind-report-page -best-topics">
       <h2 class="rewind-report-title">Your 3 best topics</h2>
       <div class="rewind-report-container">
-        {{!-- {{log @report.data}} --}}
-        {{#each @report.data as |topic|}}
-          <div class="rewind-card">
+        {{log @report.data}}
+        <div class="rewind-card">
+          {{#each @report.data as |topic idx|}}
             <a
               href={{concat "/t/-/" topic.topic_id}}
-              class="best-topics__title"
+              class={{concat "best-topics__topic" " rank-" (this.rank idx)}}
             >
-              {{topic.title}}
+              <span class="best-topics__rank">{{emoji
+                  (this.emojiName idx)
+                }}</span><h2>{{topic.title}}</h2>
+              <span class="best-topics__excerpt">{{htmlSafe
+                  topic.excerpt
+                }}</span>
             </a>
-          </div>
-        {{/each}}
+          {{/each}}
+        </div>
       </div>
     </div>
   </template>

assets/javascripts/discourse/components/reports/word-card.gjs

@@ -0,0 +1,57 @@
+import Component from "@glimmer/component";
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { action } from "@ember/object";
+import didInsert from "@ember/render-modifiers/modifiers/did-insert";
+import emoji from "discourse/helpers/emoji";
+
+export default class WordCard extends Component {
+  get randomStyle() {
+    return `--rand: ${Math.random()}`;
+  }
+
+  get mysteryEmoji() {
+    const mysteryEmojis = [
+      "mag", // 🔍
+      "man_detective", // 🕵️
+      "question", // ❓
+      "8ball", // 🎱
+      "crystal_ball", // 🔮
+      "key", // 🗝️
+      "crescent_moon", // 🌙
+      "milky_way", // 🌌
+    ];
+
+    const randomIndex = Math.floor(Math.random() * mysteryEmojis.length);
+    return mysteryEmojis[randomIndex];
+  }
+
+  @action
+  registerCardContainer(element) {
+    this.cardContainer = element;
+  }
+
+  @action
+  handleClick() {
+    this.cardContainer.classList.toggle("flipped");
+  }
+
+  <template>
+    <div
+      {{on "click" (fn this.handleClick)}}
+      class="rewind-card__wrapper"
+      style={{this.randomStyle}}
+      {{didInsert this.registerCardContainer}}
+    >
+      <div class="rewind-card__inner">
+        <div class="rewind-card -front">
+          <span class="rewind-card__image">{{emoji this.mysteryEmoji}}</span>
+        </div>
+        <div class="rewind-card -back">
+          <span class="rewind-card__title">{{@word}}</span>
+          <span class="rewind-card__data">used {{@count}} times</span>
+        </div>
+      </div>
+    </div>
+  </template>
+}

assets/javascripts/discourse/components/reports/word-cards.gjs

@@ -0,0 +1,16 @@
+import Component from "@glimmer/component";
+import WordCard from "discourse/plugins/discourse-rewind/discourse/components/reports/word-card";
+
+// eslint-disable-next-line ember/no-empty-glimmer-component-classes
+export default class WordCards extends Component {
+  <template>
+    <div class="rewind-report-page -word-cloud">
+      <h2 class="rewind-report-title">Most used words</h2>
+      <div class="rewind-report-container">
+        {{#each-in @report.data as |word count|}}
+          <WordCard @word={{word}} @count={{count}} />
+        {{/each-in}}
+      </div>
+    </div>
+  </template>
+}

assets/javascripts/discourse/components/reports/word-cloud.gjs

@@ -1,29 +0,0 @@
-import Component from "@glimmer/component";
-
-export default class WordCloud extends Component {
-  get randomStyle() {
-    return `--rand: ${Math.random()}`;
-  }
-
-  <template>
-    <div class="rewind-report-page -word-cloud">
-      <h2 class="rewind-report-title">Most used words</h2>
-      <div class="rewind-report-container">
-        {{#each-in @report.data as |word count|}}
-          <div class="rewind-card__wrapper" style={{this.randomStyle}}>
-            <div class="rewind-card__inner">
-              <div class="rewind-card -front">
-                <span class="rewind-card__title">?</span>
-                <span class="rewind-card__data">{{count}}x</span>
-              </div>
-              <div class="rewind-card -back">
-                <span class="rewind-card__title">{{word}}</span>
-                <span class="rewind-card__data">used {{count}} times</span>
-              </div>
-            </div>
-          </div>
-        {{/each-in}}
-      </div>
-    </div>
-  </template>
-}

assets/javascripts/discourse/components/rewind.gjs

@@ -19,7 +19,7 @@ import FBFF from "discourse/plugins/discourse-rewind/discourse/components/report
 import Introduction from "discourse/plugins/discourse-rewind/discourse/components/reports/introduction";
 import Reactions from "discourse/plugins/discourse-rewind/discourse/components/reports/reactions";
 import ReadingTime from "discourse/plugins/discourse-rewind/discourse/components/reports/reading-time";
-import WordCloud from "discourse/plugins/discourse-rewind/discourse/components/reports/word-cloud";
+import WordCards from "discourse/plugins/discourse-rewind/discourse/components/reports/word-cards";
 
 export default class Rewind extends Component {
   @service siteSettings;
@@ -88,7 +88,7 @@ export default class Rewind extends Component {
 
       <div class="rewind">
         <div class="background-1 parallax-bg"></div>
-        <canvas class="background-2 parallax-bg"></canvas>
+        {{! <canvas class="background-2 parallax-bg"></canvas> }}
         {{#if this.loadingRewind}}
           <div class="rewind-loader">
             <div class="spinner small"></div>
@@ -115,7 +115,7 @@ export default class Rewind extends Component {
                 {{#if (eq report.identifier "reactions")}}
                   <Reactions @report={{report}} />
                 {{else if (eq report.identifier "word-cloud")}}
-                  <WordCloud @report={{report}} />
+                  <WordCards @report={{report}} />
                 {{else if (eq report.identifier "best-posts")}}
                   <BestPosts @report={{report}} />
                 {{else if (eq report.identifier "best-topics")}}