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,24 +1,46 @@
 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}} --}}
+        {{log @report.data}}
-        {{#each @report.data as |topic|}}
         <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}}
         </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")}}

assets/stylesheets/common/best-topics.scss

@@ -3,4 +3,62 @@
     flex-direction: column;
     gap: 1em;
   }
+  .best-topics__title {
+    color: var(--primary);
+  }
+  .rewind-card {
+    gap: 1em;
+    align-items: flex-start;
+    max-width: 700px;
+    background: none;
+    border: none;
+  }
+  .best-topics__topic {
+    padding: 1em;
+    position: relative;
+    color: var(--primary);
+    display: flex;
+    flex-direction: column;
+    text-align: left;
+    max-width: 700px;
+    &.rank-1 {
+      --background: #ffe46a;
+      --border-color: #ffd82a;
+    }
+    &.rank-2 {
+      --background: #d6d6d6;
+      --border-color: #c4c4c4;
+    }
+    &.rank-3 {
+      --background: #dca570;
+      --border-color: #cd7f32;
+    }
+    background: var(--secondary);
+    border: 1px solid var(--primary-300);
+  }
+  .best-topics__rank {
+    position: absolute;
+    top: -15px;
+    left: -19px;
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--secondary);
+    border: 1px solid var(--primary-300);
+  }
+  .best-topics__rank img.emoji {
+    display: block;
+  }
+  .best-topics__excerpt {
+    font-size: var(--font-down-2);
+    font-weight: 400;
+    color: var(--primary-800);
+    text-align: left;
+    &:empty {
+      display: none;
+    }
+  }
 }

assets/stylesheets/common/card.scss

@@ -12,63 +12,6 @@ body {
   gap: 0.5em;
 }
 
-.rewind-card__wrapper {
-  width: 150px;
-  height: 100px;
-  perspective: 1000px;
-  will-change: transform;
-  transform-style: preserve-3d;
-  border-radius: 0.25vw;
-  cursor: pointer;
-  animation-name: ambientMovement;
-  animation-duration: 4000ms;
-  animation-delay: calc(-4000ms * var(--rand));
-  animation-iteration-count: infinite;
-  animation-timing-function: ease-in-out;
-  transform: rotateZ(calc(var(--ambientAmount) * 10deg));
-  z-index: 1;
-  .rewind-card__inner {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    text-align: center;
-    transform-style: preserve-3d;
-    transition: transform;
-    transition-duration: 0.5s;
-    transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
-  }
-  &:hover .rewind-card__inner {
-    transform: rotateY(180deg);
-  }
-  &:hover {
-    animation: flip-zoom 0.5s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
-    z-index: 999;
-  }
-  .rewind-card.-back {
-    transform: rotateY(180deg);
-  }
-  .rewind-card.-front,
-  .rewind-card.-back {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    -webkit-backface-visibility: hidden; /* Safari */
-    backface-visibility: hidden;
-  }
-}
-
-@keyframes flip-zoom {
-  0% {
-    transform: scale(1);
-  }
-  50% {
-    transform: scale(0.9);
-  }
-  100% {
-    transform: scale(1.25);
-  }
-}
-
 .rewind-card {
   background-color: var(--secondary);
   border: 1px solid var(--primary-300);
@@ -92,21 +35,3 @@ body {
     -webkit-font-smoothing: antialiased;
   }
 }
-
-@keyframes ambientMovement {
-  0% {
-    --ambientAmount: 0.1;
-  }
-  50% {
-    --ambientAmount: -0.1;
-  }
-  100% {
-    --ambientAmount: 0.1;
-  }
-}
-
-@property --ambientAmount {
-  syntax: "<number>";
-  inherits: true;
-  initial-value: 0.1;
-}

assets/stylesheets/common/index.scss

@@ -6,7 +6,7 @@
 @import "activity-calendar";
 @import "best-posts";
 @import "best-topics";
-@import "word-cloud";
+@import "word-card";
 @import "favorite-tags";
 @import "favorite-categories";
 @import "fonts";

assets/stylesheets/common/post-used-reactions.scss

@@ -1,8 +1,4 @@
 .-post-used-reactions {
-  .rewind-card {
-    width: 50%;
-  }
-
   .rewind-reactions-chart {
     display: flex;
     flex-direction: column;

assets/stylesheets/common/rewind.scss

@@ -7,6 +7,11 @@
   justify-content: center;
   padding: 2em;
 
+  h1,
+  h2 {
+    font-size: 24px;
+  }
+
   &.-fullscreen {
     top: 0;
     left: 0;
@@ -47,15 +52,15 @@
   opacity: 0.45;
 }
 
-.background-2 {
+// .background-2 {
-  position: absolute;
+//   position: absolute;
-  width: 100%;
+//   width: 100%;
-  height: 1000%;
+//   height: 1000%;
-  background: url(/plugins/discourse-rewind/images/bg-2.png);
+//   background: url(/plugins/discourse-rewind/images/bg-2.png);
-  background-size: contain;
+//   background-size: contain;
-  transform: translateY(0px);
+//   transform: translateY(0px);
-  opacity: 0.85;
+//   opacity: 0.85;
-}
+// }
 
 .rewind__scroll-wrapper {
   overflow-y: auto;

assets/stylesheets/common/word-card.scss

@@ -0,0 +1,81 @@
+.rewind-report-page.-word-cloud {
+  .rewind-card__image img {
+    width: 35px;
+    height: 35px;
+  }
+}
+
+.rewind-card__wrapper {
+  width: 150px;
+  height: 100px;
+  perspective: 1000px;
+  will-change: transform;
+  transform-style: preserve-3d;
+  border-radius: 0.25vw;
+  cursor: pointer;
+  animation-name: ambientMovement;
+  animation-duration: 4000ms;
+  animation-delay: calc(-4000ms * var(--rand));
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  transform: rotateZ(calc(var(--ambientAmount) * 10deg));
+  z-index: 1;
+  .rewind-card__inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    transform-style: preserve-3d;
+    transition: transform;
+    transition-duration: 0.5s;
+    transition-timing-function: cubic-bezier(0.73, 0.42, 0.03, 0.78);
+  }
+  &.flipped .rewind-card__inner {
+    transform: rotateY(180deg);
+  }
+  &:hover {
+    animation: flip-zoom 0.5s cubic-bezier(0.73, 0.42, 0.03, 0.78) 0s forwards;
+    z-index: 999;
+  }
+  .rewind-card.-back {
+    transform: rotateY(180deg);
+  }
+  .rewind-card.-front,
+  .rewind-card.-back {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -webkit-backface-visibility: hidden; /* Safari */
+    backface-visibility: hidden;
+  }
+}
+
+@keyframes flip-zoom {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1.25);
+  }
+}
+
+@keyframes ambientMovement {
+  0% {
+    --ambientAmount: 0.1;
+  }
+  50% {
+    --ambientAmount: -0.1;
+  }
+  100% {
+    --ambientAmount: 0.1;
+  }
+}
+
+@property --ambientAmount {
+  syntax: "<number>";
+  inherits: true;
+  initial-value: 0.1;
+}

assets/stylesheets/common/word-cloud.scss

@@ -1,2 +0,0 @@
-.rewind-report-page.-word-cloud {
-}