Push current state of documentation refactoring

src/API.ts

@@ -404,7 +404,7 @@ export class UserAPI {
      *                { channel: 0, velocity: 100, duration: 0.5 }
      */
 
-    const event = {note: value, velocity, channel, port} as MidiParams
+    const event = { note: value, velocity, channel, port } as MidiParams
 
     return new MidiEvent(event, this.app);
   };
@@ -1881,7 +1881,7 @@ export class UserAPI {
   // =============================================================
 
   sound = (sound: string | string[] | null | undefined) => {
-    if(sound) return new SoundEvent(sound, this.app);
+    if (sound) return new SoundEvent(sound, this.app);
     else return new SkipEvent();
   };
 
@@ -2041,4 +2041,70 @@ export class UserAPI {
       ),
     });
   }
+
+
+  // =============================================================
+  // Resolution
+  // =============================================================
+  //
+
+  public showGif = (options: any) => {
+    /**
+    * Displays a GIF on the webpage with various customizable options including rotation and fading.
+    * @param {Object} options - The configuration object for displaying the GIF.
+    * @param {string} options.gifUrl - The URL of the GIF to display.
+    * @param {number} [options.posX=0] - The X-coordinate to place the GIF at.
+    * @param {number} [options.posY=0] - The Y-coordinate to place the GIF at.
+    * @param {number} [options.opacity=1] - The opacity level of the GIF.
+    * @param {string} [options.size='auto'] - The size of the GIF (can be 'cover', 'contain', or specific dimensions).
+    * @param {number} [options.zIndex=1000] - The z-index of the GIF.
+    * @param {boolean} [options.center=false] - Whether to center the GIF in the window.
+    * @param {number} [options.rotation=0] - The rotation angle of the GIF in degrees.
+    * @param {string} [options.filter='none'] - The CSS filter function to apply for color alterations.
+    * @param {number} [options.fadeDuration=0] - The duration of the fade-in effect in seconds.
+    */
+    const {
+      gifUrl,
+      posX = 0,
+      posY = 0,
+      opacity = 1,
+      size = 'auto',
+      zIndex = 1000,
+      center = false,
+      rotation = 0,
+      filter = 'none',
+      fadeDuration = 0
+    } = options;
+
+    const gifElement = document.createElement('img');
+    gifElement.src = gifUrl;
+    // @ts-ignore
+    gifElement.style = `
+    position: fixed;
+    left: ${center ? '50%' : `${posX}px`};
+    top: ${center ? '50%' : `${posY}px`};
+    opacity: ${fadeDuration > 0 ? 0 : opacity}; /* Start with opacity 0 if fading in */
+    z-index: ${zIndex};
+    ${size !== 'auto' ? `width: ${size}; height: ${size};` : ''}
+    ${center ? 'transform: translate(-50%, -50%) rotate(${rotation}deg);' : `transform: rotate(${rotation}deg);`}
+    filter: ${filter};
+    transition: opacity ${fadeDuration}s ease;
+  `;
+    gifElement.classList.add('top-level-gif'); // Add a class for easier removal
+
+    document.body.appendChild(gifElement);
+
+    // If fadeDuration is specified, fade the image in
+    if (fadeDuration > 0) {
+      setTimeout(() => {
+        gifElement.style.opacity = opacity;
+      }, 10); // Timeout to ensure the element is rendered before starting the transition
+    }
+  }
+
+
+  public clearGif = () => {
+    const gifs = document.querySelectorAll('.top-level-gif');
+    gifs.forEach(gif => gif.remove());
+  }
 }