fix: some funboxes not working if reduced motion is preferred (@fehmer) (monkeytypegame#6104)

Author: fehmer

frontend/src/styles/media-queries.scss

@@ -1041,7 +1041,8 @@ body {
 }
 
 @media (prefers-reduced-motion) {
-  *:not(.fa-spin, #backgroundLoader, .preloader) {
+  body:not(.ignore-reduced-motion)
+    *:not(.fa-spin, #backgroundLoader, .preloader) {
     animation: none !important;
     transition: none !important;
 

frontend/src/ts/test/funbox/funbox.ts

@@ -214,13 +214,20 @@ async function setFunboxBodyClasses(): Promise<boolean> {
     (name) => "fb-" + name.replaceAll("_", "-")
   );
 
-  const currentClasses =
-    $body
-      ?.attr("class")
-      ?.split(/\s+/)
-      ?.filter((it) => !it.startsWith("fb-")) ?? [];
+  const currentClasses = $body?.attr("class")?.split(/\s+/) ?? [];
+
+  if (
+    getActiveFunboxes().some((it) =>
+      it.properties?.includes("ignoreReducedMotion")
+    )
+  ) {
+    currentClasses.push("ignore-reduced-motion");
+  }
 
-  $body.attr("class", [...currentClasses, ...activeFbClasses].join(" "));
+  $body.attr(
+    "class",
+    [...new Set([...currentClasses, ...activeFbClasses]).keys()].join(" ")
+  );
 
   return true;
 }

packages/funbox/src/list.ts

@@ -37,15 +37,15 @@ const list: Record<FunboxName, FunboxMetadata> = {
     description: "I think I'm gonna be sick.",
     canGetPb: true,
     difficultyLevel: 2,
-    properties: ["hasCssFile"],
+    properties: ["hasCssFile", "ignoreReducedMotion"],
   },
   round_round_baby: {
     name: "round_round_baby",
     description:
       "...right round, like a record baby. Right, round round round.",
     canGetPb: true,
     difficultyLevel: 3,
-    properties: ["hasCssFile"],
+    properties: ["hasCssFile", "ignoreReducedMotion"],
   },
   simon_says: {
     name: "simon_says",
@@ -73,7 +73,12 @@ const list: Record<FunboxName, FunboxMetadata> = {
   choo_choo: {
     canGetPb: true,
     difficultyLevel: 2,
-    properties: ["hasCssFile", "noLigatures", "conflictsWithSymmetricChars"],
+    properties: [
+      "hasCssFile",
+      "noLigatures",
+      "conflictsWithSymmetricChars",
+      "ignoreReducedMotion",
+    ],
     name: "choo_choo",
     description: "All the letters are spinning!",
   },
@@ -138,14 +143,14 @@ const list: Record<FunboxName, FunboxMetadata> = {
     description: "Everybody get down! The words are shaking!",
     canGetPb: true,
     difficultyLevel: 1,
-    properties: ["hasCssFile", "noLigatures"],
+    properties: ["hasCssFile", "noLigatures", "ignoreReducedMotion"],
     name: "earthquake",
   },
   space_balls: {
     description: "In a galaxy far far away.",
     canGetPb: true,
     difficultyLevel: 0,
-    properties: ["hasCssFile"],
+    properties: ["hasCssFile", "ignoreReducedMotion"],
     name: "space_balls",
   },
   gibberish: {

packages/funbox/src/types.ts

@@ -62,7 +62,8 @@ export type FunboxProperty =
   | "noInfiniteDuration"
   | "noLigatures"
   | `toPush:${number}`
-  | "wordOrder:reverse";
+  | "wordOrder:reverse"
+  | "ignoreReducedMotion";
 
 export type FunboxMetadata = {
   name: FunboxName;