books

app/services/discourse_rewind/rewind/action/reading_time.rb

@@ -10,34 +10,35 @@ module DiscourseRewind
       {
         data: {
           reading_time: reading_time,
-          book: best_book_fit(reading_time),
+          book: best_book_fit(reading_time)[:title],
+          isbn: best_book_fit(reading_time)[:isbn]
         },
         identifier: "reading-time",
       }
     end
 
-    def popular_book_reading_time
+    def popular_books
       {
-        "The Hunger Games" => 19_740,
-        "The Metamorphosis" => 3120,
-        "To Kill a Mockingbird" => 22_800,
-        "Pride and Prejudice" => 25_200,
-        "1984" => 16_800,
-        "The Lord of the Rings" => 108_000,
-        "Harry Potter and the Sorcerer's Stone" => 24_600,
-        "The Great Gatsby" => 12_600,
-        "The Little Prince" => 5400,
-        "Animal Farm" => 7200,
-        "The Catcher in the Rye" => 18_000,
-        "Jane Eyre" => 34_200,
-        "Fahrenheit 451" => 15_000,
-        "The Hobbit" => 27_000,
-        "The Da Vinci Code" => 37_800,
-        "Little Women" => 30_000,
-        "One Hundred Years of Solitude" => 46_800,
-        "And Then There Were None" => 16_200,
-        "The Alchemist" => 10_800,
-        "The Hitchhiker's Guide to the Galaxy" => 12_600,
+        "The Hunger Games" => { reading_time: 19_740, isbn: "978-0439023481" },
+        "The Metamorphosis" => { reading_time: 3120, isbn: "978-0553213690" },
+        "To Kill a Mockingbird" => { reading_time: 22_800, isbn: "978-0061120084" },
+        "Pride and Prejudice" => { reading_time: 25_200, isbn: "978-1503290563" },
+        "1984" => { reading_time: 16_800, isbn: "978-0451524935" },
+        "The Lord of the Rings" => { reading_time: 108_000, isbn: "978-0544003415" },
+        "Harry Potter and the Sorcerer's Stone" => { reading_time: 24_600, isbn: "978-0590353427" },
+        "The Great Gatsby" => { reading_time: 12_600, isbn: "978-0743273565" },
+        "The Little Prince" => { reading_time: 5400, isbn: "978-0156012195" },
+        "Animal Farm" => { reading_time: 7200, isbn: "978-0451526342" },
+        "The Catcher in the Rye" => { reading_time: 18_000, isbn: "978-0316769488" },
+        "Jane Eyre" => { reading_time: 34_200, isbn: "978-0141441146" },
+        "Fahrenheit 451" => { reading_time: 15_000, isbn: "978-1451673319" },
+        "The Hobbit" => { reading_time: 27_000, isbn: "978-0547928227" },
+        "The Da Vinci Code" => { reading_time: 37_800, isbn: "978-0307474278" },
+        "Little Women" => { reading_time: 30_000, isbn: "978-0147514011" },
+        "One Hundred Years of Solitude" => { reading_time: 46_800, isbn: "978-0060883287" },
+        "And Then There Were None" => { reading_time: 16_200, isbn: "978-0062073488" },
+        "The Alchemist" => { reading_time: 10_800, isbn: "978-0061122415" },
+        "The Hitchhiker's Guide to the Galaxy" => { reading_time: 12_600, isbn: "978-0345391803" },
       }.symbolize_keys
     end
 
@@ -46,11 +47,23 @@ module DiscourseRewind
       books = []
 
       while reading_time_rest > 0
-        books << popular_book_reading_time.min_by { |_, v| (v - reading_time_rest).abs }.first
-        reading_time_rest -= popular_book_reading_time[books.last]
+        best_fit = popular_books.min_by { |_, v| (v[:reading_time] - reading_time_rest).abs }
+        break if best_fit.nil?
+
+        books << best_fit.first
+        reading_time_rest -= best_fit.last[:reading_time]
       end
 
-      books.group_by(&:itself).transform_values(&:count).max_by { |_, count| count }.first
+      book_title = books.group_by { |book| book }
+                        .transform_values(&:count)
+                        .max_by { |_, count| count }
+                        .first
+      # popular_books[book_title]
+
+      {
+        title: book_title,
+        isbn: popular_books[book_title][:isbn],
+      }
     end
   end
 end

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

