allow multiple css funboxes

monkeytypegame · Dec 4, 2024 · d9662ea · d9662ea
1 parent f0debe6
commit d9662ea
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 34 deletions.
diff --git a/frontend/src/email-handler.html b/frontend/src/email-handler.html
@@ -7,7 +7,6 @@
     <!-- <link rel="stylesheet" href="css/fa.css" /> -->
     <link rel="stylesheet" href="css/balloon.min.css" />
     <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
-    <link rel="stylesheet" href="" id="funBoxTheme" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
     <link

diff --git a/frontend/src/index.html b/frontend/src/index.html
@@ -65,7 +65,6 @@
       defer
     ></script>
     <link rel="stylesheet" href="/themes/serika_dark.css" id="currentTheme" />
-    <link rel="stylesheet" href="" id="funBoxTheme" />
     <link rel="stylesheet" href="" id="globalFunBoxTheme" type="text/css" />
     <script type="module" src="ts/index.ts"></script>
   </body>

diff --git a/frontend/src/privacy-policy.html b/frontend/src/privacy-policy.html
@@ -7,7 +7,6 @@
     <!-- <link rel="stylesheet" href="css/fa.css" /> -->
     <link rel="stylesheet" href="css/balloon.min.css" />
     <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
-    <link rel="stylesheet" href="" id="funBoxTheme" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
     <link rel="stylesheet" href="styles/index.scss" />

diff --git a/frontend/src/security-policy.html b/frontend/src/security-policy.html
@@ -7,7 +7,6 @@
     <!-- <link rel="stylesheet" href="css/fa.css" /> -->
     <link rel="stylesheet" href="css/balloon.min.css" />
     <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
-    <link rel="stylesheet" href="" id="funBoxTheme" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
     <link rel="stylesheet" href="styles/index.scss" />

diff --git a/frontend/src/terms-of-service.html b/frontend/src/terms-of-service.html
@@ -7,7 +7,6 @@
     <!-- <link rel="stylesheet" href="css/fa.css" /> -->
     <link rel="stylesheet" href="css/balloon.min.css" />
     <link rel="stylesheet" href="themes/serika_dark.css" id="currentTheme" />
-    <link rel="stylesheet" href="" id="funBoxTheme" />
     <link id="favicon" rel="shortcut icon" href="images/fav.png" />
     <link rel="shortcut icon" href="images/fav.png" />
     <link rel="stylesheet" href="styles/index.scss" />

diff --git a/frontend/src/ts/test/funbox/funbox.ts b/frontend/src/ts/test/funbox/funbox.ts
@@ -72,8 +72,6 @@ export async function clear(): Promise<boolean> {
       ?.join(" ") ?? ""
   );
 
-  $("#funBoxTheme").removeAttr("href");
-
   $("#wordsWrapper").removeClass("hidden");
   MemoryTimer.reset();
   ManualRestart.set();
@@ -226,23 +224,16 @@ async function setFunboxBodyClasses(): Promise<boolean> {
 }
 
 async function applyFunboxCSS(): Promise<boolean> {
-  const $theme = $("#funBoxTheme");
-
-  //currently we only support one active funbox with hasCSS
-  const activeFunboxWithTheme = getActiveFunboxes().find((fb) =>
-    fb?.properties?.includes("hasCssFile")
-  );
-
-  const activeTheme =
-    activeFunboxWithTheme != null
-      ? "funbox/" + activeFunboxWithTheme.name + ".css"
-      : "";
-
-  const currentTheme = ($theme.attr("href") ?? "") || null;
-
-  if (activeTheme != currentTheme) {
-    $theme.attr("href", activeTheme);
-  }
+  $(".funBoxTheme").map((_index, domElement) => domElement.remove());
+  getActiveFunboxes().forEach((funbox) => {
+    if (funbox.properties?.includes("hasCssFile")) {
+      const css = document.createElement("link");
+      css.classList.add("funBoxTheme");
+      css.rel = "stylesheet";
+      css.href = "funbox/" + funbox.name + ".css";
+      document.head.appendChild(css);
+    }
+  });
 
   return true;
 }
diff --git a/frontend/static/funbox/choo_choo.css b/frontend/static/funbox/choo_choo.css
@@ -1,4 +1,4 @@
-@keyframes woah {
+@keyframes choochoo {
   0% {
     transform: rotateZ(0deg);
   }
@@ -13,6 +13,6 @@
 }
 
 #words {
-  --correct-letter-animation: woah 2s infinite linear;
-  --untyped-letter-animation: woah 2s infinite linear;
+  --correct-letter-animation: choochoo 2s infinite linear;
+  --untyped-letter-animation: choochoo 2s infinite linear;
 }
