lighteningcards 2.0.8 → 2.1.0

package/dist/index.cjs.js

@@ -43387,7 +43387,7 @@ const useLightening = () => {
       // Calculate layout: arrange cards horizontally, centered
       const numCards = this.cards.length;
       const spacing = 77.6 * 0.5 + 20; // space between cards, adjust as needed
-      const spriteScale = window.innerWidth < 768 ? 0.17 : 0.3;
+      const spriteScale = window.innerWidth < 768 ? 0.25 : 0.3;
       this.appRef.current.renderer.height / 2;
 
       // We'll keep track of all sprite promises to add them after all loaded
@@ -43437,7 +43437,11 @@ const useLightening = () => {
             fontSize: 75,
             fontWeight: "bold",
             fill: 0xffd700,
-            align: "center"
+            align: "center",
+            stroke: {
+              color: 0x000000,
+              width: 5
+            }
           }
         });
         multiplier_txt.anchor.set(0.5);
@@ -43472,9 +43476,16 @@ const useLightening = () => {
       });
 
       // After all sprites are loaded, add them to the container and stage
-      Promise.all(spritePromises).then(sprites => {
+      Promise.all(spritePromises).then(async sprites => {
+        const bg_tex = await Assets.load("/card_bg.svg");
+        const bg_sprite = new Sprite(bg_tex);
+        bg_sprite.scale.set(window.innerWidth < 768 ? 0.65 : 0.75);
+        bg_sprite.anchor.set(0.5);
+        bg_sprite.x = 0;
+        bg_sprite.y = 0;
+        cardsContainer.addChild(bg_sprite);
+        cardsContainer.label = "card_container";
         sprites.forEach(sprite => cardsContainer.addChild(sprite));
-        // Center the container in the canvas
         cardsContainer.x = this.appRef.current.renderer.width / 2;
         cardsContainer.y = this.appRef.current.renderer.height / 2;
         this.appRef.current.stage.addChild(cardsContainer);
@@ -43549,11 +43560,139 @@ const useMiddleThunder = () => {
   };
 };
 
+const useLighteningStart = () => {
+  class LighteningStart {
+    constructor(cards, spritePath, appRef) {
+      this.cards = cards;
+      this.spritePath = spritePath;
+      this.appRef = appRef;
+      this.initiateAnimation();
+    }
+    async initiateAnimation() {
+      // Create a container to hold all animatedSprites
+      const cardsContainer = new Container();
+
+      // Calculate layout: arrange cards horizontally, centered
+      const numCards = this.cards.length;
+      const spacing = 77.6 * 0.5 + 20; // space between cards, adjust as needed
+      const spriteScale = window.innerWidth < 768 ? 0.25 : 0.3;
+      this.appRef.current.renderer.height / 2;
+
+      // We'll keep track of all sprite promises to add them after all loaded
+      const spritePromises = this.cards.map(async (card, i) => {
+        var _baseTexture$resource, _baseTexture$resource2, _card$multiplier, _card$suit;
+        const baseTexture = await Assets.load(this.spritePath);
+
+        // Prepare frames for animation
+        const frames = [];
+        const texWidth = ((_baseTexture$resource = baseTexture.resource) === null || _baseTexture$resource === void 0 ? void 0 : _baseTexture$resource.width) || baseTexture.width;
+        const texHeight = ((_baseTexture$resource2 = baseTexture.resource) === null || _baseTexture$resource2 === void 0 ? void 0 : _baseTexture$resource2.height) || baseTexture.height;
+        const columns = 10;
+        const rows = 3;
+        const frameWidth = texWidth / columns;
+        const frameHeight = texHeight / rows;
+        for (let row = 0; row < rows; row++) {
+          for (let col = 0; col < columns; col++) {
+            const x = col * frameWidth;
+            const y = row * frameHeight;
+            const frameRect = new Rectangle(x, y, frameWidth, frameHeight);
+            frames.push(new Texture({
+              source: baseTexture.source,
+              frame: frameRect
+            }));
+          }
+        }
+
+        // Create and configure the AnimatedSprite
+        const animatedSprite = new AnimatedSprite(frames);
+        animatedSprite.animationSpeed = 0.25;
+        animatedSprite.label = "starting_animation";
+        animatedSprite.loop = true;
+        animatedSprite.scale.set(spriteScale);
+        animatedSprite.anchor.set(0.5);
+        animatedSprite.allowChildren = true;
+
+        // Position horizontally, centered
+        const totalWidth = (numCards - 1) * spacing;
+        animatedSprite.x = -totalWidth / 2 + i * spacing;
+        animatedSprite.y = 0; // Centered in container
+
+        animatedSprite.play();
+
+        // Add multiplier text
+        const multiplier_txt = new Text({
+          text: `${(_card$multiplier = card.multiplier) !== null && _card$multiplier !== void 0 ? _card$multiplier : card.multplier}X`,
+          style: {
+            fontSize: 75,
+            fontWeight: "bold",
+            fill: 0xffd700,
+            align: "center",
+            stroke: {
+              color: 0x000000,
+              width: 5
+            }
+          }
+        });
+        multiplier_txt.anchor.set(0.5);
+        multiplier_txt.position.set(0, -50);
+        animatedSprite.addChild(multiplier_txt);
+
+        // Suit icon
+        let suit_url = "";
+        switch ((_card$suit = card.suit) === null || _card$suit === void 0 ? void 0 : _card$suit.toLowerCase()) {
+          case "hearts":
+            suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/SuitHearts.svg/60px-SuitHearts.svg.png";
+            break;
+          case "clubs":
+            suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/SuitClubs.svg/60px-SuitClubs.svg.png";
+            break;
+          case "diamonds":
+            suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/SuitDiamonds.svg/60px-SuitDiamonds.svg.png";
+            break;
+          default:
+            suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/SuitSpades.svg/60px-SuitSpades.svg.png";
+            break;
+        }
+
+        // Load and add suit sprite
+        const card_suit_tex = await Assets.load(suit_url);
+        const card_suit_sprite = new Sprite(card_suit_tex);
+        card_suit_sprite.anchor.set(0.5);
+        card_suit_sprite.scale.set(1.2);
+        card_suit_sprite.position.set(0, 35);
+        animatedSprite.addChild(card_suit_sprite);
+        return animatedSprite;
+      });
+
+      // After all sprites are loaded, add them to the container and stage
+      Promise.all(spritePromises).then(async sprites => {
+        const bg_tex = await Assets.load("/card_bg.svg");
+        const bg_sprite = new Sprite(bg_tex);
+        bg_sprite.scale.set(window.innerWidth < 768 ? 0.65 : 0.75);
+        bg_sprite.anchor.set(0.5);
+        bg_sprite.x = 0;
+        bg_sprite.y = 0;
+        cardsContainer.addChild(bg_sprite);
+        cardsContainer.label = "card_container";
+        sprites.forEach(sprite => cardsContainer.addChild(sprite));
+        // Center the container in the canvas
+        cardsContainer.x = this.appRef.current.renderer.width / 2;
+        cardsContainer.y = this.appRef.current.renderer.height / 2;
+        this.appRef.current.stage.addChild(cardsContainer);
+      });
+    }
+  }
+  return {
+    LighteningStart
+  };
+};
+
 // CSS is provided separately via the style field in package.json
 
 const thunder_left = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/lightnings.f9848fb7.webp";
 const thunder_middle = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/feeborderb.0e2c6bbe.webp";
 const thunder_right = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/lightnings.aeaa062e.webp";
+const border_start = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/borderstar.65180209.webp";
 const border_loop = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/borderloop.c55570cc.webp";
 const LighteningCard = ({
   roundStatus,
@@ -43573,6 +43712,9 @@ const LighteningCard = ({
   const {
     Lightening
   } = useLightening();
+  const {
+    LighteningStart
+  } = useLighteningStart();
   const initiatePixiApplication = async () => {
     appRef.current = new Application();
     await appRef.current.init({
@@ -43586,10 +43728,9 @@ const LighteningCard = ({
     globalThis.__PIXI_APP__ = appRef.current;
     ["NO_MORE_BETS", "LIGHTNING", "NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new LeftThunder(thunder_left, appRef);
     ["NO_MORE_BETS", "LIGHTNING", "NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new RightThunder(thunder_right, appRef);
-    ["NO_MORE_BETS", "LIGHTNING", "NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new MiddleThunder(thunder_middle, appRef);
-    // roundStatus === "LIGHTNING" &&
-    //   new LighteningStart(cards, border_start, appRef);
-    ["LIGHTNING", "NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new Lightening(cards, border_loop, appRef);
+    ["NO_MORE_BETS", "NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new MiddleThunder(thunder_middle, appRef);
+    ["LIGHTNING"].includes(roundStatus) && new LighteningStart(cards, border_start, appRef);
+    ["NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new Lightening(cards, border_loop, appRef);
   };
   React.useEffect(() => {
     if (!containerRef.current) return;