@tsparticles/shape-cards 4.0.0-alpha.5 → 4.0.0-beta.0

package/cjs/diamonds/DiamondDrawer.js

@@ -1,9 +1,8 @@
-import { drawPath, paths } from "../Utils.js";
+import { drawPath } from "@tsparticles/path-utils";
+import { paths } from "../paths.js";
 export class DiamondDrawer {
-    constructor() {
-        this.validTypes = ["diamond", "diamonds"];
-    }
     draw(data) {
-        drawPath(data, paths.diamond);
+        const { context, radius } = data;
+        drawPath(context, radius, paths.diamonds);
     }
 }

package/cjs/diamonds/index.js

@@ -1,7 +1,9 @@
-export async function loadDiamondsCardsShape(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
-    await engine.register(async (e) => {
-        const { DiamondDrawer } = await import("./DiamondDrawer.js");
-        e.addShape(new DiamondDrawer());
+export async function loadDiamondsSuitShape(engine) {
+    engine.checkVersion("4.0.0-beta.0");
+    await engine.register(e => {
+        e.addShape(["diamond", "diamonds"], async () => {
+            const { DiamondDrawer } = await import("./DiamondDrawer.js");
+            return new DiamondDrawer();
+        });
     });
 }

package/cjs/hearts/HeartDrawer.js

@@ -1,9 +1,8 @@
-import { drawPath, paths } from "../Utils.js";
+import { drawPath } from "@tsparticles/path-utils";
+import { paths } from "../paths.js";
 export class HeartDrawer {
-    constructor() {
-        this.validTypes = ["heart", "hearts"];
-    }
     draw(data) {
-        drawPath(data, paths.heart);
+        const { context, radius } = data;
+        drawPath(context, radius, paths.hearts);
     }
 }

package/cjs/hearts/index.js

@@ -1,7 +1,9 @@
-export async function loadHeartsCardsShape(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
-    await engine.register(async (e) => {
-        const { HeartDrawer } = await import("./HeartDrawer.js");
-        e.addShape(new HeartDrawer());
+export async function loadHeartsSuitShape(engine) {
+    engine.checkVersion("4.0.0-beta.0");
+    await engine.register(e => {
+        e.addShape(["heart", "hearts"], async () => {
+            const { HeartDrawer } = await import("./HeartDrawer.js");
+            return new HeartDrawer();
+        });
     });
 }

package/cjs/index.js

@@ -1,13 +1,31 @@
+export async function loadCardSuitsShape(engine) {
+    engine.checkVersion("4.0.0-beta.0");
+    await engine.register(async (e) => {
+        const [{ loadClubsSuitShape }, { loadDiamondsSuitShape }, { loadHeartsSuitShape }, { loadSpadesSuitShape },] = await Promise.all([
+            import("./clubs/index.js"),
+            import("./diamonds/index.js"),
+            import("./hearts/index.js"),
+            import("./spades/index.js"),
+        ]);
+        await Promise.all([
+            loadClubsSuitShape(e),
+            loadDiamondsSuitShape(e),
+            loadHeartsSuitShape(e),
+            loadSpadesSuitShape(e),
+        ]);
+    });
+}
 export async function loadCardsShape(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadClubsCardsShape } = await import("./clubs/index.js"), { loadDiamondsCardsShape } = await import("./diamonds/index.js"), { loadHeartsCardsShape } = await import("./hearts/index.js"), { loadSpadesCardsShape } = await import("./spades/index.js");
-        await loadClubsCardsShape(e);
-        await loadDiamondsCardsShape(e);
-        await loadHeartsCardsShape(e);
-        await loadSpadesCardsShape(e);
+        const { loadFullCardsShape } = await import("./cards/index.js");
+        await Promise.all([
+            loadFullCardsShape(e),
+            loadCardSuitsShape(e),
+        ]);
     });
 }
+export * from "./cards/index.js";
 export * from "./clubs/index.js";
 export * from "./diamonds/index.js";
 export * from "./hearts/index.js";

package/cjs/paths.js

@@ -0,0 +1,174 @@
+import { SegmentType } from "@tsparticles/path-utils";
+import { empty, half, quarter, threeQuarter } from "@tsparticles/engine";
+import { SuitType } from "./SuitType.js";
+const eighth = quarter * half, n = half, halfN = n * half, oppositeN = -n, oppositeHalfN = -halfN, eighthN = n * eighth, threeQuarterN = n * threeQuarter;
+export const club = {
+    half: true,
+    segments: [
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: empty, y: oppositeN },
+                { x: empty, y: oppositeN },
+                { x: halfN, y: oppositeN },
+                { x: halfN, y: oppositeHalfN },
+            ],
+        },
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: halfN, y: oppositeHalfN },
+                { x: halfN, y: oppositeHalfN },
+                { x: n, y: oppositeHalfN },
+                { x: n, y: empty },
+            ],
+        },
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: n, y: empty },
+                { x: n, y: empty },
+                { x: n, y: halfN },
+                { x: halfN, y: halfN },
+            ],
+        },
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: halfN, y: halfN },
+                { x: halfN, y: halfN },
+                { x: eighthN, y: halfN },
+                { x: eighthN, y: eighthN },
+            ],
+        },
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: eighthN, y: eighthN },
+                { x: eighthN, y: halfN },
+                { x: halfN, y: n },
+                { x: halfN, y: n },
+            ],
+        },
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: halfN, y: n },
+                { x: halfN, y: n },
+                { x: empty, y: n },
+                { x: empty, y: n },
+            ],
+        },
+    ],
+};
+export const diamond = {
+    half: true,
+    segments: [
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: empty, y: n },
+                { x: empty, y: n },
+                { x: threeQuarterN, y: empty },
+                { x: threeQuarterN, y: empty },
+            ],
+        },
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: threeQuarterN, y: empty },
+                { x: threeQuarterN, y: empty },
+                { x: empty, y: oppositeN },
+                { x: empty, y: oppositeN },
+            ],
+        },
+    ],
+};
+export const heart = {
+    half: true,
+    segments: [
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: empty, y: n },
+                { x: empty, y: n },
+                { x: n, y: empty },
+                { x: n, y: oppositeHalfN },
+            ],
+        },
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: n, y: oppositeHalfN },
+                { x: n, y: oppositeHalfN },
+                { x: n, y: oppositeN },
+                { x: halfN, y: oppositeN },
+            ],
+        },
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: halfN, y: oppositeN },
+                { x: halfN, y: oppositeN },
+                { x: empty, y: oppositeN },
+                { x: empty, y: oppositeHalfN },
+            ],
+        },
+    ],
+};
+export const spade = {
+    half: true,
+    segments: [
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: empty, y: oppositeN },
+                { x: empty, y: oppositeN },
+                { x: n, y: oppositeHalfN },
+                { x: n, y: empty },
+            ],
+        },
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: n, y: empty },
+                { x: n, y: empty },
+                { x: n, y: halfN },
+                { x: halfN, y: halfN },
+            ],
+        },
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: halfN, y: halfN },
+                { x: halfN, y: halfN },
+                { x: eighthN, y: halfN },
+                { x: eighthN, y: eighthN },
+            ],
+        },
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: eighthN, y: eighthN },
+                { x: eighthN, y: halfN },
+                { x: halfN, y: n },
+                { x: halfN, y: n },
+            ],
+        },
+        {
+            type: SegmentType.bezier,
+            values: [
+                { x: halfN, y: n },
+                { x: halfN, y: n },
+                { x: empty, y: n },
+                { x: empty, y: n },
+            ],
+        },
+    ],
+};
+export const paths = {
+    [SuitType.hearts]: heart,
+    [SuitType.diamonds]: diamond,
+    [SuitType.clubs]: club,
+    [SuitType.spades]: spade,
+};

