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

package/111.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_cards=this.webpackChunk_tsparticles_shape_cards||[]).push([[111],{889(e,y,t){var p,x;t.d(y,{U:()=>p}),(x=p||(p={})).hearts="hearts",x.diamonds="diamonds",x.clubs="clubs",x.spades="spades"},111(e,y,t){t.d(y,{DiamondDrawer:()=>s});var p=t(580),x=t(674);class s{draw(e){let{context:y,radius:t}=e;(0,p.drawPath)(y,t,x.f0.diamonds)}}},674(e,y,t){t.d(y,{f0:()=>v});var p=t(580),x=t(303),s=t(889);let a=x.quarter*x.half,m=x.half,r=m*x.half,l=-m,n=-r,i=m*a,u=m*x.threeQuarter,b={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:l},{x:x.empty,y:l},{x:r,y:l},{x:r,y:n}]},{type:p.SegmentType.bezier,values:[{x:r,y:n},{x:r,y:n},{x:m,y:n},{x:m,y:x.empty}]},{type:p.SegmentType.bezier,values:[{x:m,y:x.empty},{x:m,y:x.empty},{x:m,y:r},{x:r,y:r}]},{type:p.SegmentType.bezier,values:[{x:r,y:r},{x:r,y:r},{x:i,y:r},{x:i,y:i}]},{type:p.SegmentType.bezier,values:[{x:i,y:i},{x:i,y:r},{x:r,y:m},{x:r,y:m}]},{type:p.SegmentType.bezier,values:[{x:r,y:m},{x:r,y:m},{x:x.empty,y:m},{x:x.empty,y:m}]}]},g={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:m},{x:x.empty,y:m},{x:u,y:x.empty},{x:u,y:x.empty}]},{type:p.SegmentType.bezier,values:[{x:u,y:x.empty},{x:u,y:x.empty},{x:x.empty,y:l},{x:x.empty,y:l}]}]},d={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:m},{x:x.empty,y:m},{x:m,y:x.empty},{x:m,y:n}]},{type:p.SegmentType.bezier,values:[{x:m,y:n},{x:m,y:n},{x:m,y:l},{x:r,y:l}]},{type:p.SegmentType.bezier,values:[{x:r,y:l},{x:r,y:l},{x:x.empty,y:l},{x:x.empty,y:n}]}]},h={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:l},{x:x.empty,y:l},{x:m,y:n},{x:m,y:x.empty}]},{type:p.SegmentType.bezier,values:[{x:m,y:x.empty},{x:m,y:x.empty},{x:m,y:r},{x:r,y:r}]},{type:p.SegmentType.bezier,values:[{x:r,y:r},{x:r,y:r},{x:i,y:r},{x:i,y:i}]},{type:p.SegmentType.bezier,values:[{x:i,y:i},{x:i,y:r},{x:r,y:m},{x:r,y:m}]},{type:p.SegmentType.bezier,values:[{x:r,y:m},{x:r,y:m},{x:x.empty,y:m},{x:x.empty,y:m}]}]},v={[s.U.hearts]:d,[s.U.diamonds]:g,[s.U.clubs]:b,[s.U.spades]:h}}}]);

