From 28a4eac40e12125c38f3effff52f66bd02aea9c0 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 19 Mar 2024 15:50:50 +0100
Subject: [PATCH] refactor(quote rate modal): use new modal system

---
 frontend/src/html/popups.html                 |  36 ++--
 frontend/src/styles/popups.scss               |  41 +++--
 frontend/src/styles/z_media-queries.scss      |   5 +-
 frontend/src/ts/event-handlers/test.ts        |  11 ++
 .../quote-rate.ts}                            | 165 ++++++++----------
 frontend/src/ts/test/result.ts                |   5 +-
 frontend/src/ts/test/test-logic.ts            |   4 +-
 7 files changed, 125 insertions(+), 142 deletions(-)
 rename frontend/src/ts/{popups/quote-rate-popup.ts => modals/quote-rate.ts} (57%)

diff --git a/frontend/src/html/popups.html b/frontend/src/html/popups.html
index e6b011c42..e75c94c2c 100644
--- a/frontend/src/html/popups.html
+++ b/frontend/src/html/popups.html
@@ -273,8 +273,8 @@
   </div>
 </div>
 
-<div id="quoteRatePopupWrapper" class="popupWrapper hidden">
-  <div id="quoteRatePopup" quoteId="">
+<dialog id="quoteRateModal" class="modalWrapper hidden">
+  <div class="modal">
     <div class="warning">
       If you find a grammatical error, think the quote has inappropriate
       language or feel like it's low quality -
@@ -311,21 +311,21 @@
       <div class="starsWrapper">
         <div class="top">your rating</div>
         <div class="stars">
-          <div class="star active" rating="1">
+          <button class="star" data-rating="1">
             <i class="fas fa-fw fa-star"></i>
-          </div>
-          <div class="star active" rating="2">
+          </button>
+          <button class="star" data-rating="2">
             <i class="fas fa-fw fa-star"></i>
-          </div>
-          <div class="star active" rating="3">
+          </button>
+          <button class="star" data-rating="3">
             <i class="fas fa-fw fa-star"></i>
-          </div>
-          <div class="star" rating="4">
+          </button>
+          <button class="star" data-rating="4">
             <i class="fas fa-fw fa-star"></i>
-          </div>
-          <div class="star" rating="5">
+          </button>
+          <button class="star" data-rating="5">
             <i class="fas fa-fw fa-star"></i>
-          </div>
+          </button>
         </div>
       </div>
     </div>
@@ -344,17 +344,15 @@
             <i class="fas fa-star"></i>
             <i class="fas fa-star"></i>
           </div> -->
-    <span
+    <button
+      class="textButton submitButton"
       aria-label="Submit review"
       data-balloon-pos="up"
-      style="display: grid"
     >
-      <div class="textButton submitButton">
-        <i class="fas fa-chevron-right"></i>
-      </div>
-    </span>
+      <i class="fas fa-chevron-right"></i>
+    </button>
   </div>
-</div>
+</dialog>
 
 <dialog id="importExportSettingsModal" class="modalWrapper hidden">
   <form class="modal" data-mode="">
diff --git a/frontend/src/styles/popups.scss b/frontend/src/styles/popups.scss
index 0877b1fc8..2639bf637 100644
--- a/frontend/src/styles/popups.scss
+++ b/frontend/src/styles/popups.scss
@@ -339,15 +339,10 @@
   }
 }
 
-#quoteRatePopupWrapper {
-  #quoteRatePopup {
-    color: var(--sub-color);
-    background: var(--bg-color);
-    border-radius: var(--roundness);
-    padding: 2rem;
-    display: grid;
-    gap: 2rem;
-    width: 800px;
+#quoteRateModal {
+  .modal {
+    max-width: 800px;
+    overflow: unset;
 
     display: grid;
     grid-template-areas: "warning warning warning" "spacer2 spacer2 spacer2" "ratingStats ratingStats submitButton" "spacer spacer spacer" "quote quote quote";
@@ -375,7 +370,7 @@
       grid-area: spacer2;
     }
 
-    .submitButton {
+    button.submitButton {
       font-size: 2rem;
       grid-area: submitButton;
       color: var(--sub-color);
@@ -432,15 +427,23 @@
       justify-content: flex-start;
       align-items: center;
       cursor: pointer;
-    }
-    .star {
-      transition: 0.125s;
-    }
-    i {
-      pointer-events: none;
-    }
-    .star.active {
-      color: var(--text-color);
+      button.star {
+        padding: 0;
+        background: none;
+        color: var(--sub-color);
+        &:hover.active {
+          color: var(--text-color);
+        }
+      }
+      i {
+        pointer-events: none;
+      }
+      .star.active {
+        color: var(--main-color);
+      }
+      // &:hover .star.active {
+      //   color: var(--text-color);
+      // }
     }
   }
 }