package/cjs/spades/SpadeDrawer.js

@@ -1,9 +1,8 @@
-import { drawPath, paths } from "../Utils.js";
+import { drawPath } from "@tsparticles/path-utils";
+import { paths } from "../paths.js";
 export class SpadeDrawer {
-    constructor() {
-        this.validTypes = ["spade", "spades"];
-    }
     draw(data) {
-        drawPath(data, paths.spade);
+        const { context, radius } = data;
+        drawPath(context, radius, paths.spades);
     }
 }

package/cjs/spades/index.js

@@ -1,7 +1,9 @@
-export async function loadSpadesCardsShape(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
-    await engine.register(async (e) => {
-        const { SpadeDrawer } = await import("./SpadeDrawer.js");
-        e.addShape(new SpadeDrawer());
+export async function loadSpadesSuitShape(engine) {
+    engine.checkVersion("4.0.0-beta.0");
+    await engine.register(e => {
+        e.addShape(["spade", "spades"], async () => {
+            const { SpadeDrawer } = await import("./SpadeDrawer.js");
+            return new SpadeDrawer();
+        });
     });
 }

package/cjs/utils.js

@@ -0,0 +1,100 @@
+import { double, doublePI, getStyleFromRgb, half, originPoint, safeDocument, triple, } from "@tsparticles/engine";
+import { SuitType } from "./SuitType.js";
+import { drawPath } from "@tsparticles/path-utils";
+import { paths } from "./paths.js";
+const cardWidthRatio = (double * double) / triple, cardHeightRatio = 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 };
+export 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 * half, halfHeight = cardHeight * half;
+        let cachedData = cardsCache.get(cacheKey);
+        if (!cachedData) {
+            let cacheCanvas, cacheCtx;
+            if (typeof OffscreenCanvas === "undefined") {
+                cacheCanvas = 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 * half, halfHeight = cardHeight * 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 ? getStyleFromRgb(redSuitColor, hdr) : getStyleFromRgb(blackSuitColor, hdr);
+    ctx.save();
+    drawCardBody(ctx, radius);
+    ctx.fillStyle = getStyleFromRgb({ r: 255, g: 255, b: 255 }, hdr);
+    ctx.fill();
+    ctx.strokeStyle = 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 * half;
+    ctx.save();
+    ctx.translate(topLeftX, topLeftY);
+    ctx.beginPath();
+    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 * half);
+    ctx.rotate(Math.PI);
+    ctx.save();
+    ctx.beginPath();
+    drawPath(ctx, cornerSuitSize, paths[suit]);
+    ctx.fill();
+    ctx.restore();
+    ctx.fillText(value, originPoint.x + textOffset, originPoint.y);
+    ctx.restore();
+    ctx.save();
+    ctx.beginPath();
+    drawPath(ctx, centerSuitSize, paths[suit]);
+    ctx.fillStyle = color;
+    ctx.fill();
+    ctx.restore();
+    ctx.beginPath();
+    ctx.arc(originPoint.x, originPoint.y, minRadius, minAngle, doublePI, false);
+    ctx.closePath();
+    ctx.restore();
+}
+function drawCardBody(ctx, radius) {
+    const cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * half, halfHeight = cardHeight * 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();
+}

package/dist_browser_cards_CardDrawer_js.js

@@ -0,0 +1,60 @@
+/*!
+ * 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.0
+ */
+"use strict";
+/*
+ * 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/).
+ */
+(this["webpackChunk_tsparticles_shape_cards"] = this["webpackChunk_tsparticles_shape_cards"] || []).push([["dist_browser_cards_CardDrawer_js"],{
+
+/***/ "./dist/browser/SuitType.js"
+/*!**********************************!*\
+  !*** ./dist/browser/SuitType.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 */   SuitType: () => (/* binding */ SuitType)\n/* harmony export */ });\nvar SuitType;\n(function(SuitType) {\n    SuitType[\"hearts\"] = \"hearts\";\n    SuitType[\"diamonds\"] = \"diamonds\";\n    SuitType[\"clubs\"] = \"clubs\";\n    SuitType[\"spades\"] = \"spades\";\n})(SuitType || (SuitType = {}));\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/SuitType.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/cards/CardDrawer.js"
+/*!******************************************!*\
+  !*** ./dist/browser/cards/CardDrawer.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 */   CardDrawer: () => (/* binding */ CardDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _utils_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../utils.js */ \"./dist/browser/utils.js\");\n\n\nclass CardDrawer {\n    draw(data) {\n        const { context, particle, opacity, radius } = data;\n        if (!particle.cardData) {\n            return;\n        }\n        const defaultOpacity = context.globalAlpha;\n        context.globalAlpha = opacity;\n        (0,_utils_js__WEBPACK_IMPORTED_MODULE_1__.drawRoundedCard)(context, radius, particle.cardData, particle.container.hdr, particle.isShowingBack(), particle.container.canvas.settings);\n        context.globalAlpha = defaultOpacity;\n    }\n    particleInit(_container, particle) {\n        const shape = particle.shapeData;\n        if (!shape) {\n            return;\n        }\n        particle.cardData = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.deepExtend)({}, shape);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/cards/CardDrawer.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/paths.js"
+/*!*******************************!*\
+  !*** ./dist/browser/paths.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 */   club: () => (/* binding */ club),\n/* harmony export */   diamond: () => (/* binding */ diamond),\n/* harmony export */   heart: () => (/* binding */ heart),\n/* harmony export */   paths: () => (/* binding */ paths),\n/* harmony export */   spade: () => (/* binding */ spade)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/path-utils */ \"@tsparticles/path-utils\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _SuitType_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./SuitType.js */ \"./dist/browser/SuitType.js\");\n\n\n\nconst eighth = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.quarter * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half, n = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half, halfN = n * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half, oppositeN = -n, oppositeHalfN = -halfN, eighthN = n * eighth, threeQuarterN = n * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.threeQuarter;\nconst club = {\n    half: true,\n    segments: [\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                },\n                {\n                    x: halfN,\n                    y: oppositeN\n                },\n                {\n                    x: halfN,\n                    y: oppositeHalfN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: halfN,\n                    y: oppositeHalfN\n                },\n                {\n                    x: halfN,\n                    y: oppositeHalfN\n                },\n                {\n                    x: n,\n                    y: oppositeHalfN\n                },\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: n,\n                    y: halfN\n                },\n                {\n                    x: halfN,\n                    y: halfN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: halfN,\n                    y: halfN\n                },\n                {\n                    x: halfN,\n                    y: halfN\n                },\n                {\n                    x: eighthN,\n                    y: halfN\n                },\n                {\n                    x: eighthN,\n                    y: eighthN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: eighthN,\n                    y: eighthN\n                },\n                {\n                    x: eighthN,\n                    y: halfN\n                },\n                {\n                    x: halfN,\n                    y: n\n                },\n                {\n                    x: halfN,\n                    y: n\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: halfN,\n                    y: n\n                },\n                {\n                    x: halfN,\n                    y: n\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                }\n            ]\n        }\n    ]\n};\nconst diamond = {\n    half: true,\n    segments: [\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                },\n                {\n                    x: threeQuarterN,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: threeQuarterN,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: threeQuarterN,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: threeQuarterN,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                }\n            ]\n        }\n    ]\n};\nconst heart = {\n    half: true,\n    segments: [\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                },\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: n,\n                    y: oppositeHalfN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: n,\n                    y: oppositeHalfN\n                },\n                {\n                    x: n,\n                    y: oppositeHalfN\n                },\n                {\n                    x: n,\n                    y: oppositeN\n                },\n                {\n                    x: halfN,\n                    y: oppositeN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: halfN,\n                    y: oppositeN\n                },\n                {\n                    x: halfN,\n                    y: oppositeN\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeHalfN\n                }\n            ]\n        }\n    ]\n};\nconst spade = {\n    half: true,\n    segments: [\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                },\n                {\n                    x: n,\n                    y: oppositeHalfN\n                },\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: n,\n                    y: halfN\n                },\n                {\n                    x: halfN,\n                    y: halfN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: halfN,\n                    y: halfN\n                },\n                {\n                    x: halfN,\n                    y: halfN\n                },\n                {\n                    x: eighthN,\n                    y: halfN\n                },\n                {\n                    x: eighthN,\n                    y: eighthN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: eighthN,\n                    y: eighthN\n                },\n                {\n                    x: eighthN,\n                    y: halfN\n                },\n                {\n                    x: halfN,\n                    y: n\n                },\n                {\n                    x: halfN,\n                    y: n\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: halfN,\n                    y: n\n                },\n                {\n                    x: halfN,\n                    y: n\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                }\n            ]\n        }\n    ]\n};\nconst paths = {\n    [_SuitType_js__WEBPACK_IMPORTED_MODULE_2__.SuitType.hearts]: heart,\n    [_SuitType_js__WEBPACK_IMPORTED_MODULE_2__.SuitType.diamonds]: diamond,\n    [_SuitType_js__WEBPACK_IMPORTED_MODULE_2__.SuitType.clubs]: club,\n    [_SuitType_js__WEBPACK_IMPORTED_MODULE_2__.SuitType.spades]: spade\n};\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/paths.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/utils.js"
+/*!*******************************!*\
+  !*** ./dist/browser/utils.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 */   drawRoundedCard: () => (/* binding */ drawRoundedCard)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _SuitType_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./SuitType.js */ \"./dist/browser/SuitType.js\");\n/* harmony import */ var _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @tsparticles/path-utils */ \"@tsparticles/path-utils\");\n/* harmony import */ var _paths_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./paths.js */ \"./dist/browser/paths.js\");\n\n\n\n\nconst cardWidthRatio = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.double / _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.triple, cardHeightRatio = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.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 = {\n    r: 215,\n    g: 20,\n    b: 20\n}, blackSuitColor = {\n    r: 18,\n    g: 18,\n    b: 18\n};\nfunction drawRoundedCard(ctx, radius, cardData, hdr, flipped, canvasSettings) {\n    if (flipped) {\n        drawRoundedCardBack(ctx, radius);\n    } else {\n        const cacheKey = getCacheKey(radius, hdr, cardData), cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, halfHeight = cardHeight * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half;\n        let cachedData = cardsCache.get(cacheKey);\n        if (!cachedData) {\n            let cacheCanvas, cacheCtx;\n            if (typeof OffscreenCanvas === \"undefined\") {\n                cacheCanvas = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.safeDocument)().createElement(\"canvas\");\n                cacheCanvas.width = cardWidth;\n                cacheCanvas.height = cardHeight;\n                cacheCtx = cacheCanvas.getContext(\"2d\", canvasSettings);\n            } else {\n                cacheCanvas = new OffscreenCanvas(cardWidth, cardHeight);\n                cacheCtx = cacheCanvas.getContext(\"2d\", canvasSettings);\n            }\n            if (cacheCtx) {\n                cacheCtx.translate(halfWidth, halfHeight);\n                drawRoundedCardFront(cacheCtx, radius, cardData, hdr);\n                cachedData = cacheCanvas instanceof HTMLCanvasElement ? cacheCanvas : cacheCanvas.transferToImageBitmap();\n                cardsCache.set(cacheKey, cachedData);\n            }\n        }\n        if (cachedData) {\n            ctx.drawImage(cachedData, -halfWidth, -halfHeight, cardWidth, cardHeight);\n        } else {\n            drawRoundedCardFront(ctx, radius, cardData, hdr);\n        }\n    }\n}\nfunction getCacheKey(radius, hdr, cardData) {\n    return `${radius.toFixed(fixedCacheKey)}-${hdr ? \"hdr\" : \"sdr\"}-${cardData.suit}-${cardData.value}`;\n}\nfunction drawRoundedCardBack(ctx, radius) {\n    drawCardBody(ctx, radius);\n}\nfunction drawRoundedCardFront(ctx, radius, cardData, hdr) {\n    const { suit, value } = cardData, cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, halfHeight = cardHeight * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, cornerPadding = radius * cornerPaddingRatio, cornerFontSize = radius * cornerFontRatio, cornerSuitSize = radius * cornerSuitRatio, centerSuitSize = radius * centerSuitRatio, textOffset = radius * textHorizontalOffsetRatio, suitEdgeBuffer = radius * suitEdgeBufferFactor, isRed = suit === _SuitType_js__WEBPACK_IMPORTED_MODULE_1__.SuitType.hearts || suit === _SuitType_js__WEBPACK_IMPORTED_MODULE_1__.SuitType.diamonds, color = isRed ? (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(redSuitColor, hdr) : (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)(blackSuitColor, hdr);\n    ctx.save();\n    drawCardBody(ctx, radius);\n    ctx.fillStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)({\n        r: 255,\n        g: 255,\n        b: 255\n    }, hdr);\n    ctx.fill();\n    ctx.strokeStyle = (0,_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.getStyleFromRgb)({\n        r: 0,\n        g: 0,\n        b: 0\n    }, hdr);\n    ctx.stroke();\n    ctx.fillStyle = color;\n    ctx.font = `bold ${cornerFontSize.toString()}px Arial, serif`;\n    ctx.textAlign = \"left\";\n    ctx.textBaseline = \"middle\";\n    const topLeftX = -halfWidth + cornerPadding + suitEdgeBuffer, topLeftY = -halfHeight + cornerPadding + cornerFontSize * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half;\n    ctx.save();\n    ctx.translate(topLeftX, topLeftY);\n    ctx.beginPath();\n    (0,_tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_2__.drawPath)(ctx, cornerSuitSize, _paths_js__WEBPACK_IMPORTED_MODULE_3__.paths[suit]);\n    ctx.fill();\n    ctx.restore();\n    ctx.fillText(value, topLeftX + textOffset, topLeftY);\n    ctx.save();\n    ctx.translate(halfWidth - cornerPadding - suitEdgeBuffer, halfHeight - cornerPadding - cornerFontSize * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half);\n    ctx.rotate(Math.PI);\n    ctx.save();\n    ctx.beginPath();\n    (0,_tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_2__.drawPath)(ctx, cornerSuitSize, _paths_js__WEBPACK_IMPORTED_MODULE_3__.paths[suit]);\n    ctx.fill();\n    ctx.restore();\n    ctx.fillText(value, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x + textOffset, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y);\n    ctx.restore();\n    ctx.save();\n    ctx.beginPath();\n    (0,_tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_2__.drawPath)(ctx, centerSuitSize, _paths_js__WEBPACK_IMPORTED_MODULE_3__.paths[suit]);\n    ctx.fillStyle = color;\n    ctx.fill();\n    ctx.restore();\n    ctx.beginPath();\n    ctx.arc(_tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.x, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.originPoint.y, minRadius, minAngle, _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.doublePI, false);\n    ctx.closePath();\n    ctx.restore();\n}\nfunction drawCardBody(ctx, radius) {\n    const cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, halfHeight = cardHeight * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_0__.half, cornerRadius = radius * cornerRadiusRatio;\n    ctx.beginPath();\n    ctx.moveTo(-halfWidth + cornerRadius, -halfHeight);\n    ctx.lineTo(halfWidth - cornerRadius, -halfHeight);\n    ctx.quadraticCurveTo(halfWidth, -halfHeight, halfWidth, -halfHeight + cornerRadius);\n    ctx.lineTo(halfWidth, halfHeight - cornerRadius);\n    ctx.quadraticCurveTo(halfWidth, halfHeight, halfWidth - cornerRadius, halfHeight);\n    ctx.lineTo(-halfWidth + cornerRadius, halfHeight);\n    ctx.quadraticCurveTo(-halfWidth, halfHeight, -halfWidth, halfHeight - cornerRadius);\n    ctx.lineTo(-halfWidth, -halfHeight + cornerRadius);\n    ctx.quadraticCurveTo(-halfWidth, -halfHeight, -halfWidth + cornerRadius, -halfHeight);\n    ctx.closePath();\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/utils.js?\n}");
+
+/***/ }
+
+}]);

package/dist_browser_clubs_ClubDrawer_js.js

@@ -4,7 +4,7 @@
  * Demo / Generator : https://particles.js.org/
  * GitHub : https://www.github.com/matteobruni/tsparticles
  * How to use? : Check the GitHub README
- * v4.0.0-alpha.5
+ * v4.0.0-beta.0
  */
 "use strict";
 /*
@@ -17,13 +17,13 @@
  */
 (this["webpackChunk_tsparticles_shape_cards"] = this["webpackChunk_tsparticles_shape_cards"] || []).push([["dist_browser_clubs_ClubDrawer_js"],{
 
-/***/ "./dist/browser/Utils.js"
-/*!*******************************!*\
-  !*** ./dist/browser/Utils.js ***!
-  \*******************************/
+/***/ "./dist/browser/SuitType.js"
+/*!**********************************!*\
+  !*** ./dist/browser/SuitType.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 */   drawPath: () => (/* binding */ drawPath),\n/* harmony export */   paths: () => (/* binding */ paths)\n/* harmony export */ });\nfunction drawPath(data, path) {\n  if (!path.segments.length || !path.segments[0].values.length) {\n    return;\n  }\n  const {\n    context,\n    radius\n  } = data;\n  context.moveTo(path.segments[0].values[0].x * radius, path.segments[0].values[0].y * radius);\n  for (const segment of path.segments) {\n    context.bezierCurveTo(segment.values[1].x * radius, segment.values[1].y * radius, segment.values[2].x * radius, segment.values[2].y * radius, segment.values[3].x * radius, segment.values[3].y * radius);\n  }\n  for (let i = path.segments.length - 1; i >= 0; i--) {\n    const segment = path.segments[i];\n    context.bezierCurveTo(-segment.values[2].x * radius, segment.values[2].y * radius, -segment.values[1].x * radius, segment.values[1].y * radius, -segment.values[0].x * radius, segment.values[0].y * radius);\n  }\n}\nconst n = 0.5;\nconst paths = {\n  heart: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: -n / 2\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n / 2\n      }]\n    }]\n  },\n  diamond: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 3 * n / 4,\n        y: 0\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }]\n    }]\n  },\n  club: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n\n      }, {\n        x: n / 2,\n        y: -n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: -n / 2\n      }, {\n        x: n / 2,\n        y: -n / 2\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 8\n      }]\n    }, {\n      values: [{\n        x: n / 8,\n        y: n / 8\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }]\n    }]\n  },\n  spade: {\n    segments: [{\n      values: [{\n        x: 0,\n        y: -n\n      }, {\n        x: 0,\n        y: -n\n      }, {\n        x: n,\n        y: -n / 2\n      }, {\n        x: n,\n        y: 0\n      }]\n    }, {\n      values: [{\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: 0\n      }, {\n        x: n,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 8,\n        y: n / 8\n      }]\n    }, {\n      values: [{\n        x: n / 8,\n        y: n / 8\n      }, {\n        x: n / 8,\n        y: n / 2\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }]\n    }, {\n      values: [{\n        x: n / 2,\n        y: n\n      }, {\n        x: n / 2,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }, {\n        x: 0,\n        y: n\n      }]\n    }]\n  }\n};\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/Utils.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   SuitType: () => (/* binding */ SuitType)\n/* harmony export */ });\nvar SuitType;\n(function(SuitType) {\n    SuitType[\"hearts\"] = \"hearts\";\n    SuitType[\"diamonds\"] = \"diamonds\";\n    SuitType[\"clubs\"] = \"clubs\";\n    SuitType[\"spades\"] = \"spades\";\n})(SuitType || (SuitType = {}));\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/SuitType.js?\n}");
 
 /***/ },
 
@@ -33,7 +33,17 @@ eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpa
   \******************************************/
 (__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 */   ClubDrawer: () => (/* binding */ ClubDrawer)\n/* harmony export */ });\n/* harmony import */ var _Utils_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ../Utils.js */ \"./dist/browser/Utils.js\");\n\nclass ClubDrawer {\n  constructor() {\n    this.validTypes = [\"club\", \"clubs\"];\n  }\n  draw(data) {\n    (0,_Utils_js__WEBPACK_IMPORTED_MODULE_0__.drawPath)(data, _Utils_js__WEBPACK_IMPORTED_MODULE_0__.paths.club);\n  }\n}\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/clubs/ClubDrawer.js?\n}");