package/222.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_cards=this.webpackChunk_tsparticles_shape_cards||[]).push([[222],{889(e,t,a){var y,l;a.d(t,{U:()=>y}),(l=y||(y={})).hearts="hearts",l.diamonds="diamonds",l.clubs="clubs",l.spades="spades"},222(e,t,a){a.d(t,{CardDrawer:()=>h});var y=a(303),l=a(889),r=a(580),s=a(674);let i=y.double*y.double/y.triple,n=y.double,p=new Map,x={r:215,g:20,b:20},m={r:18,g:18,b:18};function o(e,t,a,p){let{suit:o,value:h}=a,d=t*i,f=t*n,u=d*y.half,b=f*y.half,v=.2*t,c=.4*t,T=.3*t,S=.25*t,z=.1*t,P=o===l.U.hearts||o===l.U.diamonds?(0,y.getStyleFromRgb)(x,p):(0,y.getStyleFromRgb)(m,p);e.save(),g(e,t),e.fillStyle=(0,y.getStyleFromRgb)({r:255,g:255,b:255},p),e.fill(),e.strokeStyle=(0,y.getStyleFromRgb)({r:0,g:0,b:0},p),e.stroke(),e.fillStyle=P,e.font=`bold ${c.toString()}px Arial, serif`,e.textAlign="left",e.textBaseline="middle";let w=-u+v+z,C=-b+v+c*y.half;e.save(),e.translate(w,C),e.beginPath(),(0,r.drawPath)(e,T,s.f0[o]),e.fill(),e.restore(),e.fillText(h,w+S,C),e.save(),e.translate(u-v-z,b-v-c*y.half),e.rotate(Math.PI),e.save(),e.beginPath(),(0,r.drawPath)(e,T,s.f0[o]),e.fill(),e.restore(),e.fillText(h,y.originPoint.x+S,y.originPoint.y),e.restore(),e.save(),e.beginPath(),(0,r.drawPath)(e,.7*t,s.f0[o]),e.fillStyle=P,e.fill(),e.restore(),e.beginPath(),e.arc(y.originPoint.x,y.originPoint.y,0,0,y.doublePI,!1),e.closePath(),e.restore()}function g(e,t){let a=t*i*y.half,l=t*n*y.half,r=.2*t;e.beginPath(),e.moveTo(-a+r,-l),e.lineTo(a-r,-l),e.quadraticCurveTo(a,-l,a,-l+r),e.lineTo(a,l-r),e.quadraticCurveTo(a,l,a-r,l),e.lineTo(-a+r,l),e.quadraticCurveTo(-a,l,-a,l-r),e.lineTo(-a,-l+r),e.quadraticCurveTo(-a,-l,-a+r,-l),e.closePath()}class h{draw(e){let{context:t,particle:a,opacity:l,radius:r}=e;if(!a.cardData)return;let s=t.globalAlpha;t.globalAlpha=l,function(e,t,a,l,r,s){if(r)g(e,t);else{var x,m,h;let r=(x=t,m=l,h=a,`${x.toFixed(2)}-${m?"hdr":"sdr"}-${h.suit}-${h.value}`),g=t*i,d=t*n,f=g*y.half,u=d*y.half,b=p.get(r);if(!b){let e,i;"u"<typeof OffscreenCanvas?((e=(0,y.safeDocument)().createElement("canvas")).width=g,e.height=d,i=e.getContext("2d",s)):i=(e=new OffscreenCanvas(g,d)).getContext("2d",s),i&&(i.translate(f,u),o(i,t,a,l),b=e instanceof HTMLCanvasElement?e:e.transferToImageBitmap(),p.set(r,b))}b?e.drawImage(b,-f,-u,g,d):o(e,t,a,l)}}(t,r,a.cardData,a.container.hdr,a.isShowingBack(),a.container.canvas.settings),t.globalAlpha=s}particleInit(e,t){let a=t.shapeData;a&&(t.cardData=(0,y.deepExtend)({},a))}}},674(e,t,a){a.d(t,{f0:()=>u});var y=a(580),l=a(303),r=a(889);let s=l.quarter*l.half,i=l.half,n=i*l.half,p=-i,x=-n,m=i*s,o=i*l.threeQuarter,g={half:!0,segments:[{type:y.SegmentType.bezier,values:[{x:l.empty,y:p},{x:l.empty,y:p},{x:n,y:p},{x:n,y:x}]},{type:y.SegmentType.bezier,values:[{x:n,y:x},{x:n,y:x},{x:i,y:x},{x:i,y:l.empty}]},{type:y.SegmentType.bezier,values:[{x:i,y:l.empty},{x:i,y:l.empty},{x:i,y:n},{x:n,y:n}]},{type:y.SegmentType.bezier,values:[{x:n,y:n},{x:n,y:n},{x:m,y:n},{x:m,y:m}]},{type:y.SegmentType.bezier,values:[{x:m,y:m},{x:m,y:n},{x:n,y:i},{x:n,y:i}]},{type:y.SegmentType.bezier,values:[{x:n,y:i},{x:n,y:i},{x:l.empty,y:i},{x:l.empty,y:i}]}]},h={half:!0,segments:[{type:y.SegmentType.bezier,values:[{x:l.empty,y:i},{x:l.empty,y:i},{x:o,y:l.empty},{x:o,y:l.empty}]},{type:y.SegmentType.bezier,values:[{x:o,y:l.empty},{x:o,y:l.empty},{x:l.empty,y:p},{x:l.empty,y:p}]}]},d={half:!0,segments:[{type:y.SegmentType.bezier,values:[{x:l.empty,y:i},{x:l.empty,y:i},{x:i,y:l.empty},{x:i,y:x}]},{type:y.SegmentType.bezier,values:[{x:i,y:x},{x:i,y:x},{x:i,y:p},{x:n,y:p}]},{type:y.SegmentType.bezier,values:[{x:n,y:p},{x:n,y:p},{x:l.empty,y:p},{x:l.empty,y:x}]}]},f={half:!0,segments:[{type:y.SegmentType.bezier,values:[{x:l.empty,y:p},{x:l.empty,y:p},{x:i,y:x},{x:i,y:l.empty}]},{type:y.SegmentType.bezier,values:[{x:i,y:l.empty},{x:i,y:l.empty},{x:i,y:n},{x:n,y:n}]},{type:y.SegmentType.bezier,values:[{x:n,y:n},{x:n,y:n},{x:m,y:n},{x:m,y:m}]},{type:y.SegmentType.bezier,values:[{x:m,y:m},{x:m,y:n},{x:n,y:i},{x:n,y:i}]},{type:y.SegmentType.bezier,values:[{x:n,y:i},{x:n,y:i},{x:l.empty,y:i},{x:l.empty,y:i}]}]},u={[r.U.hearts]:d,[r.U.diamonds]:h,[r.U.clubs]:g,[r.U.spades]:f}}}]);

