@tsparticles/shape-cards 4.0.0-beta.12 → 4.0.0-beta.16

package/tsparticles.shape.cards.js

@@ -1,387 +1,399 @@
-/*!
- * Author : Matteo Bruni
- * MIT license: https://opensource.org/licenses/MIT
- * Demo / Generator : https://particles.js.org/
- * GitHub : https://www.github.com/matteobruni/tsparticles
- * How to use? : Check the GitHub README
- * v4.0.0-beta.12
- */
-/*
- * ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
- * This devtool is neither made for production nor for readable output files.
- * It uses "eval()" calls to create a separate source file in the browser devtools.
- * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
- * or disable the default devtool with "devtool: false".
- * If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
- */
-(function webpackUniversalModuleDefinition(root, factory) {
-	if(typeof exports === 'object' && typeof module === 'object')
-		module.exports = factory(require("@tsparticles/engine"), require("@tsparticles/path-utils"));
-	else if(typeof define === 'function' && define.amd)
-		define(["@tsparticles/engine", "@tsparticles/path-utils"], factory);
-	else {
-		var a = typeof exports === 'object' ? factory(require("@tsparticles/engine"), require("@tsparticles/path-utils")) : factory(root["window"], root["window"]);
-		for(var i in a) (typeof exports === 'object' ? exports : root)[i] = a[i];
-	}
-})(this, (__WEBPACK_EXTERNAL_MODULE__tsparticles_engine__, __WEBPACK_EXTERNAL_MODULE__tsparticles_path_utils__) => {
-return /******/ (() => { // webpackBootstrap
-/******/ 	"use strict";
-/******/ 	var __webpack_modules__ = ({
+(function(g){g.__tsParticlesInternals=g.__tsParticlesInternals||{};g.__tsParticlesInternals.bundles=g.__tsParticlesInternals.bundles||{};g.__tsParticlesInternals.effects=g.__tsParticlesInternals.effects||{};g.__tsParticlesInternals.engine=g.__tsParticlesInternals.engine||{};g.__tsParticlesInternals.interactions=g.__tsParticlesInternals.interactions||{};g.__tsParticlesInternals.palettes=g.__tsParticlesInternals.palettes||{};g.__tsParticlesInternals.paths=g.__tsParticlesInternals.paths||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins=g.__tsParticlesInternals.plugins||{};g.__tsParticlesInternals.plugins.emittersShapes=g.__tsParticlesInternals.plugins.emittersShapes||{};g.__tsParticlesInternals.presets=g.__tsParticlesInternals.presets||{};g.__tsParticlesInternals.shapes=g.__tsParticlesInternals.shapes||{};g.__tsParticlesInternals.updaters=g.__tsParticlesInternals.updaters||{};g.__tsParticlesInternals.utils=g.__tsParticlesInternals.utils||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas=g.__tsParticlesInternals.canvas||{};g.__tsParticlesInternals.canvas.utils=g.__tsParticlesInternals.canvas.utils||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path=g.__tsParticlesInternals.path||{};g.__tsParticlesInternals.path.utils=g.__tsParticlesInternals.path.utils||{};var __tsProxyFactory=typeof Proxy!=="undefined"?function(obj){return new Proxy(obj,{get:function(target,key){if(!(key in target)){target[key]={};}return target[key];}});}:function(obj){return obj;};g.__tsParticlesInternals.bundles=__tsProxyFactory(g.__tsParticlesInternals.bundles);g.__tsParticlesInternals.effects=__tsProxyFactory(g.__tsParticlesInternals.effects);g.__tsParticlesInternals.interactions=__tsProxyFactory(g.__tsParticlesInternals.interactions);g.__tsParticlesInternals.palettes=__tsProxyFactory(g.__tsParticlesInternals.palettes);g.__tsParticlesInternals.paths=__tsProxyFactory(g.__tsParticlesInternals.paths);g.__tsParticlesInternals.plugins=__tsProxyFactory(g.__tsParticlesInternals.plugins);g.__tsParticlesInternals.plugins.emittersShapes=__tsProxyFactory(g.__tsParticlesInternals.plugins.emittersShapes);g.__tsParticlesInternals.presets=__tsProxyFactory(g.__tsParticlesInternals.presets);g.__tsParticlesInternals.shapes=__tsProxyFactory(g.__tsParticlesInternals.shapes);g.__tsParticlesInternals.updaters=__tsProxyFactory(g.__tsParticlesInternals.updaters);g.__tsParticlesInternals.utils=__tsProxyFactory(g.__tsParticlesInternals.utils);g.__tsParticlesInternals.canvas=__tsProxyFactory(g.__tsParticlesInternals.canvas);g.__tsParticlesInternals.path=__tsProxyFactory(g.__tsParticlesInternals.path);g.tsparticlesInternalExports=g.tsparticlesInternalExports||{};})(typeof globalThis!=="undefined"?globalThis:typeof window!=="undefined"?window:this);
+/* Shape v4.0.0-beta.16 */
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@tsparticles/path-utils'), require('@tsparticles/engine')) :
+    typeof define === 'function' && define.amd ? define(['exports', '@tsparticles/path-utils', '@tsparticles/engine'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.__tsParticlesInternals = global.__tsParticlesInternals || {}, global.__tsParticlesInternals.shapes = global.__tsParticlesInternals.shapes || {}, global.__tsParticlesInternals.shapes.cards = global.__tsParticlesInternals.shapes.cards || {}), global.__tsParticlesInternals.path.utils, global.__tsParticlesInternals.engine));
+})(this, (function (exports, pathUtils, engine) { 'use strict';
 
-/***/ "@tsparticles/engine"
-/*!*********************************************************************************************************************************!*\
-  !*** external {"commonjs":"@tsparticles/engine","commonjs2":"@tsparticles/engine","amd":"@tsparticles/engine","root":"window"} ***!
-  \*********************************************************************************************************************************/
-(module) {
+    var SuitType;
+    (function (SuitType) {
+        SuitType["hearts"] = "hearts";
+        SuitType["diamonds"] = "diamonds";
+        SuitType["clubs"] = "clubs";
+        SuitType["spades"] = "spades";
+    })(SuitType || (SuitType = {}));
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_engine__;
+    const eighth = engine.quarter * engine.half, n = engine.half, halfN = n * engine.half, oppositeN = -n, oppositeHalfN = -halfN, eighthN = n * eighth, threeQuarterN = n * engine.threeQuarter;
+    const club = {
+        half: true,
+        segments: [
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: engine.empty, y: oppositeN },
+                    { x: engine.empty, y: oppositeN },
+                    { x: halfN, y: oppositeN },
+                    { x: halfN, y: oppositeHalfN },
+                ],
+            },
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: halfN, y: oppositeHalfN },
+                    { x: halfN, y: oppositeHalfN },
+                    { x: n, y: oppositeHalfN },
+                    { x: n, y: engine.empty },
+                ],
+            },
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: n, y: engine.empty },
+                    { x: n, y: engine.empty },
+                    { x: n, y: halfN },
+                    { x: halfN, y: halfN },
+                ],
+            },
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: halfN, y: halfN },
+                    { x: halfN, y: halfN },
+                    { x: eighthN, y: halfN },
+                    { x: eighthN, y: eighthN },
+                ],
+            },
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: eighthN, y: eighthN },
+                    { x: eighthN, y: halfN },
+                    { x: halfN, y: n },
+                    { x: halfN, y: n },
+                ],
+            },
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: halfN, y: n },
+                    { x: halfN, y: n },
+                    { x: engine.empty, y: n },
+                    { x: engine.empty, y: n },
+                ],
+            },
+        ],
+    };
+    const diamond = {
+        half: true,
+        segments: [
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: engine.empty, y: n },
+                    { x: engine.empty, y: n },
+                    { x: threeQuarterN, y: engine.empty },
+                    { x: threeQuarterN, y: engine.empty },
+                ],
+            },
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: threeQuarterN, y: engine.empty },
+                    { x: threeQuarterN, y: engine.empty },
+                    { x: engine.empty, y: oppositeN },
+                    { x: engine.empty, y: oppositeN },
+                ],
+            },
+        ],
+    };
+    const heart = {
+        half: true,
+        segments: [
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: engine.empty, y: n },
+                    { x: engine.empty, y: n },
+                    { x: n, y: engine.empty },
+                    { x: n, y: oppositeHalfN },
+                ],
+            },
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: n, y: oppositeHalfN },
+                    { x: n, y: oppositeHalfN },
+                    { x: n, y: oppositeN },
+                    { x: halfN, y: oppositeN },
+                ],
+            },
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: halfN, y: oppositeN },
+                    { x: halfN, y: oppositeN },
+                    { x: engine.empty, y: oppositeN },
+                    { x: engine.empty, y: oppositeHalfN },
+                ],
+            },
+        ],
+    };
+    const spade = {
+        half: true,
+        segments: [
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: engine.empty, y: oppositeN },
+                    { x: engine.empty, y: oppositeN },
+                    { x: n, y: oppositeHalfN },
+                    { x: n, y: engine.empty },
+                ],
+            },
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: n, y: engine.empty },
+                    { x: n, y: engine.empty },
+                    { x: n, y: halfN },
+                    { x: halfN, y: halfN },
+                ],
+            },
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: halfN, y: halfN },
+                    { x: halfN, y: halfN },
+                    { x: eighthN, y: halfN },
+                    { x: eighthN, y: eighthN },
+                ],
+            },
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: eighthN, y: eighthN },
+                    { x: eighthN, y: halfN },
+                    { x: halfN, y: n },
+                    { x: halfN, y: n },
+                ],
+            },
+            {
+                type: pathUtils.SegmentType.bezier,
+                values: [
+                    { x: halfN, y: n },
+                    { x: halfN, y: n },
+                    { x: engine.empty, y: n },
+                    { x: engine.empty, y: n },
+                ],
+            },
+        ],
+    };
+    const paths = {
+        [SuitType.hearts]: heart,
+        [SuitType.diamonds]: diamond,
+        [SuitType.clubs]: club,
+        [SuitType.spades]: spade,
+    };
 
