improved html input with a resizable, dynamic game cards preview

cardSvgs.js

@@ -0,0 +1,128 @@
+// backs & joker
+import card1B from "./cards/1B.svg?raw";
+import card2B from "./cards/2B.svg?raw";
+import card1J from "./cards/1J.svg?raw";
+
+// suit: clubs
+import cardAC from "./cards/AC.svg?raw";
+import card2C from "./cards/2C.svg?raw";
+import card3C from "./cards/3C.svg?raw";
+import card4C from "./cards/4C.svg?raw";
+import card5C from "./cards/5C.svg?raw";
+import card6C from "./cards/6C.svg?raw";
+import card7C from "./cards/7C.svg?raw";
+import card8C from "./cards/8C.svg?raw";
+import card9C from "./cards/9C.svg?raw";
+import cardTC from "./cards/TC.svg?raw";
+import cardJC from "./cards/JC.svg?raw";
+import cardQC from "./cards/QC.svg?raw";
+import cardKC from "./cards/KC.svg?raw";
+
+// suit: diamonds
+import cardAD from "./cards/AD.svg?raw";
+import card2D from "./cards/2D.svg?raw";
+import card3D from "./cards/3D.svg?raw";
+import card4D from "./cards/4D.svg?raw";
+import card5D from "./cards/5D.svg?raw";
+import card6D from "./cards/6D.svg?raw";
+import card7D from "./cards/7D.svg?raw";
+import card8D from "./cards/8D.svg?raw";
+import card9D from "./cards/9D.svg?raw";
+import cardTD from "./cards/TD.svg?raw";
+import cardJD from "./cards/JD.svg?raw";
+import cardQD from "./cards/QD.svg?raw";
+import cardKD from "./cards/KD.svg?raw";
+
+// suit: hearts
+import cardAH from "./cards/AH.svg?raw";
+import card2H from "./cards/2H.svg?raw";
+import card3H from "./cards/3H.svg?raw";
+import card4H from "./cards/4H.svg?raw";
+import card5H from "./cards/5H.svg?raw";
+import card6H from "./cards/6H.svg?raw";
+import card7H from "./cards/7H.svg?raw";
+import card8H from "./cards/8H.svg?raw";
+import card9H from "./cards/9H.svg?raw";
+import cardTH from "./cards/TH.svg?raw";
+import cardJH from "./cards/JH.svg?raw";
+import cardQH from "./cards/QH.svg?raw";
+import cardKH from "./cards/KH.svg?raw";
+
+// suit: spades
+import cardAS from "./cards/AS.svg?raw";
+import card2S from "./cards/2S.svg?raw";
+import card3S from "./cards/3S.svg?raw";
+import card4S from "./cards/4S.svg?raw";
+import card5S from "./cards/5S.svg?raw";
+import card6S from "./cards/6S.svg?raw";
+import card7S from "./cards/7S.svg?raw";
+import card8S from "./cards/8S.svg?raw";
+import card9S from "./cards/9S.svg?raw";
+import cardTS from "./cards/TS.svg?raw";
+import cardJS from "./cards/JS.svg?raw";
+import cardQS from "./cards/QS.svg?raw";
+import cardKS from "./cards/KS.svg?raw";
+
+let cardSvgs = {
+  "1B": card1B,
+  "2B": card2B,
+  "1J": card1J,
+
+  AC: cardAC,
+  "2C": card2C,
+  "3C": card3C,
+  "4C": card4C,
+  "5C": card5C,
+  "6C": card6C,
+  "7C": card7C,
+  "8C": card8C,
+  "9C": card9C,
+  TC: cardTC,
+  JC: cardJC,
+  QC: cardQC,
+  KC: cardKC,
+
+  AD: cardAD,
+  "2D": card2D,
+  "3D": card3D,
+  "4D": card4D,
+  "5D": card5D,
+  "6D": card6D,
+  "7D": card7D,
+  "8D": card8D,
+  "9D": card9D,
+  TD: cardTD,
+  JD: cardJD,
+  QD: cardQD,
+  KD: cardKD,
+
+  AH: cardAH,
+  "2H": card2H,
+  "3H": card3H,
+  "4H": card4H,
+  "5H": card5H,
+  "6H": card6H,
+  "7H": card7H,
+  "8H": card8H,
+  "9H": card9H,
+  TH: cardTH,
+  JH: cardJH,
+  QH: cardQH,
+  KH: cardKH,
+
+  AS: cardAS,
+  "2S": card2S,
+  "3S": card3S,
+  "4S": card4S,
+  "5S": card5S,
+  "6S": card6S,
+  "7S": card7S,
+  "8S": card8S,
+  "9S": card9S,
+  TS: cardTS,
+  JS: cardJS,
+  QS: cardQS,
+  KS: cardKS,
+};
+
+export default cardSvgs;

cards/1B.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" class="card" face="1B" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><pattern id="B1" width="6" height="6" patternUnits="userSpaceOnUse"><path d="M3 0L6 3L3 6L0 3Z" fill="black"></path></pattern></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#e4dccd" stroke="black"></rect><rect fill="url(#B1)" width="216" height="312" x="-108" y="-156" rx="12" ry="12"></rect></svg>

cards/1J.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="1J" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="J14" preserveAspectRatio="none" viewBox="0 0 1300 2000"><path stroke="#44F" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" fill="none" d="M317.05664,1294.416 100,1620l220,-60 40,240 140,-200 160,200 40,-200 180,180 60,-220 260,60 -236.67969,-304.3027M1241.1987,534.58948a75,75 0 0 1 -75,75 75,75 0 0 1 -75,-75 75,75 0 0 1 75,-75 75,75 0 0 1 75,75zM980.11493,234.09686a75,75 0 0 1 -75,75 75,75 0 0 1 -75,-75 75,75 0 0 1 75,-75 75,75 0 0 1 75,75zM190.29556,431.1412a75,75 0 0 1 -75,75 75,75 0 0 1 -74.999997,-75 75,75 0 0 1 74.999997,-75 75,75 0 0 1 75,75zM924.3457,650.27148c42.40088,-50.45397 91.5936,-93.35356 167.5059,-106.53906 -0.4037,-3.03138 -0.6215,-6.0846 -0.6524,-9.14258 0.03,-15.96068 5.1503,-31.4957 14.6172,-44.3457C1026.3517,437.47479 931.12146,446.83238 840,440 761.98041,388.07638 804.10248,338.17898 853.51758,288.4043 842.40414,277.84182 834.79487,264.12701 831.71484,249.10742 687.94378,262.65874 542.4812,256.33752 420,520 369.08062,331.38331 278.61481,370.61289 187.77148,412.01367c1.66108,6.24042 2.50924,12.66925 2.52344,19.12695 -0.0209,17.1896 -5.94587,33.85038 -16.7832,47.19336 66.82714,55.25532 117.5686,127.8306 155.76953,213.91016M384.88867,1140c51.89013,98.343 153.91815,159.9189 265.11133,160 111.19809,-0.076 213.23257,-61.6527 265.125,-160M1095,1000A445,445 0 0 1 650,1445 445,445 0 0 1 205,1000 445,445 0 0 1 650,555 445,445 0 0 1 1095,1000Z"></path></symbol><symbol id="J13" preserveAspectRatio="none" viewBox="0 0 1300 2000"><path fill="#44F" d="M879.65521,937.6026a40,40 0 0 1 -40,40 40,40 0 0 1 -40,-40 40,40 0 0 1 40,-40 40,40 0 0 1 40,40zm-379.31039,0a40,40 0 0 1 -40,40 40,40 0 0 1 -40,-40 40,40 0 0 1 40,-40 40,40 0 0 1 40,40z"></path></symbol><symbol id="J12" preserveAspectRatio="none" viewBox="0 0 1300 2000"><path fill="red" d="M317.05664,1294.416 100,1620l220,-60 40,240 140,-200 160,200 40,-200 180,180 60,-220 260,60 -236.67969,-304.3027A445,445 0 0 1 650,1445 445,445 0 0 1 317.05664,1294.416ZM831.71484,249.10742C687.94378,262.65874 542.4812,256.33752 420,520 369.08062,331.38331 278.61481,370.61289 187.77148,412.01367a75,75 0 0 1 2.52344,19.12695 75,75 0 0 1 -16.78515,47.19532c66.827,55.25537 117.57478,127.8247 155.77539,213.90429A445,445 0 0 1 650,555 445,445 0 0 1 924.33984,650.26562c42.39917,-50.4556 91.60026,-93.34711 167.51176,-106.5332a75,75 0 0 1 -0.6524,-9.14258 75,75 0 0 1 14.6172,-44.3457C1026.3517,437.47479 931.12146,446.83238 840,440 761.98041,388.07638 804.10248,338.17898 853.51758,288.4043a75,75 0 0 1 -21.80274,-39.29688z"></path></symbol><symbol id="J11" preserveAspectRatio="none" viewBox="0 0 1300 2000"><path fill="#FC4" d="M1095,1000A445,445 0 0 1 650,1445 445,445 0 0 1 205,1000 445,445 0 0 1 650,555 445,445 0 0 1 1095,1000Z"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use width="202.8" height="312" x="-101.4" y="-156" xlink:href="#J11"></use><use width="202.8" height="312" x="-101.4" y="-156" xlink:href="#J12"></use><use width="202.8" height="312" x="-101.4" y="-156" xlink:href="#J13"></use><use width="202.8" height="312" x="-101.4" y="-156" xlink:href="#J14"></use></svg>

cards/2B.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" class="card" face="2B" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><pattern id="B2" width="6" height="6" patternUnits="userSpaceOnUse"><path d="M3 0L6 3L3 6L0 3Z" fill="#d40000"></path></pattern></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#e4dccd" stroke="black"></rect><rect fill="url(#B2)" width="216" height="312" x="-108" y="-156" rx="12" ry="12"></rect></svg>