package/499.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_cards=this.webpackChunk_tsparticles_shape_cards||[]).push([[499],{889(e,y,t){var p,x;t.d(y,{U:()=>p}),(x=p||(p={})).hearts="hearts",x.diamonds="diamonds",x.clubs="clubs",x.spades="spades"},499(e,y,t){t.d(y,{ClubDrawer:()=>s});var p=t(580),x=t(674);class s{draw(e){let{context:y,radius:t}=e;(0,p.drawPath)(y,t,x.f0.clubs)}}},674(e,y,t){t.d(y,{f0:()=>d});var p=t(580),x=t(303),s=t(889);let a=x.quarter*x.half,m=x.half,r=m*x.half,l=-m,u=-r,n=m*a,i=m*x.threeQuarter,b={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:l},{x:x.empty,y:l},{x:r,y:l},{x:r,y:u}]},{type:p.SegmentType.bezier,values:[{x:r,y:u},{x:r,y:u},{x:m,y:u},{x:m,y:x.empty}]},{type:p.SegmentType.bezier,values:[{x:m,y:x.empty},{x:m,y:x.empty},{x:m,y:r},{x:r,y:r}]},{type:p.SegmentType.bezier,values:[{x:r,y:r},{x:r,y:r},{x:n,y:r},{x:n,y:n}]},{type:p.SegmentType.bezier,values:[{x:n,y:n},{x:n,y:r},{x:r,y:m},{x:r,y:m}]},{type:p.SegmentType.bezier,values:[{x:r,y:m},{x:r,y:m},{x:x.empty,y:m},{x:x.empty,y:m}]}]},g={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:m},{x:x.empty,y:m},{x:i,y:x.empty},{x:i,y:x.empty}]},{type:p.SegmentType.bezier,values:[{x:i,y:x.empty},{x:i,y:x.empty},{x:x.empty,y:l},{x:x.empty,y:l}]}]},h={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:m},{x:x.empty,y:m},{x:m,y:x.empty},{x:m,y:u}]},{type:p.SegmentType.bezier,values:[{x:m,y:u},{x:m,y:u},{x:m,y:l},{x:r,y:l}]},{type:p.SegmentType.bezier,values:[{x:r,y:l},{x:r,y:l},{x:x.empty,y:l},{x:x.empty,y:u}]}]},v={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:l},{x:x.empty,y:l},{x:m,y:u},{x:m,y:x.empty}]},{type:p.SegmentType.bezier,values:[{x:m,y:x.empty},{x:m,y:x.empty},{x:m,y:r},{x:r,y:r}]},{type:p.SegmentType.bezier,values:[{x:r,y:r},{x:r,y:r},{x:n,y:r},{x:n,y:n}]},{type:p.SegmentType.bezier,values:[{x:n,y:n},{x:n,y:r},{x:r,y:m},{x:r,y:m}]},{type:p.SegmentType.bezier,values:[{x:r,y:m},{x:r,y:m},{x:x.empty,y:m},{x:x.empty,y:m}]}]},d={[s.U.hearts]:h,[s.U.diamonds]:g,[s.U.clubs]:b,[s.U.spades]:v}}}]);

