svelte-confetti-explosion 0.1.1 → 0.2.0

package/ConfettiExplosion.svelte

@@ -57,7 +57,7 @@ const isUndefined = (value) => typeof value === 'undefined';
 const error = (message) => {
     console.error(message);
 };
-function validate(particleCount, duration, colors, particleSize, force, floorHeight, floorWidth) {
+function validate(particleCount, duration, colors, particleSize, force, stageHeight, stageWidth, particlesShape) {
     const isSafeInteger = Number.isSafeInteger;
     if (!isUndefined(particleCount) && isSafeInteger(particleCount) && particleCount < 0) {
         error('particleCount must be a positive integer');
@@ -67,6 +67,11 @@ function validate(particleCount, duration, colors, particleSize, force, floorHei
         error('duration must be a positive integer');
         return false;
     }
+    if (!isUndefined(particlesShape) &&
+        !['mix', 'circles', 'rectangles'].includes(particlesShape)) {
+        error('particlesShape should be either "mix" or "circles" or "rectangle"');
+        return false;
+    }
     if (!isUndefined(colors) && !Array.isArray(colors)) {
         error('colors must be an array of strings');
         return false;
@@ -79,17 +84,17 @@ function validate(particleCount, duration, colors, particleSize, force, floorHei
         error('force must be a positive integer and should be within 0 and 1');
         return false;
     }
-    if (!isUndefined(floorHeight) &&
-        typeof floorHeight === 'number' &&
-        isSafeInteger(floorHeight) &&
-        floorHeight < 0) {
+    if (!isUndefined(stageHeight) &&
+        typeof stageHeight === 'number' &&
+        isSafeInteger(stageHeight) &&
+        stageHeight < 0) {
         error('floorHeight must be a positive integer');
         return false;
     }
-    if (!isUndefined(floorWidth) &&
-        typeof floorWidth === 'number' &&
-        isSafeInteger(floorWidth) &&
-        floorWidth < 0) {
+    if (!isUndefined(stageWidth) &&
+        typeof stageWidth === 'number' &&
+        isSafeInteger(stageWidth) &&
+        stageWidth < 0) {
         error('floorWidth must be a positive integer');
         return false;
     }
@@ -134,6 +139,28 @@ export let particleSize = SIZE;
  * ```
  */
 export let duration = DURATION;
+/**
+ * Shape of particles to use. Can be `mix`, `circles` or `rectangles`
+ *
+ * `mix` will use both circles and rectangles
+ * `circles` will use only circles
+ * `rectangles` will use only rectangles
+ *
+ * @default 'mix'
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion particlesShape='circles' />
+ * ```
+ *
+ * @example
+ *
+ * ```svelte
+ * <ConfettiExplosion particlesShape='rectangles' />
+ * ```
+ */
+export let particlesShape = 'mix';
 /**
  * Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors,
  * CSS Variables, literally anything valid in plain CSS.
@@ -201,7 +228,7 @@ $: particles = createParticles(particleCount, colors);
 $: particleCount > 300 &&
     console.log("[SVELTE-CONFETTI-EXPLOSION] That's a lot of confetti, you sure about that? A lesser number" +
         ' like 200 will still give off the party vibes while still not bricking the device 😉');
-$: isValid = validate(particleCount, duration, colors, particleSize, force, stageHeight, stageWidth);
+$: isValid = validate(particleCount, duration, colors, particleSize, force, stageHeight, stageWidth, particlesShape);
 onMount(async () => {
     await waitFor(duration);
     if (shouldDestroyAfterDone) {
@@ -216,7 +243,8 @@ function confettiStyles(node, { degree }) {
     const rotationIndex = Math.round(Math.random() * (rotationTransforms.length - 1));
     const durationChaos = duration - Math.round(Math.random() * 1000);
     const shouldBeCrazy = Math.random() < CRAZY_PARTICLES_FREQUENCY;
-    const isCircle = shouldBeCircle(rotationIndex);
+    const isCircle = particlesShape !== 'rectangles' &&
+        (particlesShape === 'circles' || shouldBeCircle(rotationIndex));
     // x-axis disturbance, roughly the distance the particle will initially deviate from its target
     const x1 = shouldBeCrazy ? round(Math.random() * CRAZY_PARTICLE_CRAZINESS, 2) : 0;
     const x2 = x1 * -1;

package/ConfettiExplosion.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+declare type ParticleShape = 'mix' | 'circles' | 'rectangles';
 declare const __propDef: {
     props: {
         /**
@@ -34,6 +35,27 @@ declare const __propDef: {
              * <ConfettiExplosion duration={5000} />
              * ```
              */ duration?: number;
+        /**
+             * Shape of particles to use. Can be `mix`, `circles` or `rectangles`
+             *
+             * `mix` will use both circles and rectangles
+             * `circles` will use only circles
+             * `rectangles` will use only rectangles
+             *
+             * @default 'mix'
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion particlesShape='circles' />
+             * ```
+             *
+             * @example
+             *
+             * ```svelte
+             * <ConfettiExplosion particlesShape='rectangles' />
+             * ```
+             */ particlesShape?: ParticleShape;
         /**
              * Colors to use for the confetti particles. Pass string array of colors. Can use hex colors, named colors,
              * CSS Variables, literally anything valid in plain CSS.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Puru Vijay
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -105,6 +105,24 @@ Colors to use for the confetti particles. Pass string array of colors. Can use h
 <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
 ```
 
+### particlesShape
+
+Shape of particles to use. Can be `mix`, `circles` or `rectangles`
+
+`mix` will use both circles and rectangles
+`circles` will use only circles
+`rectangles` will use only rectangles
+
+**type:** `'mix' | 'circles' | 'rectangles'`
+
+**Default value:** `'mix'`
+
+**Example:**
+
+```svelte
+<ConfettiExplosion particlesShape="circles" />
+```
+
 ### force
 
 Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force. Will error out if you pass a value outside of this range.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-confetti-explosion",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "Confetti explosion in Svelte 🎉🎊",
   "author": "Puru Vijay",
   "license": "MIT",