cards/2C.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="2C" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SC2" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M30 150C35 385 85 400 130 500L-130 500C-85 400 -35 385 -30 150A10 10 0 0 0 -50 150A210 210 0 1 1 -124 -51A10 10 0 0 0 -110 -65A230 230 0 1 1 110 -65A10 10 0 0 0 124 -51A210 210 0 1 1 50 150A10 10 0 0 0 30 150Z" fill="black"></path></symbol><symbol id="VC2" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-225 -225C-245 -265 -200 -460 0 -460C 200 -460 225 -325 225 -225C225 -25 -225 160 -225 460L225 460L225 300" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VC2" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC2" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SC2" height="40" width="40" x="-20" y="-107.718"></use><use xlink:href="#SC2" height="40" width="40" x="-20" y="67.718"></use><g transform="rotate(180)"><use xlink:href="#VC2" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC2" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/2D.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="2D" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SD2" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M-400 0C-350 0 0 -450 0 -500C0 -450 350 0 400 0C350 0 0 450 0 500C0 450 -350 0 -400 0Z" fill="#d40000"></path></symbol><symbol id="VD2" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-225 -225C-245 -265 -200 -460 0 -460C 200 -460 225 -325 225 -225C225 -25 -225 160 -225 460L225 460L225 300" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VD2" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD2" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SD2" height="40" width="40" x="-20" y="-107.668"></use><use xlink:href="#SD2" height="40" width="40" x="-20" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VD2" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD2" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/2H.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="2H" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SH2" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -300C0 -400 100 -500 200 -500C300 -500 400 -400 400 -250C400 0 0 400 0 500C0 400 -400 0 -400 -250C-400 -400 -300 -500 -200 -500C-100 -500 0 -400 -0 -300Z" fill="#d40000"></path></symbol><symbol id="VH2" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-225 -225C-245 -265 -200 -460 0 -460C 200 -460 225 -325 225 -225C225 -25 -225 160 -225 460L225 460L225 300" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VH2" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH2" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SH2" height="40" width="40" x="-20" y="-107.668"></use><use xlink:href="#SH2" height="40" width="40" x="-20" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VH2" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH2" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/2J.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="2J" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="J22" preserveAspectRatio="none" viewBox="0 0 1300 2000"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="6" fill="none" d="M317.05664,1294.416 100,1620l220,-60 40,240 140,-200 160,200 40,-200 180,180 60,-220 260,60 -236.67969,-304.3027M1241.1987,534.58948a75,75 0 0 1 -75,75 75,75 0 0 1 -75,-75 75,75 0 0 1 75,-75 75,75 0 0 1 75,75zM980.11493,234.09686a75,75 0 0 1 -75,75 75,75 0 0 1 -75,-75 75,75 0 0 1 75,-75 75,75 0 0 1 75,75zM190.29556,431.1412a75,75 0 0 1 -75,75 75,75 0 0 1 -74.999997,-75 75,75 0 0 1 74.999997,-75 75,75 0 0 1 75,75zM924.3457,650.27148c42.40088,-50.45397 91.5936,-93.35356 167.5059,-106.53906 -0.4037,-3.03138 -0.6215,-6.0846 -0.6524,-9.14258 0.03,-15.96068 5.1503,-31.4957 14.6172,-44.3457C1026.3517,437.47479 931.12146,446.83238 840,440 761.98041,388.07638 804.10248,338.17898 853.51758,288.4043 842.40414,277.84182 834.79487,264.12701 831.71484,249.10742 687.94378,262.65874 542.4812,256.33752 420,520 369.08062,331.38331 278.61481,370.61289 187.77148,412.01367c1.66108,6.24042 2.50924,12.66925 2.52344,19.12695 -0.0209,17.1896 -5.94587,33.85038 -16.7832,47.19336 66.82714,55.25532 117.5686,127.8306 155.76953,213.91016M384.88867,1140c51.89013,98.343 153.91815,159.9189 265.11133,160 111.19809,-0.076 213.23257,-61.6527 265.125,-160M1095,1000A445,445 0 0 1 650,1445 445,445 0 0 1 205,1000 445,445 0 0 1 650,555 445,445 0 0 1 1095,1000Z"></path></symbol><symbol id="J21" preserveAspectRatio="none" viewBox="0 0 1300 2000"><path fill="black" d="M879.65521,937.6026a40,40 0 0 1 -40,40 40,40 0 0 1 -40,-40 40,40 0 0 1 40,-40 40,40 0 0 1 40,40zm-379.31039,0a40,40 0 0 1 -40,40 40,40 0 0 1 -40,-40 40,40 0 0 1 40,-40 40,40 0 0 1 40,40z"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use width="202.8" height="312" x="-101.4" y="-156" xlink:href="#J21"></use><use width="202.8" height="312" x="-101.4" y="-156" xlink:href="#J22"></use></svg>