@@ -1,13 +1,29 @@
 import Component from "@glimmer/component";
 
-// eslint-disable-next-line ember/no-empty-glimmer-component-classes
 export default class ReadingTime extends Component {
+  get readTimeString() {
+    let totalMinutes = Math.floor(this.args.report.data.reading_time / 60);
+    let leftOverMinutes = totalMinutes % 60;
+    let totalHours = (totalMinutes - leftOverMinutes) / 60;
+
+    return `${totalHours}h ${leftOverMinutes}m`;
+  }
+
   <template>
     <div class="rewind-report-page -reading-time">
-      <h2 class="rewind-report-title">Reading time</h2>
       <div class="rewind-report-container">
-        <span class="reading-time__time">{{@report.data.reading_time}}</span>
-        <span class="reading-time__book">{{@report.data.book}}</span>
+        <p class="reading-time__text">You spent
+          <code>{{this.readTimeString}}</code>
+          reading on our site! That's the time it would take to read through
+          <i>{{@report.data.book}}</i></p>
+        <div class="reading-time__book">
+          <div class="book">
+            <img
+              alt=""
+              src="/plugins/discourse-rewind/images/books/{{@report.data.isbn}}.jpg"
+            />
+          </div>
+        </div>
       </div>
     </div>
   </template>

assets/javascripts/discourse/components/rewind.gjs

@@ -109,7 +109,7 @@ export default class Rewind extends Component {
             <div class="rewind-report">
               <Introduction />
             </div>
-
+            {{log this.rewind}}
             {{#each this.rewind as |report|}}
               <div class={{concatClass "rewind-report" report.identifier}}>
                 {{#if (eq report.identifier "reactions")}}

assets/stylesheets/common/index.scss

@@ -10,3 +10,4 @@
 @import "favorite-tags";
 @import "favorite-categories";
 @import "fonts";
+@import "reading-time";

assets/stylesheets/common/reading-time.scss

@@ -0,0 +1,93 @@
+.reading-time__book {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  perspective: 1000px;
+}
+
+.book {
+  width: 150px;
+  height: 200px;
+  position: relative;
+  transform-style: preserve-3d;
+  transform: rotateY(-20deg);
+}
+
+.reading-time code {
+  background-color: rgba(var(--primary-rgb), 0.15);
+}
+
+.book > :first-child {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 150px;
+  height: 200px;
+  transform: translateZ(17.5px);
+  background-color: #01060f;
+  border-radius: 0 5px 5px 0;
+  box-shadow: 5px 5px 20px rgba(var(--primary-rgb), 0.05);
+}
+
+.book::before {
+  position: absolute;
+  content: " ";
+  background-color: blue;
+  left: 0;
+  top: 4px;
+  width: 33px;
+  height: 192px;
+  transform: translateX(128.5px) rotateY(90deg);
+  background: linear-gradient(
+    90deg,
+    #fff 0%,
+    #f9f9f9 5%,
+    #fff 10%,
+    #f9f9f9 15%,
+    #fff 20%,
+    #f9f9f9 25%,
+    #fff 30%,
+    #f9f9f9 35%,
+    #fff 40%,
+    #f9f9f9 45%,
+    #fff 50%,
+    #f9f9f9 55%,
+    #fff 60%,
+    #f9f9f9 65%,
+    #fff 70%,
+    #f9f9f9 75%,
+    #fff 80%,
+    #f9f9f9 85%,
+    #fff 90%,
+    #f9f9f9 95%,
+    #fff 100%
+  );
+}
+
+.book::after {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: " ";
+  width: 150px;
+  height: 200px;
+  transform: translateZ(-17.5px);
+  background-color: var(--book-color);
+  border-radius: 0 5px 5px 0;
+}
+
+.reading-time__text {
+  font-weight: normal;
+  width: 50%;
+}
+
+.reading-time .rewind-report-container {
+  max-width: 600px;
+  gap: 1em;
+  padding: 1.5em;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #11be6d;
+  --book-color: rgba(var(--primary-rgb), 0.4);
+  border-radius: 2px;
+}

assets/stylesheets/common/report.scss

@@ -4,7 +4,6 @@
   justify-content: center;
   padding: 1em;
   box-sizing: border-box;
-  font-weight: 700;
   font-size: var(--font-up-2);
   width: 100%;
   gap: 1em;