@tsparticles/shape-cards 4.0.0-alpha.5 → 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/README.md

@@ -26,7 +26,7 @@ Once the scripts are loaded you can set up `tsParticles` and the shape like this
 
 ```javascript
 (async () => {
-  await loadCardsShape(tsParticles);
+  await loadFullCardsShape(tsParticles);
 
   await tsParticles.load({
     id: "tsparticles",

package/browser/CardValue.js

@@ -0,0 +1,16 @@
+export var CardValue;
+(function (CardValue) {
+    CardValue["ace"] = "A";
+    CardValue["two"] = "2";
+    CardValue["three"] = "3";
+    CardValue["four"] = "4";
+    CardValue["five"] = "5";
+    CardValue["six"] = "6";
+    CardValue["seven"] = "7";
+    CardValue["eight"] = "8";
+    CardValue["nine"] = "9";
+    CardValue["ten"] = "10";
+    CardValue["jack"] = "J";
+    CardValue["queen"] = "Q";
+    CardValue["king"] = "K";
+})(CardValue || (CardValue = {}));

package/browser/SuitType.js

@@ -0,0 +1,7 @@
+export var SuitType;
+(function (SuitType) {
+    SuitType["hearts"] = "hearts";
+    SuitType["diamonds"] = "diamonds";
+    SuitType["clubs"] = "clubs";
+    SuitType["spades"] = "spades";
+})(SuitType || (SuitType = {}));

package/browser/cards/CardDrawer.js

@@ -0,0 +1,21 @@
+import { deepExtend } from "@tsparticles/engine";
+import { drawRoundedCard } from "../utils.js";
+export class CardDrawer {
+    draw(data) {
+        const { context, particle, opacity, radius } = data;
+        if (!particle.cardData) {
+            return;
+        }
+        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;
+        if (!shape) {
+            return;
+        }
+        particle.cardData = deepExtend({}, shape);
+    }
+}

package/browser/cards/index.js

@@ -0,0 +1,9 @@
+export async function loadFullCardsShape(engine) {
+    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,8 @@
-import { drawPath, paths } from "../Utils.js";
+import { drawPath } from "@tsparticles/path-utils";
+import { paths } from "../paths.js";
 export class ClubDrawer {
-    constructor() {
-        this.validTypes = ["club", "clubs"];
-    }
     draw(data) {
-        drawPath(data, paths.club);
+        const { context, radius } = data;
+        drawPath(context, radius, paths.clubs);
     }
 }

package/browser/clubs/index.js

@@ -1,7 +1,9 @@
-export async function loadClubsCardsShape(engine) {
-    engine.checkVersion("4.0.0-alpha.5");
-    await engine.register(async (e) => {
-        const { ClubDrawer } = await import("./ClubDrawer.js");
-        e.addShape(new ClubDrawer());
+export async function loadClubsSuitShape(engine) {
+    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,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/browser/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/browser/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/browser/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/browser/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/browser/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/browser/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/browser/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/browser/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/cjs/CardParticle.js

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

package/cjs/CardValue.js

@@ -0,0 +1,16 @@
+export var CardValue;
+(function (CardValue) {
+    CardValue["ace"] = "A";
+    CardValue["two"] = "2";
+    CardValue["three"] = "3";
+    CardValue["four"] = "4";
+    CardValue["five"] = "5";
+    CardValue["six"] = "6";
+    CardValue["seven"] = "7";
+    CardValue["eight"] = "8";
+    CardValue["nine"] = "9";
+    CardValue["ten"] = "10";
+    CardValue["jack"] = "J";
+    CardValue["queen"] = "Q";
+    CardValue["king"] = "K";
+})(CardValue || (CardValue = {}));

package/cjs/ICardData.js

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

package/cjs/ICardSuitsPath.js

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

package/cjs/SuitType.js

@@ -0,0 +1,7 @@
+export var SuitType;
+(function (SuitType) {
+    SuitType["hearts"] = "hearts";
+    SuitType["diamonds"] = "diamonds";
+    SuitType["clubs"] = "clubs";
+    SuitType["spades"] = "spades";
+})(SuitType || (SuitType = {}));

package/cjs/cards/CardDrawer.js

@@ -0,0 +1,21 @@
+import { deepExtend } from "@tsparticles/engine";
+import { drawRoundedCard } from "../utils.js";
+export class CardDrawer {
+    draw(data) {
+        const { context, particle, opacity, radius } = data;
+        if (!particle.cardData) {
+            return;
+        }
+        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;
+        if (!shape) {
+            return;
+        }
+        particle.cardData = deepExtend({}, shape);
+    }
+}

package/cjs/cards/index.js

@@ -0,0 +1,9 @@
+export async function loadFullCardsShape(engine) {
+    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,8 @@
-import { drawPath, paths } from "../Utils.js";
+import { drawPath } from "@tsparticles/path-utils";
+import { paths } from "../paths.js";
 export class ClubDrawer {
-    constructor() {
-        this.validTypes = ["club", "clubs"];
-    }
     draw(data) {
-        drawPath(data, paths.club);
+        const { context, radius } = data;
+        drawPath(context, radius, paths.clubs);
     }
 }

package/cjs/clubs/index.js

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