cards/2S.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="2S" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SS2" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -500C100 -250 355 -100 355 185A150 150 0 0 1 55 185A10 10 0 0 0 35 185C35 385 85 400 130 500L-130 500C-85 400 -35 385 -35 185A10 10 0 0 0 -55 185A150 150 0 0 1 -355 185C-355 -100 -100 -250 0 -500Z" fill="black"></path></symbol><symbol id="VS2" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-225 -225C-245 -265 -200 -460 0 -460C 200 -460 225 -325 225 -225C225 -25 -225 160 -225 460L225 460L225 300" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VS2" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS2" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SS2" height="40" width="40" x="-20" y="-107.668"></use><use xlink:href="#SS2" height="40" width="40" x="-20" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VS2" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS2" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/3C.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="3C" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SC3" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M30 150C35 385 85 400 130 500L-130 500C-85 400 -35 385 -30 150A10 10 0 0 0 -50 150A210 210 0 1 1 -124 -51A10 10 0 0 0 -110 -65A230 230 0 1 1 110 -65A10 10 0 0 0 124 -51A210 210 0 1 1 50 150A10 10 0 0 0 30 150Z" fill="black"></path></symbol><symbol id="VC3" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-250 -320L-250 -460L200 -460L-110 -80C-100 -90 -50 -120 0 -120C200 -120 250 0 250 150C250 350 170 460 -30 460C-230 460 -260 300 -260 300" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VC3" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC3" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SC3" height="40" width="40" x="-20" y="-107.718"></use><use xlink:href="#SC3" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#SC3" height="40" width="40" x="-20" y="67.718"></use><g transform="rotate(180)"><use xlink:href="#VC3" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC3" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/3D.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="3D" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SD3" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M-400 0C-350 0 0 -450 0 -500C0 -450 350 0 400 0C350 0 0 450 0 500C0 450 -350 0 -400 0Z" fill="#d40000"></path></symbol><symbol id="VD3" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-250 -320L-250 -460L200 -460L-110 -80C-100 -90 -50 -120 0 -120C200 -120 250 0 250 150C250 350 170 460 -30 460C-230 460 -260 300 -260 300" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VD3" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD3" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SD3" height="40" width="40" x="-20" y="-107.668"></use><use xlink:href="#SD3" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#SD3" height="40" width="40" x="-20" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VD3" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD3" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/3H.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="3H" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SH3" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -300C0 -400 100 -500 200 -500C300 -500 400 -400 400 -250C400 0 0 400 0 500C0 400 -400 0 -400 -250C-400 -400 -300 -500 -200 -500C-100 -500 0 -400 -0 -300Z" fill="#d40000"></path></symbol><symbol id="VH3" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-250 -320L-250 -460L200 -460L-110 -80C-100 -90 -50 -120 0 -120C200 -120 250 0 250 150C250 350 170 460 -30 460C-230 460 -260 300 -260 300" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VH3" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH3" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SH3" height="40" width="40" x="-20" y="-107.668"></use><use xlink:href="#SH3" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#SH3" height="40" width="40" x="-20" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VH3" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH3" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/3S.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="3S" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SS3" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -500C100 -250 355 -100 355 185A150 150 0 0 1 55 185A10 10 0 0 0 35 185C35 385 85 400 130 500L-130 500C-85 400 -35 385 -35 185A10 10 0 0 0 -55 185A150 150 0 0 1 -355 185C-355 -100 -100 -250 0 -500Z" fill="black"></path></symbol><symbol id="VS3" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-250 -320L-250 -460L200 -460L-110 -80C-100 -90 -50 -120 0 -120C200 -120 250 0 250 150C250 350 170 460 -30 460C-230 460 -260 300 -260 300" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VS3" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS3" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SS3" height="40" width="40" x="-20" y="-107.668"></use><use xlink:href="#SS3" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#SS3" height="40" width="40" x="-20" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VS3" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS3" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/4C.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="4C" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SC4" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M30 150C35 385 85 400 130 500L-130 500C-85 400 -35 385 -30 150A10 10 0 0 0 -50 150A210 210 0 1 1 -124 -51A10 10 0 0 0 -110 -65A230 230 0 1 1 110 -65A10 10 0 0 0 124 -51A210 210 0 1 1 50 150A10 10 0 0 0 30 150Z" fill="black"></path></symbol><symbol id="VC4" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M50 460L250 460M150 460L150 -460L-300 175L-300 200L270 200" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VC4" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC4" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SC4" height="40" width="40" x="-59.668" y="-107.718"></use><use xlink:href="#SC4" height="40" width="40" x="19.668" y="-107.718"></use><use xlink:href="#SC4" height="40" width="40" x="-59.668" y="67.718"></use><use xlink:href="#SC4" height="40" width="40" x="19.668" y="67.718"></use><g transform="rotate(180)"><use xlink:href="#VC4" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC4" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/4D.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="4D" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SD4" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M-400 0C-350 0 0 -450 0 -500C0 -450 350 0 400 0C350 0 0 450 0 500C0 450 -350 0 -400 0Z" fill="#d40000"></path></symbol><symbol id="VD4" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M50 460L250 460M150 460L150 -460L-300 175L-300 200L270 200" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VD4" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD4" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SD4" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SD4" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SD4" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SD4" height="40" width="40" x="19.668" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VD4" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD4" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/4H.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="4H" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SH4" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -300C0 -400 100 -500 200 -500C300 -500 400 -400 400 -250C400 0 0 400 0 500C0 400 -400 0 -400 -250C-400 -400 -300 -500 -200 -500C-100 -500 0 -400 -0 -300Z" fill="#d40000"></path></symbol><symbol id="VH4" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M50 460L250 460M150 460L150 -460L-300 175L-300 200L270 200" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VH4" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH4" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SH4" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SH4" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SH4" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SH4" height="40" width="40" x="19.668" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VH4" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH4" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/4S.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="4S" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SS4" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -500C100 -250 355 -100 355 185A150 150 0 0 1 55 185A10 10 0 0 0 35 185C35 385 85 400 130 500L-130 500C-85 400 -35 385 -35 185A10 10 0 0 0 -55 185A150 150 0 0 1 -355 185C-355 -100 -100 -250 0 -500Z" fill="black"></path></symbol><symbol id="VS4" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M50 460L250 460M150 460L150 -460L-300 175L-300 200L270 200" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VS4" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS4" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SS4" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SS4" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SS4" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SS4" height="40" width="40" x="19.668" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VS4" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS4" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/5C.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="5C" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SC5" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M30 150C35 385 85 400 130 500L-130 500C-85 400 -35 385 -30 150A10 10 0 0 0 -50 150A210 210 0 1 1 -124 -51A10 10 0 0 0 -110 -65A230 230 0 1 1 110 -65A10 10 0 0 0 124 -51A210 210 0 1 1 50 150A10 10 0 0 0 30 150Z" fill="black"></path></symbol><symbol id="VC5" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M170 -460L-175 -460L-210 -115C-210 -115 -200 -200 0 -200C100 -200 255 -80 255 120C255 320 180 460 -20 460C-220 460 -255 285 -255 285" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VC5" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC5" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SC5" height="40" width="40" x="-59.668" y="-107.718"></use><use xlink:href="#SC5" height="40" width="40" x="19.668" y="-107.718"></use><use xlink:href="#SC5" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#SC5" height="40" width="40" x="-59.668" y="67.718"></use><use xlink:href="#SC5" height="40" width="40" x="19.668" y="67.718"></use><g transform="rotate(180)"><use xlink:href="#VC5" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC5" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/5D.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="5D" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SD5" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M-400 0C-350 0 0 -450 0 -500C0 -450 350 0 400 0C350 0 0 450 0 500C0 450 -350 0 -400 0Z" fill="#d40000"></path></symbol><symbol id="VD5" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M170 -460L-175 -460L-210 -115C-210 -115 -200 -200 0 -200C100 -200 255 -80 255 120C255 320 180 460 -20 460C-220 460 -255 285 -255 285" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VD5" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD5" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SD5" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SD5" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SD5" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#SD5" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SD5" height="40" width="40" x="19.668" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VD5" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD5" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/5H.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="5H" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SH5" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -300C0 -400 100 -500 200 -500C300 -500 400 -400 400 -250C400 0 0 400 0 500C0 400 -400 0 -400 -250C-400 -400 -300 -500 -200 -500C-100 -500 0 -400 -0 -300Z" fill="#d40000"></path></symbol><symbol id="VH5" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M170 -460L-175 -460L-210 -115C-210 -115 -200 -200 0 -200C100 -200 255 -80 255 120C255 320 180 460 -20 460C-220 460 -255 285 -255 285" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VH5" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH5" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SH5" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SH5" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SH5" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#SH5" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SH5" height="40" width="40" x="19.668" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VH5" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH5" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/5S.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="5S" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SS5" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -500C100 -250 355 -100 355 185A150 150 0 0 1 55 185A10 10 0 0 0 35 185C35 385 85 400 130 500L-130 500C-85 400 -35 385 -35 185A10 10 0 0 0 -55 185A150 150 0 0 1 -355 185C-355 -100 -100 -250 0 -500Z" fill="black"></path></symbol><symbol id="VS5" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M170 -460L-175 -460L-210 -115C-210 -115 -200 -200 0 -200C100 -200 255 -80 255 120C255 320 180 460 -20 460C-220 460 -255 285 -255 285" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VS5" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS5" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SS5" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SS5" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SS5" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#SS5" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SS5" height="40" width="40" x="19.668" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VS5" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS5" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/6C.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="6C" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SC6" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M30 150C35 385 85 400 130 500L-130 500C-85 400 -35 385 -30 150A10 10 0 0 0 -50 150A210 210 0 1 1 -124 -51A10 10 0 0 0 -110 -65A230 230 0 1 1 110 -65A10 10 0 0 0 124 -51A210 210 0 1 1 50 150A10 10 0 0 0 30 150Z" fill="black"></path></symbol><symbol id="VC6" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-250 100A250 250 0 0 1 250 100L250 210A250 250 0 0 1 -250 210L-250 -210A250 250 0 0 1 0 -460C150 -460 180 -400 200 -375" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VC6" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC6" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SC6" height="40" width="40" x="-59.668" y="-107.718"></use><use xlink:href="#SC6" height="40" width="40" x="19.668" y="-107.718"></use><use xlink:href="#SC6" height="40" width="40" x="-59.668" y="-20"></use><use xlink:href="#SC6" height="40" width="40" x="19.668" y="-20"></use><use xlink:href="#SC6" height="40" width="40" x="-59.668" y="67.718"></use><use xlink:href="#SC6" height="40" width="40" x="19.668" y="67.718"></use><g transform="rotate(180)"><use xlink:href="#VC6" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC6" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/6D.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="6D" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SD6" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M-400 0C-350 0 0 -450 0 -500C0 -450 350 0 400 0C350 0 0 450 0 500C0 450 -350 0 -400 0Z" fill="#d40000"></path></symbol><symbol id="VD6" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-250 100A250 250 0 0 1 250 100L250 210A250 250 0 0 1 -250 210L-250 -210A250 250 0 0 1 0 -460C150 -460 180 -400 200 -375" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VD6" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD6" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SD6" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SD6" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SD6" height="40" width="40" x="-59.668" y="-20"></use><use xlink:href="#SD6" height="40" width="40" x="19.668" y="-20"></use><use xlink:href="#SD6" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SD6" height="40" width="40" x="19.668" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VD6" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD6" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/6H.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="6H" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SH6" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -300C0 -400 100 -500 200 -500C300 -500 400 -400 400 -250C400 0 0 400 0 500C0 400 -400 0 -400 -250C-400 -400 -300 -500 -200 -500C-100 -500 0 -400 -0 -300Z" fill="#d40000"></path></symbol><symbol id="VH6" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-250 100A250 250 0 0 1 250 100L250 210A250 250 0 0 1 -250 210L-250 -210A250 250 0 0 1 0 -460C150 -460 180 -400 200 -375" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VH6" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH6" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SH6" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SH6" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SH6" height="40" width="40" x="-59.668" y="-20"></use><use xlink:href="#SH6" height="40" width="40" x="19.668" y="-20"></use><use xlink:href="#SH6" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SH6" height="40" width="40" x="19.668" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VH6" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH6" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/6S.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="6S" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SS6" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -500C100 -250 355 -100 355 185A150 150 0 0 1 55 185A10 10 0 0 0 35 185C35 385 85 400 130 500L-130 500C-85 400 -35 385 -35 185A10 10 0 0 0 -55 185A150 150 0 0 1 -355 185C-355 -100 -100 -250 0 -500Z" fill="black"></path></symbol><symbol id="VS6" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-250 100A250 250 0 0 1 250 100L250 210A250 250 0 0 1 -250 210L-250 -210A250 250 0 0 1 0 -460C150 -460 180 -400 200 -375" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VS6" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS6" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SS6" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SS6" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SS6" height="40" width="40" x="-59.668" y="-20"></use><use xlink:href="#SS6" height="40" width="40" x="19.668" y="-20"></use><use xlink:href="#SS6" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SS6" height="40" width="40" x="19.668" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VS6" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS6" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/7C.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="7C" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SC7" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M30 150C35 385 85 400 130 500L-130 500C-85 400 -35 385 -30 150A10 10 0 0 0 -50 150A210 210 0 1 1 -124 -51A10 10 0 0 0 -110 -65A230 230 0 1 1 110 -65A10 10 0 0 0 124 -51A210 210 0 1 1 50 150A10 10 0 0 0 30 150Z" fill="black"></path></symbol><symbol id="VC7" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-265 -320L-265 -460L265 -460C135 -200 -90 100 -90 460" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VC7" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC7" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SC7" height="40" width="40" x="-59.668" y="-107.718"></use><use xlink:href="#SC7" height="40" width="40" x="19.668" y="-107.718"></use><use xlink:href="#SC7" height="40" width="40" x="-59.668" y="-20"></use><use xlink:href="#SC7" height="40" width="40" x="19.668" y="-20"></use><use xlink:href="#SC7" height="40" width="40" x="-20" y="-63.859"></use><use xlink:href="#SC7" height="40" width="40" x="-59.668" y="67.718"></use><use xlink:href="#SC7" height="40" width="40" x="19.668" y="67.718"></use><g transform="rotate(180)"><use xlink:href="#VC7" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC7" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/7D.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="7D" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SD7" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M-400 0C-350 0 0 -450 0 -500C0 -450 350 0 400 0C350 0 0 450 0 500C0 450 -350 0 -400 0Z" fill="#d40000"></path></symbol><symbol id="VD7" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-265 -320L-265 -460L265 -460C135 -200 -90 100 -90 460" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VD7" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD7" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SD7" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SD7" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SD7" height="40" width="40" x="-59.668" y="-20"></use><use xlink:href="#SD7" height="40" width="40" x="19.668" y="-20"></use><use xlink:href="#SD7" height="40" width="40" x="-20" y="-63.834"></use><use xlink:href="#SD7" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SD7" height="40" width="40" x="19.668" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VD7" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD7" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/7H.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="7H" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SH7" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -300C0 -400 100 -500 200 -500C300 -500 400 -400 400 -250C400 0 0 400 0 500C0 400 -400 0 -400 -250C-400 -400 -300 -500 -200 -500C-100 -500 0 -400 -0 -300Z" fill="#d40000"></path></symbol><symbol id="VH7" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-265 -320L-265 -460L265 -460C135 -200 -90 100 -90 460" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VH7" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH7" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SH7" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SH7" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SH7" height="40" width="40" x="-59.668" y="-20"></use><use xlink:href="#SH7" height="40" width="40" x="19.668" y="-20"></use><use xlink:href="#SH7" height="40" width="40" x="-20" y="-63.834"></use><use xlink:href="#SH7" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SH7" height="40" width="40" x="19.668" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VH7" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH7" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/7S.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="7S" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SS7" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -500C100 -250 355 -100 355 185A150 150 0 0 1 55 185A10 10 0 0 0 35 185C35 385 85 400 130 500L-130 500C-85 400 -35 385 -35 185A10 10 0 0 0 -55 185A150 150 0 0 1 -355 185C-355 -100 -100 -250 0 -500Z" fill="black"></path></symbol><symbol id="VS7" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-265 -320L-265 -460L265 -460C135 -200 -90 100 -90 460" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VS7" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS7" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SS7" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SS7" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SS7" height="40" width="40" x="-59.668" y="-20"></use><use xlink:href="#SS7" height="40" width="40" x="19.668" y="-20"></use><use xlink:href="#SS7" height="40" width="40" x="-20" y="-63.834"></use><use xlink:href="#SS7" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SS7" height="40" width="40" x="19.668" y="67.668"></use><g transform="rotate(180)"><use xlink:href="#VS7" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS7" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/8C.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="8C" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SC8" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M30 150C35 385 85 400 130 500L-130 500C-85 400 -35 385 -30 150A10 10 0 0 0 -50 150A210 210 0 1 1 -124 -51A10 10 0 0 0 -110 -65A230 230 0 1 1 110 -65A10 10 0 0 0 124 -51A210 210 0 1 1 50 150A10 10 0 0 0 30 150Z" fill="black"></path></symbol><symbol id="VC8" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-1 -50A205 205 0 1 1 1 -50L-1 -50A255 255 0 1 0 1 -50Z" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VC8" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC8" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SC8" height="40" width="40" x="-59.668" y="-107.718"></use><use xlink:href="#SC8" height="40" width="40" x="19.668" y="-107.718"></use><use xlink:href="#SC8" height="40" width="40" x="-20" y="-63.859"></use><use xlink:href="#SC8" height="40" width="40" x="-59.668" y="-20"></use><use xlink:href="#SC8" height="40" width="40" x="19.668" y="-20"></use><use xlink:href="#SC8" height="40" width="40" x="-59.668" y="67.718"></use><use xlink:href="#SC8" height="40" width="40" x="19.668" y="67.718"></use><use xlink:href="#SC8" height="40" width="40" x="-20" y="23.859"></use><g transform="rotate(180)"><use xlink:href="#VC8" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC8" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/8D.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="8D" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SD8" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M-400 0C-350 0 0 -450 0 -500C0 -450 350 0 400 0C350 0 0 450 0 500C0 450 -350 0 -400 0Z" fill="#d40000"></path></symbol><symbol id="VD8" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-1 -50A205 205 0 1 1 1 -50L-1 -50A255 255 0 1 0 1 -50Z" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VD8" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD8" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SD8" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SD8" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SD8" height="40" width="40" x="-20" y="-63.834"></use><use xlink:href="#SD8" height="40" width="40" x="-59.668" y="-20"></use><use xlink:href="#SD8" height="40" width="40" x="19.668" y="-20"></use><use xlink:href="#SD8" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SD8" height="40" width="40" x="19.668" y="67.668"></use><use xlink:href="#SD8" height="40" width="40" x="-20" y="23.834"></use><g transform="rotate(180)"><use xlink:href="#VD8" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD8" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/8H.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="8H" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SH8" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -300C0 -400 100 -500 200 -500C300 -500 400 -400 400 -250C400 0 0 400 0 500C0 400 -400 0 -400 -250C-400 -400 -300 -500 -200 -500C-100 -500 0 -400 -0 -300Z" fill="#d40000"></path></symbol><symbol id="VH8" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-1 -50A205 205 0 1 1 1 -50L-1 -50A255 255 0 1 0 1 -50Z" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VH8" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH8" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SH8" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SH8" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SH8" height="40" width="40" x="-20" y="-63.834"></use><use xlink:href="#SH8" height="40" width="40" x="-59.668" y="-20"></use><use xlink:href="#SH8" height="40" width="40" x="19.668" y="-20"></use><use xlink:href="#SH8" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SH8" height="40" width="40" x="19.668" y="67.668"></use><use xlink:href="#SH8" height="40" width="40" x="-20" y="23.834"></use><g transform="rotate(180)"><use xlink:href="#VH8" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH8" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/8S.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="8S" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SS8" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -500C100 -250 355 -100 355 185A150 150 0 0 1 55 185A10 10 0 0 0 35 185C35 385 85 400 130 500L-130 500C-85 400 -35 385 -35 185A10 10 0 0 0 -55 185A150 150 0 0 1 -355 185C-355 -100 -100 -250 0 -500Z" fill="black"></path></symbol><symbol id="VS8" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-1 -50A205 205 0 1 1 1 -50L-1 -50A255 255 0 1 0 1 -50Z" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VS8" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS8" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SS8" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SS8" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SS8" height="40" width="40" x="-20" y="-63.834"></use><use xlink:href="#SS8" height="40" width="40" x="-59.668" y="-20"></use><use xlink:href="#SS8" height="40" width="40" x="19.668" y="-20"></use><use xlink:href="#SS8" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SS8" height="40" width="40" x="19.668" y="67.668"></use><use xlink:href="#SS8" height="40" width="40" x="-20" y="23.834"></use><g transform="rotate(180)"><use xlink:href="#VS8" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS8" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/9C.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="9C" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SC9" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M30 150C35 385 85 400 130 500L-130 500C-85 400 -35 385 -30 150A10 10 0 0 0 -50 150A210 210 0 1 1 -124 -51A10 10 0 0 0 -110 -65A230 230 0 1 1 110 -65A10 10 0 0 0 124 -51A210 210 0 1 1 50 150A10 10 0 0 0 30 150Z" fill="black"></path></symbol><symbol id="VC9" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M250 -100A250 250 0 0 1 -250 -100L-250 -210A250 250 0 0 1 250 -210L250 210A250 250 0 0 1 0 460C-150 460 -180 400 -200 375" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VC9" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC9" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SC9" height="40" width="40" x="-59.668" y="-107.718"></use><use xlink:href="#SC9" height="40" width="40" x="19.668" y="-107.718"></use><use xlink:href="#SC9" height="40" width="40" x="-59.668" y="-49.239"></use><use xlink:href="#SC9" height="40" width="40" x="19.668" y="-49.239"></use><use xlink:href="#SC9" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#SC9" height="40" width="40" x="-59.668" y="67.718"></use><use xlink:href="#SC9" height="40" width="40" x="19.668" y="67.718"></use><use xlink:href="#SC9" height="40" width="40" x="-59.668" y="9.239"></use><use xlink:href="#SC9" height="40" width="40" x="19.668" y="9.239"></use><g transform="rotate(180)"><use xlink:href="#VC9" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SC9" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/9D.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="9D" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SD9" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M-400 0C-350 0 0 -450 0 -500C0 -450 350 0 400 0C350 0 0 450 0 500C0 450 -350 0 -400 0Z" fill="#d40000"></path></symbol><symbol id="VD9" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M250 -100A250 250 0 0 1 -250 -100L-250 -210A250 250 0 0 1 250 -210L250 210A250 250 0 0 1 0 460C-150 460 -180 400 -200 375" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VD9" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD9" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SD9" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SD9" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SD9" height="40" width="40" x="-59.668" y="-49.222"></use><use xlink:href="#SD9" height="40" width="40" x="19.668" y="-49.222"></use><use xlink:href="#SD9" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#SD9" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SD9" height="40" width="40" x="19.668" y="67.668"></use><use xlink:href="#SD9" height="40" width="40" x="-59.668" y="9.222"></use><use xlink:href="#SD9" height="40" width="40" x="19.668" y="9.222"></use><g transform="rotate(180)"><use xlink:href="#VD9" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SD9" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/9H.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="9H" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SH9" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -300C0 -400 100 -500 200 -500C300 -500 400 -400 400 -250C400 0 0 400 0 500C0 400 -400 0 -400 -250C-400 -400 -300 -500 -200 -500C-100 -500 0 -400 -0 -300Z" fill="#d40000"></path></symbol><symbol id="VH9" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M250 -100A250 250 0 0 1 -250 -100L-250 -210A250 250 0 0 1 250 -210L250 210A250 250 0 0 1 0 460C-150 460 -180 400 -200 375" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VH9" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH9" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SH9" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SH9" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SH9" height="40" width="40" x="-59.668" y="-49.222"></use><use xlink:href="#SH9" height="40" width="40" x="19.668" y="-49.222"></use><use xlink:href="#SH9" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#SH9" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SH9" height="40" width="40" x="19.668" y="67.668"></use><use xlink:href="#SH9" height="40" width="40" x="-59.668" y="9.222"></use><use xlink:href="#SH9" height="40" width="40" x="19.668" y="9.222"></use><g transform="rotate(180)"><use xlink:href="#VH9" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SH9" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/9S.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="9S" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SS9" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -500C100 -250 355 -100 355 185A150 150 0 0 1 55 185A10 10 0 0 0 35 185C35 385 85 400 130 500L-130 500C-85 400 -35 385 -35 185A10 10 0 0 0 -55 185A150 150 0 0 1 -355 185C-355 -100 -100 -250 0 -500Z" fill="black"></path></symbol><symbol id="VS9" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M250 -100A250 250 0 0 1 -250 -100L-250 -210A250 250 0 0 1 250 -210L250 210A250 250 0 0 1 0 460C-150 460 -180 400 -200 375" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VS9" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS9" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SS9" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SS9" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SS9" height="40" width="40" x="-59.668" y="-49.222"></use><use xlink:href="#SS9" height="40" width="40" x="19.668" y="-49.222"></use><use xlink:href="#SS9" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#SS9" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SS9" height="40" width="40" x="19.668" y="67.668"></use><use xlink:href="#SS9" height="40" width="40" x="-59.668" y="9.222"></use><use xlink:href="#SS9" height="40" width="40" x="19.668" y="9.222"></use><g transform="rotate(180)"><use xlink:href="#VS9" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SS9" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/AC.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="AC" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="VCA" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-270 460L-110 460M-200 450L0 -460L200 450M110 460L270 460M-120 130L120 130" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol><symbol id="SCA" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M30 150C35 385 85 400 130 500L-130 500C-85 400 -35 385 -30 150A10 10 0 0 0 -50 150A210 210 0 1 1 -124 -51A10 10 0 0 0 -110 -65A230 230 0 1 1 110 -65A10 10 0 0 0 124 -51A210 210 0 1 1 50 150A10 10 0 0 0 30 150Z" fill="black"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#SCA" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#VCA" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SCA" height="58.558" width="58.558" x="-116.279" y="-81"></use><g transform="rotate(180)"><use xlink:href="#VCA" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SCA" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/AD.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="AD" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="VDA" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-270 460L-110 460M-200 450L0 -460L200 450M110 460L270 460M-120 130L120 130" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol><symbol id="SDA" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M-400 0C-350 0 0 -450 0 -500C0 -450 350 0 400 0C350 0 0 450 0 500C0 450 -350 0 -400 0Z" fill="#d40000"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#SDA" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#VDA" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SDA" height="58.558" width="58.558" x="-116.279" y="-81"></use><g transform="rotate(180)"><use xlink:href="#VDA" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SDA" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/AH.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="AH" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="VHA" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-270 460L-110 460M-200 450L0 -460L200 450M110 460L270 460M-120 130L120 130" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol><symbol id="SHA" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -300C0 -400 100 -500 200 -500C300 -500 400 -400 400 -250C400 0 0 400 0 500C0 400 -400 0 -400 -250C-400 -400 -300 -500 -200 -500C-100 -500 0 -400 -0 -300Z" fill="#d40000"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#SHA" height="40" width="40" x="-20" y="-20"></use><use xlink:href="#VHA" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SHA" height="58.558" width="58.558" x="-116.279" y="-81"></use><g transform="rotate(180)"><use xlink:href="#VHA" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SHA" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/AS.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="AS" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="VSA" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-270 460L-110 460M-200 450L0 -460L200 450M110 460L270 460M-120 130L120 130" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol><symbol id="SSA" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -500C100 -250 355 -100 355 185A150 150 0 0 1 55 185A10 10 0 0 0 35 185C35 385 85 400 130 500L-130 500C-85 400 -35 385 -35 185A10 10 0 0 0 -55 185A150 150 0 0 1 -355 185C-355 -100 -100 -250 0 -500Z" fill="black"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#SSA" height="104" width="104" x="-52" y="-52"></use><use xlink:href="#VSA" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SSA" height="58.558" width="58.558" x="-116.279" y="-81"></use><g transform="rotate(180)"><use xlink:href="#VSA" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SSA" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/TC.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="TC" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SCT" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M30 150C35 385 85 400 130 500L-130 500C-85 400 -35 385 -30 150A10 10 0 0 0 -50 150A210 210 0 1 1 -124 -51A10 10 0 0 0 -110 -65A230 230 0 1 1 110 -65A10 10 0 0 0 124 -51A210 210 0 1 1 50 150A10 10 0 0 0 30 150Z" fill="black"></path></symbol><symbol id="VCT" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-260 430L-260 -430M-50 0L-50 -310A150 150 0 0 1 250 -310L250 310A150 150 0 0 1 -50 310Z" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VCT" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SCT" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SCT" height="40" width="40" x="-59.668" y="-107.718"></use><use xlink:href="#SCT" height="40" width="40" x="19.668" y="-107.718"></use><use xlink:href="#SCT" height="40" width="40" x="-59.668" y="-49.239"></use><use xlink:href="#SCT" height="40" width="40" x="19.668" y="-49.239"></use><use xlink:href="#SCT" height="40" width="40" x="-20" y="-78.478"></use><use xlink:href="#SCT" height="40" width="40" x="-59.668" y="67.718"></use><use xlink:href="#SCT" height="40" width="40" x="19.668" y="67.718"></use><use xlink:href="#SCT" height="40" width="40" x="-59.668" y="9.239"></use><use xlink:href="#SCT" height="40" width="40" x="19.668" y="9.239"></use><use xlink:href="#SCT" height="40" width="40" x="-20" y="38.478"></use><g transform="rotate(180)"><use xlink:href="#VCT" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SCT" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/TD.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="TD" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SDT" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M-400 0C-350 0 0 -450 0 -500C0 -450 350 0 400 0C350 0 0 450 0 500C0 450 -350 0 -400 0Z" fill="#d40000"></path></symbol><symbol id="VDT" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-260 430L-260 -430M-50 0L-50 -310A150 150 0 0 1 250 -310L250 310A150 150 0 0 1 -50 310Z" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VDT" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SDT" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SDT" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SDT" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SDT" height="40" width="40" x="-59.668" y="-49.222"></use><use xlink:href="#SDT" height="40" width="40" x="19.668" y="-49.222"></use><use xlink:href="#SDT" height="40" width="40" x="-20" y="-78.445"></use><use xlink:href="#SDT" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SDT" height="40" width="40" x="19.668" y="67.668"></use><use xlink:href="#SDT" height="40" width="40" x="-59.668" y="9.222"></use><use xlink:href="#SDT" height="40" width="40" x="19.668" y="9.222"></use><use xlink:href="#SDT" height="40" width="40" x="-20" y="38.445"></use><g transform="rotate(180)"><use xlink:href="#VDT" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SDT" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/TH.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="TH" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SHT" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -300C0 -400 100 -500 200 -500C300 -500 400 -400 400 -250C400 0 0 400 0 500C0 400 -400 0 -400 -250C-400 -400 -300 -500 -200 -500C-100 -500 0 -400 -0 -300Z" fill="#d40000"></path></symbol><symbol id="VHT" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-260 430L-260 -430M-50 0L-50 -310A150 150 0 0 1 250 -310L250 310A150 150 0 0 1 -50 310Z" stroke="#d40000" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VHT" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SHT" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SHT" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SHT" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SHT" height="40" width="40" x="-59.668" y="-49.222"></use><use xlink:href="#SHT" height="40" width="40" x="19.668" y="-49.222"></use><use xlink:href="#SHT" height="40" width="40" x="-20" y="-78.445"></use><use xlink:href="#SHT" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SHT" height="40" width="40" x="19.668" y="67.668"></use><use xlink:href="#SHT" height="40" width="40" x="-59.668" y="9.222"></use><use xlink:href="#SHT" height="40" width="40" x="19.668" y="9.222"></use><use xlink:href="#SHT" height="40" width="40" x="-20" y="38.445"></use><g transform="rotate(180)"><use xlink:href="#VHT" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SHT" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