package/631.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_cards=this.webpackChunk_tsparticles_shape_cards||[]).push([[631],{889(e,y,t){var p,x;t.d(y,{U:()=>p}),(x=p||(p={})).hearts="hearts",x.diamonds="diamonds",x.clubs="clubs",x.spades="spades"},631(e,y,t){t.d(y,{HeartDrawer:()=>s});var p=t(580),x=t(674);class s{draw(e){let{context:y,radius:t}=e;(0,p.drawPath)(y,t,x.f0.hearts)}}},674(e,y,t){t.d(y,{f0:()=>d});var p=t(580),x=t(303),s=t(889);let a=x.quarter*x.half,m=x.half,r=m*x.half,l=-m,n=-r,u=m*a,i=m*x.threeQuarter,b={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:l},{x:x.empty,y:l},{x:r,y:l},{x:r,y:n}]},{type:p.SegmentType.bezier,values:[{x:r,y:n},{x:r,y:n},{x:m,y:n},{x:m,y:x.empty}]},{type:p.SegmentType.bezier,values:[{x:m,y:x.empty},{x:m,y:x.empty},{x:m,y:r},{x:r,y:r}]},{type:p.SegmentType.bezier,values:[{x:r,y:r},{x:r,y:r},{x:u,y:r},{x:u,y:u}]},{type:p.SegmentType.bezier,values:[{x:u,y:u},{x:u,y:r},{x:r,y:m},{x:r,y:m}]},{type:p.SegmentType.bezier,values:[{x:r,y:m},{x:r,y:m},{x:x.empty,y:m},{x:x.empty,y:m}]}]},g={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:m},{x:x.empty,y:m},{x:i,y:x.empty},{x:i,y:x.empty}]},{type:p.SegmentType.bezier,values:[{x:i,y:x.empty},{x:i,y:x.empty},{x:x.empty,y:l},{x:x.empty,y:l}]}]},h={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:m},{x:x.empty,y:m},{x:m,y:x.empty},{x:m,y:n}]},{type:p.SegmentType.bezier,values:[{x:m,y:n},{x:m,y:n},{x:m,y:l},{x:r,y:l}]},{type:p.SegmentType.bezier,values:[{x:r,y:l},{x:r,y:l},{x:x.empty,y:l},{x:x.empty,y:n}]}]},v={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:l},{x:x.empty,y:l},{x:m,y:n},{x:m,y:x.empty}]},{type:p.SegmentType.bezier,values:[{x:m,y:x.empty},{x:m,y:x.empty},{x:m,y:r},{x:r,y:r}]},{type:p.SegmentType.bezier,values:[{x:r,y:r},{x:r,y:r},{x:u,y:r},{x:u,y:u}]},{type:p.SegmentType.bezier,values:[{x:u,y:u},{x:u,y:r},{x:r,y:m},{x:r,y:m}]},{type:p.SegmentType.bezier,values:[{x:r,y:m},{x:r,y:m},{x:x.empty,y:m},{x:x.empty,y:m}]}]},d={[s.U.hearts]:h,[s.U.diamonds]:g,[s.U.clubs]:b,[s.U.spades]:v}}}]);

package/841.min.js

