latest

assets/javascripts/discourse/components/reports/reading-time.gjs

@@ -20,7 +20,7 @@ export default class ReadingTime extends Component {
           <div class="book">
             <img
               alt=""
-              src="/plugins/discourse-rewind/images/books/{{@report.data.isbn}}.jpg"
+              src="/plugins/discourse-rewind/images/books/978-0451524935.jpg"
             />
           </div>
         </div>

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

@@ -1,29 +1,54 @@
 import Component from "@glimmer/component";
 import { fn } from "@ember/helper";
+import { concat } 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 {
+  // const mysteryEmojis = [
+  //     "mag", // 🔍
+  //     "question", // ❓
+  //     "8ball", // 🎱
+  //     "crystal_ball", // 🔮
+  //     "crescent_moon", // 🌙
+  //   ];
+
+  //   const backgroundColors = [
+  //     "#FBF5AF",
+  //     "#28ABE2",
+  //     "#F0794A",
+  //     "#E84A51",
+  //     "#FBF5AF",
+  //   ];
+
   get randomStyle() {
     return `--rand: ${Math.random()}`;
   }
 
-  get mysteryEmoji() {
+  get mysteryData() {
     const mysteryEmojis = [
       "mag", // 🔍
-      "man_detective", // 🕵️
       "question", // ❓
       "8ball", // 🎱
       "crystal_ball", // 🔮
-      "key", // 🗝️
       "crescent_moon", // 🌙
-      "milky_way", // 🌌
+    ];
+
+    const backgroundColors = [
+      "#FBF5AF",
+      "#28ABE2",
+      "#F0794A",
+      "#E84A51",
+      "#FBF5AF",
     ];
 
     const randomIndex = Math.floor(Math.random() * mysteryEmojis.length);
-    return mysteryEmojis[randomIndex];
+    return {
+      emoji: mysteryEmojis[randomIndex],
+      color: `--mystery-color: ${backgroundColors[randomIndex]}`,
+    };
   }
 
   @action
@@ -40,12 +65,20 @@ export default class WordCard extends Component {
     <div
       {{on "click" (fn this.handleClick)}}
       class="rewind-card__wrapper"
-      style={{this.randomStyle}}
+      style={{concat this.randomStyle "; " this.mysteryData.color ";"}}
       {{didInsert this.registerCardContainer}}
     >
       <div class="rewind-card__inner">
         <div class="rewind-card -front">
-          <span class="rewind-card__image">{{emoji this.mysteryEmoji}}</span>
+          <span class="rewind-card__image tl">{{emoji
+              this.mysteryData.emoji
+            }}</span>
+          <span class="rewind-card__image cr">{{emoji
+              this.mysteryData.emoji
+            }}</span>
+          <span class="rewind-card__image br">{{emoji
+              this.mysteryData.emoji
+            }}</span>
         </div>
         <div class="rewind-card -back">
           <span class="rewind-card__title">{{@word}}</span>

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

@@ -5,9 +5,10 @@ import WordCard from "discourse/plugins/discourse-rewind/discourse/components/re
 export default class WordCards extends Component {
   <template>
     <div class="rewind-report-page -word-cloud">
-      <h2 class="rewind-report-title">Most used words</h2>
+      <h2 class="rewind-report-title">Word Usage</h2>
       <div class="rewind-report-container">
         {{#each-in @report.data as |word count|}}
+          {{! can we pass in an index here? This way inside word-card.gjs instead of random colors & images chosen, we just set them to be static }}
           <WordCard @word={{word}} @count={{count}} />
         {{/each-in}}
       </div>

assets/stylesheets/common/activity-calendar.scss

@@ -28,7 +28,7 @@
       background: var(--tertiary-medium);
     }
     &.-high {
-      background: var(--tertiary-hig);
+      background: var(--tertiary-high);
     }
   }
 }

assets/stylesheets/common/word-card.scss

@@ -1,13 +1,6 @@
-.rewind-report-page.-word-cloud {
-  .rewind-card__image img {
-    width: 35px;
-    height: 35px;
-  }
-}
-
 .rewind-card__wrapper {
   width: 150px;
-  height: 100px;
+  height: 175px;
   perspective: 1000px;
   will-change: transform;
   transform-style: preserve-3d;
@@ -20,6 +13,10 @@
   animation-timing-function: ease-in-out;
   transform: rotateZ(calc(var(--ambientAmount) * 10deg));
   z-index: 1;
+  .rewind-card {
+    box-shadow: 0 0 0 4px var(--mystery-color);
+    border: none;
+  }
   .rewind-card__inner {
     position: relative;
     width: 100%;
@@ -39,6 +36,8 @@
   }
   .rewind-card.-back {
     transform: rotateY(180deg);
+    background-color: var(--secondary);
+    border: 1px solid var(--primary-100);
   }
   .rewind-card.-front,
   .rewind-card.-back {
@@ -48,6 +47,39 @@
     -webkit-backface-visibility: hidden; /* Safari */
     backface-visibility: hidden;
   }
+  .rewind-card.-front {
+    padding: 0.5em;
+    display: grid;
+    grid-template:
+      "tl .  . " 1fr
+      ".  .  . " 1fr
+      ".  cr . " 3fr
+      ".  .  . " 1fr
+      ".  .  br" 1fr
+      / 1fr 3fr 1fr;
+  }
+  .rewind-card__image.tl {
+    grid-area: tl;
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+  .rewind-card__image.cr {
+    grid-area: cr;
+    img {
+      width: 50px;
+      height: 50px;
+    }
+  }
+  .rewind-card__image.br {
+    grid-area: br;
+    img {
+      width: 20px;
+      height: 20px;
+      transform: rotate(180deg);
+    }
+  }
 }
 
 @keyframes flip-zoom {