cards/TS.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="card" face="TS" height="3.5in" preserveAspectRatio="none" viewBox="-120 -168 240 336" width="2.5in"><defs><symbol id="SST" viewBox="-600 -600 1200 1200" preserveAspectRatio="xMinYMid"><path d="M0 -500C100 -250 355 -100 355 185A150 150 0 0 1 55 185A10 10 0 0 0 35 185C35 385 85 400 130 500L-130 500C-85 400 -35 385 -35 185A10 10 0 0 0 -55 185A150 150 0 0 1 -355 185C-355 -100 -100 -250 0 -500Z" fill="black"></path></symbol><symbol id="VST" viewBox="-500 -500 1000 1000" preserveAspectRatio="xMinYMid"><path d="M-260 430L-260 -430M-50 0L-50 -310A150 150 0 0 1 250 -310L250 310A150 150 0 0 1 -50 310Z" stroke="black" stroke-width="80" stroke-linecap="square" stroke-miterlimit="1.5" fill="none"></path></symbol></defs><rect width="239" height="335" x="-119.5" y="-167.5" rx="12" ry="12" fill="#fffefc" stroke="black"></rect><use xlink:href="#VST" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SST" height="58.558" width="58.558" x="-116.279" y="-81"></use><use xlink:href="#SST" height="40" width="40" x="-59.668" y="-107.668"></use><use xlink:href="#SST" height="40" width="40" x="19.668" y="-107.668"></use><use xlink:href="#SST" height="40" width="40" x="-59.668" y="-49.222"></use><use xlink:href="#SST" height="40" width="40" x="19.668" y="-49.222"></use><use xlink:href="#SST" height="40" width="40" x="-20" y="-78.445"></use><use xlink:href="#SST" height="40" width="40" x="-59.668" y="67.668"></use><use xlink:href="#SST" height="40" width="40" x="19.668" y="67.668"></use><use xlink:href="#SST" height="40" width="40" x="-59.668" y="9.222"></use><use xlink:href="#SST" height="40" width="40" x="19.668" y="9.222"></use><use xlink:href="#SST" height="40" width="40" x="-20" y="38.445"></use><g transform="rotate(180)"><use xlink:href="#VST" height="70" width="70" x="-122" y="-156"></use><use xlink:href="#SST" height="58.558" width="58.558" x="-116.279" y="-81"></use></g></svg>

