fix(Snowflake): Fixed decimal random generation and opacity updates

packages/demo/src/settings.tsx

@@ -1,5 +1,5 @@
 import { SnowfallProps } from 'react-snowfall'
-import create from 'zustand'
+import { create } from 'zustand'
 
 export interface SnowfallSettings extends SnowfallProps {
   update: (settings: Partial<SnowfallProps>) => void

packages/react-snowfall/lib/Snowflake.d.ts

@@ -58,6 +58,10 @@ export interface SnowflakeProps {
      * The minimum and maximum opacity of the snowflake image.
      *
      * This value only applies to snowflakes that are using images.
+     *
+     * The values will be randomly selected within this range.
+     *
+     * The default value is `[1, 1]`.
      */
     opacity: [number, number];
 }

packages/react-snowfall/src/Snowflake.ts

@@ -93,6 +93,7 @@ interface SnowflakeParams {
   nextWind: number
   nextRotationSpeed: number
   opacity: number
+  hasNextOpacity: boolean
 }
 
 /**
@@ -144,6 +145,7 @@ class Snowflake {
       nextWind: random(...wind),
       nextRotationSpeed: random(...rotationSpeed),
       opacity: random(...opacity),
+      hasNextOpacity: false,
     }
 
     this.framesSinceLastUpdate = 0
@@ -170,6 +172,10 @@ class Snowflake {
     if (!isEqual(this.config.images, previousConfig?.images)) {
       this.selectImage()
     }
+
+    if (previousConfig?.opacity && !isEqual(this.config.opacity, previousConfig?.opacity)) {
+      this.params.hasNextOpacity = true
+    }
   }
 
   private updateTargetParams(): void {
@@ -187,7 +193,13 @@ class Snowflake {
     this.params.x = (x + wind * framesPassed) % (offsetWidth + radius * 2)
     if (this.params.x > offsetWidth + radius) this.params.x = -radius
     this.params.y = (y + speed * framesPassed) % (offsetHeight + radius * 2)
-    if (this.params.y > offsetHeight + radius) this.params.y = -radius
+    if (this.params.y > offsetHeight + radius) {
+      if (this.params.hasNextOpacity) {
+        this.params.opacity = random(...this.config.opacity)
+        this.params.hasNextOpacity = false
+      }
+      this.params.y = -radius
+    }
 
     // Apply rotation
     if (this.image) {

packages/react-snowfall/src/utils.ts

@@ -5,12 +5,10 @@
  * @param max The maximum value
  */
 export function random(min: number, max: number): number {
-  const randomNumber = Math.random() * (max - min + 1) + min
-
   if (!Number.isInteger(min) || !Number.isInteger(max)) {
-    return randomNumber
+    return Math.random() * (max - min) + min
   } else {
-    return Math.floor(randomNumber)
+    return Math.floor(Math.random() * (max - min + 1) + min)
   }
 }