fix: clear winner and winning animation when updating name list

Author: icelam

src/assets/js/Slot.ts

@@ -9,6 +9,9 @@ interface SlotConfigurations {
   onSpinStart?: () => void;
   /** User configuration for callback function that runs after spinning reel */
   onSpinEnd?: () => void;
+
+  /** User configuration for callback function that runs after user updates the name list */
+  onNameListChanged?: () => void;
 }
 
 // commitStyles() is not yet supported by TypeScript
@@ -39,21 +42,25 @@ export default class Slot {
   /** Callback function that runs after spinning reel */
   private onSpinEnd?: NonNullable<SlotConfigurations['onSpinEnd']>;
 
+  /** Callback function that runs after spinning reel */
+  private onNameListChanged?: NonNullable<SlotConfigurations['onNameListChanged']>;
+
   /**
    * Constructor of Slot
    * @param maxReelItems  Maximum item inside a reel
    * @param removeWinner  Whether winner should be removed from name list
    * @param reelContainerSelector  The element ID of reel items to be appended
    * @param onSpinStart  Callback function that runs before spinning reel
-   * @param onSpinEnd  Callback function that runs after spinning reel
+   * @param onNameListChanged  Callback function that runs when user updates the name list
    */
   constructor(
     {
       maxReelItems = 30,
       removeWinner = true,
       reelContainerSelector,
       onSpinStart,
-      onSpinEnd
+      onSpinEnd,
+      onNameListChanged
     }: SlotConfigurations
   ) {
     this.nameList = [];
@@ -62,6 +69,7 @@ export default class Slot {
     this.shouldRemoveWinner = removeWinner;
     this.onSpinStart = onSpinStart;
     this.onSpinEnd = onSpinEnd;
+    this.onNameListChanged = onNameListChanged;
 
     // Create reel animation
     this.reelAnimation = this.reelContainer?.animate(
@@ -93,6 +101,17 @@ export default class Slot {
    */
   set names(names: string[]) {
     this.nameList = names;
+
+    const reelItemsToRemove = this.reelContainer?.children
+      ? Array.from(this.reelContainer.children)
+      : [];
+
+    reelItemsToRemove
+      .forEach((element) => element.remove());
+
+    if (this.onNameListChanged) {
+      this.onNameListChanged();
+    }
   }
 
   /** Getter for name list */

src/assets/js/app.ts

@@ -69,12 +69,17 @@ import SoundEffects from '@js/SoundEffects';
     confettiAnimationId = window.requestAnimationFrame(confettiAnimation);
   };
 
-  /**  Function to be trigger before spinning */
-  const onSpinStart = () => {
+  /** Function to stop the winning animation */
+  const stopWinningAnimation = () => {
     if (confettiAnimationId) {
       window.cancelAnimationFrame(confettiAnimationId);
     }
     sunburstSvg.style.display = 'none';
+  };
+
+  /**  Function to be trigger before spinning */
+  const onSpinStart = () => {
+    stopWinningAnimation();
     drawButton.disabled = true;
     settingsButton.disabled = true;
     soundEffects.spin((MAX_REEL_ITEMS - 1) / 10);
@@ -94,7 +99,8 @@ import SoundEffects from '@js/SoundEffects';
     reelContainerSelector: '#reel',
     maxReelItems: MAX_REEL_ITEMS,
     onSpinStart,
-    onSpinEnd
+    onSpinEnd,
+    onNameListChanged: stopWinningAnimation
   });
 
   /** To open the setting page */