index.html

@@ -7,30 +7,49 @@
 
     <title>Tripeaks Solver</title>
   </head>
-  <body>
+  <body class="pb-5">
     <div class="container">
       <div class="row">
         <div class="col pt-3 pt-lg-5">
-
           <h1>Tripeaks Solver</h1>
 
-          <p>Enter cards representing a Tripeaks game below. Enter each card as 2 characters each, representing the rank (A, 2, 3, 4, 5, 6, 7, 8, 9, T, J, Q, K) and suit (C, D, H, S). For example, "TH" is the Ten of Hearts.</p>
+          <p>
+            Enter cards representing a Tripeaks game below. Enter each card as 2
+            characters representing the rank (A, 2, 3, 4, 5, 6, 7, 8, 9, T, J,
+            Q, K) and suit (C, D, H, S). For example, "TH" is the Ten of Hearts.
+          </p>
 
-          <p>Use a 0 (zero) to represent unknown cards. However, all cards from the last row and the stock must be known (i.e., you must enter valid cards for the last 34 cards)</p>
+          <p>
+            Use a single zero ("0") for unknown cards. However, the last 34
+            cards (bottom row & stock) must be known, and you don't need to
+            enter unknown cards before the first card you know.
+          </p>
 
-          <p>Entry is case-insensitive, and you may use either any delimeter (space, comma, colon, etc.) or no delimeter. Valid examples:</p>
+          <p>
+            Entry is case-insensitive, and you can separate cards with any
+            character (space, comma, etc), or use no separator. Valid examples:
+          </p>
 
           <ul>
-            <li>0 TS 0 7S 5D 7C 2D 0 0 3S 2H 3H 9H KC QC TD 8D 9C 7H 9D JS QS 4H 5C 5S 4C 2C QD 8C KD 3D KS JD 2S 7D KH AH 5H 9S 4S QH 6S 6D 3C JC TC 8H 6C TH AS AD 6H</li>
-            <li>jc,ts,6d,7h,qh,3s,5h,jh,6h,2d,ac,7s,7c,3d,kd,9s,3c,th,6c,ah,8h,tc,4s,8c,ad,3h,ks,6s,js,7d,jd,td,2c,kh</li>
-            <li>7c03s0qsjc00JSasTSadtcqd9s4s2h9h8sjh6c3dks5s5c6h9C2Cac8C6d5DTH8dkckd9d4c5h8hqh6s</li>
+            <li>
+              7S 5D 7C 2D 0 0 3S 2H 3H 9H KC QC TD 8D 9C 7H 9D JS QS 4H 5C 5S 4C
+              2C QD 8C KD 3D KS JD 2S 7D KH AH 5H 9S 4S QH 6S 6D 3C JC TC 8H 6C
+              TH AS AD 6H
+            </li>
+            <li>
+              jc, ts, 6d, 7h, qh, 3s, 5h, jh, 6h, 2d, ac, 7s, 7c, 3d, kd, 9s,
+              3c, th, 6c, ah, 8h, tc, 4s, 8c, ad, 3h, ks, 6s, js, 7d, jd, td,
+              2c, kh
+            </li>
+            <li>
+              7c03s0qsjc00JSasTSadtcqd9s4s2h9h8sjh6c3dks5s5c6h9C2Cac8C6d5DTH8dkckd9d4c5h8hqh6s
+            </li>
           </ul>
 
           <!-- User input of game cards -->
           <form
             id="cardsInputForm"
             x-data="cardsInputForm"
-            x-init="onInit()"
             @submit.prevent="submit"
             class="needs-validation"
             :class="{'was-validated': isFormValid && inputValue.length > 2 }"
@@ -66,42 +85,60 @@
                 ></div>
               </template>
             </div>
-
           </form>
 
           <!-- Friendly display of game cards -->
-          <div
-            id="playingCardsPreview"
-            x-data="playingCardsPreview">
+          <div id="playingCardsPreview" x-data="playingCardsPreview">
+            <div
+              id="gamePyramid"
+              class="game-pyramid-container p-2 p-md-3 p-lg-4"
+            >
+              <!-- first/top row (index 0, row 1) -->
+              <span class="visually-hidden">Game Row 1, Top of Peaks</span>
+              <template x-for="(card, index) in cardsBySlice(0, 3)">
+                <div
+                  x-html="cardSvg(card)"
+                  :class="`game-pyramid-card game-pyramid-card-0-${index}`"
+                ></div>
+              </template>
 
-            <div class="mb-3">
-              <label
-                id="cardsToSolveLabel"
-                for="cardsToSolve"
-                class="form-label"
-                >Cards Identified For Solving</label
-              >
-              <textarea
-                id="cardsToSolve"
-                aria-describedby="cardsToSolveLabel"
-                class="form-control"
-                x-text="$store.global.cardsToSolve.join(' ')"
-                rows="4"
-                disabled
-                readonly
-              ></textarea>
+              <!-- second row (index 1, row 2) -->
+              <span class="visually-hidden">Game Row 2, Second Row</span>
+              <template x-for="(card, index) in cardsBySlice(3, 9)">
+                <div
+                  x-html="cardSvg(card)"
+                  :class="`game-pyramid-card game-pyramid-card-1-${index}`"
+                ></div>
+              </template>
+
+              <!-- third row (index 2, row 3) -->
+              <span class="visually-hidden">Game Row 3, Third Row</span>
+              <template x-for="(card, index) in cardsBySlice(9, 18)">
+                <div
+                  x-html="cardSvg(card)"
+                  :class="`game-pyramid-card game-pyramid-card-2-${index}`"
+                ></div>
+              </template>
+
+              <!-- last/bottom row (index 3, row 4) -->
+              <span class="visually-hidden">Game Row 4, Base of Peaks</span>
+              <template x-for="(card, index) in cardsBySlice(18, 28)">
+                <div
+                  x-html="cardSvg(card)"
+                  :class="`game-pyramid-card game-pyramid-card-3-${index}`"
+                ></div>
+              </template>
+
+              <!-- stock cards -->
+              <span class="visually-hidden">Game Stock, the Draw Cards</span>
+              <template x-for="(card, index) in cardsBySlice(28, 52)">
+                <div
+                  x-html="card === 0 || card === '0' ? cardSvgs['2B'] : cardSvgs[card]"
+                  :class="`game-pyramid-card game-pyramid-card-4-${index}`"
+                ></div>
+              </template>
             </div>
-
-            <div id="playingCardsStock" class="playingCards">
-              <ul class="hand">
-                <template x-for="(card, index) in $store.global.cardsToSolve.slice(52-24)">
-                  <li x-html="cardHtml(card, index)"></li>
-                </template>
-              </ul>
-            </div>
-
           </div>
-
         </div>
       </div>
     </div>

main.js

@@ -1,75 +1,83 @@
 import "./style.scss";
-import "./style-cards.css";
 import Alpine from "alpinejs";
-// import 'bootstrap/dist/js/bootstrap'
+import cardSvgs from "./cardSvgs";
 
-Alpine.store('global', {
-  cardsToSolve: Array(52).fill(0)
-})
+// Some helpful constants
+const suits = {
+  C: "Clubs",
+  D: "Diamonds",
+  H: "Hearts",
+  S: "Spades",
+};
+const ranks = {
+  A: "Ace",
+  2: "Two",
+  3: "Three",
+  4: "Four",
+  5: "Five",
+  6: "Six",
+  7: "Seven",
+  8: "Eight",
+  9: "Nine",
+  T: "Ten",
+  J: "Jack",
+  Q: "Queen",
+  K: "King",
+};
+const deck = Object.keys(suits).flatMap((suit) => {
+  return Object.keys(ranks).map((cval) => {
+    return cval + suit;
+  });
+});
 