@@ -0,0 +1 @@
+"use strict";(this.webpackChunk_tsparticles_shape_cards=this.webpackChunk_tsparticles_shape_cards||[]).push([[841],{889(e,y,t){var p,x;t.d(y,{U:()=>p}),(x=p||(p={})).hearts="hearts",x.diamonds="diamonds",x.clubs="clubs",x.spades="spades"},674(e,y,t){t.d(y,{f0:()=>d});var p=t(580),x=t(303),s=t(889);let a=x.quarter*x.half,m=x.half,r=m*x.half,l=-m,n=-r,u=m*a,i=m*x.threeQuarter,b={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:l},{x:x.empty,y:l},{x:r,y:l},{x:r,y:n}]},{type:p.SegmentType.bezier,values:[{x:r,y:n},{x:r,y:n},{x:m,y:n},{x:m,y:x.empty}]},{type:p.SegmentType.bezier,values:[{x:m,y:x.empty},{x:m,y:x.empty},{x:m,y:r},{x:r,y:r}]},{type:p.SegmentType.bezier,values:[{x:r,y:r},{x:r,y:r},{x:u,y:r},{x:u,y:u}]},{type:p.SegmentType.bezier,values:[{x:u,y:u},{x:u,y:r},{x:r,y:m},{x:r,y:m}]},{type:p.SegmentType.bezier,values:[{x:r,y:m},{x:r,y:m},{x:x.empty,y:m},{x:x.empty,y:m}]}]},g={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:m},{x:x.empty,y:m},{x:i,y:x.empty},{x:i,y:x.empty}]},{type:p.SegmentType.bezier,values:[{x:i,y:x.empty},{x:i,y:x.empty},{x:x.empty,y:l},{x:x.empty,y:l}]}]},h={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:m},{x:x.empty,y:m},{x:m,y:x.empty},{x:m,y:n}]},{type:p.SegmentType.bezier,values:[{x:m,y:n},{x:m,y:n},{x:m,y:l},{x:r,y:l}]},{type:p.SegmentType.bezier,values:[{x:r,y:l},{x:r,y:l},{x:x.empty,y:l},{x:x.empty,y:n}]}]},v={half:!0,segments:[{type:p.SegmentType.bezier,values:[{x:x.empty,y:l},{x:x.empty,y:l},{x:m,y:n},{x:m,y:x.empty}]},{type:p.SegmentType.bezier,values:[{x:m,y:x.empty},{x:m,y:x.empty},{x:m,y:r},{x:r,y:r}]},{type:p.SegmentType.bezier,values:[{x:r,y:r},{x:r,y:r},{x:u,y:r},{x:u,y:u}]},{type:p.SegmentType.bezier,values:[{x:u,y:u},{x:u,y:r},{x:r,y:m},{x:r,y:m}]},{type:p.SegmentType.bezier,values:[{x:r,y:m},{x:r,y:m},{x:x.empty,y:m},{x:x.empty,y:m}]}]},d={[s.U.hearts]:h,[s.U.diamonds]:g,[s.U.clubs]:b,[s.U.spades]:v}},841(e,y,t){t.d(y,{SpadeDrawer:()=>s});var p=t(580),x=t(674);class s{draw(e){let{context:y,radius:t}=e;(0,p.drawPath)(y,t,x.f0.spades)}}}}]);

package/browser/cards/CardDrawer.js

