🐪 The Hieroglyphs mode now has animation and vibration when toggled

CHANGELOG.md

@@ -11,7 +11,10 @@
 
 ---
 
-#### Version 3.39
+#### Version 3.39.1
+- **New**: The Hieroglyphs mode now has animation and vibration when toggled
+
+#### Version 3.39 (30.03.2025)
 - **New**: Prima Aprilis hieroglyphs joke
 
 #### Version 3.38 (11.03.2025)

package.json

@@ -9,7 +9,7 @@
     "slowoku"
   ],
   "private": true,
-  "version": "3.39",
+  "version": "3.39.1",
   "type": "module",
   "scripts": {
     "dev": "vite --port 3001",

public/prima-aprilis/fake-hieroglyphs.css

@@ -25,8 +25,56 @@
 
 body[data-prima-aprilis="egypt"] {
   .header-title,
-  .keyboard,
   .game {
-    font-family: "PrimaAprimaFont", "Adobe Blank", "Baloo 2", sans-serif !important;
+    animation: fakeHieroglyphs 0.5s ease-in-out forwards;
+  }
+
+  .key > span:first-child {
+    transform: scale(1.5);
+    animation: fakeHieroglyphsKey 0.5s ease-in-out forwards;
+  }
+}
+
+@keyframes fakeHieroglyphs {
+  0% {
+    font-family: "PrimaAprimaFont", "Adobe Blank", "Baloo 2", sans-serif;
+  }
+
+  20% {
+    font-family: inherit;
+  }
+
+  45% {
+    font-family: "PrimaAprimaFont", "Adobe Blank", "Baloo 2", sans-serif;
+  }
+
+  75% {
+    font-family: inherit;
+  }
+
+  100% {
+    font-family: "PrimaAprimaFont", "Adobe Blank", "Baloo 2", sans-serif;
+  }
+}
+
+@keyframes fakeHieroglyphsKey {
+  0% {
+    scale: 1.2;
+  }
+
+  20% {
+    scale: 1;
+  }
+
+  45% {
+    scale: 1.5;
+  }
+
+  75% {
+    scale: 1;
+  }
+
+  100% {
+    scale: 1.2;
   }
 }

src/features/primaAprilisHieroglyphs/hooks/useAprilFoolsJokeIfApplicable.ts

@@ -40,10 +40,23 @@ export default function useAprilFoolsJokeIfApplicable() {
     if (shouldAddScript) {
       const moreThan0Guesses = guessesLenght > 0;
       const emptyWordToSubmit = wordToSubmit.length === 0;
-      const validStatus = [GameStatus.Guessing, GameStatus.Won, GameStatus.Lost].includes(status);
+      const validStatus = [
+        GameStatus.Guessing,
+        GameStatus.Won,
+        GameStatus.Lost,
+      ].includes(status);
 
       const shouldUseJoke = moreThan0Guesses && emptyWordToSubmit && validStatus;
-      document.body.setAttribute('data-prima-aprilis', shouldUseJoke ? 'egypt' : '');
+      const newValue = shouldUseJoke ? 'egypt' : '';
+      const currentValue = document.body.getAttribute('data-prima-aprilis');
+
+      if (currentValue !== newValue) {
+        document.body.setAttribute('data-prima-aprilis', newValue);
+
+        if (navigator.vibrate) {
+          navigator.vibrate(shouldUseJoke ? [50, 100, 50, 10, 50, 100] : 50);
+        }
+      }
     }
   }, [shouldAddScript, status, guessesLenght, wordToSubmit.length]);
 }