+eval("{__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpack_require__.d(__webpack_exports__, {\n/* harmony export */   ClubDrawer: () => (/* binding */ ClubDrawer)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/path-utils */ \"@tsparticles/path-utils\");\n/* harmony import */ var _paths_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ../paths.js */ \"./dist/browser/paths.js\");\n\n\nclass ClubDrawer {\n    draw(data) {\n        const { context, radius } = data;\n        (0,_tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.drawPath)(context, radius, _paths_js__WEBPACK_IMPORTED_MODULE_1__.paths.clubs);\n    }\n}\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/clubs/ClubDrawer.js?\n}");
+
+/***/ },
+
+/***/ "./dist/browser/paths.js"
+/*!*******************************!*\
+  !*** ./dist/browser/paths.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 */   club: () => (/* binding */ club),\n/* harmony export */   diamond: () => (/* binding */ diamond),\n/* harmony export */   heart: () => (/* binding */ heart),\n/* harmony export */   paths: () => (/* binding */ paths),\n/* harmony export */   spade: () => (/* binding */ spade)\n/* harmony export */ });\n/* harmony import */ var _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @tsparticles/path-utils */ \"@tsparticles/path-utils\");\n/* harmony import */ var _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @tsparticles/engine */ \"@tsparticles/engine\");\n/* harmony import */ var _SuitType_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ./SuitType.js */ \"./dist/browser/SuitType.js\");\n\n\n\nconst eighth = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.quarter * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half, n = _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half, halfN = n * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.half, oppositeN = -n, oppositeHalfN = -halfN, eighthN = n * eighth, threeQuarterN = n * _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.threeQuarter;\nconst club = {\n    half: true,\n    segments: [\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                },\n                {\n                    x: halfN,\n                    y: oppositeN\n                },\n                {\n                    x: halfN,\n                    y: oppositeHalfN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: halfN,\n                    y: oppositeHalfN\n                },\n                {\n                    x: halfN,\n                    y: oppositeHalfN\n                },\n                {\n                    x: n,\n                    y: oppositeHalfN\n                },\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: n,\n                    y: halfN\n                },\n                {\n                    x: halfN,\n                    y: halfN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: halfN,\n                    y: halfN\n                },\n                {\n                    x: halfN,\n                    y: halfN\n                },\n                {\n                    x: eighthN,\n                    y: halfN\n                },\n                {\n                    x: eighthN,\n                    y: eighthN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: eighthN,\n                    y: eighthN\n                },\n                {\n                    x: eighthN,\n                    y: halfN\n                },\n                {\n                    x: halfN,\n                    y: n\n                },\n                {\n                    x: halfN,\n                    y: n\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: halfN,\n                    y: n\n                },\n                {\n                    x: halfN,\n                    y: n\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                }\n            ]\n        }\n    ]\n};\nconst diamond = {\n    half: true,\n    segments: [\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                },\n                {\n                    x: threeQuarterN,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: threeQuarterN,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: threeQuarterN,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: threeQuarterN,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                }\n            ]\n        }\n    ]\n};\nconst heart = {\n    half: true,\n    segments: [\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                },\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: n,\n                    y: oppositeHalfN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: n,\n                    y: oppositeHalfN\n                },\n                {\n                    x: n,\n                    y: oppositeHalfN\n                },\n                {\n                    x: n,\n                    y: oppositeN\n                },\n                {\n                    x: halfN,\n                    y: oppositeN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: halfN,\n                    y: oppositeN\n                },\n                {\n                    x: halfN,\n                    y: oppositeN\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeHalfN\n                }\n            ]\n        }\n    ]\n};\nconst spade = {\n    half: true,\n    segments: [\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: oppositeN\n                },\n                {\n                    x: n,\n                    y: oppositeHalfN\n                },\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: n,\n                    y: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty\n                },\n                {\n                    x: n,\n                    y: halfN\n                },\n                {\n                    x: halfN,\n                    y: halfN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: halfN,\n                    y: halfN\n                },\n                {\n                    x: halfN,\n                    y: halfN\n                },\n                {\n                    x: eighthN,\n                    y: halfN\n                },\n                {\n                    x: eighthN,\n                    y: eighthN\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: eighthN,\n                    y: eighthN\n                },\n                {\n                    x: eighthN,\n                    y: halfN\n                },\n                {\n                    x: halfN,\n                    y: n\n                },\n                {\n                    x: halfN,\n                    y: n\n                }\n            ]\n        },\n        {\n            type: _tsparticles_path_utils__WEBPACK_IMPORTED_MODULE_0__.SegmentType.bezier,\n            values: [\n                {\n                    x: halfN,\n                    y: n\n                },\n                {\n                    x: halfN,\n                    y: n\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                },\n                {\n                    x: _tsparticles_engine__WEBPACK_IMPORTED_MODULE_1__.empty,\n                    y: n\n                }\n            ]\n        }\n    ]\n};\nconst paths = {\n    [_SuitType_js__WEBPACK_IMPORTED_MODULE_2__.SuitType.hearts]: heart,\n    [_SuitType_js__WEBPACK_IMPORTED_MODULE_2__.SuitType.diamonds]: diamond,\n    [_SuitType_js__WEBPACK_IMPORTED_MODULE_2__.SuitType.clubs]: club,\n    [_SuitType_js__WEBPACK_IMPORTED_MODULE_2__.SuitType.spades]: spade\n};\n\n\n//# sourceURL=webpack://@tsparticles/shape-cards/./dist/browser/paths.js?\n}");
 
 /***/ }