diff --git a/frontend/src/styles/z_media-queries.scss b/frontend/src/styles/z_media-queries.scss
index 984109bd0..7ce60e109 100644
--- a/frontend/src/styles/z_media-queries.scss
+++ b/frontend/src/styles/z_media-queries.scss
@@ -131,9 +131,6 @@
 
 //1000px
 @media only screen and (max-width: 62.5rem) {
-  #quoteRatePopup {
-    width: 90vw !important;
-  }
   footer {
     .leftright {
       .left {
@@ -588,7 +585,7 @@
       }
     }
   }
-  #quoteRatePopup {
+  #quoteRateModal {
     .ratingStats {
       grid-template-columns: 1fr 1fr !important;
     }
diff --git a/frontend/src/ts/event-handlers/test.ts b/frontend/src/ts/event-handlers/test.ts
index 51d57e75b..da232bca8 100644
--- a/frontend/src/ts/event-handlers/test.ts
+++ b/frontend/src/ts/event-handlers/test.ts
@@ -4,6 +4,9 @@ import * as DB from "../db";
 import * as EditResultTagsModal from "../modals/edit-result-tags";
 import * as MobileTestConfigModal from "../modals/mobile-test-config";
 import * as CustomTestDurationModal from "../modals/custom-test-duration";
+import * as TestWords from "../test/test-words";
+import * as Notifications from "../elements/notifications";
+import * as QuoteRateModal from "../modals/quote-rate";
 
 $(".pageTest").on("click", "#testModesNotice .textButton", async (event) => {
   const attr = $(event.currentTarget).attr("commands");
@@ -41,3 +44,11 @@ $(".pageTest").on("click", ".tags .editTagsButton", () => {
 $(".pageTest").on("click", "#mobileTestConfigButton", () => {
   MobileTestConfigModal.show();
 });
+
+$(".pageTest #rateQuoteButton").on("click", async () => {
+  if (TestWords.randomQuote === null) {
+    Notifications.add("Failed to show quote rating popup: no quote", -1);
+    return;
+  }
+  QuoteRateModal.show(TestWords.randomQuote);
+});
diff --git a/frontend/src/ts/popups/quote-rate-popup.ts b/frontend/src/ts/modals/quote-rate.ts
similarity index 57%
rename from frontend/src/ts/popups/quote-rate-popup.ts
rename to frontend/src/ts/modals/quote-rate.ts
index a43dbf8c2..11a2f73d8 100644
--- a/frontend/src/ts/popups/quote-rate-popup.ts
+++ b/frontend/src/ts/modals/quote-rate.ts
@@ -1,12 +1,8 @@
 import Ape from "../ape";
 import * as DB from "../db";
-import * as TestWords from "../test/test-words";
 import * as Loader from "../elements/loader";
 import * as Notifications from "../elements/notifications";
-import * as Skeleton from "../utils/skeleton";
-import { isPopupVisible } from "../utils/misc";
-
-const wrapperId = "quoteRatePopupWrapper";
+import AnimatedModal, { ShowOptions } from "../utils/animated-modal";
 
 let rating = 0;
 
@@ -21,13 +17,17 @@ type QuoteStats = {
 let quoteStats: QuoteStats | null | Record<string, never> = null;
 let currentQuote: MonkeyTypes.Quote | null = null;
 
+export function clearQuoteStats(): void {
+  quoteStats = null;
+}
+
 function reset(): void {
-  $(`#quoteRatePopup .quote .text`).text("-");
-  $(`#quoteRatePopup .quote .source .val`).text("-");
-  $(`#quoteRatePopup .quote .id .val`).text("-");
-  $(`#quoteRatePopup .quote .length .val`).text("-");
-  $("#quoteRatePopup .ratingCount .val").text("-");
-  $("#quoteRatePopup .ratingAverage .val").text("-");
+  $(`#quoteRateModal .quote .text`).text("-");
+  $(`#quoteRateModal .quote .source .val`).text("-");
+  $(`#quoteRateModal .quote .id .val`).text("-");
+  $(`#quoteRateModal .quote .length .val`).text("-");
+  $("#quoteRateModal .ratingCount .val").text("-");
+  $("#quoteRateModal .ratingAverage .val").text("-");
 }
 
 function getRatingAverage(quoteStats: QuoteStats): number {
@@ -68,16 +68,16 @@ export async function getQuoteStats(
 
 function refreshStars(force?: number): void {
   const limit = force ? force : rating;
-  $(`#quoteRatePopup .star`).removeClass("active");
+  $(`#quoteRateModal .star`).removeClass("active");
   for (let i = 1; i <= limit; i++) {
-    $(`#quoteRatePopup .star[rating=${i}]`).addClass("active");
+    $(`#quoteRateModal .star[data-rating=${i}]`).addClass("active");
   }
 }
 
 async function updateRatingStats(): Promise<void> {
   if (!quoteStats) await getQuoteStats();
-  $("#quoteRatePopup .ratingCount .val").text(quoteStats?.ratings ?? "0");
-  $("#quoteRatePopup .ratingAverage .val").text(
+  $("#quoteRateModal .ratingCount .val").text(quoteStats?.ratings ?? "0");
+  $("#quoteRateModal .ratingAverage .val").text(
     quoteStats?.average?.toFixed(1) ?? "-"
   );
 }
@@ -94,61 +94,39 @@ function updateData(): void {
   } else if (currentQuote.group === 3) {
     lengthDesc = "thicc";
   }
-  $(`#quoteRatePopup .quote .text`).text(currentQuote.text);
-  $(`#quoteRatePopup .quote .source .val`).text(currentQuote.source);
-  $(`#quoteRatePopup .quote .id .val`).text(currentQuote.id);
-  $(`#quoteRatePopup .quote .length .val`).text(lengthDesc as string);
+  $(`#quoteRateModal .quote .text`).text(currentQuote.text);
+  $(`#quoteRateModal .quote .source .val`).text(currentQuote.source);
+  $(`#quoteRateModal .quote .id .val`).text(currentQuote.id);
+  $(`#quoteRateModal .quote .length .val`).text(lengthDesc as string);
   void updateRatingStats();
 }
 
-function show(quote: MonkeyTypes.Quote, shouldReset = true): void {
-  Skeleton.append(wrapperId, "popups");
-
-  if (!isPopupVisible(wrapperId)) {
-    if (shouldReset) {
+export function show(
+  quote: MonkeyTypes.Quote,
+  showOptions?: ShowOptions
+): void {
+  void modal.show({
+    ...showOptions,
+    beforeAnimation: async () => {
       reset();
-    }
-
-    currentQuote = quote;
-    rating = 0;
-
-    const snapshot = DB.getSnapshot();
-    const alreadyRated =
-      snapshot?.quoteRatings?.[currentQuote.language]?.[currentQuote.id];
-    if (alreadyRated) {
-      rating = alreadyRated;
-    }
-
-    refreshStars();
-    updateData();
-    $("#quoteRatePopupWrapper")
-      .stop(true, true)
-      .css("opacity", 0)
-      .removeClass("hidden")
-      .animate({ opacity: 1 }, 125);
-  }
+      currentQuote = quote;
+      rating = 0;
+      const snapshot = DB.getSnapshot();
+      const alreadyRated =
+        snapshot?.quoteRatings?.[currentQuote.language]?.[currentQuote.id];
+      if (alreadyRated) {
+        rating = alreadyRated;
+      }
+      refreshStars();
+      updateData();
+    },
+  });
 }
 
-function hide(): void {
-  if (isPopupVisible(wrapperId)) {
-    $("#quoteRatePopupWrapper")
-      .stop(true, true)
-      .css("opacity", 1)
-      .animate(
-        {
-          opacity: 0,
-        },
-        125,
-        () => {
-          $("#quoteRatePopupWrapper").addClass("hidden");
-          Skeleton.remove(wrapperId);
-        }
-      );
-  }
-}
-
-export function clearQuoteStats(): void {
-  quoteStats = null;
+function hide(clearChain = false): void {
+  void modal.hide({
+    clearModalChain: clearChain,
+  });
 }
 
 async function submit(): Promise<void> {
@@ -159,7 +137,7 @@ async function submit(): Promise<void> {
     return;
   }
 
-  hide();
+  hide(true);
 
   const response = await Ape.quotes.addRating(currentQuote, rating);
   Loader.hide();
@@ -219,37 +197,32 @@ async function submit(): Promise<void> {
   $(".pageTest #result #rateQuoteButton .icon").addClass("fas");
 }
 
-$("#quoteRatePopupWrapper").on("click", (e) => {
-  if ($(e.target).attr("id") === "quoteRatePopupWrapper") {
-    hide();
+function setup(modalEl: HTMLElement): void {
+  modalEl.querySelector(".submitButton")?.addEventListener("click", () => {
+    void submit();
+  });
+  const starButtons = modalEl.querySelectorAll(".stars button.star");
+  for (const button of starButtons) {
+    button.addEventListener("click", (e) => {
+      const ratingValue = parseInt(
+        (e.currentTarget as HTMLElement).getAttribute("data-rating") as string
+      );
+      rating = ratingValue;
+      refreshStars();
+    });
+    button.addEventListener("mouseenter", (e) => {
+      const ratingHover = parseInt(
+        (e.currentTarget as HTMLElement).getAttribute("data-rating") as string
+      );
+      refreshStars(ratingHover);
+    });
+    button.addEventListener("mouseleave", () => {
+      refreshStars();
+    });
   }
-});
+}
 
-$("#quoteRatePopupWrapper .stars .star").on("mouseenter mouseleave", (e) => {
-  const ratingHover = parseInt($(e.currentTarget).attr("rating") as string);
-  refreshStars(ratingHover);
+const modal = new AnimatedModal({
+  dialogId: "quoteRateModal",
+  setup,
 });
-
-$("#quoteRatePopupWrapper .stars .star").on("click", (e) => {
-  const ratingHover = parseInt($(e.currentTarget).attr("rating") as string);
-  rating = ratingHover;
-});
-
-$("#quoteRatePopupWrapper .stars .star").on("mouseout", () => {
-  $(`#quoteRatePopup .star`).removeClass("active");
-  refreshStars();
-});
-
-$("#quoteRatePopupWrapper .submitButton").on("click", () => {
-  void submit();
-});
-
-$(".pageTest #rateQuoteButton").on("click", async () => {
-  if (TestWords.randomQuote === null) {
-    Notifications.add("Failed to show quote rating popup: no quote", -1);
-    return;
-  }
-  show(TestWords.randomQuote);
-});
-
-Skeleton.save(wrapperId);
diff --git a/frontend/src/ts/test/result.ts b/frontend/src/ts/test/result.ts
index 513141c69..6b6cb75ea 100644
--- a/frontend/src/ts/test/result.ts
+++ b/frontend/src/ts/test/result.ts
@@ -9,7 +9,7 @@ import * as Loader from "../elements/loader";
 import * as Notifications from "../elements/notifications";
 import * as ThemeColors from "../elements/theme-colors";
 import { isAuthenticated } from "../firebase";
-import * as QuoteRatePopup from "../popups/quote-rate-popup";
+import * as quoteRateModal from "../modals/quote-rate";
 import * as GlarsesMode from "../states/glarses-mode";
 import * as SlowTimer from "../states/slow-timer";
 import * as Misc from "../utils/misc";
@@ -666,7 +666,8 @@ export function updateRateQuote(randomQuote: MonkeyTypes.Quote | null): void {
         .removeClass("far")
         .addClass("fas");
     }
-    QuoteRatePopup.getQuoteStats(randomQuote)
+    quoteRateModal
+      .getQuoteStats(randomQuote)
       .then((quoteStats) => {
         $(".pageTest #result #rateQuoteButton .rating").text(
           quoteStats?.average?.toFixed(1) ?? ""
diff --git a/frontend/src/ts/test/test-logic.ts b/frontend/src/ts/test/test-logic.ts
index 9b547f3f9..1cfcaf9eb 100644
--- a/frontend/src/ts/test/test-logic.ts
+++ b/frontend/src/ts/test/test-logic.ts
@@ -30,7 +30,7 @@ import * as DB from "../db";
 import * as Replay from "./replay";
 import * as TodayTracker from "./today-tracker";
 import * as ChallengeContoller from "../controllers/challenge-controller";
-import * as QuoteRatePopup from "../popups/quote-rate-popup";
+import * as QuoteRateModal from "../modals/quote-rate";
 import * as Result from "./result";
 import * as MonkeyPower from "../elements/monkey-power";
 import * as ActivePage from "../states/active-page";
@@ -273,7 +273,7 @@ export function restart(options = {} as RestartOptions): void {
   TestInput.input.setKoreanStatus(false);
   LayoutfluidFunboxTimer.hide();
   MemoryFunboxTimer.reset();
-  QuoteRatePopup.clearQuoteStats();
+  QuoteRateModal.clearQuoteStats();
   TestUI.reset();
 
   if (TestUI.resultVisible) {