@castlenine/svelte-canvas-confetti 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2024 Alexandre "Castlenine"
+
+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

@@ -0,0 +1,247 @@
+<div align="center">
+
+# `@castlenine/svelte-canvas-confetti`
+
+[![npm.badge]][npm] [![download.badge]][download]
+
+Canvas-based confetti for Svelte 🎉, without dependencies
+</div>
+
+## Features
+
+* Uses a single canvas to render full-screen confetti.
+* Supports image-based confetti.
+* Allows full customization of confetti behavior using `onCreate` and `onUpdate` hooks.
+
+## Examples
+
+[Simple Demo](https://svelte.dev/repl/84bb431468264dabbfdd0750ef949f9f?version=3.50.1)
+
+[Firework Demo](https://svelte.dev/repl/8d05b7c60c244fe0b7e09b027dd3bc5d?version=3.50.1)
+
+[Advanced Demo](https://svelte.dev/repl/5cefe21763c445d986c6e23ddea1327a?version=3.50.1)
+
+## Installing
+
+```bash
+npm i @castlenine/svelte-canvas-confetti
+```
+
+## Basic Usage
+
+The package includes four Svelte components.
+
+### FallingConfetti
+
+Adds confetti falling from the top of the screen.
+
+```svelte
+<script>
+  import { FallingConfetti } from '@castlenine/svelte-canvas-confetti';
+</script>
+
+<FallingConfetti />
+```
+
+### ConfettiBurst
+
+Adds a confetti burst anywhere on the screen. It requires an origin position.
+
+```svelte
+<script>
+  import { ConfettiBurst } from '@castlenine/svelte-canvas-confetti';
+</script>
+
+<ConfettiBurst origin={[window.innerWidth / 2, window.innerHeight / 2]} />
+```
+
+### ConfettiCannon
+
+Adds a confetti cannon that can shoot out directional confetti. It requires an origin position.
+
+```svelte
+<script>
+  import { ConfettiCannon } from '@castlenine/svelte-canvas-confetti';
+</script>
+
+<ConfettiCannon origin={[window.innerWidth / 2, window.innerHeight]} />
+```
+
+### Confetti
+
+Adds any type of confetti. This is the main component that the other three are just simple wrappers around.
+
+If no properties are passed in, it will create the same result as **FallingConfetti**.
+
+```svelte
+<script>
+  import { Confetti } from '@castlenine/svelte-canvas-confetti';
+</script>
+
+<Confetti />
+```
+
+## Props
+
+### particleCount
+
+Number of particles to create.
+
+**Type:** `number`
+**Default value:** `50`
+**Example:**
+
+```svelte
+<Confetti particleCount={100} />
+```
+
+### styles
+
+A list of styles used to render particles. Can be any valid HTML color or an HTMLImageElement.
+
+**Type:** `Array<string | HTMLImageElement>`
+**Default value:** `['hotpink','gold','dodgerblue','tomato','rebeccapurple','lightgreen','turquoise']`
+**Example:**
+
+```svelte
+<Confetti styles={['red', '#00ff00', 'hsl(120, 65%, 85%)']} />
+```
+
+### origin
+
+The origin of the particles. If this is not used, the particles will fall from the top of the screen.
+
+**Type:** `[number, number]`
+**Default value:** `undefined`
+**Example:**
+
+```svelte
+<Confetti origin={[100, 100]} />
+```
+
+### force
+
+The initial force used to shoot out confetti. This has no effect if `origin` is not used.
+
+**Type:** `number`
+**Default value:** 15
+**Example:**
+
+```svelte
+<Confetti origin={[50, 50]} force={25} />
+```
+
+### angle
+
+The angle used to shoot out confetti. This has no effect if `origin` is not used. It can be combined with `spread` to create a "cannon".
+
+**Type:** `number`
+**Default value:** 0
+**Example:**
+
+```svelte
+<Confetti origin={[50, 50]} angle={90} />
+```
+
+### spread
+
+The spread used when creating each particles initial direction. The particle's initial direction will be a value between `angle - spread / 2` and `angle + spread / 2`. This has no effect if `origin` is not used.
+
+**Type:** `number`
+**Default value:** 360
+**Example:**
+
+```svelte
+<Confetti origin={[100, 100]} spread={45} />
+```
+
+## onCreate
+
+This can be used to override the properties of each particle at creation time.
+
+**Type:** `(particle) => particle`
+**Default value:** undefined
+**Example:**
+
+```svelte
+<Confetti
+  onCreate={(particle) => {
+    particle.x = 0;
+    particle.y = 0;
+    return particle;
+  }}
+/>
+```
+
+## onUpdate
+
+This can be used to override the properties of each particle at update time.
+
+**Type:** `(particle, deltaTime) => void`
+**Default value:** undefined
+**Example:**
+
+```svelte
+<Confetti
+  onCreate={(particle) => {
+    particle.x += Math.random() * 5;
+  }}
+/>
+```
+
+## Particle object
+
+```typescript
+export type Particle = {
+  // Stop updating/rendering the particle once it is "dead" (ie off screen)
+  dead: boolean;
+
+  // The total time since the particle was created.
+  life: number;
+
+  // The delay between the creation of the particle and when it starts updating/rendering (in seconds).
+  delay: number;
+
+  // The x position of the particle.
+  x: number;
+
+  // The y position of the particle.
+  y: number;
+
+  // The current angle of the particle.
+  angle: number;
+
+  // The rotation speed of the particle.
+  da: number;
+
+  // The horizontal speed of the particle.
+  dx: number;
+
+  // The vertical speed of the particle.
+  dy: number;
+
+  // The width of the particle (not used with images).
+  w: number;
+
+  // The height of the particle (not used with images).
+  h: number;
+
+  // Vertical gravity.
+  gy: number;
+
+  // The "width" of the falling motion. The falling motion is calculated as Math.sin(life * xw)
+  xw: number;
+
+  // The style of the particle. Either an HTML color or an HTMLImageElement.
+  style: ParticleStyle;
+};
+```
+
+---
+
+Forked from [andreasmcdermott/svelte-canvas-confetti](https://github.com/andreasmcdermott/svelte-canvas-confetti)
+
+[npm]: https://www.npmjs.com/package/@castlenine/svelte-canvas-confetti
+[npm.badge]: https://img.shields.io/npm/v/@castlenine/svelte-canvas-confetti
+[download]: https://www.npmjs.com/package/@castlenine/svelte-canvas-confetti
+[download.badge]: https://img.shields.io/npm/d18m/@castlenine/svelte-canvas-confetti

package/dist/Confetti.svelte

@@ -0,0 +1,85 @@
+<script context="module">import { COLORS } from "./utils/constants";
+import { createParticle, isOutOfBounds, renderParticle, updateParticle } from "./utils/particle";
+const renderParticles = (context, particles) => {
+    context.clearRect(0, 0, context.canvas.width, context.canvas.height);
+    for (let i = 0; i < particles.length; ++i) {
+        renderParticle(context, particles[i]);
+    }
+};
+const updateParticles = (context, particles, dt, onUpdate) => {
+    let livingParticles = particles.length;
+    for (let i = 0; i < particles.length; ++i) {
+        const P = particles[i];
+        if (P.dead) {
+            livingParticles--;
+        }
+        else {
+            updateParticle(P, dt);
+            if (isOutOfBounds(context, P))
+                P.dead = true;
+            if (onUpdate)
+                onUpdate(P, dt);
+        }
+    }
+    return livingParticles > 0;
+};
+const start = (canvas, onCompleted, particleCount, origin, force, angle, spread, styles, onCreate, onUpdate) => {
+    const CONTEXT = canvas.getContext("2d");
+    if (!CONTEXT)
+        throw new Error("No context?");
+    const PARTICLES = Array.from({ length: particleCount }, () => createParticle(CONTEXT, origin, force, angle, spread, styles, onCreate));
+    let frameId;
+    let t;
+    const run = (_t) => {
+        renderParticles(CONTEXT, PARTICLES);
+        const STILL_RUNNING = updateParticles(CONTEXT, PARTICLES, (_t - t) / 1e3, onUpdate);
+        if (STILL_RUNNING) {
+            t = _t;
+            frameId = requestAnimationFrame(run);
+        }
+        else {
+            onCompleted();
+        }
+    };
+    t = performance.now();
+    frameId = requestAnimationFrame(run);
+    return () => {
+        cancelAnimationFrame(frameId);
+    };
+};
+</script>
+
+<script>import { onMount, createEventDispatcher } from "svelte";
+export let styles = COLORS;
+export let particleCount = 50;
+export let origin = void 0;
+export let force = 15;
+export let angle = 0;
+export let spread = 360;
+export let onCreate = void 0;
+export let onUpdate = void 0;
+const dispatch = createEventDispatcher();
+let canvas;
+let w;
+let h;
+onMount(() => {
+    canvas.width = w;
+    canvas.height = h;
+    return start(canvas, () => dispatch("completed"), particleCount, origin, force, angle, spread, styles, onCreate, onUpdate);
+});
+</script>
+
+<svelte:window bind:innerWidth={w} bind:innerHeight={h} />
+<canvas bind:this={canvas} width={w} height={h} />
+
+<style>
+	canvas {
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 999999;
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+	}
+</style>

package/dist/Confetti.svelte.d.ts

@@ -0,0 +1,96 @@
+import { SvelteComponentTyped } from "svelte";
+import type { OnCreateParticle, OnUpdateParticle, ParticleStyle, Position } from './utils/types';
+declare const __propDef: {
+    props: {
+        /**
+             * A list of render styles to use for the confetti. Each confetti will be assigned a random value from the list.
+             * The values can either be valid HTML colors or an HTMLImageElement.
+             * @default ['hotpink','gold','dodgerblue','tomato','rebeccapurple','lightgreen','turquoise']
+             * @example
+             * ```
+             * <Confetti colors={['red', '#ff0000', 'hsl(250, 54%, 85%)']} />
+             * ```
+             */ styles?: ParticleStyle[] | undefined;
+        /**
+             * The number of particles to create.
+             * @default 50
+             * @example
+             * ```
+             * <Confetti particleCount={100} />
+             * ```
+             */ particleCount?: number | undefined;
+        /**
+             * The origin position of the confetti. If this is not passed in, the confetti will fall from the top of the screen.
+             * @default undefined
+             * @example
+             * ```
+             * <Confetti origin={[50, 50]} />
+             * ```
+             */ origin?: Position | undefined;
+        /**
+             * The force of the burst. A larger number will shoot the confetti faster and further. Has no effect if origin isn't passed in.
+             * @default 15
+             * @example
+             * ```
+             * <Confetti origin={[50, 50]} force={15} />
+             * ```
+             */ force?: number | undefined;
+        /**
+             * Angle in degrees of the burst. This can be used together with spread to create a directed burst. Has no effect if origin isn't passed in.
+             * @default 0
+             * @example
+             * ```
+             * <Confetti origin={[50, 50]} angle={90} />
+             * ```
+             */ angle?: number | undefined;
+        /**
+             * The spread in degrees of the burst. This can be used together with angle to create a directed burst. Has no effect if origin isn't passed in.
+             * @default 360
+             * @example
+             * ```
+             * <Confetti origin={[50, 50]} spread={90} />
+             * ```
+             */ spread?: number | undefined;
+        /**
+             * By default, each particle is created with some random variation. The initial values of each particle can be overridden using the onCreate callback.
+             * @default undefined
+             * @example
+             * ```
+             * <Confetti
+             *   onCreate={(particle) => {
+             *     particle.style = 'blue';
+             *     particle.x = window.innerWidth / 2;
+             *     return particle;
+             * 	 }}
+             * />
+             * ```
+             */ onCreate?: OnCreateParticle | undefined;
+        /**
+             * The onUpdate callback can be used to modify the particle on each frame.
+             * @default undefined
+             * @example
+             * ```
+             * <Confetti
+             *   onUpdate={(particle, deltaTime) => {
+             *     if (particle.angle < 0 && particle.da < 0) {
+             *       particle.da *= -1;
+             * 		 }
+             * 	 }}
+             * />
+             * ```
+             */ onUpdate?: OnUpdateParticle | undefined;
+    };
+    events: {
+        completed: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConfettiProps = typeof __propDef.props;
+export type ConfettiEvents = typeof __propDef.events;
+export type ConfettiSlots = typeof __propDef.slots;
+export default class Confetti extends SvelteComponentTyped<ConfettiProps, ConfettiEvents, ConfettiSlots> {
+}
+export {};
+//# sourceMappingURL=Confetti.svelte.d.ts.map

package/dist/Confetti.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Confetti.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/Confetti.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAY,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA2Q5G,QAAA,MAAM,SAAS;;QA7Ef;;;;;;;;eAQI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI,UAAS,QAAQ,GAAG,SAAS;QACjC;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACY,CAAC;AACxD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

package/dist/ConfettiBurst.svelte

@@ -0,0 +1,9 @@
+<script>import Confetti from "./Confetti.svelte";
+export let origin;
+export let styles = void 0;
+export let particleCount = 50;
+export let onCreate = void 0;
+export let onUpdate = void 0;
+</script>
+
+<Confetti {particleCount} {origin} {styles} {onCreate} {onUpdate} on:completed />

package/dist/ConfettiBurst.svelte.d.ts

@@ -0,0 +1,72 @@
+import { SvelteComponentTyped } from "svelte";
+import type { OnCreateParticle, OnUpdateParticle, ParticleStyle, Position } from './utils/types';
+declare const __propDef: {
+    props: {
+        /**
+             * The origin position of the confetti burst.
+             * @required
+             * @example
+             * ```
+             * <ConfettiBurst origin={[50, 50]} />
+             * ```
+             */ origin: Position;
+        /**
+             * A list of render styles to use for the confetti. Each confetti will be assigned a random value from the list.
+             * The values can either be valid HTML colors or an HTMLImageElement.
+             * @default ['hotpink','gold','dodgerblue','tomato','rebeccapurple','lightgreen','turquoise']
+             * @example
+             * ```
+             * <ConfettiBurst colors={['red', '#ff0000', 'hsl(250, 54%, 85%)']} />
+             * ```
+             */ styles?: ParticleStyle[] | undefined;
+        /**
+             * The number of particles to create.
+             * @default 50
+             * @example
+             * ```
+             * <ConfettiBurst particleCount={100} />
+             * ```
+             */ particleCount?: number | undefined;
+        /**
+             * By default, each particle is created with some random variation. The initial values of each particle can be overridden using the onCreate callback.
+             * @default undefined
+             * @example
+             * ```
+             * <ConfettiBurst
+             *   onCreate={(particle) => {
+             *     particle.style = 'blue';
+             *     particle.x = window.innerWidth / 2;
+             *     return particle;
+             * 	 }}
+             * />
+             * ```
+             */ onCreate?: OnCreateParticle | undefined;
+        /**
+             * The onUpdate callback can be used to modify the particle on each frame.
+             * @default undefined
+             * @example
+             * ```
+             * <ConfettiBurst
+             *   onUpdate={(particle, deltaTime) => {
+             *     if (particle.angle < 0 && particle.da < 0) {
+             *       particle.da *= -1;
+             * 		 }
+             * 	 }}
+             * />
+             * ```
+             */ onUpdate?: OnUpdateParticle | undefined;
+    };
+    events: {
+        completed: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConfettiBurstProps = typeof __propDef.props;
+export type ConfettiBurstEvents = typeof __propDef.events;
+export type ConfettiBurstSlots = typeof __propDef.slots;
+export default class ConfettiBurst extends SvelteComponentTyped<ConfettiBurstProps, ConfettiBurstEvents, ConfettiBurstSlots> {
+}
+export {};
+//# sourceMappingURL=ConfettiBurst.svelte.d.ts.map

package/dist/ConfettiBurst.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfettiBurst.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ConfettiBurst.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AA8HjG,QAAA,MAAM,SAAS;;QArDf;;;;;;;eAOI;QACJ;;;;;;;;eAQI,UAAS,aAAa,EAAE,GAAG,SAAS;QACxC;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACY,CAAC;AACxD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/ConfettiCannon.svelte

@@ -0,0 +1,12 @@
+<script>import Confetti from "./Confetti.svelte";
+export let origin;
+export let styles = void 0;
+export let particleCount = 50;
+export let force = 15;
+export let angle = -90;
+export let spread = 360;
+export let onCreate = void 0;
+export let onUpdate = void 0;
+</script>
+
+<Confetti {particleCount} {origin} {force} {spread} {angle} {styles} {onCreate} {onUpdate} on:completed />

package/dist/ConfettiCannon.svelte.d.ts

@@ -0,0 +1,96 @@
+import { SvelteComponentTyped } from "svelte";
+import type { OnCreateParticle, OnUpdateParticle, ParticleStyle, Position } from './utils/types';
+declare const __propDef: {
+    props: {
+        /**
+             * The origin position of the confetti cannon.
+             * @required
+             * @example
+             * ```
+             * <ConfettiCannon origin={[50, 50]} />
+             * ```
+             */ origin: Position;
+        /**
+             * A list of render styles to use for the confetti. Each confetti will be assigned a random value from the list.
+             * The values can either be valid HTML colors or an HTMLImageElement.
+             * @default ['hotpink','gold','dodgerblue','tomato','rebeccapurple','lightgreen','turquoise']
+             * @example
+             * ```
+             * <ConfettiCannon colors={['red', '#ff0000', 'hsl(250, 54%, 85%)']} />
+             * ```
+             */ styles?: ParticleStyle[] | undefined;
+        /**
+             * The number of particles to create.
+             * @default 50
+             * @example
+             * ```
+             * <ConfettiCannon particleCount={100} />
+             * ```
+             */ particleCount?: number | undefined;
+        /**
+             * The force of the burst. A larger number will shoot the confetti faster and further. Has no effect if origin isn't passed in.
+             * @default 15
+             * @example
+             * ```
+             * <ConfettiCannon origin={[50, 50]} force={15} />
+             * ```
+             */ force?: number | undefined;
+        /**
+             * Angle in degrees of the burst. This can be used together with spread to create a directed burst. Has no effect if origin isn't passed in.
+             * @default 0
+             * @example
+             * ```
+             * <ConfettiCannon origin={[50, 50]} angle={90} />
+             * ```
+             */ angle?: number | undefined;
+        /**
+             * The spread in degrees of the burst. This can be used together with angle to create a directed burst. Has no effect if origin isn't passed in.
+             * @default 360
+             * @example
+             * ```
+             * <ConfettiCannon origin={[50, 50]} spread={90} />
+             * ```
+             */ spread?: number | undefined;
+        /**
+             * By default, each particle is created with some random variation. The initial values of each particle can be overridden using the onCreate callback.
+             * @default undefined
+             * @example
+             * ```
+             * <ConfettiCannon
+             *   onCreate={(particle) => {
+             *     particle.style = 'blue';
+             *     particle.x = window.innerWidth / 2;
+             *     return particle;
+             * 	 }}
+             * />
+             * ```
+             */ onCreate?: OnCreateParticle | undefined;
+        /**
+             * The onUpdate callback can be used to modify the particle on each frame.
+             * @default undefined
+             * @example
+             * ```
+             * <ConfettiCannon
+             *   onUpdate={(particle, deltaTime) => {
+             *     if (particle.angle < 0 && particle.da < 0) {
+             *       particle.da *= -1;
+             * 		 }
+             * 	 }}
+             * />
+             * ```
+             */ onUpdate?: OnUpdateParticle | undefined;
+    };
+    events: {
+        completed: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ConfettiCannonProps = typeof __propDef.props;
+export type ConfettiCannonEvents = typeof __propDef.events;
+export type ConfettiCannonSlots = typeof __propDef.slots;
+export default class ConfettiCannon extends SvelteComponentTyped<ConfettiCannonProps, ConfettiCannonEvents, ConfettiCannonSlots> {
+}
+export {};
+//# sourceMappingURL=ConfettiCannon.svelte.d.ts.map

package/dist/ConfettiCannon.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConfettiCannon.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ConfettiCannon.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAiLjG,QAAA,MAAM,SAAS;;QA7Ef;;;;;;;eAOI;QACJ;;;;;;;;eAQI,UAAS,aAAa,EAAE,GAAG,SAAS;QACxC;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACY,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

package/dist/FallingConfetti.svelte

@@ -0,0 +1,8 @@
+<script>import Confetti from "./Confetti.svelte";
+export let styles = void 0;
+export let particleCount = 50;
+export let onCreate = void 0;
+export let onUpdate = void 0;
+</script>
+
+<Confetti {particleCount} {styles} {onCreate} {onUpdate} on:completed />

package/dist/FallingConfetti.svelte.d.ts

@@ -0,0 +1,64 @@
+import { SvelteComponentTyped } from "svelte";
+import type { OnCreateParticle, OnUpdateParticle, ParticleStyle } from './utils/types';
+declare const __propDef: {
+    props: {
+        /**
+             * A list of render styles to use for the confetti. Each confetti will be assigned a random value from the list.
+             * The values can either be valid HTML colors or an HTMLImageElement.
+             * @default ['hotpink','gold','dodgerblue','tomato','rebeccapurple','lightgreen','turquoise']
+             * @example
+             * ```
+             * <Confetti colors={['red', '#ff0000', 'hsl(250, 54%, 85%)']} />
+             * ```
+             */ styles?: ParticleStyle[] | undefined;
+        /**
+             * The number of particles to create.
+             * @default 50
+             * @example
+             * ```
+             * <Confetti particleCount={100} />
+             * ```
+             */ particleCount?: number | undefined;
+        /**
+             * By default, each particle is created with some random variation. The initial values of each particle can be overridden using the onCreate callback.
+             * @default undefined
+             * @example
+             * ```
+             * <Confetti
+             *   onCreate={(particle) => {
+             *     particle.style = 'blue';
+             *     particle.x = window.innerWidth / 2;
+             *     return particle;
+             * 	 }}
+             * />
+             * ```
+             */ onCreate?: OnCreateParticle | undefined;
+        /**
+             * The onUpdate callback can be used to modify the particle on each frame.
+             * @default undefined
+             * @example
+             * ```
+             * <Confetti
+             *   onUpdate={(particle, deltaTime) => {
+             *     if (particle.angle < 0 && particle.da < 0) {
+             *       particle.da *= -1;
+             * 		 }
+             * 	 }}
+             * />
+             * ```
+             */ onUpdate?: OnUpdateParticle | undefined;
+    };
+    events: {
+        completed: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FallingConfettiProps = typeof __propDef.props;
+export type FallingConfettiEvents = typeof __propDef.events;
+export type FallingConfettiSlots = typeof __propDef.slots;
+export default class FallingConfetti extends SvelteComponentTyped<FallingConfettiProps, FallingConfettiEvents, FallingConfettiSlots> {
+}
+export {};
+//# sourceMappingURL=FallingConfetti.svelte.d.ts.map

package/dist/FallingConfetti.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FallingConfetti.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/FallingConfetti.svelte"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACD,OAAO,KAAK,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,aAAa,EAAE,MAAM,eAAe,CAAC;AA6GvF,QAAA,MAAM,SAAS;;QA7Cf;;;;;;;;eAQI,UAAS,aAAa,EAAE,GAAG,SAAS;QACxC;;;;;;;eAOI;QACJ;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;QAC3C;;;;;;;;;;;;;eAaI,YAAW,gBAAgB,GAAG,SAAS;;;;;;;;CACY,CAAC;AACxD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export type { Particle, OnCreateParticle, OnUpdateParticle } from './utils/types';
+export { default as FallingConfetti } from './FallingConfetti.svelte';
+export { default as ConfettiBurst } from './ConfettiBurst.svelte';
+export { default as ConfettiCannon } from './ConfettiCannon.svelte';
+export { default as Confetti } from './Confetti.svelte';
+export * from './utils/random';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,cAAc,gBAAgB,CAAC"}

package/dist/index.js

@@ -0,0 +1,5 @@
+export { default as FallingConfetti } from './FallingConfetti.svelte';
+export { default as ConfettiBurst } from './ConfettiBurst.svelte';
+export { default as ConfettiCannon } from './ConfettiCannon.svelte';
+export { default as Confetti } from './Confetti.svelte';
+export * from './utils/random';

package/dist/utils/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const DEG_TO_RAD: number;
+export declare const ROTATION_SPEED = 2;
+export declare const MOVEMENT_SPEED = 1;
+export declare const BOUNDARY = 20;
+export declare const COLORS: string[];
+//# sourceMappingURL=constants.d.ts.map

package/dist/utils/constants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/constants.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,UAAU,QAAgB,CAAC;AAExC,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC,eAAO,MAAM,cAAc,IAAI,CAAC;AAEhC,eAAO,MAAM,QAAQ,KAAK,CAAC;AAE3B,eAAO,MAAM,MAAM,UAA0F,CAAC"}

package/dist/utils/constants.js

@@ -0,0 +1,5 @@
+export const DEG_TO_RAD = Math.PI / 180;
+export const ROTATION_SPEED = 2;
+export const MOVEMENT_SPEED = 1;
+export const BOUNDARY = 20;
+export const COLORS = ['hotpink', 'gold', 'dodgerblue', 'tomato', 'rebeccapurple', 'lightgreen', 'turquoise'];

package/dist/utils/particle.d.ts

@@ -0,0 +1,6 @@
+import type { OnCreateParticle, Particle, Position } from './types';
+export declare const createParticle: (context: CanvasRenderingContext2D, origin: Position | undefined, force: number, angle: number, spread: number, styles: (HTMLImageElement | string)[], onCreate?: OnCreateParticle) => Particle;
+export declare const renderParticle: (context: CanvasRenderingContext2D, p: Particle) => void;
+export declare const updateParticle: (p: Particle, dt: number) => void;
+export declare const isOutOfBounds: (context: CanvasRenderingContext2D, p: Particle) => boolean;
+//# sourceMappingURL=particle.d.ts.map

package/dist/utils/particle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"particle.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/particle.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKpE,eAAO,MAAM,cAAc,YACjB,wBAAwB,UACzB,QAAQ,GAAG,SAAS,SACrB,MAAM,SACN,MAAM,UACL,MAAM,UACN,CAAC,gBAAgB,GAAG,MAAM,CAAC,EAAE,aAC1B,gBAAgB,aAqD3B,CAAC;AAEF,eAAO,MAAM,cAAc,YAAa,wBAAwB,KAAK,QAAQ,SAc5E,CAAC;AAEF,eAAO,MAAM,cAAc,MAAO,QAAQ,MAAM,MAAM,SAUrD,CAAC;AAEF,eAAO,MAAM,aAAa,YAAa,wBAAwB,KAAK,QAAQ,YACuB,CAAC"}

package/dist/utils/particle.js

@@ -0,0 +1,83 @@
+import { BOUNDARY, DEG_TO_RAD, MOVEMENT_SPEED, ROTATION_SPEED } from './constants';
+import { random } from './random';
+export const createParticle = (context, origin, force, angle, spread, styles, onCreate) => {
+    let dir;
+    let x;
+    let y;
+    let vx;
+    let vy;
+    let dx;
+    let dy;
+    const style = styles[Math.floor(random(styles.length))];
+    let da = random(90, -90);
+    if (origin) {
+        // When we have an origin, we create a confetti burst
+        x = origin[0];
+        y = origin[1];
+        vx = random(force, 5);
+        vy = random(force, 5);
+        dir = random(angle + spread / 2, angle - spread / 2) * DEG_TO_RAD;
+        da *= 2;
+    }
+    else {
+        // Otherwise we drop confetti from the top of the screen
+        x = random(context.canvas.width);
+        y = random(-BOUNDARY);
+        vx = random(5);
+        vy = random(5, 1);
+        dir = random(180) * DEG_TO_RAD;
+    }
+    // eslint-disable-next-line prefer-const
+    dx = Math.cos(dir);
+    // eslint-disable-next-line prefer-const
+    dy = Math.sin(dir);
+    let particle = {
+        dead: false,
+        life: 0,
+        delay: 0,
+        x,
+        y,
+        angle: random(360),
+        da,
+        dx: dx * vx,
+        dy: dy * vy,
+        w: random(18, 10),
+        h: random(6, 4),
+        gy: random(4.5, 2),
+        xw: random(6, 1),
+        style,
+    };
+    if (onCreate)
+        particle = onCreate(particle);
+    return particle;
+};
+export const renderParticle = (context, p) => {
+    if (p.dead || p.life < p.delay)
+        return;
+    context.save();
+    context.translate(p.x, p.y);
+    context.rotate(p.angle * DEG_TO_RAD);
+    if (p.style instanceof HTMLImageElement) {
+        context.drawImage(p.style, -p.style.width / 2, -p.style.height / 2);
+    }
+    else {
+        context.fillStyle = p.style;
+        context.beginPath();
+        context.rect(p.w * -0.5, p.h * -0.5, p.w, p.h);
+        context.fill();
+    }
+    context.restore();
+};
+export const updateParticle = (p, dt) => {
+    p.life += dt;
+    if (p.dead || p.life < p.delay)
+        return;
+    p.angle += p.da * dt * ROTATION_SPEED;
+    p.dy += p.gy * dt * ROTATION_SPEED;
+    p.dx += random(4, 2) * Math.sin(p.life * p.xw) * dt;
+    p.dx *= 0.98;
+    p.dy *= 0.98;
+    p.x += p.dx * MOVEMENT_SPEED;
+    p.y += p.dy * MOVEMENT_SPEED;
+};
+export const isOutOfBounds = (context, p) => p.x < -BOUNDARY || p.x > context.canvas.width + BOUNDARY || p.y > context.canvas.height + BOUNDARY;

package/dist/utils/random.d.ts

@@ -0,0 +1,3 @@
+export declare const random: (max: number, min?: number) => number;
+export declare const coinFlip: () => boolean;
+//# sourceMappingURL=random.d.ts.map

package/dist/utils/random.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"random.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/random.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,MAAM,QAAS,MAAM,yBAA+C,CAAC;AAElF,eAAO,MAAM,QAAQ,eAA6B,CAAC"}

package/dist/utils/random.js

@@ -0,0 +1,2 @@
+export const random = (max, min = 0) => Math.random() * (max - min) + min;
+export const coinFlip = () => Math.random() >= 0.5;

package/dist/utils/types.d.ts

@@ -0,0 +1,21 @@
+export type ParticleStyle = string | HTMLImageElement;
+export type Position = [number, number];
+export type Particle = {
+    dead: boolean;
+    life: number;
+    delay: number;
+    x: number;
+    y: number;
+    angle: number;
+    da: number;
+    dx: number;
+    dy: number;
+    w: number;
+    h: number;
+    gy: number;
+    xw: number;
+    style: ParticleStyle;
+};
+export type OnCreateParticle = (p: Particle) => Particle;
+export type OnUpdateParticle = (p: Particle, dt: number) => void;
+//# sourceMappingURL=types.d.ts.map

package/dist/utils/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/lib/utils/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,gBAAgB,CAAC;AAEtD,MAAM,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAExC,MAAM,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,OAAO,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,CAAC,EAAE,MAAM,CAAC;IACV,CAAC,EAAE,MAAM,CAAC;IACV,EAAE,EAAE,MAAM,CAAC;IACX,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,EAAE,QAAQ,KAAK,QAAQ,CAAC;AAEzD,MAAM,MAAM,gBAAgB,GAAG,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC"}

package/dist/utils/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,96 @@
+{
+	"name": "@castlenine/svelte-canvas-confetti",
+	"version": "0.1.0",
+	"description": "Canvas-based confetti for Svelte, without dependencies",
+	"license": "MIT",
+	"keywords": [
+		"svelte",
+		"sveltekit",
+		"confetti",
+		"canvas"
+	],
+	"author": {
+		"name": "Alexandre Castlenine",
+		"url": "https://github.com/Castlenine"
+	},
+	"homepage": "https://github.com/castlenine/svelte-canvas-confetti",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/castlenine/svelte-canvas-confetti.git"
+	},
+	"bugs": {
+		"url": "https://github.com/castlenine/svelte-canvas-confetti/issues"
+	},
+	"type": "module",
+	"types": "./dist/index.d.ts",
+	"import": "./dist/index.js",
+	"svelte": "./dist/index.js",
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"import": "./dist/index.js",
+			"svelte": "./dist/index.js"
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"dev": "vite dev",
+		"build": "npm run check && vite build",
+		"preview": "vite preview",
+		"package": "npm run remove-dist-folder && svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"eslint": "eslint --ignore-path ./.eslintignore .",
+		"eslint:fix": "eslint --fix --ignore-path ./.eslintignore .",
+		"prettier": "prettier --ignore-path ./.prettierignore --check .",
+		"prettier:fix": "prettier --ignore-path ./.prettierignore --write .",
+		"stylelint": "stylelint **/*.{css,scss,sass,html,js,md,mjs,svelte,svg,ts}",
+		"clean-code": "npm run stylelint && npm run prettier:fix && npm run eslint:fix",
+		"remove-dist-folder": "rimraf dist",
+		"publish-package": "npm publish -access public"
+	},
+	"peerDependencies": {
+		"svelte": "^3.54.0 || ^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-static": "^2.0.3",
+		"@sveltejs/kit": "^1.30.4",
+		"@sveltejs/package": "^2.3.1",
+		"@typescript-eslint/eslint-plugin": "^7.8.0",
+		"@typescript-eslint/parser": "^7.8.0",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^9.1.0",
+		"eslint-import-resolver-typescript": "^3.6.1",
+		"eslint-plugin-html": "^8.1.1",
+		"eslint-plugin-import": "^2.29.1",
+		"eslint-plugin-no-loops": "^0.3.0",
+		"eslint-plugin-only-warn": "^1.1.0",
+		"eslint-plugin-prettier": "^5.1.3",
+		"eslint-plugin-security": "^1.7.1",
+		"eslint-plugin-svelte": "^2.38.0",
+		"prettier": "^3.2.5",
+		"prettier-eslint": "^16.3.0",
+		"prettier-eslint-cli": "^8.0.1",
+		"prettier-plugin-svelte": "^3.2.3",
+		"prettier-stylelint": "^0.4.2",
+		"publint": "^0.2.7",
+		"rimraf": "^5.0.5",
+		"stylelint": "^15.11.0",
+		"stylelint-config-html": "^1.1.0",
+		"stylelint-config-standard": "^34.0.0",
+		"stylelint-no-unsupported-browser-features": "^7.0.0",
+		"stylelint-order": "^6.0.4",
+		"stylelint-scss": "^5.3.2",
+		"stylelint-selector-bem-pattern": "^3.0.1",
+		"svelte": "^4.2.15",
+		"svelte-check": "^3.7.1",
+		"svelte-eslint-parser": "^0.35.0",
+		"svelte-preprocess": "^5.1.4",
+		"tslib": "^2.6.2",
+		"typescript": "^5.4.5",
+		"vite": "^4.5.3"
+	}
+}