@@ -1,15 +1,15 @@
 import { deepExtend } from "@tsparticles/engine";
 import { drawRoundedCard } from "../utils.js";
 export class CardDrawer {
-    constructor() {
-        this.validTypes = ["card"];
-    }
     draw(data) {
-        const { context, particle, radius } = data;
+        const { context, particle, opacity, radius } = data;
         if (!particle.cardData) {
             return;
         }
-        drawRoundedCard(context, radius, particle.cardData, particle.container.hdr, particle.isShowingBack());
+        const defaultOpacity = context.globalAlpha;
+        context.globalAlpha = opacity;
+        drawRoundedCard(context, radius, particle.cardData, particle.container.hdr, particle.isShowingBack(), particle.container.canvas.settings);
+        context.globalAlpha = defaultOpacity;
     }
     particleInit(_container, particle) {
         const shape = particle.shapeData;

package/browser/cards/index.js

@@ -1,7 +1,9 @@
 export async function loadFullCardsShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { CardDrawer } = await import("./CardDrawer.js");
-        e.addShape(new CardDrawer());
+    engine.checkVersion("4.0.0-beta.0");
+    await engine.register(e => {
+        e.addShape(["card"], async () => {
+            const { CardDrawer } = await import("./CardDrawer.js");
+            return new CardDrawer();
+        });
     });
 }

package/browser/clubs/ClubDrawer.js

@@ -1,9 +1,6 @@
 import { drawPath } from "@tsparticles/path-utils";
 import { paths } from "../paths.js";
 export class ClubDrawer {
-    constructor() {
-        this.validTypes = ["club", "clubs"];
-    }
     draw(data) {
         const { context, radius } = data;
         drawPath(context, radius, paths.clubs);

package/browser/clubs/index.js

@@ -1,7 +1,9 @@
 export async function loadClubsSuitShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { ClubDrawer } = await import("./ClubDrawer.js");
-        e.addShape(new ClubDrawer());
+    engine.checkVersion("4.0.0-beta.0");
+    await engine.register(e => {
+        e.addShape(["club", "clubs"], async () => {
+            const { ClubDrawer } = await import("./ClubDrawer.js");
+            return new ClubDrawer();
+        });
     });
 }

package/browser/diamonds/DiamondDrawer.js

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

package/browser/diamonds/index.js

@@ -1,7 +1,9 @@
 export async function loadDiamondsSuitShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { DiamondDrawer } = await import("./DiamondDrawer.js");
-        e.addShape(new DiamondDrawer());
+    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/browser/hearts/HeartDrawer.js

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

package/browser/hearts/index.js

@@ -1,7 +1,9 @@
 export async function loadHeartsSuitShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { HeartDrawer } = await import("./HeartDrawer.js");
-        e.addShape(new HeartDrawer());
+    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/browser/index.js

@@ -1,19 +1,28 @@
 export async function loadCardSuitsShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadClubsSuitShape } = await import("./clubs/index.js"), { loadDiamondsSuitShape } = await import("./diamonds/index.js"), { loadHeartsSuitShape } = await import("./hearts/index.js"), { loadSpadesSuitShape } = await import("./spades/index.js");
-        await loadClubsSuitShape(e);
-        await loadDiamondsSuitShape(e);
-        await loadHeartsSuitShape(e);
-        await loadSpadesSuitShape(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.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
         const { loadFullCardsShape } = await import("./cards/index.js");
-        await loadFullCardsShape(e);
-        await loadCardSuitsShape(e);
+        await Promise.all([
+            loadFullCardsShape(e),
+            loadCardSuitsShape(e),
+        ]);
     });
 }
 export * from "./cards/index.js";

package/browser/spades/SpadeDrawer.js

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

package/browser/spades/index.js

@@ -1,7 +1,9 @@
 export async function loadSpadesSuitShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { SpadeDrawer } = await import("./SpadeDrawer.js");
-        e.addShape(new SpadeDrawer());
+    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/browser/utils.js

@@ -1,39 +1,50 @@
-import { double, doublePI, getStyleFromRgb, half, originPoint, triple } from "@tsparticles/engine";
+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.9, cornerPaddingRatio = 0.2, textHorizontalOffsetRatio = 0.25, minRadius = 0, minAngle = 0, suitEdgeBufferFactor = 0.1, fixedCacheKey = 2, cardsCache = new Map();
-export function drawRoundedCard(ctx, radius, cardData, hdr, flipped) {
+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, cardData), cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * half, halfHeight = cardHeight * half;
-        if (!cardsCache.has(cacheKey)) {
-            const canvas = new OffscreenCanvas(cardWidth, cardHeight), offCtx = canvas.getContext("2d");
-            if (offCtx) {
-                offCtx.translate(halfWidth, halfHeight);
-                drawRoundedCardFront(offCtx, radius, cardData, hdr);
-                cardsCache.set(cacheKey, canvas);
+        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);
             }
         }