diff --git a/frontend/static/funbox/nausea.css b/frontend/static/funbox/nausea.css
@@ -1,4 +1,4 @@
-@keyframes woah {
+@keyframes nausea {
   0% {
     transform: rotateY(-15deg) skewY(10deg) rotateX(-15deg) scaleX(1.2)
       scaleY(0.9);
@@ -25,7 +25,7 @@
 }
 
 #typingTest {
-  animation: woah 7s infinite cubic-bezier(0.5, 0, 0.5, 1);
+  animation: nausea 7s infinite cubic-bezier(0.5, 0, 0.5, 1);
 }
 
 header {

diff --git a/packages/funbox/src/list.ts b/packages/funbox/src/list.ts
@@ -24,20 +24,23 @@ const list: Record<FunboxName, FunboxMetadata> = {
     properties: ["hasCssFile"],
     canGetPb: true,
     difficultyLevel: 3,
+    cssModification: ["main"],
   },
   upside_down: {
     name: "upside_down",
     description: "Everything is upside down!",
     properties: ["hasCssFile"],
     canGetPb: true,
     difficultyLevel: 3,
+    cssModification: ["main"],
   },
   nausea: {
     name: "nausea",
     description: "I think I'm gonna be sick.",
     canGetPb: true,
     difficultyLevel: 2,
     properties: ["hasCssFile"],
+    cssModification: ["typingTest"],
   },
   round_round_baby: {
     name: "round_round_baby",
@@ -46,6 +49,7 @@ const list: Record<FunboxName, FunboxMetadata> = {
     canGetPb: true,
     difficultyLevel: 3,
     properties: ["hasCssFile"],
+    cssModification: ["typingTest"],
   },
   simon_says: {
     name: "simon_says",
@@ -69,6 +73,7 @@ const list: Record<FunboxName, FunboxMetadata> = {
     frontendFunctions: ["applyConfig", "rememberSettings", "toggleScript"],
     name: "tts",
     description: "Listen closely.",
+    cssModification: ["words"],
   },
   choo_choo: {
     canGetPb: true,
@@ -140,13 +145,15 @@ const list: Record<FunboxName, FunboxMetadata> = {
     difficultyLevel: 1,
     properties: ["hasCssFile", "noLigatures"],
     name: "earthquake",
+    cssModification: ["words"],
   },
   space_balls: {
     description: "In a galaxy far far away.",
     canGetPb: true,
     difficultyLevel: 0,
     properties: ["hasCssFile"],
     name: "space_balls",
+    cssModification: ["body"],
   },
   gibberish: {
     description: "Anvbuefl dizzs eoos alsb?",
@@ -376,6 +383,7 @@ const list: Record<FunboxName, FunboxMetadata> = {
     properties: ["hasCssFile", "noLigatures"],
     frontendFunctions: ["applyGlobalCSS", "clearGlobal"],
     name: "crt",
+    cssModification: ["body"],
   },
   backwards: {
     description: "...sdrawkcab epyt ot yrt woN",

diff --git a/packages/funbox/src/types.ts b/packages/funbox/src/types.ts
@@ -62,6 +62,8 @@ export type FunboxProperty =
   | `toPush:${number}`
   | "wordOrder:reverse";
 
+type FunboxCSSModifications = "typingTest" | "words" | "body" | "main";
+
 export type FunboxMetadata = {
   name: FunboxName;
   alias?: string;
@@ -71,4 +73,5 @@ export type FunboxMetadata = {
   frontendFunctions?: string[];
   difficultyLevel: number;
   canGetPb: boolean;
+  cssModification?: FunboxCSSModifications[];
 };
diff --git a/packages/funbox/src/validation.ts b/packages/funbox/src/validation.ts
@@ -87,10 +87,6 @@ export function checkCompatibility(
         (f.properties?.find((fp) => fp.startsWith("toPush:")) ?? "") ||
         f.frontendFunctions?.includes("pullSection")
     ).length <= 1;
-  const oneCssFileMax =
-    funboxesToCheck.filter((f) =>
-      f.properties?.find((fp) => fp === "hasCssFile")
-    ).length <= 1;
   const onePunctuateWordMax =
     funboxesToCheck.filter((f) =>
       f.frontendFunctions?.includes("punctuateWord")
@@ -106,6 +102,22 @@ export function checkCompatibility(
     funboxesToCheck.filter((f) =>
       f.properties?.find((fp) => fp === "changesCapitalisation")
     ).length <= 1;
+  const oneChangesTypingTestCSS =
+    funboxesToCheck.filter((f) =>
+      f.cssModification?.find((fc) => fc === "typingTest")
+    ).length <= 1;
+  const oneChangesWordsCSS =
+    funboxesToCheck.filter((f) =>
+      f.cssModification?.find((fc) => fc === "words")
+    ).length <= 1;
+  const oneChangesBodyCSS =
+    funboxesToCheck.filter((f) =>
+      f.cssModification?.find((fc) => fc === "body")
+    ).length <= 1;
+  const oneChangesMainCSS =
+    funboxesToCheck.filter((f) =>
+      f.cssModification?.find((fc) => fc === "main")
+    ).length <= 1;
   const allowedConfig = {} as FunboxForcedConfig;
   let noConfigConflicts = true;
   for (const f of funboxesToCheck) {
@@ -143,11 +155,14 @@ export function checkCompatibility(
     oneCanSpeakMax &&
     hasLanguageToSpeakAndNoUnspeakable &&
     oneToPushOrPullSectionMax &&
-    oneCssFileMax &&
     onePunctuateWordMax &&
     oneCharCheckerMax &&
     oneCharReplacerMax &&
     oneChangesCapitalisationMax &&
+    oneChangesTypingTestCSS &&
+    oneChangesWordsCSS &&
+    oneChangesBodyCSS &&
+    oneChangesMainCSS &&
     noConfigConflicts &&
     oneWordOrderMax
   );