+// Do some SVG processing
+const cardSvgTitle = (ckey) => {
+  return deck.includes(ckey)
+    ? `${ranks[ckey[0]]} of ${suits[ckey[1]]}`
+    : "Unknown Card";
+};
+Object.keys(cardSvgs).forEach((ckey) => {
+  var cardDoc = new DOMParser().parseFromString(
+    cardSvgs[ckey],
+    "image/svg+xml"
+  );
+  var svgRoot = cardDoc.documentElement;
+  svgRoot.removeAttribute("height");
+  svgRoot.removeAttribute("width");
+  svgRoot.removeAttribute("class");
+  var titleEl = cardDoc.createElementNS(
+    svgRoot.lookupNamespaceURI(null),
+    "title"
+  );
+  var titleText = document.createTextNode(cardSvgTitle(ckey));
+  titleEl.appendChild(titleText);
+  svgRoot.insertBefore(titleEl, svgRoot.firstElementChild);
+  cardSvgs[ckey] = new XMLSerializer().serializeToString(
+    cardDoc.documentElement
+  );
+});
+
+// Keep some constants in global store for components
+Alpine.store("global", {
+  deck,
+  cardsToSolve: Array(deck.length).fill(0),
+});
+
+// card preview component data
 Alpine.data("playingCardsPreview", () => ({
-  rankText: {
-    'A': 'Ace',
-    '2': 'Two',
-    '3': 'Three',
-    '4': 'Four',
-    '5': 'Five',
-    '6': 'Six',
-    '7': 'Seven',
-    '8': 'Eight',
-    '9': 'Nine',
-    'T': 'Ten',
-    'J': 'Jack',
-    'Q': 'Queen',
-    'K': 'King'
+  cardSvgs,
+  cardsBySlice(start, length) {
+    return this.$store.global.cardsToSolve.slice(start, length);
   },
-  suitText: {
-    'C': 'Clubs',
-    'D': 'Diamonds',
-    'H': 'Hearts',
-    'S': 'Spades'
+  cardSvg(card) {
+    return card === 0 ? this.cardSvgs["2B"] : this.cardSvgs[card];
   },
-  rankSlug(rank) {
-    return `rank-${rank === 'T' ? '10' : rank}`
-  },
-  suitSlug: {
-    'C': 'clubs',
-    'D': 'diams',
-    'H': 'hearts',
-    'S': 'spades'
-  },
-  cardHtml(card, index) {
-    if (card === '0' || card === 0) {
-      return `<abbr title="Unknown" class="card" style="z-index:${this.stockCard(index)};"></abbr>`
-    } else {
-      return `<abbr title="${this.rankText[card[0]]} of ${this.suitText[card[1]]}" class="card ${this.rankSlug(card[0])} ${this.suitSlug[card[1]]}" style="z-index:${this.stockCard(index)};"><abbr class="rank" aria-hidden="true">${card[0]}</abbr><abbr class="suit" aria-hidden="true">&${this.suitSlug[card[1]]};</abbr><abbr class="suit-b" aria-hidden="true">&${this.suitSlug[card[1]]};</abbr><abbr class="rank-b" aria-hidden="true">${card[0]}</abbr></abbr>`
-    }
-  },
-  stockCard(index) {
-    return 500 - (10 * index)
-  }
 }));
 
+// input component data
 Alpine.data("cardsInputForm", () => ({
   // "constants" for validation etc
   nonAlphaNumRegEx: /[\W_]+/g,
-  suits: [],
-  ranks: [],
-  deck: [],
-  minCards: 34,
-  stockCount: 24,
-  peaksCount: 28,
-  onInit() {
-    this.suits = "CDHS".split("");
-    this.ranks = "A23456789TJQK".split("");
-    this.deck = this.suits.flatMap((suit) => {
-      return this.ranks.map((cval) => {
-        return cval + suit;
-      });
-    });
-    console.log(this.deck.join(", "));
-    console.log(`deck size: ${this.deck.length}`);
-  },
 
   // input validation
   inputValue: "",
@@ -78,15 +86,14 @@ Alpine.data("cardsInputForm", () => ({
   invalidCards: [],
   validMessages: [],
   invalidMessages: [],
-  cardsToSolve: [],
   get isFormValid() {
     return this.isValidCardsLengthInRange && this.invalidMessages.length === 0;
   },
   get isValidCardsLengthTooSmall() {
-    return this.validCards.length < this.minCards;
+    return this.validCards.length < 34;
   },
   get isValidCardsLengthTooBig() {
-    return this.validCards.length > this.deck.length;
+    return this.validCards.length > this.$store.global.deck.length;
   },
   get isValidCardsLengthInRange() {
     return !this.isValidCardsLengthTooSmall && !this.isValidCardsLengthTooBig;
@@ -102,15 +109,15 @@ Alpine.data("cardsInputForm", () => ({
     // if no alphanum chars, split by 2 chars except for 0
     let userCards = this.nonAlphaNumRegEx.test(this.inputValue)
       ? this.inputValue
-        .toUpperCase()
-        .replace(this.nonAlphaNumRegEx,' ')
-        .split(' ')
-        .filter((c) => c)
+          .toUpperCase()
+          .replace(this.nonAlphaNumRegEx, " ")
+          .split(" ")
+          .filter((c) => c)
       : this.inputValue
-        .toUpperCase()
-        .split(/0|(..)/g)
-        .filter(c => c !== '')
-        .map(c => !c ? '0' : c);
+          .toUpperCase()
+          .split(/0|(..)/g)
+          .filter((c) => c !== "")
+          .map((c) => (!c ? "0" : c));
 
     // check the input
     userCards.forEach((card) => {
@@ -120,7 +127,7 @@ Alpine.data("cardsInputForm", () => ({
       } else if (this.validCards.includes(card)) {
         // this card was already seen in user's input, now it's a duplicate
         this.dupedCards.push(card);
-      } else if (this.deck.includes(card)) {
+      } else if (this.$store.global.deck.includes(card)) {
         // not a duplicate, and in the reference deck? Valid, add to valid cards
         this.validCards.push(card);
       } else {
@@ -131,10 +138,10 @@ Alpine.data("cardsInputForm", () => ({
 
     // set validation messages based on length
     if (this.isValidCardsLengthTooSmall) {
-      this.invalidMessages.push(`Must enter at least ${this.minCards} cards`);
+      this.invalidMessages.push(`Must enter at least 34 cards`);
     } else if (this.isValidCardsLengthTooBig) {
       this.invalidMessages.push(
-        `Must not enter more than ${this.deck.length} cards`
+        `Must not enter more than ${this.$store.global.deck.length} cards`
       );
     }
     if (this.validCards.slice(this.validCards.length - 34).includes("0")) {
@@ -168,7 +175,9 @@ Alpine.data("cardsInputForm", () => ({
     }
 
     // set the game cards to try solving, based on current input
-    this.$store.global.cardsToSolve = Array(this.deck.length - this.validCards.length)
+    this.$store.global.cardsToSolve = Array(
+      this.$store.global.deck.length - this.validCards.length
+    )
       .fill(0)
       .concat(this.validCards)
       .map((c) => (c === "0" ? 0 : c));

style-cards.css

@@ -1,630 +0,0 @@
-/**
- * Styles for CSS Playing Cards
- *
- * @author   Anika Henke <anika@selfthinker.org>
- * @license  CC BY-SA [http://creativecommons.org/licenses/by-sa/3.0]
- * @version  2011-06-14
- * @link     http://selfthinker.github.com/CSS-Playing-Cards/
- */
-
-/* card itself
-********************************************************************/
-
-.playingCards .card {
-  display: inline-block;
-  width: 3.3em;
-  height: 4.6em;
-  border: 1px solid #666;
-  border-radius: .3em;
-  -moz-border-radius: .3em;
-  -webkit-border-radius: .3em;
-  -khtml-border-radius: .3em;
-  padding: .25em;
-  margin: 0 .5em .5em 0;
-  text-align: center;
-  font-size: 1.2em; /* @change: adjust this value to make bigger or smaller cards */
-  font-weight: normal;
-  font-family: Arial, sans-serif;
-  position: relative;
-  background-color: #fff;
-  -moz-box-shadow: .2em .2em .5em #333;
-  -webkit-box-shadow: .2em .2em .5em #333;
-  box-shadow: .2em .2em .5em #333;
-}
-
-.playingCards a.card {
-  text-decoration: none;
-}
-/* selected and hover state */
-.playingCards a.card:hover, .playingCards a.card:active, .playingCards a.card:focus,
-.playingCards label.card:hover,
-.playingCards strong .card {
-  bottom: 1em;
-}
-.playingCards label.card {
-  cursor: pointer;
-}
-
-.playingCards .card.back {
-  text-indent: -4000px;
-  background-color: #ccc;
-  background-repeat: repeat;
-  background-image: url(data:image/gif;base64,R0lGODlhJAAkAJEAAOjFsezdztOKbL5QKCH5BAAAAAAALAAAAAAkACQAAAL/HC4RAqm/mmLHyHmAbczB11Ea8ombJKSgKo6Z17pXFznmS1JptiX0z3vVhpEKDoUIkoa0olGIUeZUk1RI6Yn2mh/FDAt6frOrRRTqXPpsVLYugzxaVy+YcBdnoWPZOT0E4eckQtZFZBjWoHixQFWl6Nhol6R2p1Okt5TGaEWZA6fjiMdhZgPHeWrTWGVq+jTZg1HYyAEWKLYzmyiGKoUimilz+YYryyTlg5RcDJSAbNx0Q7lMcbIGEyzTK8zVdfVaImzs/QV+prYqWWW2ObkoOApM/Em/rUlIm7fijs8a2EEKEaZ3AsMUgneEU6RcpJbZ27aGHkAO2Ors8xQH1IR0Bn5YnOtVAAA7); /* image is "Pattern 069" from http://www.squidfingers.com/patterns/ */
-  background-image: -moz-repeating-linear-gradient(34% 6% 135deg,#0F1E59, #75A1BF, #3E3E63 50%);
-  background-image: -webkit-gradient(radial, center center, 20, center center, 80, from(#3c3), color-stop(0.4, #363), to(#030));
-  /* yes, it's intentional that Mozilla, Webkit, Opera and IE all will get different backgrounds ... why not? :) */
-}
-
-/* suit colours
-********************************************************************/
-
-.playingCards .card.diams {
-  color: #f00 !important;
-}
-.playingCards.fourColours .card.diams {
-  color: #00f !important;
-}
-[lang=de] .playingCards.fourColours .card.diams {
-  color: #f60 !important;
-}
-.playingCards .card.hearts {
-  color: #f00 !important;
-}
-.playingCards .card.spades {
-  color: #000 !important;
-}
-[lang=de] .playingCards.fourColours .card.spades {
-  color: #090 !important;
-}
-.playingCards .card.clubs {
-  color: #000 !important;
-}
-.playingCards.fourColours .card.clubs {
-  color: #090 !important;
-}
-[lang=de] .playingCards.fourColours .card.clubs {
-  color: #000 !important;
-}
-.playingCards .card.joker {
-  color: #000 !important;
-}
-.playingCards .card.joker.big {
-  color: #f00 !important;
-}
-
-/* inner bits
-********************************************************************/
-
-/* top left main info (rank and suit) */
-
-.playingCards .card .rank,
-.playingCards .card .suit {
-  display: block;
-  line-height: 1;
-  text-align: left;
-}
-.playingCards .card .rank {
-}
-.playingCards .card .suit {
-  line-height: .7;
-}
-
-/* checkbox */
-.playingCards .card input {
-  margin-top: -.05em;
-  font: inherit;
-}
-.playingCards.simpleCards .card input,
-.playingCards .card.rank-j input,
-.playingCards .card.rank-q input,
-.playingCards .card.rank-k input,
-.playingCards .card.rank-a input {
-  margin-top: 2.4em;
-}
-.playingCards.inText .card input {
-  margin-top: 0;
-}
-
-/* different rank letters for different languages */
-.playingCards .card .rank:after,
-.playingCards .card.joker .rank:before {
-  position: absolute;
-  top: .25em;
-  left: .25em;
-  background: #fff;
-}
-[lang=de] .playingCards .card.rank-j .rank:after {
-  content: "B";
-}
-[lang=fr] .playingCards .card.rank-j .rank:after {
-  content: "V";
-}
-[lang=de] .playingCards .card.rank-q .rank:after,
-[lang=fr] .playingCards .card.rank-q .rank:after {
-  content: "D";
-}
-[lang=fr] .playingCards .card.rank-k .rank:after {
-  content: "R";
-}
-
-/* joker (top left symbol) */
-.playingCards .card.joker .rank {
-  position: absolute;
-}
-.playingCards .card.joker .rank:before {
-  content: "\2605";
-  top: 0;
-  left: 0;
-}
-.playingCards .card.joker .suit {
-  text-indent: -9999px;
-}
-
-/* inner multiple suits */
-.playingCards .card .suit:after {
-  display: block;
-  margin-top: -.8em;
-  text-align: center;
-  white-space: pre;
-  line-height: .9;
-  font-size: 1.3em;
-  word-spacing: -.05em;
-}
-
-/* make the hearts and clubs symbols fit, because they are a bit bigger than the others */
-.playingCards .card.hearts .suit:after {
-  word-spacing: -.15em;
-}
-.playingCards .card.hearts.rank-10 .suit:after {
-  word-spacing: -.05em;
-  letter-spacing: -.1em;
-}
-.playingCards .card.clubs.rank-10 .suit:after {
-  word-spacing: -.15em;
-}
-
-/* 8, 9, 10 are the most crowded */
-.playingCards .card.rank-8 .suit:after,
-.playingCards .card.rank-9 .suit:after {
-  letter-spacing: -.075em;
-}
-.playingCards .card.rank-10 .suit:after {
-  letter-spacing: -.1em;
-}
-.playingCards .card.clubs .suit:after {
-  letter-spacing: -.125em;
-}
-
-/*____________ symbols in the middle (suits, full) ____________*/
-
-/* diamonds */
-.playingCards .card.rank-2.diams .suit:after {
-  content: "\2666 \A\A\2666";
-}
-.playingCards .card.rank-3.diams .suit:after {
-  content: "\2666 \A\2666 \A\2666";
-}
-.playingCards .card.rank-4.diams .suit:after {
-  content: "\2666\00A0\00A0\00A0\2666 \A\A\2666\00A0\00A0\00A0\2666";
-}
-.playingCards .card.rank-5.diams .suit:after {
-  content: "\2666\00A0\00A0\00A0\2666 \A\2666 \A\2666\00A0\00A0\00A0\2666";
-}
-.playingCards .card.rank-6.diams .suit:after {
-  content: "\2666\00A0\00A0\00A0\2666 \A\2666\00A0\00A0\00A0\2666 \A\2666\00A0\00A0\00A0\2666";
-}
-.playingCards .card.rank-7.diams .suit:after {
-  content: "\2666\00A0\00A0\2666 \A\2666\00A0\2666\00A0\2666 \A\2666\00A0\00A0\2666";
-}
-.playingCards .card.rank-8.diams .suit:after {
-  content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\00A0\2666 \A\2666\00A0\2666\00A0\2666";
-}
-.playingCards .card.rank-9.diams .suit:after {
-  content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666";
-}
-.playingCards .card.rank-10.diams .suit:after {
-  content: "\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666\00A0\2666 \A\2666\00A0\2666\00A0\2666";
-}
-
-/* hearts */
-.playingCards .card.rank-2.hearts .suit:after {
-  content: "\2665 \A\A\2665";
-}
-.playingCards .card.rank-3.hearts .suit:after {
-  content: "\2665 \A\2665 \A\2665";
-}
-.playingCards .card.rank-4.hearts .suit:after {
-  content: "\2665\00A0\00A0\00A0\2665 \A\A\2665\00A0\00A0\00A0\2665";
-}
-.playingCards .card.rank-5.hearts .suit:after {
-  content: "\2665\00A0\00A0\00A0\2665 \A\2665 \A\2665\00A0\00A0\00A0\2665";
-}
-.playingCards .card.rank-6.hearts .suit:after {
-  content: "\2665\00A0\00A0\00A0\2665 \A\2665\00A0\00A0\00A0\2665 \A\2665\00A0\00A0\00A0\2665";
-}
-.playingCards .card.rank-7.hearts .suit:after {
-  content: "\2665\00A0\00A0\2665 \A\2665\00A0\2665\00A0\2665 \A\2665\00A0\00A0\2665";
-}
-.playingCards .card.rank-8.hearts .suit:after {
-  content: "\2665\00A0\2665\00A0\2665 \A\2665\00A0\00A0\2665 \A\2665\00A0\2665\00A0\2665";
-}
-.playingCards .card.rank-9.hearts .suit:after {
-  content: "\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665";
-}
-.playingCards .card.rank-10.hearts .suit:after {
-  content: "\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665\00A0\2665 \A\2665\00A0\2665\00A0\2665";
-}
-
-/* spades */
-.playingCards .card.rank-2.spades .suit:after {
-  content: "\2660 \A\A\2660";
-}
-.playingCards .card.rank-3.spades .suit:after {
-  content: "\2660 \A\2660 \A\2660";
-}
-.playingCards .card.rank-4.spades .suit:after {
-  content: "\2660\00A0\00A0\00A0\2660 \A\A\2660\00A0\00A0\00A0\2660";
-}
-.playingCards .card.rank-5.spades .suit:after {
-  content: "\2660\00A0\00A0\00A0\2660 \A\2660 \A\2660\00A0\00A0\00A0\2660";
-}
-.playingCards .card.rank-6.spades .suit:after {
-  content: "\2660\00A0\00A0\00A0\2660 \A\2660\00A0\00A0\00A0\2660 \A\2660\00A0\00A0\00A0\2660";
-}
-.playingCards .card.rank-7.spades .suit:after {
-  content: "\2660\00A0\00A0\2660 \A\2660\00A0\2660\00A0\2660 \A\2660\00A0\00A0\2660";
-}
-.playingCards .card.rank-8.spades .suit:after {
-  content: "\2660\00A0\2660\00A0\2660 \A\2660\00A0\00A0\2660 \A\2660\00A0\2660\00A0\2660";
-}
-.playingCards .card.rank-9.spades .suit:after {
-  content: "\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660";
-}
-.playingCards .card.rank-10.spades .suit:after {
-  content: "\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660\00A0\2660 \A\2660\00A0\2660\00A0\2660";
-}
-
-/* clubs */
-.playingCards .card.rank-2.clubs .suit:after {
-  content: "\2663 \A\A\2663";
-}
-.playingCards .card.rank-3.clubs .suit:after {
-  content: "\2663 \A\2663 \A\2663";
-}
-.playingCards .card.rank-4.clubs .suit:after {
-  content: "\2663\00A0\00A0\00A0\2663 \A\A\2663\00A0\00A0\00A0\2663";
-}
-.playingCards .card.rank-5.clubs .suit:after {
-  content: "\2663\00A0\00A0\00A0\2663 \A\2663 \A\2663\00A0\00A0\00A0\2663";
-}
-.playingCards .card.rank-6.clubs .suit:after {
-  content: "\2663\00A0\00A0\00A0\2663 \A\2663\00A0\00A0\00A0\2663 \A\2663\00A0\00A0\00A0\2663";
-}
-.playingCards .card.rank-7.clubs .suit:after {
-  content: "\2663\00A0\00A0\2663 \A\2663\00A0\2663\00A0\2663 \A\2663\00A0\00A0\2663";
-}
-.playingCards .card.rank-8.clubs .suit:after {
-  content: "\2663\00A0\2663\00A0\2663 \A\2663\00A0\00A0\2663 \A\2663\00A0\2663\00A0\2663";
-}
-.playingCards .card.rank-9.clubs .suit:after {
-  content: "\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663";
-}
-.playingCards .card.rank-10.clubs .suit:after {
-  content: "\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663\00A0\2663 \A\2663\00A0\2663\00A0\2663";
-}
-
-/*____________ symbols in the middle (faces as images) ____________*/
-
-.playingCards.faceImages .card.rank-j .suit:after,
-.playingCards.faceImages .card.rank-q .suit:after,
-.playingCards.faceImages .card.rank-k .suit:after {
-  content: '';
-}
-.playingCards.faceImages .card.rank-j,
-.playingCards.faceImages .card.rank-q,
-.playingCards.faceImages .card.rank-k,
-.playingCards.faceImages .card.joker {
-  background-repeat: no-repeat;
-  background-position: -1em 0;
-  /* @change: smaller cards: more negative distance from the left
-     bigger cards: 0 or more positive distance from the left */
-
-  /* for a centered full background image:
-  background-position: .35em 0;
-  -moz-background-size: contain;
-  -o-background-size: contain;
-  -webkit-background-size: contain;
-  -khtml-background-size: contain;
-  background-size: contain;
-  */
-}
-
-.playingCards.faceImages .card.rank-j.diams  { background-image: url(faces/JD.gif); }
-.playingCards.faceImages .card.rank-j.hearts { background-image: url(faces/JH.gif); }
-.playingCards.faceImages .card.rank-j.spades { background-image: url(faces/JS.gif); }
-.playingCards.faceImages .card.rank-j.clubs  { background-image: url(faces/JC.gif); }
-
-.playingCards.faceImages .card.rank-q.diams  { background-image: url(faces/QD.gif); }
-.playingCards.faceImages .card.rank-q.hearts { background-image: url(faces/QH.gif); }
-.playingCards.faceImages .card.rank-q.spades { background-image: url(faces/QS.gif); }
-.playingCards.faceImages .card.rank-q.clubs  { background-image: url(faces/QC.gif); }
-
-.playingCards.faceImages .card.rank-k.diams  { background-image: url(faces/KD.gif); }
-.playingCards.faceImages .card.rank-k.hearts { background-image: url(faces/KH.gif); }
-.playingCards.faceImages .card.rank-k.spades { background-image: url(faces/KS.gif); }
-.playingCards.faceImages .card.rank-k.clubs  { background-image: url(faces/KC.gif); }
-
-.playingCards.faceImages .card.joker         { background-image: url(faces/joker.gif); }
-.playingCards.simpleCards .card.rank-j,
-.playingCards.simpleCards .card.rank-q,
-.playingCards.simpleCards .card.rank-k       { background-image: none !important; }
-
-/*____________ symbols in the middle (faces as dingbat symbols) ____________*/
-
-.playingCards.simpleCards .card .suit:after,
-.playingCards .card.rank-j .suit:after,
-.playingCards .card.rank-q .suit:after,
-.playingCards .card.rank-k .suit:after,
-.playingCards .card.rank-a .suit:after,
-.playingCards .card.joker .rank:after {
-  font-family: Georgia, serif;
-  position: absolute;
-  font-size: 3em;
-  right: .1em;
-  bottom: .25em;
-  word-spacing: normal;
-  letter-spacing: normal;
-  line-height: 1;
-}
-.playingCards .card.rank-j .suit:after {
-  content: "\265F";
-  right: .15em;
-}
-.playingCards .card.rank-q .suit:after {
-  content: "\265B";
-}
-.playingCards .card.rank-k .suit:after {
-  content: "\265A";
-}
-/* joker (inner symbol) */
-.playingCards.faceImages .card.joker .rank:after {
-  content: "";
-}
-.playingCards .card.joker .rank:after {
-  position: absolute;
-  content: "\2766";
-  top: .4em;
-  left: .1em;
-}
-
-/* big suits in middle */
-.playingCards.simpleCards .card .suit:after,
-.playingCards .card.rank-a .suit:after {
-  font-family: Arial, sans-serif;
-  line-height: .9;
-  bottom: .35em;
-}
-.playingCards.simpleCards .card.diams .suit:after,
-.playingCards .card.rank-a.diams .suit:after {
-  content: "\2666";
-  right: .4em;
-}
-.playingCards.simpleCards .card.hearts .suit:after,
-.playingCards .card.rank-a.hearts .suit:after {
-  content: "\2665";
-  right: .35em;
-}
-.playingCards.simpleCards .card.spades .suit:after,
-.playingCards .card.rank-a.spades .suit:after {
-  content: "\2660";
-  right: .35em;
-}
-.playingCards.simpleCards .card.clubs .suit:after,
-.playingCards .card.rank-a.clubs .suit:after {
-  content: "\2663";
-  right: .3em;
-}
-
-/*____________ smaller cards for use inside text ____________*/
-
-.playingCards.inText .card {
-  font-size: .4em;
-  vertical-align: middle;
-}
-.playingCards.inText .card span.rank,
-.playingCards.inText .card span.suit {
-  text-align: center;
-}
-.playingCards.inText .card span.rank {
-  font-size: 2em;
-  margin-top: .2em;
-}
-.playingCards.inText .card span.suit {
-  font-size: 2.5em;
-}
-.playingCards.inText .card .suit:after,
-.playingCards.inText .card.joker .rank:after {
-  content: "" !important;
-}
-.playingCards.inText .card .rank:after {
-  left: .5em;
-  padding: 0 .1em;
-}
-
-
-/* hand (in your hand or on table or as a deck)
-********************************************************************/
-
-.playingCards ul.table,
-.playingCards ul.hand,
-.playingCards ul.deck {
-  list-style-type: none;
-  padding: 0;
-  margin: 0 0 1.5em 0;
-  position: relative;
-  clear: both;
-}
-.playingCards ul.hand {
-  margin-bottom: 3.5em;
-}
-.playingCards ul.table li,
-.playingCards ul.hand li,
-.playingCards ul.deck li {
-  margin: 0;
-  padding: 0;
-  list-style-type: none;
-  float: left;
-}
-
-.playingCards ul.hand,
-.playingCards ul.deck {
-  height: 8em;
-}
-.playingCards ul.hand li,
-.playingCards ul.deck li {
-  position: absolute;
-}
-.playingCards ul.hand li {
-  bottom: 0;
-}
-.playingCards ul.hand li:nth-child(1)  { left: 0; }
-.playingCards ul.hand li:nth-child(2)  { left: 1.1em; }
-.playingCards ul.hand li:nth-child(3)  { left: 2.2em; }
-.playingCards ul.hand li:nth-child(4)  { left: 3.3em; }
-.playingCards ul.hand li:nth-child(5)  { left: 4.4em; }
-.playingCards ul.hand li:nth-child(6)  { left: 5.5em; }
-.playingCards ul.hand li:nth-child(7)  { left: 6.6em; }
-.playingCards ul.hand li:nth-child(8)  { left: 7.7em; }
-.playingCards ul.hand li:nth-child(9)  { left: 8.8em; }
-.playingCards ul.hand li:nth-child(10) { left: 9.9em; }
-.playingCards ul.hand li:nth-child(11) { left: 11em; }
-.playingCards ul.hand li:nth-child(12) { left: 12.1em; }
-.playingCards ul.hand li:nth-child(13) { left: 13.2em; }
-
-.playingCards ul.hand li:nth-child(14) { left: 14.3em; }
-.playingCards ul.hand li:nth-child(15) { left: 15.4em; }
-.playingCards ul.hand li:nth-child(16) { left: 16.5em; }
-.playingCards ul.hand li:nth-child(17) { left: 17.6em; }
-.playingCards ul.hand li:nth-child(18) { left: 18.7em; }
-.playingCards ul.hand li:nth-child(19) { left: 19.8em; }
-.playingCards ul.hand li:nth-child(20) { left: 20.9em; }
-.playingCards ul.hand li:nth-child(21) { left: 22em; }
-.playingCards ul.hand li:nth-child(22) { left: 23.1em; }
-.playingCards ul.hand li:nth-child(23) { left: 24.2em; }
-.playingCards ul.hand li:nth-child(24) { left: 25.3em; }
-.playingCards ul.hand li:nth-child(25) { left: 26.4em; }
-.playingCards ul.hand li:nth-child(26) { left: 27.5em; }
-
-/* rotate cards if rotateHand option is on */
-.playingCards.rotateHand ul.hand li:nth-child(1) {
-  -moz-transform: translate(1.9em, .9em) rotate(-42deg);
-  -webkit-transform: translate(1.9em, .9em) rotate(-42deg);
-  -o-transform: translate(1.9em, .9em) rotate(-42deg);
-  transform: translate(1.9em, .9em) rotate(-42deg);
-}
-.playingCards.rotateHand ul.hand li:nth-child(2) {
-  -moz-transform: translate(1.5em, .5em) rotate(-33deg);
-  -webkit-transform: translate(1.5em, .5em) rotate(-33deg);
-  -o-transform: translate(1.5em, .5em) rotate(-33deg);
-  transform: translate(1.5em, .5em) rotate(-33deg);
-}
-.playingCards.rotateHand ul.hand li:nth-child(3) {
-  -moz-transform: translate(1.1em, .3em) rotate(-24deg);
-  -webkit-transform: translate(1.1em, .3em) rotate(-24deg);
-  -o-transform: translate(1.1em, .3em) rotate(-24deg);
-  transform: translate(1.1em, .3em) rotate(-24deg);
-}
-.playingCards.rotateHand ul.hand li:nth-child(4) {
-  -moz-transform: translate(.7em, .2em) rotate(-15deg);
-  -webkit-transform: translate(.7em, .2em) rotate(-15deg);
-  -o-transform: translate(.7em, .2em) rotate(-15deg);
-  transform: translate(.7em, .2em) rotate(-15deg);
-}
-.playingCards.rotateHand ul.hand li:nth-child(5) {
-  -moz-transform: translate(.3em, .1em) rotate(-6deg);
-  -webkit-transform: translate(.3em, .1em) rotate(-6deg);
-  -o-transform: translate(.3em, .1em) rotate(-6deg);
-  transform: translate(.3em, .1em) rotate(-6deg);
-}
-.playingCards.rotateHand ul.hand li:nth-child(6) {
-  -moz-transform: translate(-.1em, .1em) rotate(3deg);
-  -webkit-transform: translate(-.1em, .1em) rotate(3deg);
-  -o-transform: translate(-.1em, .1em) rotate(3deg);
-  transform: translate(-.1em, .1em) rotate(3deg);
-}
-.playingCards.rotateHand ul.hand li:nth-child(7) {
-  -moz-transform: translate(-.5em, .2em) rotate(12deg);
-  -webkit-transform: translate(-.5em, .2em) rotate(12deg);
-  -o-transform: translate(-.5em, .2em) rotate(12deg);
-  transform: translate(-.5em, .2em) rotate(12deg);
-}
-.playingCards.rotateHand ul.hand li:nth-child(8) {
-  -moz-transform: translate(-.9em, .3em) rotate(21deg);
-  -webkit-transform: translate(-.9em, .3em) rotate(21deg);
-  -o-transform: translate(-.9em, .3em) rotate(21deg);
-  transform: translate(-.9em, .3em) rotate(21deg);
-}
-.playingCards.rotateHand ul.hand li:nth-child(9) {
-  -moz-transform: translate(-1.3em, .6em) rotate(30deg);
-  -webkit-transform: translate(-1.3em, .6em) rotate(30deg);
-  -o-transform: translate(-1.3em, .6em) rotate(30deg);
-  transform: translate(-1.3em, .6em) rotate(30deg);
-}
-.playingCards.rotateHand ul.hand li:nth-child(10) {
-  -moz-transform: translate(-1.7em, 1em) rotate(39deg);
-  -webkit-transform: translate(-1.7em, 1em) rotate(39deg);
-  -o-transform: translate(-1.7em, 1em) rotate(39deg);
-  transform: translate(-1.7em, 1em) rotate(39deg);
-}
-.playingCards.rotateHand ul.hand li:nth-child(11) {
-  -moz-transform: translate(-2.2em, 1.5em) rotate(48deg);
-  -webkit-transform: translate(-2.2em, 1.5em) rotate(48deg);
-  -o-transform: translate(-2.2em, 1.5em) rotate(48deg);
-  transform: translate(-2.2em, 1.5em) rotate(48deg);
-}
-.playingCards.rotateHand ul.hand li:nth-child(12) {
-  -moz-transform: translate(-2.8em, 2.1em) rotate(57deg);
-  -webkit-transform: translate(-2.8em, 2.1em) rotate(57deg);
-  -o-transform: translate(-2.8em, 2.1em) rotate(57deg);
-  transform: translate(-2.8em, 2.1em) rotate(57deg);
-}
-.playingCards.rotateHand ul.hand li:nth-child(13) {
-  -moz-transform: translate(-3.5em, 2.8em) rotate(66deg);
-  -webkit-transform: translate(-3.5em, 2.8em) rotate(66deg);
-  -o-transform: translate(-3.5em, 2.8em) rotate(66deg);
-  transform: translate(-3.5em, 2.8em) rotate(66deg);
-}
-
-/* deck */
-.playingCards ul.deck li:nth-child(1)  { left: 0;    bottom: 0; }
-.playingCards ul.deck li:nth-child(2)  { left: 2px;  bottom: 1px; }
-.playingCards ul.deck li:nth-child(3)  { left: 4px;  bottom: 2px; }
-.playingCards ul.deck li:nth-child(4)  { left: 6px;  bottom: 3px; }
-.playingCards ul.deck li:nth-child(5)  { left: 8px;  bottom: 4px; }
-.playingCards ul.deck li:nth-child(6)  { left: 10px; bottom: 5px; }
-.playingCards ul.deck li:nth-child(7)  { left: 12px; bottom: 6px; }
-.playingCards ul.deck li:nth-child(8)  { left: 14px; bottom: 7px; }
-.playingCards ul.deck li:nth-child(9)  { left: 16px; bottom: 8px; }
-.playingCards ul.deck li:nth-child(10) { left: 18px; bottom: 9px; }
-.playingCards ul.deck li:nth-child(11) { left: 20px; bottom: 10px; }
-.playingCards ul.deck li:nth-child(12) { left: 22px; bottom: 11px; }
-.playingCards ul.deck li:nth-child(13) { left: 24px; bottom: 12px; }
-.playingCards ul.deck li:nth-child(14) { left: 26px; bottom: 13px; }
-.playingCards ul.deck li:nth-child(15) { left: 28px; bottom: 14px; }
-.playingCards ul.deck li:nth-child(16) { left: 30px; bottom: 15px; }
-.playingCards ul.deck li:nth-child(17) { left: 32px; bottom: 16px; }
-.playingCards ul.deck li:nth-child(18) { left: 34px; bottom: 17px; }
-.playingCards ul.deck li:nth-child(19) { left: 36px; bottom: 18px; }
-.playingCards ul.deck li:nth-child(20) { left: 38px; bottom: 19px; }
-.playingCards ul.deck li:nth-child(21) { left: 40px; bottom: 20px; }
-.playingCards ul.deck li:nth-child(22) { left: 42px; bottom: 21px; }
-.playingCards ul.deck li:nth-child(23) { left: 44px; bottom: 22px; }
-.playingCards ul.deck li:nth-child(24) { left: 46px; bottom: 23px; }
-.playingCards ul.deck li:nth-child(25) { left: 48px; bottom: 24px; }
-.playingCards ul.deck li:nth-child(26) { left: 50px; bottom: 25px; }
-.playingCards ul.deck li:nth-child(27) { left: 52px; bottom: 26px; }
-.playingCards ul.deck li:nth-child(28) { left: 54px; bottom: 27px; }
-.playingCards ul.deck li:nth-child(29) { left: 56px; bottom: 28px; }
-.playingCards ul.deck li:nth-child(30) { left: 58px; bottom: 29px; }
-.playingCards ul.deck li:nth-child(31) { left: 60px; bottom: 30px; }
-.playingCards ul.deck li:nth-child(32) { left: 62px; bottom: 31px; }

style.scss

@@ -1,31 +1,66 @@
+@use "sass:math";
 @import "../node_modules/bootstrap/scss/bootstrap";
 
-abbr[title] {
-  border-bottom: none !important;
-  cursor: inherit !important;
-  text-decoration: none !important;
-}
+#gamePyramid {
+  display: grid;
+  grid-template-columns: repeat(60, 1fr);
+  place-items: start;
+  grid-gap: 4px;
+  background-color: #242;
+  background-image: linear-gradient(to bottom right, #242, #484);
+  border-radius: 5px;
 
-.playingCards {
-  .card {
-    box-shadow: .05em .05em .1em #888 !important;
-    border-color: #aaa !important;
-    border-radius: 0.2em !important;
-    .suit {
-      &::after {
-        margin-top: -.9em !important;
-        font-size: 0.9em !important;
+  .game-pyramid-card {
+    width: 100%;
+    &::before {
+      // content: "";
+      display: inline-block;
+      width: 1px;
+      height: 0;
+    }
+    // first/top row (index 0, row 1)
+    @for $i from 0 to 3 {
+      &.game-pyramid-card-0-#{$i} {
+        grid-row: 1;
+        grid-column: #{($i + 1) * 10 + $i * 8} / #{($i + 1) * 10 + $i * 8+6};
       }
     }
-    .suit-b {
-      position: absolute;
-      right: 4px;
-      bottom: 18px;
+    // second row (index 1, row 2)
+    @for $i from 0 to 6 {
+      &.game-pyramid-card-1-#{$i} {
+        grid-row: 2;
+        grid-column: #{(($i + 1) * 7)-
+          ($i % 2)+
+          (math.floor(math.div($i, 2)) * 4)} /
+          #{(($i + 2) * 7)-
+          ($i % 2)+
+          (math.floor(math.div($i, 2)) * 4)-1};
+        margin-top: -75%;
+      }
     }
-    .rank-b {
-      position: absolute;
-      right: 4px;
-      bottom: -1px;
+    // third row (index 2, row 3)
+    @for $i from 0 to 9 {
+      &.game-pyramid-card-2-#{$i} {
+        grid-row: 3;
+        grid-column: #{4+ (6 * $i)} / #{10+ (6 * $i)};
+        margin-top: -75%;
+      }
+    }
+    // last/bottom row (index 3, row 4)
+    @for $i from 0 to 10 {
+      &.game-pyramid-card-3-#{$i} {
+        grid-row: 4;
+        grid-column: #{1+ (6 * $i)} / #{7+ (6 * $i)};
+        margin-top: -75%;
+      }
+    }
+    // stock cards
+    @for $i from 0 to 24 {
+      &.game-pyramid-card-4-#{$i} {
+        grid-column: #{5+ (2 * $i)} / #{11+ (2 * $i)};
+        grid-row: 5;
+        margin-top: 25%;
+      }
     }
   }
 }