-/***/ },
+    class ClubDrawer {
+        draw(data) {
+            const { context, radius } = data;
+            pathUtils.drawPath(context, radius, paths.clubs);
+        }
+    }
 
-/***/ "@tsparticles/path-utils"
-/*!*********************************************************************************************************************************************!*\
-  !*** external {"commonjs":"@tsparticles/path-utils","commonjs2":"@tsparticles/path-utils","amd":"@tsparticles/path-utils","root":"window"} ***!
-  \*********************************************************************************************************************************************/
-(module) {
+    async function loadClubsSuitShape(engine) {
+        engine.checkVersion("4.0.0-beta.16");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addShape(["club", "clubs"], () => Promise.resolve(new ClubDrawer()));
+        });
+    }
 
-module.exports = __WEBPACK_EXTERNAL_MODULE__tsparticles_path_utils__;
+    class DiamondDrawer {
+        draw(data) {
+            const { context, radius } = data;
+            pathUtils.drawPath(context, radius, paths.diamonds);
+        }
+    }
 
-/***/ },
+    async function loadDiamondsSuitShape(engine) {
+        engine.checkVersion("4.0.0-beta.16");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addShape(["diamond", "diamonds"], () => Promise.resolve(new DiamondDrawer()));
+        });
+    }
 
-/***/ "./dist/browser/cards/index.js"
-/*!*************************************!*\
-  !*** ./dist/browser/cards/index.js ***!
-  \*************************************/
-(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+    class HeartDrawer {
+        draw(data) {
+            const { context, radius } = data;
+            pathUtils.drawPath(context, radius, paths.hearts);
+        }
+    }
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadFullCardsShape: () => (/* binding */ loadFullCardsShape)\n/* harmony export */ });\nasync function loadFullCardsShape(engine) {\n    engine.checkVersion(\"4.0.0-beta.12\");\n    await engine.pluginManager.register((e)=>{\n        e.pluginManager.addShape([\n            \"card\"\n        ], async (container)=>{\n            const { CardDrawer } = await __webpack_require__.e(/*! import() */ \"dist_browser_cards_CardDrawer_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./CardDrawer.js */ \"./dist/browser/cards/CardDrawer.js\"));\n            return new CardDrawer(container);\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/cards/index.js?\n}");
+    async function loadHeartsSuitShape(engine) {
+        engine.checkVersion("4.0.0-beta.16");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addShape(["heart", "hearts"], () => Promise.resolve(new HeartDrawer()));
+        });
+    }
 
