lighteningcards 2.1.1 → 2.1.2

package/dist/index.cjs.js

@@ -44197,12 +44197,6 @@ const useLightening = () => {
         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
@@ -44225,16 +44219,22 @@ const useLightening = () => {
 
         // Suit icon
         let suit_url = "";
-        switch ((_card$suit = card.suit) === null || _card$suit === void 0 ? void 0 : _card$suit.toLowerCase()) {
+        const suit = (_card$suit = card.suit) === null || _card$suit === void 0 ? void 0 : _card$suit.toLowerCase();
+        switch (suit) {
           case "hearts":
+          case "heart":
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/SuitHearts.svg/60px-SuitHearts.svg.png";
             break;
           case "clubs":
+          case "club":
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/SuitClubs.svg/60px-SuitClubs.svg.png";
             break;
           case "diamonds":
+          case "diamond":
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/SuitDiamonds.svg/60px-SuitDiamonds.svg.png";
             break;
+          case "spades":
+          case "spade":
           default:
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/SuitSpades.svg/60px-SuitSpades.svg.png";
             break;
@@ -44264,18 +44264,36 @@ const useLightening = () => {
         suitContainer.addChild(card_suit_sprite);
         suitContainer.position.set(0, 35);
         animatedSprite.addChild(suitContainer);
-        return animatedSprite;
+
+        // Create container for this card with background
+        const cardContainer = new Container();
+
+        // Load and add background sprite for this card
+        try {
+          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;
+          cardContainer.addChild(bg_sprite);
+        } catch (bgError) {
+          // Background is optional, continue without it
+          console.log("Background not found for card, continuing without it");
+        }
+
+        // Add the animated sprite on top of background
+        cardContainer.addChild(animatedSprite);
+
+        // Position the card container horizontally, centered
+        const totalWidth = (numCards - 1) * spacing;
+        cardContainer.x = -totalWidth / 2 + i * spacing;
+        cardContainer.y = 0;
+        return cardContainer;
       });
 
       // 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));
         cardsContainer.x = this.appRef.current.renderer.width / 2;
@@ -44403,12 +44421,6 @@ const useLighteningStart = () => {
         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
@@ -44431,16 +44443,22 @@ const useLighteningStart = () => {
 
         // Suit icon
         let suit_url = "";
-        switch ((_card$suit = card.suit) === null || _card$suit === void 0 ? void 0 : _card$suit.toLowerCase()) {
+        const suit = (_card$suit = card.suit) === null || _card$suit === void 0 ? void 0 : _card$suit.toLowerCase();
+        switch (suit) {
           case "hearts":
+          case "heart":
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f0/SuitHearts.svg/60px-SuitHearts.svg.png";
             break;
           case "clubs":
+          case "club":
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/8/8a/SuitClubs.svg/60px-SuitClubs.svg.png";
             break;
           case "diamonds":
+          case "diamond":
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/d/db/SuitDiamonds.svg/60px-SuitDiamonds.svg.png";
             break;
+          case "spades":
+          case "spade":
           default:
             suit_url = "https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/SuitSpades.svg/60px-SuitSpades.svg.png";
             break;
@@ -44470,18 +44488,36 @@ const useLighteningStart = () => {
         suitContainer.addChild(card_suit_sprite);
         suitContainer.position.set(0, 35);
         animatedSprite.addChild(suitContainer);
-        return animatedSprite;
+
+        // Create container for this card with background
+        const cardContainer = new Container();
+
+        // Load and add background sprite for this card
+        try {
+          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;
+          cardContainer.addChild(bg_sprite);
+        } catch (bgError) {
+          // Background is optional, continue without it
+          console.log("Background not found for card, continuing without it");
+        }
+
+        // Add the animated sprite on top of background
+        cardContainer.addChild(animatedSprite);
+
+        // Position the card container horizontally, centered
+        const totalWidth = (numCards - 1) * spacing;
+        cardContainer.x = -totalWidth / 2 + i * spacing;
+        cardContainer.y = 0;
+        return cardContainer;
       });
 
       // 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
@@ -44496,6 +44532,540 @@ const useLighteningStart = () => {
   };
 };
 
+/**
+ * Generates SVG code for a baccarat card
+ * @param {string} rank - The card rank (e.g., "A", "K", "Q", "J", "10", "9", etc.)
+ * @param {string} suit - The card suit (e.g., "hearts", "diamonds", "clubs", "spades")
+ * @param {number} width - Card width (default: 200)
+ * @param {number} height - Card height (default: 280)
+ * @returns {string} SVG code as a string
+ */
+const generateBaccaratCardSVG = (rank, suit, width = 200, height = 280) => {
+  // Format rank for display
+  const formatRank = r => {
+    if (!r) return "";
+    const rankUpper = r.toUpperCase();
+    const rankMap = {
+      ACE: "A",
+      KING: "K",
+      QUEEN: "Q",
+      JACK: "J",
+      JOKER: "J"
+    };
+    return rankMap[rankUpper] || r;
+  };
+  const displayRank = formatRank(rank);
+  const suitLower = (suit || "").toLowerCase();
+
+  // Get suit symbol/color
+  const getSuitInfo = s => {
+    switch (s) {
+      case "hearts":
+      case "heart":
+        return {
+          symbol: "♥",
+          color: "#DC143C"
+        };
+      case "diamonds":
+      case "diamond":
+        return {
+          symbol: "♦",
+          color: "#DC143C"
+        };
+      case "clubs":
+      case "club":
+        return {
+          symbol: "♣",
+          color: "#000000"
+        };
+      case "spades":
+      case "spade":
+        return {
+          symbol: "♠",
+          color: "#000000"
+        };
+      default:
+        return {
+          symbol: "♠",
+          color: "#000000"
+        };
+    }
+  };
+  const suitInfo = getSuitInfo(suitLower);
+  const cornerRadius = 12; // Rounded corners
+  const padding = 12; // Padding for corner elements
+
+  // Font sizes - set to 86 pixels to match the example size
+  const rankFontSize = 86; // Fixed size: 86 pixels
+  const suitFontSize = 86; // Fixed size: 86 pixels
+
+  return `
+    <svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg">
+      <defs>
+        <!-- Glow effect for border -->
+        <filter id="glow">
+          <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+          <feMerge>
+            <feMergeNode in="coloredBlur"/>
+            <feMergeNode in="SourceGraphic"/>
+          </feMerge>
+        </filter>
+      </defs>
+      <!-- Card background with rounded corners - transparent background -->
+      <rect 
+        x="0" 
+        y="0" 
+        width="${width}" 
+        height="${height}" 
+        rx="${cornerRadius}" 
+        ry="${cornerRadius}" 
+        fill="none"
+        stroke="#D4AF37"
+        stroke-width="3"
+        filter="url(#glow)"
+      />
+      
+      <!-- Inner border for card frame effect -->
+      <rect 
+        x="2" 
+        y="2" 
+        width="${width - 4}" 
+        height="${height - 4}" 
+        rx="${cornerRadius - 2}" 
+        ry="${cornerRadius - 2}" 
+        fill="none"
+        stroke="#F5E6D3"
+        stroke-width="1"
+      />
+      
+      <!-- Rank at top left corner -->
+      <text 
+        x="${padding}" 
+        y="${padding + rankFontSize * 0.8}" 
+        font-family="Arial, sans-serif" 
+        font-size="${rankFontSize}" 
+        font-weight="bold" 
+        fill="#FFFFFF" 
+        text-anchor="start" 
+        dominant-baseline="hanging"
+        stroke="#000000"
+        stroke-width="1.5"
+      >
+        ${displayRank}
+      </text>
+      
+      <!-- Rank at bottom right corner (inverted) -->
+      <text 
+        x="${width - padding}" 
+        y="${height - padding}" 
+        font-family="Arial, sans-serif" 
+        font-size="${rankFontSize}" 
+        font-weight="bold" 
+        fill="#FFFFFF" 
+        text-anchor="end" 
+        dominant-baseline="baseline"
+        stroke="#000000"
+        stroke-width="1.5"
+        transform="rotate(180 ${width - padding} ${height - padding})"
+      >
+        ${displayRank}
+      </text>
+      
+      <!-- Suit at top right corner -->
+      <text 
+        x="${width - padding}" 
+        y="${padding + suitFontSize * 0.8}" 
+        font-family="Arial, sans-serif" 
+        font-size="${suitFontSize}" 
+        font-weight="bold" 
+        fill="${suitInfo.color}" 
+        text-anchor="end" 
+        dominant-baseline="hanging"
+        stroke="#000000"
+        stroke-width="1"
+      >
+        ${suitInfo.symbol}
+      </text>
+      
+      <!-- Suit at bottom left corner (inverted) -->
+      <text 
+        x="${padding}" 
+        y="${height - padding}" 
+        font-family="Arial, sans-serif" 
+        font-size="${suitFontSize}" 
+        font-weight="bold" 
+        fill="${suitInfo.color}" 
+        text-anchor="start" 
+        dominant-baseline="baseline"
+        stroke="#000000"
+        stroke-width="1"
+        transform="rotate(180 ${padding} ${height - padding})"
+      >
+        ${suitInfo.symbol}
+      </text>
+    </svg>
+  `.trim();
+};
+
+const useBaccaratCard = () => {
+  class BaccaratCard {
+    constructor(cards, appRef) {
+      this.cards = cards;
+      this.appRef = appRef;
+      this.initiateAnimation();
+    }
+    async initiateAnimation() {
+      // Validate cards array
+      if (!this.cards || !Array.isArray(this.cards) || this.cards.length === 0) {
+        console.warn("BaccaratCard: No cards provided or cards array is empty");
+        return;
+      }
+
+      // Create a container to hold all cards
+      const cardsContainer = new Container();
+
+      // Calculate layout: arrange cards horizontally, centered
+      const numCards = this.cards.length;
+      // Smaller SVG dimensions to fit within card_bg.svg
+      const cardWidth = 120;
+      const cardHeight = 160;
+      const spacing = 77.6 * 0.5 + 20; // space between cards (match other hooks)
+      const rowSpacing = 200; // Vertical spacing between rows
+      // Scale for the card_bg.svg background
+      const bgScale = window.innerWidth < 768 ? 0.65 : 0.75;
+      // Smaller scale for the baccarat SVG to fit within the frame
+      const cardScale = window.innerWidth < 768 ? 0.25 : 0.3;
+
+      // Load background texture once for all cards
+      let bgTexture;
+      try {
+        bgTexture = await Assets.load("/card_bg.svg");
+      } catch (bgError) {
+        console.log("Background not found, continuing without it");
+      }
+
+      // Create SVG cards with individual backgrounds
+      const cardPromises = this.cards.map(async (card, i) => {
+        try {
+          var _card$multiplier;
+          // Generate SVG for this card (without multiplier)
+          const svgString = generateBaccaratCardSVG(card.rank, card.suit, cardWidth, cardHeight);
+
+          // Convert SVG string to data URL
+          const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+
+          // Create texture from data URL using Image
+          const img = new Image();
+          img.src = svgDataUrl;
+          await new Promise((resolve, reject) => {
+            img.onload = resolve;
+            img.onerror = reject;
+          });
+
+          // Create texture from the loaded image
+          const cardTexture = Texture.from(img);
+          const cardSprite = new Sprite(cardTexture);
+
+          // Create container for this card with background
+          const cardContainer = new Container();
+
+          // Add background sprite if available (card_bg.svg frame)
+          let bg_sprite = null;
+          if (bgTexture) {
+            bg_sprite = new Sprite(bgTexture);
+            bg_sprite.scale.set(bgScale);
+            bg_sprite.anchor.set(0.5);
+            bg_sprite.x = 0;
+            bg_sprite.y = 0;
+            cardContainer.addChild(bg_sprite);
+          }
+
+          // Add the card sprite on top of background (smaller, fits within frame)
+          // Position it downward in the frame
+          cardSprite.scale.set(cardScale);
+          cardSprite.anchor.set(0.5);
+          cardSprite.x = 0;
+          // Move card sprite downward
+          if (bg_sprite) {
+            const bgHeight = bg_sprite.height;
+            cardSprite.y = bgHeight * 0.1; // Move down from center
+          } else {
+            cardSprite.y = cardHeight * cardScale * 0.15; // Fallback position
+          }
+          cardContainer.addChild(cardSprite);
+
+          // Add multiplier text separately at top center with small font size
+          const multiplier = (_card$multiplier = card.multiplier) !== null && _card$multiplier !== void 0 ? _card$multiplier : card.multplier;
+          if (multiplier !== null && multiplier !== undefined) {
+            const multiplierText = new Text({
+              text: `${multiplier}x`,
+              style: {
+                fontFamily: "Arial, sans-serif",
+                fontSize: 14,
+                // Small font size
+                fontWeight: "bold",
+                fill: "#D4AF37",
+                // Golden color
+                align: "center",
+                stroke: "#000000",
+                strokeThickness: 1
+              }
+            });
+            multiplierText.anchor.set(0.5);
+            // Position at very top center of the card container
+            multiplierText.x = 0;
+            if (bg_sprite) {
+              // Use the sprite's scaled height to position at the very top
+              const bgHeight = bg_sprite.height;
+              multiplierText.y = -bgHeight / 2 + 8; // Closer to the top edge
+            } else {
+              // Fallback if no background
+              multiplierText.y = -cardHeight * cardScale / 2 + 5;
+            }
+            cardContainer.addChild(multiplierText);
+          }
+
+          // Calculate multi-row layout for 5 cards: 3 in first row, 2 in second row
+          let rowIndex = 0;
+          let colIndex = i;
+          let cardsInRow = numCards;
+          if (numCards === 5) {
+            // First 3 cards in row 0, remaining 2 in row 1
+            if (i < 3) {
+              rowIndex = 0;
+              colIndex = i;
+              cardsInRow = 3;
+            } else {
+              rowIndex = 1;
+              colIndex = i - 3;
+              cardsInRow = 2;
+            }
+          }
+
+          // Calculate horizontal position within the row
+          const rowWidth = (cardsInRow - 1) * spacing;
+          cardContainer.x = -rowWidth / 2 + colIndex * spacing;
+
+          // Calculate vertical position based on row
+          cardContainer.y = rowIndex * rowSpacing;
+          return cardContainer;
+        } catch (error) {
+          console.error(`Error creating baccarat card ${i}:`, error);
+          return null;
+        }
+      });
+
+      // After all cards are loaded, add them to the container and stage
+      Promise.all(cardPromises).then(async sprites => {
+        // Filter out any null sprites (from failed card creation)
+        const validSprites = sprites.filter(sprite => sprite !== null);
+        if (validSprites.length === 0) {
+          console.error("BaccaratCard: No valid cards were created");
+          return;
+        }
+        try {
+          cardsContainer.label = "baccarat_card_container";
+          validSprites.forEach(sprite => cardsContainer.addChild(sprite));
+
+          // Center the container in the canvas
+          cardsContainer.x = this.appRef.current.renderer.width / 2;
+          // Adjust vertical centering for multi-row layout
+          const verticalOffset = numCards === 5 ? -rowSpacing / 2 : 0;
+          cardsContainer.y = this.appRef.current.renderer.height / 2 + verticalOffset;
+          this.appRef.current.stage.addChild(cardsContainer);
+        } catch (error) {
+          console.error("Error adding cards to stage:", error);
+        }
+      }).catch(error => {
+        console.error("Error in card promises:", error);
+      });
+    }
+  }
+  return {
+    BaccaratCard
+  };
+};
+
+const useBaccaratCardStart = () => {
+  class BaccaratCardStart {
+    constructor(cards, appRef) {
+      this.cards = cards;
+      this.appRef = appRef;
+      this.initiateAnimation();
+    }
+    async initiateAnimation() {
+      // Validate cards array
+      if (!this.cards || !Array.isArray(this.cards) || this.cards.length === 0) {
+        console.warn("BaccaratCardStart: No cards provided or cards array is empty");
+        return;
+      }
+
+      // Create a container to hold all cards
+      const cardsContainer = new Container();
+
+      // Calculate layout: arrange cards horizontally, centered
+      const numCards = this.cards.length;
+      // Smaller SVG dimensions to fit within card_bg.svg
+      const cardWidth = 120;
+      const cardHeight = 160;
+      const spacing = 77.6 * 0.5 + 20; // space between cards (match other hooks)
+      const rowSpacing = 200; // Vertical spacing between rows
+      // Scale for the card_bg.svg background
+      const bgScale = window.innerWidth < 768 ? 0.65 : 0.75;
+      // Smaller scale for the baccarat SVG to fit within the frame
+      const cardScale = window.innerWidth < 768 ? 0.25 : 0.3;
+
+      // Load background texture once for all cards
+      let bgTexture;
+      try {
+        bgTexture = await Assets.load("/card_bg.svg");
+      } catch (bgError) {
+        console.log("Background not found, continuing without it");
+      }
+
+      // Create SVG cards with individual backgrounds
+      const cardPromises = this.cards.map(async (card, i) => {
+        try {
+          var _card$multiplier;
+          // Generate SVG for this card (without multiplier)
+          const svgString = generateBaccaratCardSVG(card.rank, card.suit, cardWidth, cardHeight);
+
+          // Convert SVG string to data URL
+          const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
+
+          // Create texture from data URL using Image
+          const img = new Image();
+          img.src = svgDataUrl;
+          await new Promise((resolve, reject) => {
+            img.onload = resolve;
+            img.onerror = reject;
+          });
+
+          // Create texture from the loaded image
+          const cardTexture = Texture.from(img);
+          const cardSprite = new Sprite(cardTexture);
+          cardSprite.label = "starting_baccarat_card";
+
+          // Create container for this card with background
+          const cardContainer = new Container();
+
+          // Add background sprite if available (card_bg.svg frame)
+          let bg_sprite = null;
+          if (bgTexture) {
+            bg_sprite = new Sprite(bgTexture);
+            bg_sprite.scale.set(bgScale);
+            bg_sprite.anchor.set(0.5);
+            bg_sprite.x = 0;
+            bg_sprite.y = 0;
+            cardContainer.addChild(bg_sprite);
+          }
+
+          // Add the card sprite on top of background (smaller, fits within frame)
+          // Position it downward in the frame
+          cardSprite.scale.set(cardScale);
+          cardSprite.anchor.set(0.5);
+          cardSprite.x = 0;
+          // Move card sprite downward
+          if (bg_sprite) {
+            const bgHeight = bg_sprite.height;
+            cardSprite.y = bgHeight * 0.1; // Move down from center
+          } else {
+            cardSprite.y = cardHeight * cardScale * 0.15; // Fallback position
+          }
+          cardContainer.addChild(cardSprite);
+
+          // Add multiplier text separately at top center with small font size
+          const multiplier = (_card$multiplier = card.multiplier) !== null && _card$multiplier !== void 0 ? _card$multiplier : card.multplier;
+          if (multiplier !== null && multiplier !== undefined) {
+            const multiplierText = new Text({
+              text: `${multiplier}x`,
+              style: {
+                fontFamily: "Arial, sans-serif",
+                fontSize: 14,
+                // Small font size
+                fontWeight: "bold",
+                fill: "#D4AF37",
+                // Golden color
+                align: "center",
+                stroke: "#000000",
+                strokeThickness: 1
+              }
+            });
+            multiplierText.anchor.set(0.5);
+            // Position at very top center of the card container
+            multiplierText.x = 0;
+            if (bg_sprite) {
+              // Use the sprite's scaled height to position at the very top
+              const bgHeight = bg_sprite.height;
+              multiplierText.y = -bgHeight / 2 + 8; // Closer to the top edge
+            } else {
+              // Fallback if no background
+              multiplierText.y = -cardHeight * cardScale / 2 + 5;
+            }
+            cardContainer.addChild(multiplierText);
+          }
+
+          // Calculate multi-row layout for 5 cards: 3 in first row, 2 in second row
+          let rowIndex = 0;
+          let colIndex = i;
+          let cardsInRow = numCards;
+          if (numCards === 5) {
+            // First 3 cards in row 0, remaining 2 in row 1
+            if (i < 3) {
+              rowIndex = 0;
+              colIndex = i;
+              cardsInRow = 3;
+            } else {
+              rowIndex = 1;
+              colIndex = i - 3;
+              cardsInRow = 2;
+            }
+          }
+
+          // Calculate horizontal position within the row
+          const rowWidth = (cardsInRow - 1) * spacing;
+          cardContainer.x = -rowWidth / 2 + colIndex * spacing;
+
+          // Calculate vertical position based on row
+          cardContainer.y = rowIndex * rowSpacing;
+          return cardContainer;
+        } catch (error) {
+          console.error(`Error creating baccarat card ${i}:`, error);
+          return null;
+        }
+      });
+
+      // After all cards are loaded, add them to the container and stage
+      Promise.all(cardPromises).then(async sprites => {
+        // Filter out any null sprites (from failed card creation)
+        const validSprites = sprites.filter(sprite => sprite !== null);
+        if (validSprites.length === 0) {
+          console.error("BaccaratCardStart: No valid cards were created");
+          return;
+        }
+        try {
+          cardsContainer.label = "baccarat_card_start_container";
+          validSprites.forEach(sprite => cardsContainer.addChild(sprite));
+
+          // Center the container in the canvas
+          cardsContainer.x = this.appRef.current.renderer.width / 2;
+          // Adjust vertical centering for multi-row layout
+          const verticalOffset = numCards === 5 ? -rowSpacing / 2 : 0;
+          cardsContainer.y = this.appRef.current.renderer.height / 2 + verticalOffset;
+          this.appRef.current.stage.addChild(cardsContainer);
+        } catch (error) {
+          console.error("Error adding cards to stage:", error);
+        }
+      }).catch(error => {
+        console.error("Error in card promises:", error);
+      });
+    }
+  }
+  return {
+    BaccaratCardStart
+  };
+};
+
 // 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";
@@ -44505,7 +45075,9 @@ const border_start = "https://babylonbetst.evo-games.com/frontend/evo/mini/image
 const border_loop = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/borderloop.c55570cc.webp";
 const LighteningCard = ({
   roundStatus,
-  cards
+  cards,
+  showRank = false,
+  gameType
 }) => {
   const containerRef = React.useRef(null);
   const appRef = React.useRef(null);
@@ -44524,6 +45096,12 @@ const LighteningCard = ({
   const {
     LighteningStart
   } = useLighteningStart();
+  const {
+    BaccaratCard
+  } = useBaccaratCard();
+  const {
+    BaccaratCardStart
+  } = useBaccaratCardStart();
   const initiatePixiApplication = async () => {
     appRef.current = new Application();
     await appRef.current.init({
@@ -44538,8 +45116,28 @@ const LighteningCard = ({
     ["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", "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);
+
+    // Debug logging
+    console.log("LighteningCard render:", {
+      roundStatus,
+      showRank,
+      gameType,
+      cardsCount: (cards === null || cards === void 0 ? void 0 : cards.length) || 0,
+      cards: cards
+    });
+
+    // Check if this is baccarat game - use SVG cards
+    // Use baccarat SVG cards when gameType is baccarat OR when showRank is true (baccarat-style display)
+    const isBaccarat = (gameType === null || gameType === void 0 ? void 0 : gameType.toLowerCase()) === "baccarat" || showRank === true;
+    if (isBaccarat) {
+      // Use baccarat SVG cards (no PNGs, uses SVG suit symbols)
+      ["LIGHTNING"].includes(roundStatus) && new BaccaratCardStart(cards, appRef);
+      ["NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new BaccaratCard(cards, appRef);
+    } else {
+      // Use suit-only display (with PNG suit images)
+      ["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;
@@ -44552,7 +45150,7 @@ const LighteningCard = ({
         appRef.current = null;
       }
     };
-  }, [roundStatus]);
+  }, [roundStatus, showRank, cards, gameType]);
   return /*#__PURE__*/React.createElement("div", {
     className: "lightening-card",
     ref: containerRef
@@ -44565,12 +45163,17 @@ LighteningCard.propTypes = {
     rank: PropTypes.string,
     suit: PropTypes.string
   })),
+  showRank: PropTypes.bool,
+  // If true, displays rank at center and suit at top-left. If false, displays suit only.
+  gameType: PropTypes.string,
+  // Game type (e.g., "baccarat") - if "baccarat", uses SVG cards
   assetPath: PropTypes.string,
   // Path to the animation asset
   onAnimationReady: PropTypes.func // Callback when animation is ready
 };
 LighteningCard.defaultProps = {
-  cards: []
+  cards: [],
+  showRank: false // Default to suit-only display
 };
 
 extensions.add(AccessibilitySystem);