add random selection in alert appearance animations

OpenDonationAssistant · Jun 27, 2024 · 625c13f · 625c13f
1 parent e03c2a9
commit 625c13f
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 59 deletions.
diff --git a/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx b/src/components/ConfigurationPage/settings/PaymentAlertsSettings.tsx
@@ -16,6 +16,64 @@ interface PaymentAlertSettingsProps {
   onChange: Function;
 }
 
+export const APPEARANCE_ANIMATIONS =               [
+                "bounce",
+                "flash",
+                "pulse",
+                "rubberBand",
+                "shakeY",
+                "shakeX",
+                "headShake",
+                "swing",
+                "wobble",
+                "jello",
+                "heartBeat",
+                "backInDown",
+                "backInLeft",
+                "backInRight",
+                "backInUp",
+                "bounceIn",
+                "bounceInDown",
+                "bounceInLeft",
+                "bounceInRight",
+                "bounceInUp",
+                "fadeIn",
+                "fadeInDown",
+                "fadeInDownBig",
+                "fadeInLeft",
+                "fadeInLeftBig",
+                "fadeInRight",
+                "fadeInRightBig",
+                "fadeInUp",
+                "fadeInUpBig",
+                "fadeInTopLeft",
+                "fadeInTopRight",
+                "fadeInBottomLeft",
+                "fadeInBottomRight",
+                "flip",
+                "flinInX",
+                "flipInY",
+                "lightSpeedInRight",
+                "lightSpeedInLeft",
+                "rotateIn",
+                "rotateInDownLeft",
+                "rotateInDownRight",
+                "rotateInUpLeft",
+                "rotateInUpRight",
+                "hinge",
+                "jackInTheBox",
+                "rollIn",
+                "zoomIn",
+                "zoomInDown",
+                "zoomInLeft",
+                "zoomInRight",
+                "zoomInUp",
+                "slideInDown",
+                "slideInLeft",
+                "slideInRight",
+                "slideInUp",
+              ];
+
 export default function PaymentAlertSettings({
   id,
   onChange,
@@ -479,64 +537,7 @@ export default function PaymentAlertSettings({
               alert.properties.find((prop) => prop.name === "appearance")
                 ?.value,
               "appearance",
-              [
-                "bounce",
-                "flash",
-                "pulse",
-                "rubberBand",
-                "shakeY",
-                "shakeX",
-                "headShake",
-                "swing",
-                "wobble",
-                "jello",
-                "heartBeat",
-                "backInDown",
-                "backInLeft",
-                "backInRight",
-                "backInUp",
-                "bounceIn",
-                "bounceInDown",
-                "bounceInLeft",
-                "bounceInRight",
-                "bounceInUp",
-                "fadeIn",
-                "fadeInDown",
-                "fadeInDownBig",
-                "fadeInLeft",
-                "fadeInLeftBig",
-                "fadeInRight",
-                "fadeInRightBig",
-                "fadeInUp",
-                "fadeInUpBig",
-                "fadeInTopLeft",
-                "fadeInTopRight",
-                "fadeInBottomLeft",
-                "fadeInBottomRight",
-                "flip",
-                "flinInX",
-                "flipInY",
-                "lightSpeedInRight",
-                "lightSpeedInLeft",
-                "rotateIn",
-                "rotateInDownLeft",
-                "rotateInDownRight",
-                "rotateInUpLeft",
-                "rotateInUpRight",
-                "hinge",
-                "jackInTheBox",
-                "rollIn",
-                "zoomIn",
-                "zoomInDown",
-                "zoomInLeft",
-                "zoomInRight",
-                "zoomInUp",
-                "slideInDown",
-                "slideInLeft",
-                "slideInRight",
-                "slideInUp",
-                "none",
-              ],
+              [...APPEARANCE_ANIMATIONS,"random","none"]
             ).markup((widgetId, name, value) =>
               update("appearance", value, index),
             ),

diff --git a/src/logic/alert/AlertController.ts b/src/logic/alert/AlertController.ts
@@ -1,3 +1,4 @@
+import { APPEARANCE_ANIMATIONS } from "../../components/ConfigurationPage/settings/PaymentAlertsSettings";
 import { AnimatedFontProperty } from "../../components/ConfigurationPage/widgetproperties/AnimatedFontProperty";
 import { IFontLoader } from "../../components/FontLoader/IFontLoader";
 import { log } from "../../logging";
@@ -219,6 +220,12 @@ export class AlertController {
     this.showing = false;
   }
 
+
+  private getRndInteger(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min)) + min;
+  }
+
+
   private renderImage(alert: any) {
     log.debug(
       `Amount of alert image renderers: ${this.alertImageRenderers.length}`,
@@ -239,9 +246,13 @@ export class AlertController {
           `${process.env.REACT_APP_FILE_API_ENDPOINT}/files/${alert.video}`,
         );
       }
-      if (appearance && appearance !== "none"){
+      if (appearance && appearance !== "none" && appearance  !== "random"){
         renderer.setClassName(`animate__animated animate__slow animate__${appearance}`);
       }
+      if (appearance  === "random"){
+        const choice = APPEARANCE_ANIMATIONS[this.getRndInteger(0, APPEARANCE_ANIMATIONS.length - 1)];
+        renderer.setClassName(`animate__animated animate__slow animate__${choice}`);
+      }
       if (showTime) {
         setTimeout(() => {
           renderer.setImage(null);