-        const cachedCanvas = cardsCache.get(cacheKey);
-        if (cachedCanvas) {
-            ctx.drawImage(cachedCanvas, -halfWidth, -halfHeight, cardWidth, cardHeight);
+        if (cachedData) {
+            ctx.drawImage(cachedData, -halfWidth, -halfHeight, cardWidth, cardHeight);
         }
         else {
             drawRoundedCardFront(ctx, radius, cardData, hdr);
         }
     }
 }
-function getCacheKey(radius, cardData) {
-    return `${radius.toFixed(fixedCacheKey)}-${cardData.suit}-${cardData.value}`;
+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({ r: 255, g: 0, b: 0 }, hdr) : getStyleFromRgb({ r: 0, g: 0, b: 0 }, 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);
@@ -44,8 +55,7 @@ function drawRoundedCardFront(ctx, radius, cardData, hdr) {
     ctx.font = `bold ${cornerFontSize.toString()}px Arial, serif`;
     ctx.textAlign = "left";
     ctx.textBaseline = "middle";
-    const topLeftX = -halfWidth + cornerPadding + suitEdgeBuffer;
-    const topLeftY = -halfHeight + cornerPadding + cornerFontSize * half;
+    const topLeftX = -halfWidth + cornerPadding + suitEdgeBuffer, topLeftY = -halfHeight + cornerPadding + cornerFontSize * half;
     ctx.save();
     ctx.translate(topLeftX, topLeftY);
     ctx.beginPath();

package/cjs/cards/CardDrawer.js

@@ -1,15 +1,15 @@
 import { deepExtend } from "@tsparticles/engine";
 import { drawRoundedCard } from "../utils.js";
 export class CardDrawer {
-    constructor() {
-        this.validTypes = ["card"];
-    }
     draw(data) {
-        const { context, particle, radius } = data;
+        const { context, particle, opacity, radius } = data;
         if (!particle.cardData) {
             return;
         }
-        drawRoundedCard(context, radius, particle.cardData, particle.container.hdr, particle.isShowingBack());
+        const defaultOpacity = context.globalAlpha;
+        context.globalAlpha = opacity;
+        drawRoundedCard(context, radius, particle.cardData, particle.container.hdr, particle.isShowingBack(), particle.container.canvas.settings);
+        context.globalAlpha = defaultOpacity;
     }
     particleInit(_container, particle) {
         const shape = particle.shapeData;

package/cjs/cards/index.js

@@ -1,7 +1,9 @@
 export async function loadFullCardsShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { CardDrawer } = await import("./CardDrawer.js");
-        e.addShape(new CardDrawer());
+    engine.checkVersion("4.0.0-beta.0");
+    await engine.register(e => {
+        e.addShape(["card"], async () => {
+            const { CardDrawer } = await import("./CardDrawer.js");
+            return new CardDrawer();
+        });
     });
 }

package/cjs/clubs/ClubDrawer.js

@@ -1,9 +1,6 @@
 import { drawPath } from "@tsparticles/path-utils";
 import { paths } from "../paths.js";
 export class ClubDrawer {
-    constructor() {
-        this.validTypes = ["club", "clubs"];
-    }
     draw(data) {
         const { context, radius } = data;
         drawPath(context, radius, paths.clubs);

package/cjs/clubs/index.js

@@ -1,7 +1,9 @@
 export async function loadClubsSuitShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { ClubDrawer } = await import("./ClubDrawer.js");
-        e.addShape(new ClubDrawer());
+    engine.checkVersion("4.0.0-beta.0");
+    await engine.register(e => {
+        e.addShape(["club", "clubs"], async () => {
+            const { ClubDrawer } = await import("./ClubDrawer.js");
+            return new ClubDrawer();
+        });
     });
 }

package/cjs/diamonds/DiamondDrawer.js

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

package/cjs/diamonds/index.js

@@ -1,7 +1,9 @@
 export async function loadDiamondsSuitShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { DiamondDrawer } = await import("./DiamondDrawer.js");
-        e.addShape(new DiamondDrawer());
+    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,6 @@
 import { drawPath } from "@tsparticles/path-utils";
 import { paths } from "../paths.js";
 export class HeartDrawer {
-    constructor() {
-        this.validTypes = ["heart", "hearts"];
-    }
     draw(data) {
         const { context, radius } = data;
         drawPath(context, radius, paths.hearts);

package/cjs/hearts/index.js

@@ -1,7 +1,9 @@
 export async function loadHeartsSuitShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { HeartDrawer } = await import("./HeartDrawer.js");
-        e.addShape(new HeartDrawer());
+    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,19 +1,28 @@
 export async function loadCardSuitsShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
-        const { loadClubsSuitShape } = await import("./clubs/index.js"), { loadDiamondsSuitShape } = await import("./diamonds/index.js"), { loadHeartsSuitShape } = await import("./hearts/index.js"), { loadSpadesSuitShape } = await import("./spades/index.js");
-        await loadClubsSuitShape(e);
-        await loadDiamondsSuitShape(e);
-        await loadHeartsSuitShape(e);
-        await loadSpadesSuitShape(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.8");
+    engine.checkVersion("4.0.0-beta.0");
     await engine.register(async (e) => {
         const { loadFullCardsShape } = await import("./cards/index.js");
-        await loadFullCardsShape(e);
-        await loadCardSuitsShape(e);
+        await Promise.all([
+            loadFullCardsShape(e),
+            loadCardSuitsShape(e),
+        ]);
     });
 }
 export * from "./cards/index.js";

package/cjs/spades/SpadeDrawer.js

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

package/cjs/spades/index.js

@@ -1,7 +1,9 @@
 export async function loadSpadesSuitShape(engine) {
-    engine.checkVersion("4.0.0-alpha.8");
-    await engine.register(async (e) => {
-        const { SpadeDrawer } = await import("./SpadeDrawer.js");
-        e.addShape(new SpadeDrawer());
+    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

@@ -1,39 +1,50 @@
-import { double, doublePI, getStyleFromRgb, half, originPoint, triple } from "@tsparticles/engine";
+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.9, cornerPaddingRatio = 0.2, textHorizontalOffsetRatio = 0.25, minRadius = 0, minAngle = 0, suitEdgeBufferFactor = 0.1, fixedCacheKey = 2, cardsCache = new Map();
-export function drawRoundedCard(ctx, radius, cardData, hdr, flipped) {
+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, cardData), cardWidth = radius * cardWidthRatio, cardHeight = radius * cardHeightRatio, halfWidth = cardWidth * half, halfHeight = cardHeight * half;
-        if (!cardsCache.has(cacheKey)) {
-            const canvas = new OffscreenCanvas(cardWidth, cardHeight), offCtx = canvas.getContext("2d");
-            if (offCtx) {
-                offCtx.translate(halfWidth, halfHeight);
-                drawRoundedCardFront(offCtx, radius, cardData, hdr);
-                cardsCache.set(cacheKey, canvas);
+        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);
             }
         }
-        const cachedCanvas = cardsCache.get(cacheKey);
-        if (cachedCanvas) {
-            ctx.drawImage(cachedCanvas, -halfWidth, -halfHeight, cardWidth, cardHeight);
+        if (cachedData) {
+            ctx.drawImage(cachedData, -halfWidth, -halfHeight, cardWidth, cardHeight);
         }
         else {
             drawRoundedCardFront(ctx, radius, cardData, hdr);
         }
     }
 }
-function getCacheKey(radius, cardData) {
-    return `${radius.toFixed(fixedCacheKey)}-${cardData.suit}-${cardData.value}`;
+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({ r: 255, g: 0, b: 0 }, hdr) : getStyleFromRgb({ r: 0, g: 0, b: 0 }, 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);
@@ -44,8 +55,7 @@ function drawRoundedCardFront(ctx, radius, cardData, hdr) {
     ctx.font = `bold ${cornerFontSize.toString()}px Arial, serif`;
     ctx.textAlign = "left";
     ctx.textBaseline = "middle";
-    const topLeftX = -halfWidth + cornerPadding + suitEdgeBuffer;
-    const topLeftY = -halfHeight + cornerPadding + cornerFontSize * half;
+    const topLeftX = -halfWidth + cornerPadding + suitEdgeBuffer, topLeftY = -halfHeight + cornerPadding + cornerFontSize * half;
     ctx.save();
     ctx.translate(topLeftX, topLeftY);
     ctx.beginPath();