diff --git a/assets/javascripts/discourse/components/reports/top-words/word-card.gjs b/assets/javascripts/discourse/components/reports/top-words/word-card.gjs
index 65b8213..2872646 100644
--- a/assets/javascripts/discourse/components/reports/top-words/word-card.gjs
+++ b/assets/javascripts/discourse/components/reports/top-words/word-card.gjs
@@ -4,14 +4,15 @@ import { action } from "@ember/object";
import didInsert from "@ember/render-modifiers/modifiers/did-insert";
import { htmlSafe } from "@ember/template";
import concatClass from "discourse/helpers/concat-class";
+import emoji from "discourse/helpers/emoji";
import discourseLater from "discourse/lib/later";
const MYSTERY_EMOJIS = [
- "mag", // 🔍
- "question", // ❓
- "8ball", // 🎱
- "crystal_ball", // 🔮
- "crescent_moon", // 🌙
+ "floppy_disk",
+ "videocassette",
+ "computer_disk",
+ "pager",
+ "fax",
];
const BACKGROUND_COLORS = [
@@ -80,12 +81,21 @@ export default class WordCard extends Component {
"rewind-card__wrapper"
(if this.longWord "-long-word")
}}
+ style={{this.cardStyle}}
{{didInsert this.registerCardContainer}}
role="button"
>
-
+ {{emoji
+ this.mysteryData.emoji
+ }}
+ {{emoji
+ this.mysteryData.emoji
+ }}
+ {{emoji
+ this.mysteryData.emoji
+ }}
{{@word}}
diff --git a/assets/stylesheets/common/top-words.scss b/assets/stylesheets/common/top-words.scss
index 4f63233..ffefb62 100644
--- a/assets/stylesheets/common/top-words.scss
+++ b/assets/stylesheets/common/top-words.scss
@@ -85,44 +85,9 @@
height: 125px;
}
- &:nth-child(1) {
- .-front {
- background-image: url("/plugins/discourse-rewind/images/cards/01-robot.gif");
- }
- }
-
- &:nth-child(2) {
- .-front {
- background-image: url("/plugins/discourse-rewind/images/cards/07-beach.gif");
- }
- }
-
- &:nth-child(3) {
- .-front {
- background-image: url("/plugins/discourse-rewind/images/cards/02-castle.gif");
- }
- }
-
- &:nth-child(4) {
- .-front {
- background-image: url("/plugins/discourse-rewind/images/cards/06-nature.gif");
- }
- }
-
- &:nth-child(5) {
- .-front {
- background-image: url("/plugins/discourse-rewind/images/cards/04-hand.gif");
- }
- }
-
.rewind-card {
box-shadow: 0 0 0 4px rgb(var(--mystery-color-light), 1);
border: none;
-
- @if is-dark-color-scheme() {
- background-color: var(--primary-200);
- box-shadow: 0 0 0 4px rgb(var(--mystery-color-dark), 1);
- }
}
.rewind-card__inner {
@@ -164,9 +129,31 @@
}
}
+ .rewind-card.-front {
+ padding: 0.5em;
+ display: grid;
+ grid-template:
+ "tl . . " 1fr
+ ". . . " 1fr
+ ". cr . " 3fr
+ ". . . " 1fr
+ ". . br" 1fr
+ / 1fr 3fr 1fr;
+ background:
+ radial-gradient(
+ circle at 4px 4px,
+ rgb(0 0 0 / 0.05) 1px,
+ var(--rewind-white) 1px,
+ var(--rewind-white) 6px
+ )
+ 0 0 / 6px 6px,
+ var(--rewind-white);
+ }
+
.rewind-card.-back {
transform: rotateY(180deg);
background-color: var(--rewind-white);
+ color: var(--rewind-black);
}
.rewind-card.-front,
@@ -177,11 +164,6 @@
backface-visibility: hidden;
}
- .rewind-card.-front {
- background-size: cover;
- padding: 0.5em;
- }
-
&.-long-word .rewind-card__title {
font-size: var(--font-0);
}
@@ -193,6 +175,11 @@
.rewind-card__title {
overflow-wrap: anywhere;
hyphens: auto;
+ line-height: 1;
+ }
+
+ .rewind-card__data {
+ margin-top: 0.5em;
}
.rewind-card__image {
diff --git a/public/images/cards/01-robot.gif b/public/images/cards/01-robot.gif
deleted file mode 100644
index afff05f..0000000
Binary files a/public/images/cards/01-robot.gif and /dev/null differ
diff --git a/public/images/cards/02-castle.gif b/public/images/cards/02-castle.gif
deleted file mode 100644
index 9ab26fa..0000000
Binary files a/public/images/cards/02-castle.gif and /dev/null differ
diff --git a/public/images/cards/04-hand.gif b/public/images/cards/04-hand.gif
deleted file mode 100644
index 81225c9..0000000
Binary files a/public/images/cards/04-hand.gif and /dev/null differ
diff --git a/public/images/cards/06-nature.gif b/public/images/cards/06-nature.gif
deleted file mode 100644
index fc50ace..0000000
Binary files a/public/images/cards/06-nature.gif and /dev/null differ
diff --git a/public/images/cards/07-beach.gif b/public/images/cards/07-beach.gif
deleted file mode 100644
index 88c158e..0000000
Binary files a/public/images/cards/07-beach.gif and /dev/null differ