-/***/ },
+    class SpadeDrawer {
+        draw(data) {
+            const { context, radius } = data;
+            pathUtils.drawPath(context, radius, paths.spades);
+        }
+    }
 
-/***/ "./dist/browser/clubs/index.js"
-/*!*************************************!*\
-  !*** ./dist/browser/clubs/index.js ***!
-  \*************************************/
-(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+    async function loadSpadesSuitShape(engine) {
+        engine.checkVersion("4.0.0-beta.16");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addShape(["spade", "spades"], () => Promise.resolve(new SpadeDrawer()));
+        });
+    }
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadClubsSuitShape: () => (/* binding */ loadClubsSuitShape)\n/* harmony export */ });\nasync function loadClubsSuitShape(engine) {\n    engine.checkVersion(\"4.0.0-beta.12\");\n    await engine.pluginManager.register((e)=>{\n        e.pluginManager.addShape([\n            \"club\",\n            \"clubs\"\n        ], async ()=>{\n            const { ClubDrawer } = await __webpack_require__.e(/*! import() */ \"dist_browser_clubs_ClubDrawer_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./ClubDrawer.js */ \"./dist/browser/clubs/ClubDrawer.js\"));\n            return new ClubDrawer();\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/clubs/index.js?\n}");
+    async function loadCardSuitsShape(engine) {
+        engine.checkVersion("4.0.0-beta.16");
+        await Promise.all([
+            loadClubsSuitShape(engine),
+            loadDiamondsSuitShape(engine),
+            loadHeartsSuitShape(engine),
+            loadSpadesSuitShape(engine),
+        ]);
+    }
 
-/***/ },
+    const cardWidthRatio = (engine.double * engine.double) / engine.triple, cardHeightRatio = engine.double, cornerRadiusRatio = 0.2, cornerFontRatio = 0.4, cornerSuitRatio = 0.3, centerSuitRatio = 0.7, cornerPaddingRatio = 0.2, textHorizontalOffsetRatio = 0.25, minRadius = 0, minAngle = 0, suitEdgeBufferFactor = 0.1, fixedCacheKey = 2, cardsCache = new Map(), redSuitColor = { r: 215, g: 20, b: 20 }, blackSuitColor = { r: 18, g: 18, b: 18 };
+    function drawRoundedCard(ctx, radius, cardData, hdr, flipped, canvasSettings) {
+        if (flipped) {
+            drawRoundedCardBack(ctx, radius);
+        }
+        else {
+            const cacheKey = getCacheKey(radius, hdr, cardData), cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * engine.half, halfHeight = cardHeight * engine.half;
+            let cachedData = cardsCache.get(cacheKey);
+            if (!cachedData) {
+                let cacheCanvas, cacheCtx;
+                if (typeof OffscreenCanvas === "undefined") {
+                    cacheCanvas = engine.safeDocument().createElement("canvas");
+                    cacheCanvas.width = cardWidth;
+                    cacheCanvas.height = cardHeight;
+                    cacheCtx = cacheCanvas.getContext("2d", canvasSettings);
+                }
+                else {
+                    cacheCanvas = new OffscreenCanvas(cardWidth, cardHeight);
+                    cacheCtx = cacheCanvas.getContext("2d", canvasSettings);
+                }
+                if (cacheCtx) {
+                    cacheCtx.translate(halfWidth, halfHeight);
+                    drawRoundedCardFront(cacheCtx, radius, cardData, hdr);
+                    cachedData = cacheCanvas instanceof HTMLCanvasElement ? cacheCanvas : cacheCanvas.transferToImageBitmap();
+                    cardsCache.set(cacheKey, cachedData);
+                }
+            }
+            if (cachedData) {
+                ctx.drawImage(cachedData, -halfWidth, -halfHeight, cardWidth, cardHeight);
+            }
+            else {
+                drawRoundedCardFront(ctx, radius, cardData, hdr);
+            }
+        }
+    }
+    function getCacheKey(radius, hdr, cardData) {
+        return `${radius.toFixed(fixedCacheKey)}-${hdr ? "hdr" : "sdr"}-${cardData.suit}-${cardData.value}`;
+    }
+    function drawRoundedCardBack(ctx, radius) {
+        drawCardBody(ctx, radius);
+    }
+    function drawRoundedCardFront(ctx, radius, cardData, hdr) {
+        const { suit, value } = cardData, cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * engine.half, halfHeight = cardHeight * engine.half, cornerPadding = radius * cornerPaddingRatio, cornerFontSize = radius * cornerFontRatio, cornerSuitSize = radius * cornerSuitRatio, centerSuitSize = radius * centerSuitRatio, textOffset = radius * textHorizontalOffsetRatio, suitEdgeBuffer = radius * suitEdgeBufferFactor, isRed = suit === SuitType.hearts || suit === SuitType.diamonds, color = isRed ? engine.getStyleFromRgb(redSuitColor, hdr) : engine.getStyleFromRgb(blackSuitColor, hdr);
+        ctx.save();
+        drawCardBody(ctx, radius);
+        ctx.fillStyle = engine.getStyleFromRgb({ r: 255, g: 255, b: 255 }, hdr);
+        ctx.fill();
+        ctx.strokeStyle = engine.getStyleFromRgb({ r: 0, g: 0, b: 0 }, hdr);
+        ctx.stroke();
+        ctx.fillStyle = color;
+        ctx.font = `bold ${cornerFontSize.toString()}px Arial, serif`;
+        ctx.textAlign = "left";
+        ctx.textBaseline = "middle";
+        const topLeftX = -halfWidth + cornerPadding + suitEdgeBuffer, topLeftY = -halfHeight + cornerPadding + cornerFontSize * engine.half;
+        ctx.save();
+        ctx.translate(topLeftX, topLeftY);
+        ctx.beginPath();
+        pathUtils.drawPath(ctx, cornerSuitSize, paths[suit]);
+        ctx.fill();
+        ctx.restore();
+        ctx.fillText(value, topLeftX + textOffset, topLeftY);
+        ctx.save();
+        ctx.translate(halfWidth - cornerPadding - suitEdgeBuffer, halfHeight - cornerPadding - cornerFontSize * engine.half);
+        ctx.rotate(Math.PI);
+        ctx.save();
+        ctx.beginPath();
+        pathUtils.drawPath(ctx, cornerSuitSize, paths[suit]);
+        ctx.fill();
+        ctx.restore();
+        ctx.fillText(value, engine.originPoint.x + textOffset, engine.originPoint.y);
+        ctx.restore();
+        ctx.save();
+        ctx.beginPath();
+        pathUtils.drawPath(ctx, centerSuitSize, paths[suit]);
+        ctx.fillStyle = color;
+        ctx.fill();
+        ctx.restore();
+        ctx.beginPath();
+        ctx.arc(engine.originPoint.x, engine.originPoint.y, minRadius, minAngle, engine.doublePI, false);
+        ctx.closePath();
+        ctx.restore();
+    }
+    function drawCardBody(ctx, radius) {
+        const cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * engine.half, halfHeight = cardHeight * engine.half, cornerRadius = radius * cornerRadiusRatio;
+        ctx.beginPath();
+        ctx.moveTo(-halfWidth + cornerRadius, -halfHeight);
+        ctx.lineTo(halfWidth - cornerRadius, -halfHeight);
+        ctx.quadraticCurveTo(halfWidth, -halfHeight, halfWidth, -halfHeight + cornerRadius);
+        ctx.lineTo(halfWidth, halfHeight - cornerRadius);
+        ctx.quadraticCurveTo(halfWidth, halfHeight, halfWidth - cornerRadius, halfHeight);
+        ctx.lineTo(-halfWidth + cornerRadius, halfHeight);
+        ctx.quadraticCurveTo(-halfWidth, halfHeight, -halfWidth, halfHeight - cornerRadius);
+        ctx.lineTo(-halfWidth, -halfHeight + cornerRadius);
+        ctx.quadraticCurveTo(-halfWidth, -halfHeight, -halfWidth + cornerRadius, -halfHeight);
+        ctx.closePath();
+    }
 
