npm - svelte-confetti-explosion - Versions diffs - 0.0.1 → 0.0.5 - Mend

svelte-confetti-explosion 0.0.1 → 0.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/ConfettiExplosion.svelte +302 -0
package/ConfettiExplosion.svelte.d.ts +104 -0
package/{src/lib/index.ts → index.d.ts} +0 -0
package/index.js +1 -0
package/package.json +9 -11
package/.prettierrc +0 -5
package/pnpm-lock.yaml +0 -924
package/src/app.html +0 -12
package/src/global.d.ts +0 -1
package/src/lib/ConfettiExplosion.svelte +0 -404
package/src/routes/index.svelte +0 -22
package/src/routes/page.svelte +0 -5
package/static/favicon.png +0 -0
package/svelte.config.js +0 -23
package/tsconfig.json +0 -31

package/src/app.html DELETED Viewed

@@ -1,12 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="/favicon.png" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
-	</head>
-	<body>
-		<div id="svelte">%svelte.body%</div>
-	</body>
-</html>

package/src/global.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- /// <reference types="@sveltejs/kit" />

package/src/lib/ConfettiExplosion.svelte DELETED Viewed

@@ -1,404 +0,0 @@
-<script lang="ts" context="module">
-	type Particle = {
-		color: string; // color of particle
-		degree: number; // vector direction, between 0-360 (0 being straight up ↑)
-	};
-	type Rotate3dTransform = [number, number, number];
-	const ROTATION_SPEED_MIN = 200; // minimum possible duration of single particle full rotation
-	const ROTATION_SPEED_MAX = 800; // maximum possible duration of single particle full rotation
-	const CRAZY_PARTICLES_FREQUENCY = 0.1; // 0-1 frequency of crazy curvy unpredictable particles
-	const CRAZY_PARTICLE_CRAZINESS = 0.3; // 0-1 how crazy these crazy particles are
-	const BEZIER_MEDIAN = 0.5; // utility for mid-point bezier curves, to ensure smooth motion paths
-	const FORCE = 0.5; // 0-1 roughly the vertical force at which particles initially explode
-	const SIZE = 12; // max height for particle rectangles, diameter for particle circles
-	const FLOOR_HEIGHT = 800; // pixels the particles will fall from initial explosion point
-	const FLOOR_WIDTH = 1600; // horizontal spread of particles in pixels
-	const PARTICLE_COUNT = 150;
-	const DURATION = 3500;
-	const COLORS = ['#FFC700', '#FF0000', '#2E3191', '#41BBC7'];
-	const createParticles = (count: number, colors: string[]): Particle[] => {
-		const increment = 360 / count;
-		return Array.from({ length: count }, (_, i) => ({
-			color: colors[i % colors.length],
-			degree: i * increment,
-		}));
-	};
-	const waitFor = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
-	// From here: https://stackoverflow.com/a/11832950
-	function round(num: number, precision: number = 2) {
-		return Math.round((num + Number.EPSILON) * 10 ** precision) / 10 ** precision;
-	}
-	function arraysEqual<ItemType>(a: ItemType[], b: ItemType[]) {
-		if (a === b) return true;
-		if (a == null || b == null) return false;
-		if (a.length !== b.length) return false;
-		for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
-		return true;
-	}
-	const mapRange = (value: number, x1: number, y1: number, x2: number, y2: number) =>
-		((value - x1) * (y2 - x2)) / (y1 - x1) + x2;
-	const rotate = (degree: number, amount: number) => {
-		const result = degree + amount;
-		return result > 360 ? result - 360 : result;
-	};
-	const coinFlip = () => Math.random() > 0.5;
-	// avoid this for circles, as it will have no visual effect
-	const zAxisRotation: Rotate3dTransform = [0, 0, 1];
-	const rotationTransforms: Rotate3dTransform[] = [
-		// dual axis rotations (a bit more realistic)
-		[1, 1, 0],
-		[1, 0, 1],
-		[0, 1, 1],
-		// single axis rotations (a bit dumber)
-		[1, 0, 0],
-		[0, 1, 0],
-		zAxisRotation,
-	];
-	const shouldBeCircle = (rotationIndex: number) =>
-		!arraysEqual(rotationTransforms[rotationIndex], zAxisRotation) && coinFlip();
-	const isUndefined = (value: any) => typeof value === 'undefined';
-	const error = (message: string) => {
-		console.error(message);
-	};
-	function validate(
-		particleCount: number,
-		duration: number,
-		colors: string[],
-		particleSize: number,
-		force: number,
-		floorHeight: number,
-		floorWidth: number
-	) {
-		const isSafeInteger = Number.isSafeInteger;
-		if (!isUndefined(particleCount) && isSafeInteger(particleCount) && particleCount < 0) {
-			error('particleCount must be a positive integer');
-			return false;
-		}
-		if (!isUndefined(duration) && isSafeInteger(duration) && duration < 0) {
-			error('duration must be a positive integer');
-			return false;
-		}
-		if (!isUndefined(colors) && !Array.isArray(colors)) {
-			error('colors must be an array of strings');
-			return false;
-		}
-		if (!isUndefined(particleSize) && isSafeInteger(particleSize) && particleSize < 0) {
-			error('particleSize must be a positive integer');
-			return false;
-		}
-		if (!isUndefined(force) && isSafeInteger(force) && (force < 0 || force > 1)) {
-			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
-		) {
-			error('floorHeight must be a positive integer');
-			return false;
-		}
-		if (
-			!isUndefined(floorWidth) &&
-			typeof floorWidth === 'number' &&
-			isSafeInteger(floorWidth) &&
-			floorWidth < 0
-		) {
-			error('floorWidth must be a positive integer');
-			return false;
-		}
-		return true;
-	}
-</script>
-<script lang="ts">
-	import { onMount } from 'svelte';
-	/**
-	 * Number of confetti particles to create
-	 *
-	 * @default 150
-	 *
-	 * @example
-	 *
-	 * ```svelte
-	 * <ConfettiExplosion particleCount={200} />
-	 * ```
-	 */
-	export let particleCount = PARTICLE_COUNT;
-	/**
-	 * Duration of the animation in milliseconds
-	 *
-	 * @default 3500
-	 *
-	 * @example
-	 *
-	 * ```svelte
-	 * <ConfettiExplosion duration={5000} />
-	 * ```
-	 */
-	export let duration = DURATION;
-	/**
-	 * 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.
-	 *
-	 * @default ['#FFC700', '#FF0000', '#2E3191', '#41BBC7']
-	 *
-	 * @example
-	 *
-	 * ```svelte
-	 * <ConfettiExplosion colors={['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']} />
-	 * ```
-	 */
-	export let colors = COLORS;
-	/**
-	 * Size of the confetti particles in pixels
-	 *
-	 * @default 12
-	 *
-	 * @example
-	 *
-	 * ```svelte
-	 * <ConfettiExplosion particleSize={20} />
-	 * ```
-	 */
-	export let particleSize = SIZE;
-	/**
-	 * Force of the confetti particles. Between 0 and 1. 0 is no force, 1 is maximum force.
-	 *
-	 * @default 0.5
-	 *
-	 * @example
-	 *
-	 * ```svelte
-	 * <ConfettiExplosion force={0.8} />
-	 * ```
-	 */
-	export let force = FORCE;
-	/**
-	 * Height of the floor in pixels. Confetti will only fall within this height.
-	 *
-	 * @default 800
-	 *
-	 * @example
-	 *
-	 * ```svelte
-	 * <ConfettiExplosion floorHeight={500} />
-	 * ```
-	 */
-	export let floorHeight = FLOOR_HEIGHT;
-	/**
-	 * Width of the floor in pixels. Confetti will only fall within this width.
-	 *
-	 * @default 1600
-	 *
-	 * @example
-	 *
-	 * ```svelte
-	 * <ConfettiExplosion floorWidth={1000} />
-	 * ```
-	 */
-	export let floorWidth = FLOOR_WIDTH;
-	/**
-	 * Whether or not destroy all confetti nodes after the `duration` period has passed. By default it destroys all nodes, to preserve memory.
-	 *
-	 * @default true
-	 *
-	 * @example
-	 *
-	 * ```svelte
-	 * <ConfettiExplosion shouldDestroyAfterDone={false} />
-	 * ```
-	 */
-	export let shouldDestroyAfterDone = true;
-	let isVisible = true;
-	$: particles = createParticles(particleCount, colors);
-	$: isValid = validate(
-		particleCount,
-		duration,
-		colors,
-		particleSize,
-		force,
-		floorHeight,
-		floorWidth
-	);
-	onMount(async () => {
-		await waitFor(duration);
-		if (shouldDestroyAfterDone) {
-			isVisible = false;
-		}
-	});
-	function confettiStyles(node: HTMLDivElement, { degree }: { degree: number }) {
-		// Get x landing point for it
-		const landingPoint = mapRange(
-			Math.abs(rotate(degree, 90) - 180),
-			0,
-			180,
-			-floorWidth / 2,
-			floorWidth / 2
-		);
-		// Crazy calculations for generating styles
-		const rotation = Math.random() * (ROTATION_SPEED_MAX - ROTATION_SPEED_MIN) + ROTATION_SPEED_MIN;
-		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);
-		// 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;
-		const x3 = x1;
-		// x-axis arc of explosion, so 90deg and 270deg particles have curve of 1, 0deg and 180deg have 0
-		const x4 = round(Math.abs(mapRange(Math.abs(rotate(degree, 90) - 180), 0, 180, -1, 1)), 4);
-		// roughly how fast particle reaches end of its explosion curve
-		const y1 = round(Math.random() * BEZIER_MEDIAN, 4);
-		// roughly maps to the distance particle goes before reaching free-fall
-		const y2 = round(Math.random() * force * (coinFlip() ? 1 : -1), 4);
-		// roughly how soon the particle transitions from explosion to free-fall
-		const y3 = BEZIER_MEDIAN;
-		// roughly the ease of free-fall
-		const y4 = round(Math.max(mapRange(Math.abs(degree - 180), 0, 180, force, -force), 0), 4);
-		const setCSSVar = (key: string, val: string | number) => node.style.setProperty(key, val + '');
-		setCSSVar('--x-landing-point', `${landingPoint}px`);
-		setCSSVar('--duration-chaos', `${durationChaos}ms`);
-		setCSSVar('--x1', `${x1}`);
-		setCSSVar('--x2', `${x2}`);
-		setCSSVar('--x3', `${x3}`);
-		setCSSVar('--x4', `${x4}`);
-		setCSSVar('--y1', `${y1}`);
-		setCSSVar('--y2', `${y2}`);
-		setCSSVar('--y3', `${y3}`);
-		setCSSVar('--y4', `${y4}`);
-		// set --width and --height here
-		setCSSVar(
-			'--width',
-			`${isCircle ? particleSize : Math.round(Math.random() * 4) + particleSize / 2}px`
-		);
-		setCSSVar(
-			'--height',
-			(isCircle ? particleSize : Math.round(Math.random() * 2) + particleSize) + 'px'
-		);
-		setCSSVar('--rotation', `${rotationTransforms[rotationIndex].join()}`);
-		setCSSVar('--rotation-duration', `${rotation}ms`);
-		setCSSVar('--border-radius', `${isCircle ? '50%' : '0'}`);
-	}
-</script>
-{#if isVisible && isValid}
-	<div class="container" style="--floor-height: {floorHeight}px;">
-		{#each particles as { color, degree }}
-			<div class="particle" use:confettiStyles={{ degree }}>
-				<div style="--bgcolor: {color};" />
-			</div>
-		{/each}
-	</div>
-{/if}
-<style lang="scss">
-	@keyframes y-axis {
-		to {
-			transform: translate3d(0, var(--floor-height), 0);
-		}
-	}
-	@keyframes x-axis {
-		to {
-			transform: translate3d(var(--x-landing-point), 0, 0);
-		}
-	}
-	@keyframes rotation {
-		to {
-			transform: rotate3d(var(--rotation), 360deg);
-		}
-	}
-	.container {
-		width: 0;
-		height: 0;
-		overflow: visible;
-		position: relative;
-		z-index: 1200;
-	}
-	.particle {
-		animation: x-axis var(--duration-chaos) forwards
-			cubic-bezier(var(--x1), var(--x2), var(--x3), var(--x4));
-		div {
-			position: absolute;
-			top: 0;
-			left: 0;
-			animation: y-axis var(--duration-chaos) forwards
-				cubic-bezier(var(--y1), var(--y2), var(--y3), var(--y4));
-			width: var(--width);
-			height: var(--height);
-			&:before {
-				display: block;
-				height: 100%;
-				width: 100%;
-				content: '';
-				background-color: var(--bgcolor);
-				animation: rotation var(--rotation-duration) infinite linear;
-				border-radius: var(--border-radius);
-			}
-		}
-	}
-</style>

package/src/routes/index.svelte DELETED Viewed

@@ -1,22 +0,0 @@
-<script lang="ts">
-	import { ConfettiExplosion } from '$lib';
-</script>
-<div>
-	<ConfettiExplosion particleCount={100} force={0.3} />
-</div>
-<style lang="scss">
-	:global(body) {
-		overflow: hidden;
-	}
-	div {
-		position: absolute;
-		top: 20%;
-		left: 40%;
-		right: 0;
-		bottom: 0;
-		background: rgba(255, 255, 255, 0.5);
-	}
-</style>

package/src/routes/page.svelte DELETED Viewed

@@ -1,5 +0,0 @@
-<script>
-	import ConfettiExplosion from '$lib/ConfettiExplosion.svelte';
-</script>
-<ConfettiExplosion force={0.31} particleCount={10} />

package/static/favicon.png DELETED Viewed

Binary file

package/svelte.config.js DELETED Viewed

@@ -1,23 +0,0 @@
-import preprocess from 'svelte-preprocess';
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	// Consult https://github.com/sveltejs/svelte-preprocess
-	// for more information about preprocessors
-	preprocess: preprocess(),
-	kit: {
-		// hydrate the <div id="svelte"> element in src/app.html
-		target: '#svelte',
-		package: {
-			emitTypes: true,
-			dir: 'package',
-			exports: (file) => {
-				return file === 'index.ts';
-			},
-		},
-	},
-};
-export default config;

package/tsconfig.json DELETED Viewed

@@ -1,31 +0,0 @@
-{
-	"compilerOptions": {
-		"moduleResolution": "node",
-		"module": "es2020",
-		"lib": ["es2020", "DOM"],
-		"target": "es2020",
-		/**
-			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
-			to enforce using \`import type\` instead of \`import\` for Types.
-			*/
-		"importsNotUsedAsValues": "error",
-		"isolatedModules": true,
-		"resolveJsonModule": true,
-		/**
-			To have warnings/errors of the Svelte compiler at the correct position,
-			enable source maps by default.
-			*/
-		"sourceMap": true,
-		"esModuleInterop": true,
-		"skipLibCheck": true,
-		"forceConsistentCasingInFileNames": true,
-		"baseUrl": ".",
-		"allowJs": true,
-		"checkJs": true,
-		"paths": {
-			"$lib": ["src/lib"],
-			"$lib/*": ["src/lib/*"]
-		}
-	},
-	"include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.ts", "src/**/*.svelte"]
-}