From e2684c925c9fc7b1382fa7bb4be01e524f28393d Mon Sep 17 00:00:00 2001
From: Christian Fehmer <fehmer@users.noreply.github.com>
Date: Mon, 6 Jan 2025 11:34:08 +0100
Subject: [PATCH] fix: some funboxes not working if reduced motion is preferred
 (@fehmer) (#6104)

---
 frontend/src/styles/media-queries.scss |  3 ++-
 frontend/src/ts/test/funbox/funbox.ts  | 19 +++++++++++++------
 packages/funbox/src/list.ts            | 15 ++++++++++-----
 packages/funbox/src/types.ts           |  3 ++-
 4 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/frontend/src/styles/media-queries.scss b/frontend/src/styles/media-queries.scss
index 53730d5ec..cf1cfb4ca 100644
--- a/frontend/src/styles/media-queries.scss
+++ b/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;
 
diff --git a/frontend/src/ts/test/funbox/funbox.ts b/frontend/src/ts/test/funbox/funbox.ts
index 0aa9856ed..0a7ea8f67 100644
--- a/frontend/src/ts/test/funbox/funbox.ts
+++ b/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+/) ?? [];
 
-  $body.attr("class", [...currentClasses, ...activeFbClasses].join(" "));
+  if (
+    getActiveFunboxes().some((it) =>
+      it.properties?.includes("ignoreReducedMotion")
+    )
+  ) {
+    currentClasses.push("ignore-reduced-motion");
+  }
+
+  $body.attr(
+    "class",
+    [...new Set([...currentClasses, ...activeFbClasses]).keys()].join(" ")
+  );
 
   return true;
 }
diff --git a/packages/funbox/src/list.ts b/packages/funbox/src/list.ts
index 9038e3867..b1084d704 100644
--- a/packages/funbox/src/list.ts
+++ b/packages/funbox/src/list.ts
@@ -37,7 +37,7 @@ 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",
@@ -45,7 +45,7 @@ const list: Record<FunboxName, FunboxMetadata> = {
       "...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: {
diff --git a/packages/funbox/src/types.ts b/packages/funbox/src/types.ts
index cd9e0c481..9e0336aac 100644
--- a/packages/funbox/src/types.ts
+++ b/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;