-/***/ "./dist/browser/diamonds/index.js"
-/*!****************************************!*\
-  !*** ./dist/browser/diamonds/index.js ***!
-  \****************************************/
-(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+    class CardDrawer {
+        _container;
+        constructor(container) {
+            this._container = container;
+        }
+        draw(data) {
+            const { context, particle, opacity, radius } = data;
+            if (!particle.cardData) {
+                return;
+            }
+            const defaultOpacity = context.globalAlpha, container = this._container;
+            context.globalAlpha = opacity;
+            drawRoundedCard(context, radius, particle.cardData, container.hdr, particle.isShowingBack(), container.canvas.render.settings);
+            context.globalAlpha = defaultOpacity;
+        }
+        particleInit(_container, particle) {
+            const shape = particle.shapeData;
+            if (!shape) {
+                return;
+            }
+            particle.cardData = engine.deepExtend({}, shape);
+        }
+    }
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadDiamondsSuitShape: () => (/* binding */ loadDiamondsSuitShape)\n/* harmony export */ });\nasync function loadDiamondsSuitShape(engine) {\n    engine.checkVersion(\"4.0.0-beta.12\");\n    await engine.pluginManager.register((e)=>{\n        e.pluginManager.addShape([\n            \"diamond\",\n            \"diamonds\"\n        ], async ()=>{\n            const { DiamondDrawer } = await __webpack_require__.e(/*! import() */ \"dist_browser_diamonds_DiamondDrawer_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./DiamondDrawer.js */ \"./dist/browser/diamonds/DiamondDrawer.js\"));\n            return new DiamondDrawer();\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/diamonds/index.js?\n}");
+    async function loadFullCardsShape(engine) {
+        engine.checkVersion("4.0.0-beta.16");
+        await engine.pluginManager.register(e => {
+            e.pluginManager.addShape(["card"], container => Promise.resolve(new CardDrawer(container)));
+        });
+    }
 
-/***/ },
+    async function loadCardsShape(engine) {
+        engine.checkVersion("4.0.0-beta.16");
+        await Promise.all([
+            loadFullCardsShape(engine),
+            loadCardSuitsShape(engine),
+        ]);
+    }
 
