lighteningcards 2.1.8 → 2.2.0

package/dist/index.cjs.js

@@ -45191,6 +45191,632 @@ const useBaccaratCardStart = () => {
   };
 };
 
+/**
+ * Generates SVG code for a baccarat card matching the HTML structure
+ * Uses the same structure as the provided HTML with use tags for SVG symbols
+ * @param {string} rank - The card rank (e.g., "5", "A", "K", "Q", "J", "10", "9", etc.)
+ * @param {string} suit - The card suit (e.g., "hearts", "diamonds", "clubs", "spades")
+ * @param {boolean} isMatching - Whether this is a matching card (changes colors)
+ * @param {boolean} isMobile - Whether to use mobile sizing for rank/suit
+ * @returns {string} SVG code as a string matching the HTML structure
+ */
+const generateBaccaratCardHTMLSVG = (rank, suit, isMatching = false, isMobile = false) => {
+  // 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 and class
+  const getSuitInfo = s => {
+    switch (s) {
+      case "hearts":
+      case "heart":
+        return {
+          symbol: "H",
+          class: "red--db016"
+        };
+      case "diamonds":
+      case "diamond":
+        return {
+          symbol: "D",
+          class: "red--db016"
+        };
+      case "clubs":
+      case "club":
+        return {
+          symbol: "C",
+          class: "darkKhaki--2565e"
+        };
+      case "spades":
+      case "spade":
+        return {
+          symbol: "S",
+          class: "darkKhaki--2565e"
+        };
+      default:
+        return {
+          symbol: "S",
+          class: "darkKhaki--2565e"
+        };
+    }
+  };
+  const suitInfo = getSuitInfo(suitLower);
+  suitInfo.symbol;
+  const suitClass = suitInfo.class;
+
+  // Check if rank is "10" to use different positioning
+  const isTen = displayRank === "10";
+
+  // Position values based on whether rank is "10" or not
+  const rankXTop = isTen ? isMobile ? "10" : "5" : isMobile ? "18" : "15";
+  const suitXTop = isTen ? isMobile ? "110" : "125" : isMobile ? "110" : "100";
+  const rankXBottom = isTen ? isMobile ? "0" : "-10" : isMobile ? "12" : "10";
+  const suitXBottom = isTen ? isMobile ? "100" : "115" : isMobile ? "100" : "100";
+  const rankY = isMobile ? "18" : "25";
+  const suitY = isMobile ? "15" : "10";
+  const rankFontSize = isMobile ? "72" : "100";
+  const suitFontSize = isMobile ? "84" : "115";
+
+  // Determine colors based on matching status
+  let bgColor = "#2D2926";
+  let bgColorEnd = "#2C2926";
+  let fillColor;
+  if (isMatching) {
+    // Matching cards: white background
+    bgColor = "#FFFFFF";
+    bgColorEnd = "#FFFFFF";
+
+    // Determine fill color based on suit
+    if (suitInfo.class === "red--db016") {
+      // Hearts and Diamonds: red
+      fillColor = "#e02423";
+    } else {
+      // Spades and Clubs: black
+      fillColor = "#000000";
+    }
+  } else {
+    // Non-matching cards: use original colors
+    fillColor = suitInfo.class === "red--db016" ? "#e02423" : "#756957";
+  }
+
+  // Generate SVG matching the HTML structure
+  // The HTML uses viewBox="0 0 180 250" and uses symbols
+  // We'll create a complete SVG that matches the visual appearance
+  return `
+    <svg viewBox="0 0 180 250" class="card--32433 ${suitClass}" ${isMatching ? 'style="z-index: 100; position: relative;"' : ""} xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+      <defs>
+        <linearGradient id="card-bg-${isMatching ? "white" : "dark"}" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stop-color="${bgColor}" />
+          <stop offset="100%" stop-color="${bgColorEnd}" />
+        </linearGradient>
+        <linearGradient id="card-border-dark" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stop-color="#F4E2C5" />
+          <stop offset="91%" stop-color="#635541" />
+          <stop offset="97%" stop-color="#978468" />
+          <stop offset="100%" stop-color="#A79375" />
+        </linearGradient>
+        <radialGradient id="card-glow-dark" cx="53%" cy="58%" r="116%">
+          <stop offset="0%" stop-color="#F4E2C5" />
+          <stop offset="54%" stop-color="#635541" />
+          <stop offset="100%" stop-color="#A79375" />
+        </radialGradient>
+      </defs>
+      <g>
+        <!-- Rank at top left corner -->
+        <text x="${rankXTop}" y="${rankY}" font-family="Arial, sans-serif" font-size="${rankFontSize}" font-weight="750" fill="${fillColor}" text-anchor="start" dominant-baseline="hanging">${displayRank}</text>
+        <!-- Suit at top left, below rank -->
+        <text x="${suitXTop}" y="${suitY}" font-family="Arial, sans-serif" font-size="${suitFontSize}" font-weight="750" fill="${fillColor}" text-anchor="start" dominant-baseline="hanging">${getSuitSymbol(suitLower)}</text>
+        <!-- Rank and suit at bottom right (rotated 180 degrees) -->
+        <g transform="rotate(180, 90, 125)">
+          <text x="${rankXBottom}" y="${rankY}" font-family="Arial, sans-serif" font-size="${rankFontSize}" font-weight="750" fill="${fillColor}" text-anchor="start" dominant-baseline="hanging">${displayRank}</text>
+          <text x="${suitXBottom}" y="${suitY}" font-family="Arial, sans-serif" font-size="${suitFontSize}" font-weight="750" fill="${fillColor}" text-anchor="start" dominant-baseline="hanging">${getSuitSymbol(suitLower)}</text>
+        </g>
+      </g>
+    </svg>
+  `.trim();
+};
+
+/**
+ * Get suit symbol character
+ */
+const getSuitSymbol = suit => {
+  switch (suit) {
+    case "hearts":
+    case "heart":
+      return "♥";
+    case "diamonds":
+    case "diamond":
+      return "♦";
+    case "clubs":
+    case "club":
+      return "♣";
+    case "spades":
+    case "spade":
+      return "♠";
+    default:
+      return "♠";
+  }
+};
+
+// Animation asset URLs
+const thunder_left$1 = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/lightnings.f9848fb7.webp";
+const thunder_middle$1 = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/feeborderb.0e2c6bbe.webp";
+const thunder_right$1 = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/lightnings.aeaa062e.webp";
+const border_start$1 = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/borderstar.65180209.webp";
+const border_loop$1 = "https://babylonbetst.evo-games.com/frontend/evo/mini/images/borderloop.c55570cc.webp";
+
+/**
+ * HTML/CSS-based Lightning Card component matching the provided HTML structure
+ */
+const LightningCardHTML = ({
+  cards,
+  roundStatus,
+  showRank = false,
+  gameType,
+  matchingCards = []
+}) => {
+  const containerRef = React.useRef(null);
+  React.useRef([]);
+  const thunderLeftRef = React.useRef(null);
+  const thunderRightRef = React.useRef(null);
+  const thunderMiddleTopRef = React.useRef(null);
+  const thunderMiddleBottomRef = React.useRef(null);
+  const borderCanvasRefs = React.useRef([]);
+
+  // Determine card count for layout classes
+  const cardCount = (cards === null || cards === void 0 ? void 0 : cards.length) || 0;
+  const getCardCountClass = () => {
+    if (cardCount === 1) return "oneCard--a7d9e";
+    if (cardCount === 2) return "twoCards--4ca7e";
+    if (cardCount === 3) return "threeCards--72213";
+    if (cardCount === 4) return "fourCards--8b11f";
+    return "";
+  };
+
+  // Get device class - memoize to prevent unnecessary re-renders
+  const [isDesktop, setIsDesktop] = React.useState(() => window.innerWidth >= 768);
+  React.useEffect(() => {
+    const handleResize = () => {
+      setIsDesktop(window.innerWidth >= 768);
+    };
+    window.addEventListener("resize", handleResize, {
+      passive: true
+    });
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+  const deviceClass = isDesktop ? "desktop--36d4c" : "mobile--4607f";
+
+  // Generate shell background SVG (from the HTML)
+  const shellBackgroundSVG = `data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2258%22%20height%3D%2299%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22b%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%22100%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%232D2926%22%20offset%3D%220%25%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%232C2926%22%20offset%3D%22100%25%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3ClinearGradient%20id%3D%22a%22%20x1%3D%2250%25%22%20x2%3D%2250%25%22%20y1%3D%220%25%22%20y2%3D%22100%25%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23F4E2C5%22%20offset%3D%220%25%22%20%2F%3E%3Cstop%20stop-color%3D%22%23635541%22%20offset%3D%2291%25%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23978468%22%20offset%3D%2297%25%22%20%2F%3E%3Cstop%20stop-color%3D%22%23A79375%22%20offset%3D%22100%25%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FlinearGradient%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3CradialGradient%20id%3D%22c%22%20cx%3D%2253%25%22%20cy%3D%2258%25%22%20r%3D%22116%25%22%20fx%3D%2253%25%22%20fy%3D%22588%25%22%20gradientTransform%3D%22matrix(0%20.57%20-1%200%201.11%20.278)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23F4E2C5%22%20offset%3D%220%25%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23635541%22%20offset%3D%2254%25%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cstop%20stop-color%3D%22%23A79375%22%20offset%3D%22100%25%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2FradialGradient%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fdefs%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20fill%3D%22none%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20id%3D%22Rectangle%22%20fill%3D%22url(%23b)%22%20stroke%3D%22url(%23a)%22%20stroke-width%3D%223.38%22%20d%3D%22M29.15%2097.35l23.72-2.56c1.5-.17%202.64-1.5%202.57-3L53.36%2048.1v-.17l2.04-36.1c.08-1.5-1.02-2.83-2.52-3l-9.1-1.15L43%204.56%2029.15%201.8%2014.7%204.54l-.4%203.13-9.62%201.17c-1.5.18-2.6%201.5-2.53%203.02L4.2%2047.94v.18L2.12%2091.78c-.08%201.52%201.05%202.83%202.57%203l24.45%202.57z%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20stroke%3D%22url(%23c)%22%20stroke-width%3D%22.85%22%20d%3D%22M44.04%203.48L29.14.5l-15.6%202.97-.38%203.07L4.53%207.6C2.35%207.84.76%209.74.9%2011.93l2.03%2036.12L.85%2091.72c-.1%202.2%201.52%204.1%203.7%204.32l24.56%202.6%2023.9-2.6c2.18-.23%203.8-2.12%203.7-4.3L54.62%2048l2.04-36.1c.13-2.17-1.46-4.07-3.62-4.34L44.8%206.55l-.76-3.07z%22%20%2F%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fsvg%3E`;
+
+  // Initialize refs and animations
+  React.useEffect(() => {
+    borderCanvasRefs.current = [];
+
+    // Animate thunder sprite helper
+    const animateThunderSprite = (img, columns, rows, loop = true, speed = 0.25) => {
+      if (!img || !img.complete) return null;
+      const canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      const imgWidth = img.naturalWidth;
+      const imgHeight = img.naturalHeight;
+      const frameWidth = imgWidth / columns;
+      const frameHeight = imgHeight / rows;
+      canvas.width = frameWidth;
+      canvas.height = frameHeight;
+      let currentFrame = 0;
+      const totalFrames = columns * rows;
+      let frameCount = 0;
+      let animationId;
+      const animate = () => {
+        const col = currentFrame % columns;
+        const row = Math.floor(currentFrame / columns);
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, col * frameWidth, row * frameHeight, frameWidth, frameHeight, 0, 0, frameWidth, frameHeight);
+        frameCount++;
+        if (frameCount >= Math.floor(60 / (speed * 60))) {
+          currentFrame = loop ? (currentFrame + 1) % totalFrames : currentFrame + 1;
+          frameCount = 0;
+        }
+        if (loop || currentFrame < totalFrames) {
+          animationId = requestAnimationFrame(animate);
+        }
+      };
+      animate();
+      return {
+        canvas,
+        stop: () => cancelAnimationFrame(animationId)
+      };
+    };
+
+    // Load and animate thunder left
+    if (thunderLeftRef.current) {
+      thunderLeftRef.current.innerHTML = "";
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        const {
+          canvas
+        } = animateThunderSprite(img, 3, 10, true, 0.25);
+        if (canvas) {
+          canvas.style.position = "absolute";
+          canvas.style.left = isDesktop ? "calc(50% - 40px)" : "calc(50% + 75px)";
+          canvas.style.top = "calc(50% + 15px)";
+          canvas.style.transform = "translate(-50%, -50%) scale(0.3)";
+          canvas.style.zIndex = "1";
+          thunderLeftRef.current.appendChild(canvas);
+        }
+      };
+      img.src = thunder_left$1;
+    }
+
+    // Load and animate thunder right
+    if (thunderRightRef.current) {
+      thunderRightRef.current.innerHTML = "";
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        const {
+          canvas
+        } = animateThunderSprite(img, 3, 10, true, 0.25);
+        if (canvas) {
+          canvas.style.position = "absolute";
+          canvas.style.right = isDesktop ? "calc(50% - 40px)" : "calc(50% - 75px)";
+          canvas.style.top = "calc(50% + 15px)";
+          canvas.style.transform = "translate(50%, -50%) scale(0.3)";
+          canvas.style.zIndex = "1";
+          thunderRightRef.current.appendChild(canvas);
+        }
+      };
+      img.src = thunder_right$1;
+    }
+
+    // Load and animate thunder middle (top and bottom)
+    const loadMiddleThunder = (ref, yPos) => {
+      if (!ref.current) return;
+      ref.current.innerHTML = "";
+      const img = new Image();
+      img.crossOrigin = "anonymous";
+      img.onload = () => {
+        const {
+          canvas
+        } = animateThunderSprite(img, 3, 18, false, 0.25);
+        if (canvas) {
+          canvas.style.position = "absolute";
+          canvas.style.left = "50%";
+          canvas.style.top = yPos;
+          canvas.style.transform = "translate(-50%, -50%) scale(0.5)";
+          canvas.style.zIndex = "1";
+          ref.current.appendChild(canvas);
+        }
+      };
+      img.src = thunder_middle$1;
+    };
+    loadMiddleThunder(thunderMiddleTopRef, "0");
+    loadMiddleThunder(thunderMiddleBottomRef, "100%");
+
+    // Animate border on canvas - will be set up when canvas refs are available
+    const animateBorders = () => {
+      borderCanvasRefs.current.forEach((canvas, index) => {
+        if (!canvas) return;
+        const ctx = canvas.getContext("2d");
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.onload = () => {
+          const columns = 10;
+          const rows = 3;
+          const imgWidth = img.naturalWidth;
+          const imgHeight = img.naturalHeight;
+          const frameWidth = imgWidth / columns;
+          const frameHeight = imgHeight / rows;
+          let currentFrame = 0;
+          const totalFrames = columns * rows;
+          let frameCount = 0;
+          const speed = 0.25;
+          const animate = () => {
+            const col = currentFrame % columns;
+            const row = Math.floor(currentFrame / columns);
+            ctx.clearRect(0, 0, canvas.width, canvas.height);
+            ctx.drawImage(img, col * frameWidth, row * frameHeight, frameWidth, frameHeight, 0, 0, canvas.width, canvas.height);
+            frameCount++;
+            if (frameCount >= Math.floor(60 / (speed * 60))) {
+              currentFrame = (currentFrame + 1) % totalFrames;
+              frameCount = 0;
+            }
+            requestAnimationFrame(animate);
+          };
+          animate();
+        };
+
+        // Use border_loop for LIGHTNING status, border_start for others
+        img.src = roundStatus === "LIGHTNING" ? border_loop$1 : border_start$1;
+      });
+    };
+
+    // Delay border animation to ensure canvas refs are set
+    setTimeout(animateBorders, 100);
+  }, [cards, roundStatus, isDesktop]);
+  if (!cards || cards.length === 0) {
+    return null;
+  }
+
+  // Helper function to check if a card is a matching card
+  const isMatchingCard = card => {
+    if (!matchingCards || matchingCards.length === 0) return false;
+    const cardRank = (card.rank || "").toString().toUpperCase();
+    const cardSuit = (card.suit || "").toString().toLowerCase();
+    return matchingCards.some(matchCard => {
+      const matchRank = (matchCard.rank || "").toString().toUpperCase();
+      const matchSuit = (matchCard.suit || "").toString().toLowerCase();
+      return matchRank === cardRank && matchSuit === cardSuit;
+    });
+  };
+
+  // Calculate layout for 5 cards: 3 in first row, 2 in second row (desktop only)
+  const shouldUseMultiRow = cardCount === 5 && isDesktop;
+  const firstRowCards = shouldUseMultiRow ? cards.slice(0, 3) : cards;
+  const secondRowCards = shouldUseMultiRow ? cards.slice(3) : [];
+
+  // Render cards in a container similar to the HTML structure
+  return /*#__PURE__*/React.createElement("div", {
+    ref: containerRef,
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "center",
+      alignItems: "center",
+      width: "100%",
+      height: "100%",
+      position: "relative",
+      overflow: "hidden"
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: thunderLeftRef,
+    style: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: thunderRightRef,
+    style: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: thunderMiddleTopRef,
+    style: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    ref: thunderMiddleBottomRef,
+    style: {
+      position: "absolute",
+      width: "100%",
+      height: "100%",
+      pointerEvents: "none"
+    }
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "flex-start",
+      flexWrap: "wrap",
+      maxHeight: shouldUseMultiRow ? "48%" : "100%",
+      overflow: "hidden",
+      paddingTop: shouldUseMultiRow ? "2%" : "0",
+      ...(!isDesktop && {
+        gap: "10px"
+      })
+    }
+  }, firstRowCards.map((card, index) => {
+    var _card$multiplier, _card$suit;
+    const multiplier = (_card$multiplier = card.multiplier) !== null && _card$multiplier !== void 0 ? _card$multiplier : card.multplier;
+    const isMatching = isMatchingCard(card);
+    const cardSvg = generateBaccaratCardHTMLSVG(card.rank, card.suit, isMatching, !isDesktop);
+    const cardId = `${card.rank || ""}${((_card$suit = card.suit) === null || _card$suit === void 0 || (_card$suit = _card$suit[0]) === null || _card$suit === void 0 ? void 0 : _card$suit.toUpperCase()) || ""}`;
+    return /*#__PURE__*/React.createElement("div", {
+      key: `card-${cardId}-${index}-${multiplier || 0}`,
+      className: `lightningCard--9ec39 ${deviceClass} ${getCardCountClass()}`,
+      "data-role": `card-${cardId}-multiplier-${multiplier || 0}-lightning-${roundStatus === "LIGHTNING"}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "container--5cb15 noAnimation--94619",
+      style: {
+        animationDelay: "0ms",
+        animationDuration: "0ms"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "shell--013b5",
+      style: {
+        backgroundImage: `url("${shellBackgroundSVG}")`
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "elements--d38d6"
+    }, multiplier !== null && multiplier !== undefined && /*#__PURE__*/React.createElement("div", {
+      className: "multiplier--22733",
+      style: {
+        fontSize: "18px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "multiplier--fe086"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "textContainer--1a1ac",
+      style: {
+        justifyContent: "center"
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "text--68a0b placeholder--6cec6"
+    }, multiplier, "x"), /*#__PURE__*/React.createElement("span", {
+      className: "text--68a0b base--b286e",
+      "data-role": "multiplierBase"
+    }, multiplier, "x"), /*#__PURE__*/React.createElement("span", {
+      className: "text--68a0b shadow--551ae"
+    }, multiplier, "x"), /*#__PURE__*/React.createElement("span", {
+      className: "text--68a0b textBackground--cded2 lightning--2aac5"
+    }, multiplier, "x")))), /*#__PURE__*/React.createElement("div", {
+      className: "cardContainer--68186"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "card--88842"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "wrapper--9fd49",
+      "data-role": `card-${cardId}`,
+      style: isMatching ? {
+        zIndex: 100,
+        position: "relative"
+      } : {}
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "suit--2017b active--9b94f",
+      dangerouslySetInnerHTML: {
+        __html: cardSvg
+      }
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "cardBorder--a2a73",
+      style: isMatching ? {
+        backgroundColor: "#ffffff"
+      } : {}
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "lightningBorder--21495"
+    }, /*#__PURE__*/React.createElement("canvas", {
+      ref: el => {
+        if (el && !borderCanvasRefs.current[index]) {
+          borderCanvasRefs.current[index] = el;
+        }
+      },
+      width: "194",
+      height: "276",
+      "data-role": `sprite-effect-lightningCardBorder-${index}`,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    }))));
+  })), shouldUseMultiRow && secondRowCards.length > 0 && /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "flex-start",
+      marginTop: "5px",
+      maxHeight: "48%",
+      overflow: "hidden",
+      paddingTop: "1%",
+      ...(!isDesktop && {
+        gap: "10px"
+      })
+    }
+  }, secondRowCards.map((card, index) => {
+    var _card$multiplier2, _card$suit2;
+    const multiplier = (_card$multiplier2 = card.multiplier) !== null && _card$multiplier2 !== void 0 ? _card$multiplier2 : card.multplier;
+    const isMatching = isMatchingCard(card);
+    const cardSvg = generateBaccaratCardHTMLSVG(card.rank, card.suit, isMatching, !isDesktop);
+    const cardId = `${card.rank || ""}${((_card$suit2 = card.suit) === null || _card$suit2 === void 0 || (_card$suit2 = _card$suit2[0]) === null || _card$suit2 === void 0 ? void 0 : _card$suit2.toUpperCase()) || ""}`;
+    const actualIndex = index + 3; // Continue index from first row
+
+    return /*#__PURE__*/React.createElement("div", {
+      key: `card-${cardId}-${actualIndex}-${multiplier || 0}`,
+      className: `lightningCard--9ec39 ${deviceClass} ${getCardCountClass()}`,
+      "data-role": `card-${cardId}-multiplier-${multiplier || 0}-lightning-${roundStatus === "LIGHTNING"}`
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "container--5cb15 noAnimation--94619",
+      style: {
+        animationDelay: "0ms",
+        animationDuration: "0ms"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "shell--013b5",
+      style: {
+        backgroundImage: `url("${shellBackgroundSVG}")`
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "elements--d38d6"
+    }, multiplier !== null && multiplier !== undefined && /*#__PURE__*/React.createElement("div", {
+      className: "multiplier--22733",
+      style: {
+        fontSize: "18px"
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "multiplier--fe086"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "textContainer--1a1ac",
+      style: {
+        justifyContent: "center"
+      }
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "text--68a0b placeholder--6cec6"
+    }, multiplier, "x"), /*#__PURE__*/React.createElement("span", {
+      className: "text--68a0b base--b286e",
+      "data-role": "multiplierBase"
+    }, multiplier, "x"), /*#__PURE__*/React.createElement("span", {
+      className: "text--68a0b shadow--551ae"
+    }, multiplier, "x"), /*#__PURE__*/React.createElement("span", {
+      className: "text--68a0b textBackground--cded2 lightning--2aac5"
+    }, multiplier, "x")))), /*#__PURE__*/React.createElement("div", {
+      className: "cardContainer--68186"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "card--88842"
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "wrapper--9fd49",
+      "data-role": `card-${cardId}`
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "suit--2017b active--9b94f",
+      dangerouslySetInnerHTML: {
+        __html: cardSvg
+      }
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "cardBorder--a2a73"
+    }))), /*#__PURE__*/React.createElement("div", {
+      className: "lightningBorder--21495"
+    }, /*#__PURE__*/React.createElement("canvas", {
+      ref: el => {
+        if (el && !borderCanvasRefs.current[actualIndex]) {
+          borderCanvasRefs.current[actualIndex] = el;
+        }
+      },
+      width: "194",
+      height: "276",
+      "data-role": `sprite-effect-lightningCardBorder-${actualIndex}`,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    }))));
+  })));
+};
+LightningCardHTML.propTypes = {
+  cards: PropTypes.arrayOf(PropTypes.shape({
+    multiplier: PropTypes.number,
+    rank: PropTypes.string,
+    suit: PropTypes.string
+  })),
+  roundStatus: PropTypes.string,
+  showRank: PropTypes.bool,
+  gameType: PropTypes.string,
+  matchingCards: PropTypes.arrayOf(PropTypes.shape({
+    rank: PropTypes.string,
+    suit: PropTypes.string
+  }))
+};
+LightningCardHTML.defaultProps = {
+  cards: [],
+  showRank: false
+};
+
 // 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";
@@ -45202,7 +45828,8 @@ const LighteningCard = ({
   roundStatus,
   cards,
   showRank = false,
-  gameType
+  gameType,
+  matchingCards
 }) => {
   const containerRef = React.useRef(null);
   const appRef = React.useRef(null);
@@ -45243,42 +45870,89 @@ const LighteningCard = ({
     ["NO_MORE_BETS", "LIGHTNING", "NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new MiddleThunder(thunder_middle, appRef);
 
     // Debug logging
-    console.log("LighteningCard render:", {
-      roundStatus,
-      showRank,
-      gameType,
-      cardsCount: (cards === null || cards === void 0 ? void 0 : cards.length) || 0,
-      cards: cards
-    });
+    // console.log("LighteningCard render:", {
+    //   roundStatus,
+    //   showRank,
+    //   gameType,
+    //   cardsCount: 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, border_loop, appRef);
-      ["NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new BaccaratCard(cards, border_start, appRef);
+      ["LIGHTNING"].includes(roundStatus) && new BaccaratCardStart(cards, border_start, appRef);
+      ["NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new BaccaratCard(cards, border_loop, appRef);
     } else {
       // Use suit-only display (with PNG suit images)
-      ["LIGHTNING"].includes(roundStatus) && new LighteningStart(cards, border_loop, appRef);
-      ["NEW_CARD", "ROUND_END", "BETTING_STARTED"].includes(roundStatus) && new Lightening(cards, border_start, 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(() => {
+    // Check if this is baccarat game - use HTML/CSS cards (don't create Pixi.js app)
+    const isBaccarat = (gameType === null || gameType === void 0 ? void 0 : gameType.toLowerCase()) === "baccarat" || showRank === true;
+
+    // Only create Pixi.js application if NOT using HTML/CSS cards
+    if (isBaccarat && (roundStatus === "LIGHTNING" || roundStatus === "NEW_CARD" || roundStatus === "ROUND_END" || roundStatus === "BETTING_STARTED")) {
+      // Using HTML/CSS cards, skip Pixi.js initialization
+      return;
+    }
     if (!containerRef.current) return;
+
+    // Clean up existing app before creating new one
+    if (appRef.current) {
+      try {
+        if (appRef.current.renderer && typeof appRef.current.destroy === "function") {
+          appRef.current.destroy(true);
+        }
+        appRef.current = null;
+      } catch (error) {
+        console.warn("Error destroying Pixi.js app:", error);
+      }
+    }
     initiatePixiApplication();
+
     // Cleanup function
     return () => {
-      if (appRef.current && appRef.current.renderer && typeof appRef.current.destroy === "function") {
-        var _appRef$current;
-        (_appRef$current = appRef.current) === null || _appRef$current === void 0 || _appRef$current.destroy(true);
+      const app = appRef.current;
+      if (!app) return;
+      try {
+        // Remove canvas from DOM first
+        if (app.canvas && containerRef.current && containerRef.current.contains(app.canvas)) {
+          containerRef.current.removeChild(app.canvas);
+        }
+        if (app.renderer && typeof app.destroy === "function") {
+          app.destroy(true);
+        }
+      } catch (error) {
+        console.warn("Error in cleanup:", error);
+      } finally {
         appRef.current = null;
       }
     };
-  }, [roundStatus, showRank, cards, gameType]);
+  }, [roundStatus, showRank, gameType, cards]);
 
   // Add class for 5-card layout to apply min-height
   const containerClass = (cards === null || cards === void 0 ? void 0 : cards.length) === 5 ? "lightening-card five-cards" : "lightening-card";
+
+  // Check if this is baccarat game - use HTML/CSS cards
+  const isBaccarat = (gameType === null || gameType === void 0 ? void 0 : gameType.toLowerCase()) === "baccarat" || showRank === true;
+
+  // Use HTML/CSS component for baccarat cards to match the provided HTML structure
+  if (isBaccarat && (roundStatus === "LIGHTNING" || roundStatus === "NEW_CARD" || roundStatus === "ROUND_END" || roundStatus === "BETTING_STARTED")) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: containerClass
+    }, /*#__PURE__*/React.createElement(LightningCardHTML, {
+      cards: cards,
+      roundStatus: roundStatus,
+      showRank: showRank,
+      gameType: gameType,
+      matchingCards: matchingCards
+    }));
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: containerClass,
     ref: containerRef
@@ -45295,6 +45969,11 @@ LighteningCard.propTypes = {
   // 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
+  matchingCards: PropTypes.arrayOf(PropTypes.shape({
+    rank: PropTypes.string,
+    suit: PropTypes.string
+  })),
+  // Array of matching cards to highlight with different colors
   assetPath: PropTypes.string,
   // Path to the animation asset
   onAnimationReady: PropTypes.func // Callback when animation is ready