lighteningcards 2.1.9 → 2.2.0

package/dist/index.cjs.js

@@ -45197,9 +45197,10 @@ const useBaccaratCardStart = () => {
  * @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) => {
+const generateBaccaratCardHTMLSVG = (rank, suit, isMatching = false, isMobile = false) => {
   // Format rank for display
   const formatRank = r => {
     if (!r) return "";
@@ -45258,10 +45259,14 @@ const generateBaccaratCardHTMLSVG = (rank, suit, isMatching = false) => {
   const isTen = displayRank === "10";
 
   // Position values based on whether rank is "10" or not
-  const rankXTop = isTen ? "5" : "15";
-  const suitXTop = isTen ? "125" : "100";
-  const rankXBottom = isTen ? "-10" : "10";
-  const suitXBottom = isTen ? "115" : "100";
+  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";
@@ -45289,9 +45294,9 @@ const generateBaccaratCardHTMLSVG = (rank, suit, isMatching = false) => {
   // 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">
+    <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%">
+        <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>
@@ -45309,13 +45314,13 @@ const generateBaccaratCardHTMLSVG = (rank, suit, isMatching = false) => {
       </defs>
       <g>
         <!-- Rank at top left corner -->
-        <text x="${rankXTop}" y="25" font-family="Arial, sans-serif" font-size="100" font-weight="750" fill="${fillColor}" text-anchor="start" dominant-baseline="hanging">${displayRank}</text>
+        <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="10" font-family="Arial, sans-serif" font-size="115" font-weight="750" fill="${fillColor}" text-anchor="start" dominant-baseline="hanging">${getSuitSymbol(suitLower)}</text>
+        <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="25" font-family="Arial, sans-serif" font-size="100" font-weight="750" fill="${fillColor}" text-anchor="start" dominant-baseline="hanging">${displayRank}</text>
-          <text x="${suitXBottom}" y="10" font-family="Arial, sans-serif" font-size="115" font-weight="750" fill="${fillColor}" text-anchor="start" dominant-baseline="hanging">${getSuitSymbol(suitLower)}</text>
+          <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>
@@ -45625,7 +45630,7 @@ const LightningCardHTML = ({
     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);
+    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}`,
@@ -45719,7 +45724,7 @@ const LightningCardHTML = ({
     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);
+    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