-/***/ "./dist/browser/hearts/index.js"
-/*!**************************************!*\
-  !*** ./dist/browser/hearts/index.js ***!
-  \**************************************/
-(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
+    const globalObject = globalThis;
+    globalObject.__tsParticlesInternals = globalObject.__tsParticlesInternals ?? {};
+    globalObject.loadCardsShape = loadCardsShape;
 
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadHeartsSuitShape: () => (/* binding */ loadHeartsSuitShape)\n/* harmony export */ });\nasync function loadHeartsSuitShape(engine) {\n    engine.checkVersion(\"4.0.0-beta.12\");\n    await engine.pluginManager.register((e)=>{\n        e.pluginManager.addShape([\n            \"heart\",\n            \"hearts\"\n        ], async ()=>{\n            const { HeartDrawer } = await __webpack_require__.e(/*! import() */ \"dist_browser_hearts_HeartDrawer_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./HeartDrawer.js */ \"./dist/browser/hearts/HeartDrawer.js\"));\n            return new HeartDrawer();\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/hearts/index.js?\n}");
+    exports.loadCardsShape = loadCardsShape;
 
-/***/ },
-
-/***/ "./dist/browser/index.js"
-/*!*******************************!*\
-  !*** ./dist/browser/index.js ***!
-  \*******************************/
-(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
-
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadCardSuitsShape: () => (/* reexport safe */ _suits_js__WEBPACK_IMPORTED_MODULE_1__.loadCardSuitsShape),\n/* harmony export */   loadCardsShape: () => (/* binding */ loadCardsShape),\n/* harmony export */   loadClubsSuitShape: () => (/* reexport safe */ _suits_js__WEBPACK_IMPORTED_MODULE_1__.loadClubsSuitShape),\n/* harmony export */   loadDiamondsSuitShape: () => (/* reexport safe */ _suits_js__WEBPACK_IMPORTED_MODULE_1__.loadDiamondsSuitShape),\n/* harmony export */   loadFullCardsShape: () => (/* reexport safe */ _cards_index_js__WEBPACK_IMPORTED_MODULE_0__.loadFullCardsShape),\n/* harmony export */   loadHeartsSuitShape: () => (/* reexport safe */ _suits_js__WEBPACK_IMPORTED_MODULE_1__.loadHeartsSuitShape),\n/* harmony export */   loadSpadesSuitShape: () => (/* reexport safe */ _suits_js__WEBPACK_IMPORTED_MODULE_1__.loadSpadesSuitShape)\n/* harmony export */ });\n/* harmony import */ var _cards_index_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./cards/index.js */ \"./dist/browser/cards/index.js\");\n/* harmony import */ var _suits_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./suits.js */ \"./dist/browser/suits.js\");\nasync function loadCardsShape(engine) {\n    engine.checkVersion(\"4.0.0-beta.12\");\n    await engine.pluginManager.register(async (e)=>{\n        const [{ loadFullCardsShape }, { loadCardSuitsShape }] = await Promise.all([\n            Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./cards/index.js */ \"./dist/browser/cards/index.js\")),\n            Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./suits.js */ \"./dist/browser/suits.js\"))\n        ]);\n        await Promise.all([\n            loadFullCardsShape(e),\n            loadCardSuitsShape(e)\n        ]);\n    });\n}\n\n\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/index.js?\n}");
-
-/***/ },
-
-/***/ "./dist/browser/spades/index.js"
-/*!**************************************!*\
-  !*** ./dist/browser/spades/index.js ***!
-  \**************************************/
-(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
-
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadSpadesSuitShape: () => (/* binding */ loadSpadesSuitShape)\n/* harmony export */ });\nasync function loadSpadesSuitShape(engine) {\n    engine.checkVersion(\"4.0.0-beta.12\");\n    await engine.pluginManager.register((e)=>{\n        e.pluginManager.addShape([\n            \"spade\",\n            \"spades\"\n        ], async ()=>{\n            const { SpadeDrawer } = await __webpack_require__.e(/*! import() */ \"dist_browser_spades_SpadeDrawer_js\").then(__webpack_require__.bind(__webpack_require__, /*! ./SpadeDrawer.js */ \"./dist/browser/spades/SpadeDrawer.js\"));\n            return new SpadeDrawer();\n        });\n    });\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/spades/index.js?\n}");
-
-/***/ },
-
-/***/ "./dist/browser/suits.js"
-/*!*******************************!*\
-  !*** ./dist/browser/suits.js ***!
-  \*******************************/
-(__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) {
-
-eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   loadCardSuitsShape: () => (/* binding */ loadCardSuitsShape),\n/* harmony export */   loadClubsSuitShape: () => (/* reexport safe */ _clubs_index_js__WEBPACK_IMPORTED_MODULE_0__.loadClubsSuitShape),\n/* harmony export */   loadDiamondsSuitShape: () => (/* reexport safe */ _diamonds_index_js__WEBPACK_IMPORTED_MODULE_1__.loadDiamondsSuitShape),\n/* harmony export */   loadHeartsSuitShape: () => (/* reexport safe */ _hearts_index_js__WEBPACK_IMPORTED_MODULE_2__.loadHeartsSuitShape),\n/* harmony export */   loadSpadesSuitShape: () => (/* reexport safe */ _spades_index_js__WEBPACK_IMPORTED_MODULE_3__.loadSpadesSuitShape)\n/* harmony export */ });\n/* harmony import */ var _clubs_index_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./clubs/index.js */ \"./dist/browser/clubs/index.js\");\n/* harmony import */ var _diamonds_index_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./diamonds/index.js */ \"./dist/browser/diamonds/index.js\");\n/* harmony import */ var _hearts_index_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./hearts/index.js */ \"./dist/browser/hearts/index.js\");\n/* harmony import */ var _spades_index_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./spades/index.js */ \"./dist/browser/spades/index.js\");\nasync function loadCardSuitsShape(engine) {\n    engine.checkVersion(\"4.0.0-beta.12\");\n    await engine.pluginManager.register(async (e)=>{\n        const [{ loadClubsSuitShape }, { loadDiamondsSuitShape }, { loadHeartsSuitShape }, { loadSpadesSuitShape }] = await Promise.all([\n            Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./clubs/index.js */ \"./dist/browser/clubs/index.js\")),\n            Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./diamonds/index.js */ \"./dist/browser/diamonds/index.js\")),\n            Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./hearts/index.js */ \"./dist/browser/hearts/index.js\")),\n            Promise.resolve(/*! import() */).then(__webpack_require__.bind(__webpack_require__, /*! ./spades/index.js */ \"./dist/browser/spades/index.js\"))\n        ]);\n        await Promise.all([\n            loadClubsSuitShape(e),\n            loadDiamondsSuitShape(e),\n            loadHeartsSuitShape(e),\n            loadSpadesSuitShape(e)\n        ]);\n    });\n}\n\n\n\n\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/suits.js?\n}");
-
-/***/ }
-
-/******/ 	});
-/************************************************************************/
-/******/ 	// The module cache
-/******/ 	var __webpack_module_cache__ = {};
-/******/ 	
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/ 		// Check if module is in cache
-/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
-/******/ 		if (cachedModule !== undefined) {
-/******/ 			return cachedModule.exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = __webpack_module_cache__[moduleId] = {
-/******/ 			// no module.id needed
-/******/ 			// no module.loaded needed
-/******/ 			exports: {}
-/******/ 		};
-/******/ 	
-/******/ 		// Execute the module function
-/******/ 		if (!(moduleId in __webpack_modules__)) {
-/******/ 			delete __webpack_module_cache__[moduleId];
-/******/ 			var e = new Error("Cannot find module '" + moduleId + "'");
-/******/ 			e.code = 'MODULE_NOT_FOUND';
-/******/ 			throw e;
-/******/ 		}
-/******/ 		__webpack_modules__[moduleId](module, module.exports, __webpack_require__);
-/******/ 	
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/ 	
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = __webpack_modules__;
-/******/ 	
-/************************************************************************/
-/******/ 	/* webpack/runtime/define property getters */
-/******/ 	(() => {
-/******/ 		// define getter functions for harmony exports
-/******/ 		__webpack_require__.d = (exports, definition) => {
-/******/ 			for(var key in definition) {
-/******/ 				if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
-/******/ 					Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
-/******/ 				}
-/******/ 			}
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/ensure chunk */
-/******/ 	(() => {
-/******/ 		__webpack_require__.f = {};
-/******/ 		// This file contains only the entry chunk.
-/******/ 		// The chunk loading function for additional chunks
-/******/ 		__webpack_require__.e = (chunkId) => {
-/******/ 			return Promise.all(Object.keys(__webpack_require__.f).reduce((promises, key) => {
-/******/ 				__webpack_require__.f[key](chunkId, promises);
-/******/ 				return promises;
-/******/ 			}, []));
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/get javascript chunk filename */
-/******/ 	(() => {
-/******/ 		// This function allow to reference async chunks
-/******/ 		__webpack_require__.u = (chunkId) => {
-/******/ 			// return url for filenames based on template
-/******/ 			return "" + chunkId + ".js";
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/global */
-/******/ 	(() => {
-/******/ 		__webpack_require__.g = (function() {
-/******/ 			if (typeof globalThis === 'object') return globalThis;
-/******/ 			try {
-/******/ 				return this || new Function('return this')();
-/******/ 			} catch (e) {
-/******/ 				if (typeof window === 'object') return window;
-/******/ 			}
-/******/ 		})();
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/hasOwnProperty shorthand */
-/******/ 	(() => {
-/******/ 		__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/load script */
-/******/ 	(() => {
-/******/ 		var inProgress = {};
-/******/ 		var dataWebpackPrefix = "@tsparticles/shape-cards:";
-/******/ 		// loadScript function to load a script via script tag
-/******/ 		__webpack_require__.l = (url, done, key, chunkId) => {
-/******/ 			if(inProgress[url]) { inProgress[url].push(done); return; }
-/******/ 			var script, needAttach;
-/******/ 			if(key !== undefined) {
-/******/ 				var scripts = document.getElementsByTagName("script");
-/******/ 				for(var i = 0; i < scripts.length; i++) {
-/******/ 					var s = scripts[i];
-/******/ 					if(s.getAttribute("src") == url || s.getAttribute("data-webpack") == dataWebpackPrefix + key) { script = s; break; }
-/******/ 				}
-/******/ 			}
-/******/ 			if(!script) {
-/******/ 				needAttach = true;
-/******/ 				script = document.createElement('script');
-/******/ 		
-/******/ 				script.charset = 'utf-8';
-/******/ 				if (__webpack_require__.nc) {
-/******/ 					script.setAttribute("nonce", __webpack_require__.nc);
-/******/ 				}
-/******/ 				script.setAttribute("data-webpack", dataWebpackPrefix + key);
-/******/ 		
-/******/ 				script.src = url;
-/******/ 			}
-/******/ 			inProgress[url] = [done];
-/******/ 			var onScriptComplete = (prev, event) => {
-/******/ 				// avoid mem leaks in IE.
-/******/ 				script.onerror = script.onload = null;
-/******/ 				clearTimeout(timeout);
-/******/ 				var doneFns = inProgress[url];
-/******/ 				delete inProgress[url];
-/******/ 				script.parentNode && script.parentNode.removeChild(script);
-/******/ 				doneFns && doneFns.forEach((fn) => (fn(event)));
-/******/ 				if(prev) return prev(event);
-/******/ 			}
-/******/ 			var timeout = setTimeout(onScriptComplete.bind(null, undefined, { type: 'timeout', target: script }), 120000);
-/******/ 			script.onerror = onScriptComplete.bind(null, script.onerror);
-/******/ 			script.onload = onScriptComplete.bind(null, script.onload);
-/******/ 			needAttach && document.head.appendChild(script);
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/make namespace object */
-/******/ 	(() => {
-/******/ 		// define __esModule on exports
-/******/ 		__webpack_require__.r = (exports) => {
-/******/ 			if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
-/******/ 				Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-/******/ 			}
-/******/ 			Object.defineProperty(exports, '__esModule', { value: true });
-/******/ 		};
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/publicPath */
-/******/ 	(() => {
-/******/ 		var scriptUrl;
-/******/ 		if (__webpack_require__.g.importScripts) scriptUrl = __webpack_require__.g.location + "";
-/******/ 		var document = __webpack_require__.g.document;
-/******/ 		if (!scriptUrl && document) {
-/******/ 			if (document.currentScript && document.currentScript.tagName.toUpperCase() === 'SCRIPT')
-/******/ 				scriptUrl = document.currentScript.src;
-/******/ 			if (!scriptUrl) {
-/******/ 				var scripts = document.getElementsByTagName("script");
-/******/ 				if(scripts.length) {
-/******/ 					var i = scripts.length - 1;
-/******/ 					while (i > -1 && (!scriptUrl || !/^http(s?):/.test(scriptUrl))) scriptUrl = scripts[i--].src;
-/******/ 				}
-/******/ 			}
-/******/ 		}
-/******/ 		// When supporting browsers where an automatic publicPath is not supported you must specify an output.publicPath manually via configuration
-/******/ 		// or pass an empty string ("") and set the __webpack_public_path__ variable from your code to use your own logic.
-/******/ 		if (!scriptUrl) throw new Error("Automatic publicPath is not supported in this browser");
-/******/ 		scriptUrl = scriptUrl.replace(/^blob:/, "").replace(/#.*$/, "").replace(/\?.*$/, "").replace(/\/[^\/]+$/, "/");
-/******/ 		__webpack_require__.p = scriptUrl;
-/******/ 	})();
-/******/ 	
-/******/ 	/* webpack/runtime/jsonp chunk loading */
-/******/ 	(() => {
-/******/ 		// no baseURI
-/******/ 		
-/******/ 		// object to store loaded and loading chunks
-/******/ 		// undefined = chunk not loaded, null = chunk preloaded/prefetched
-/******/ 		// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
-/******/ 		var installedChunks = {
-/******/ 			"tsparticles.shape.cards": 0
-/******/ 		};
-/******/ 		
-/******/ 		__webpack_require__.f.j = (chunkId, promises) => {
-/******/ 				// JSONP chunk loading for javascript
-/******/ 				var installedChunkData = __webpack_require__.o(installedChunks, chunkId) ? installedChunks[chunkId] : undefined;
-/******/ 				if(installedChunkData !== 0) { // 0 means "already installed".
-/******/ 		
-/******/ 					// a Promise means "currently loading".
-/******/ 					if(installedChunkData) {
-/******/ 						promises.push(installedChunkData[2]);
-/******/ 					} else {
-/******/ 						if(true) { // all chunks have JS
-/******/ 							// setup Promise in chunk cache
-/******/ 							var promise = new Promise((resolve, reject) => (installedChunkData = installedChunks[chunkId] = [resolve, reject]));
-/******/ 							promises.push(installedChunkData[2] = promise);
-/******/ 		
-/******/ 							// start chunk loading
-/******/ 							var url = __webpack_require__.p + __webpack_require__.u(chunkId);
-/******/ 							// create error before stack unwound to get useful stacktrace later
-/******/ 							var error = new Error();
-/******/ 							var loadingEnded = (event) => {
-/******/ 								if(__webpack_require__.o(installedChunks, chunkId)) {
-/******/ 									installedChunkData = installedChunks[chunkId];
-/******/ 									if(installedChunkData !== 0) installedChunks[chunkId] = undefined;
-/******/ 									if(installedChunkData) {
-/******/ 										var errorType = event && (event.type === 'load' ? 'missing' : event.type);
-/******/ 										var realSrc = event && event.target && event.target.src;
-/******/ 										error.message = 'Loading chunk ' + chunkId + ' failed.\n(' + errorType + ': ' + realSrc + ')';
-/******/ 										error.name = 'ChunkLoadError';
-/******/ 										error.type = errorType;
-/******/ 										error.request = realSrc;
-/******/ 										installedChunkData[1](error);
-/******/ 									}
-/******/ 								}
-/******/ 							};
-/******/ 							__webpack_require__.l(url, loadingEnded, "chunk-" + chunkId, chunkId);
-/******/ 						}
-/******/ 					}
-/******/ 				}
-/******/ 		};
-/******/ 		
-/******/ 		// no prefetching
-/******/ 		
-/******/ 		// no preloaded
-/******/ 		
-/******/ 		// no HMR
-/******/ 		
-/******/ 		// no HMR manifest
-/******/ 		
-/******/ 		// no on chunks loaded
-/******/ 		
-/******/ 		// install a JSONP callback for chunk loading
-/******/ 		var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
-/******/ 			var [chunkIds, moreModules, runtime] = data;
-/******/ 			// add "moreModules" to the modules object,
-/******/ 			// then flag all "chunkIds" as loaded and fire callback
-/******/ 			var moduleId, chunkId, i = 0;
-/******/ 			if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
-/******/ 				for(moduleId in moreModules) {
-/******/ 					if(__webpack_require__.o(moreModules, moduleId)) {
-/******/ 						__webpack_require__.m[moduleId] = moreModules[moduleId];
-/******/ 					}
-/******/ 				}
-/******/ 				if(runtime) var result = runtime(__webpack_require__);
-/******/ 			}
-/******/ 			if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
-/******/ 			for(;i < chunkIds.length; i++) {
-/******/ 				chunkId = chunkIds[i];
-/******/ 				if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
-/******/ 					installedChunks[chunkId][0]();
-/******/ 				}
-/******/ 				installedChunks[chunkId] = 0;
-/******/ 			}
-/******/ 		
-/******/ 		}
-/******/ 		
-/******/ 		var chunkLoadingGlobal = this["webpackChunk_tsparticles_shape_cards"] = this["webpackChunk_tsparticles_shape_cards"] || [];
-/******/ 		chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
-/******/ 		chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
-/******/ 	})();
-/******/ 	
-/************************************************************************/
-/******/ 	
-/******/ 	// startup
-/******/ 	// Load entry module and return exports
-/******/ 	// This entry module can't be inlined because the eval devtool is used.
-/******/ 	var __webpack_exports__ = __webpack_require__("./dist/browser/index.js");
-/******/ 	
-/******/ 	return __webpack_exports__;
-/******/ })()
-;
-});
+}));
+Object.assign(globalThis.window || globalThis, { loadCardsShape: (globalThis.__tsParticlesInternals.shapes.cards || {}).loadCardsShape });
+delete (globalThis.window || globalThis).tsparticlesInternalExports;