From 242243b246399430b3841ca35b55b21792a8a75c Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Mon, 12 Sep 2022 20:51:12 -0400 Subject: [PATCH] improved html input with a resizable, dynamic game cards preview --- cardSvgs.js | 128 ++++++++++ cards/1B.svg | 2 + cards/1J.svg | 2 + cards/2B.svg | 2 + cards/2C.svg | 2 + cards/2D.svg | 2 + cards/2H.svg | 2 + cards/2J.svg | 2 + cards/2S.svg | 2 + cards/3C.svg | 2 + cards/3D.svg | 2 + cards/3H.svg | 2 + cards/3S.svg | 2 + cards/4C.svg | 2 + cards/4D.svg | 2 + cards/4H.svg | 2 + cards/4S.svg | 2 + cards/5C.svg | 2 + cards/5D.svg | 2 + cards/5H.svg | 2 + cards/5S.svg | 2 + cards/6C.svg | 2 + cards/6D.svg | 2 + cards/6H.svg | 2 + cards/6S.svg | 2 + cards/7C.svg | 2 + cards/7D.svg | 2 + cards/7H.svg | 2 + cards/7S.svg | 2 + cards/8C.svg | 2 + cards/8D.svg | 2 + cards/8H.svg | 2 + cards/8S.svg | 2 + cards/9C.svg | 2 + cards/9D.svg | 2 + cards/9H.svg | 2 + cards/9S.svg | 2 + cards/AC.svg | 2 + cards/AD.svg | 2 + cards/AH.svg | 2 + cards/AS.svg | 2 + cards/JC.svg | 2 + cards/JD.svg | 2 + cards/JH.svg | 2 + cards/JS.svg | 2 + cards/KC.svg | 2 + cards/KD.svg | 2 + cards/KH.svg | 2 + cards/KS.svg | 2 + cards/QC.svg | 2 + cards/QD.svg | 2 + cards/QH.svg | 2 + cards/QS.svg | 2 + cards/TC.svg | 2 + cards/TD.svg | 2 + cards/TH.svg | 2 + cards/TS.svg | 2 + index.html | 115 ++++++--- main.js | 159 ++++++------ style-cards.css | 630 ------------------------------------------------ style.scss | 79 ++++-- 61 files changed, 457 insertions(+), 766 deletions(-) create mode 100644 cardSvgs.js create mode 100644 cards/1B.svg create mode 100644 cards/1J.svg create mode 100644 cards/2B.svg create mode 100644 cards/2C.svg create mode 100644 cards/2D.svg create mode 100644 cards/2H.svg create mode 100644 cards/2J.svg create mode 100644 cards/2S.svg create mode 100644 cards/3C.svg create mode 100644 cards/3D.svg create mode 100644 cards/3H.svg create mode 100644 cards/3S.svg create mode 100644 cards/4C.svg create mode 100644 cards/4D.svg create mode 100644 cards/4H.svg create mode 100644 cards/4S.svg create mode 100644 cards/5C.svg create mode 100644 cards/5D.svg create mode 100644 cards/5H.svg create mode 100644 cards/5S.svg create mode 100644 cards/6C.svg create mode 100644 cards/6D.svg create mode 100644 cards/6H.svg create mode 100644 cards/6S.svg create mode 100644 cards/7C.svg create mode 100644 cards/7D.svg create mode 100644 cards/7H.svg create mode 100644 cards/7S.svg create mode 100644 cards/8C.svg create mode 100644 cards/8D.svg create mode 100644 cards/8H.svg create mode 100644 cards/8S.svg create mode 100644 cards/9C.svg create mode 100644 cards/9D.svg create mode 100644 cards/9H.svg create mode 100644 cards/9S.svg create mode 100644 cards/AC.svg create mode 100644 cards/AD.svg create mode 100644 cards/AH.svg create mode 100644 cards/AS.svg create mode 100644 cards/JC.svg create mode 100644 cards/JD.svg create mode 100644 cards/JH.svg create mode 100644 cards/JS.svg create mode 100644 cards/KC.svg create mode 100644 cards/KD.svg create mode 100644 cards/KH.svg create mode 100644 cards/KS.svg create mode 100644 cards/QC.svg create mode 100644 cards/QD.svg create mode 100644 cards/QH.svg create mode 100644 cards/QS.svg create mode 100644 cards/TC.svg create mode 100644 cards/TD.svg create mode 100644 cards/TH.svg create mode 100644 cards/TS.svg delete mode 100644 style-cards.css diff --git a/cardSvgs.js b/cardSvgs.js new file mode 100644 index 0000000..d56c514 --- /dev/null +++ b/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; diff --git a/cards/1B.svg b/cards/1B.svg new file mode 100644 index 0000000..65291aa --- /dev/null +++ b/cards/1B.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/1J.svg b/cards/1J.svg new file mode 100644 index 0000000..a431642 --- /dev/null +++ b/cards/1J.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/2B.svg b/cards/2B.svg new file mode 100644 index 0000000..5f222f5 --- /dev/null +++ b/cards/2B.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/2C.svg b/cards/2C.svg new file mode 100644 index 0000000..134aad7 --- /dev/null +++ b/cards/2C.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/2D.svg b/cards/2D.svg new file mode 100644 index 0000000..40b6f89 --- /dev/null +++ b/cards/2D.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/2H.svg b/cards/2H.svg new file mode 100644 index 0000000..2792f0c --- /dev/null +++ b/cards/2H.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/2J.svg b/cards/2J.svg new file mode 100644 index 0000000..605363c --- /dev/null +++ b/cards/2J.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/2S.svg b/cards/2S.svg new file mode 100644 index 0000000..dc71b0c --- /dev/null +++ b/cards/2S.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/3C.svg b/cards/3C.svg new file mode 100644 index 0000000..0577b58 --- /dev/null +++ b/cards/3C.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/3D.svg b/cards/3D.svg new file mode 100644 index 0000000..6eb6250 --- /dev/null +++ b/cards/3D.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/3H.svg b/cards/3H.svg new file mode 100644 index 0000000..fefbdfd --- /dev/null +++ b/cards/3H.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/3S.svg b/cards/3S.svg new file mode 100644 index 0000000..e438a40 --- /dev/null +++ b/cards/3S.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/4C.svg b/cards/4C.svg new file mode 100644 index 0000000..c785924 --- /dev/null +++ b/cards/4C.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/4D.svg b/cards/4D.svg new file mode 100644 index 0000000..ac8e9df --- /dev/null +++ b/cards/4D.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/4H.svg b/cards/4H.svg new file mode 100644 index 0000000..81606c3 --- /dev/null +++ b/cards/4H.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/4S.svg b/cards/4S.svg new file mode 100644 index 0000000..face015 --- /dev/null +++ b/cards/4S.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/5C.svg b/cards/5C.svg new file mode 100644 index 0000000..8801a5c --- /dev/null +++ b/cards/5C.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/5D.svg b/cards/5D.svg new file mode 100644 index 0000000..40c1918 --- /dev/null +++ b/cards/5D.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/5H.svg b/cards/5H.svg new file mode 100644 index 0000000..3a90567 --- /dev/null +++ b/cards/5H.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/5S.svg b/cards/5S.svg new file mode 100644 index 0000000..16f116f --- /dev/null +++ b/cards/5S.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/6C.svg b/cards/6C.svg new file mode 100644 index 0000000..57b72aa --- /dev/null +++ b/cards/6C.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/6D.svg b/cards/6D.svg new file mode 100644 index 0000000..2a1f8e2 --- /dev/null +++ b/cards/6D.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/6H.svg b/cards/6H.svg new file mode 100644 index 0000000..f95ede7 --- /dev/null +++ b/cards/6H.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/6S.svg b/cards/6S.svg new file mode 100644 index 0000000..7160399 --- /dev/null +++ b/cards/6S.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/7C.svg b/cards/7C.svg new file mode 100644 index 0000000..1457b32 --- /dev/null +++ b/cards/7C.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/7D.svg b/cards/7D.svg new file mode 100644 index 0000000..f6689bf --- /dev/null +++ b/cards/7D.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/7H.svg b/cards/7H.svg new file mode 100644 index 0000000..ba3329d --- /dev/null +++ b/cards/7H.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/7S.svg b/cards/7S.svg new file mode 100644 index 0000000..c824df4 --- /dev/null +++ b/cards/7S.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/8C.svg b/cards/8C.svg new file mode 100644 index 0000000..d407463 --- /dev/null +++ b/cards/8C.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/8D.svg b/cards/8D.svg new file mode 100644 index 0000000..f501eca --- /dev/null +++ b/cards/8D.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/8H.svg b/cards/8H.svg new file mode 100644 index 0000000..7f03eda --- /dev/null +++ b/cards/8H.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/8S.svg b/cards/8S.svg new file mode 100644 index 0000000..d05f534 --- /dev/null +++ b/cards/8S.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/9C.svg b/cards/9C.svg new file mode 100644 index 0000000..e1e195e --- /dev/null +++ b/cards/9C.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/9D.svg b/cards/9D.svg new file mode 100644 index 0000000..69863b6 --- /dev/null +++ b/cards/9D.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/9H.svg b/cards/9H.svg new file mode 100644 index 0000000..abd69ad --- /dev/null +++ b/cards/9H.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/9S.svg b/cards/9S.svg new file mode 100644 index 0000000..a60ce5e --- /dev/null +++ b/cards/9S.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/AC.svg b/cards/AC.svg new file mode 100644 index 0000000..f30278b --- /dev/null +++ b/cards/AC.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/AD.svg b/cards/AD.svg new file mode 100644 index 0000000..750a2e8 --- /dev/null +++ b/cards/AD.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/AH.svg b/cards/AH.svg new file mode 100644 index 0000000..9299c8b --- /dev/null +++ b/cards/AH.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/AS.svg b/cards/AS.svg new file mode 100644 index 0000000..5243bea --- /dev/null +++ b/cards/AS.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/JC.svg b/cards/JC.svg new file mode 100644 index 0000000..4746b92 --- /dev/null +++ b/cards/JC.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/JD.svg b/cards/JD.svg new file mode 100644 index 0000000..21569f2 --- /dev/null +++ b/cards/JD.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/JH.svg b/cards/JH.svg new file mode 100644 index 0000000..26df816 --- /dev/null +++ b/cards/JH.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/JS.svg b/cards/JS.svg new file mode 100644 index 0000000..e7fb4b2 --- /dev/null +++ b/cards/JS.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/KC.svg b/cards/KC.svg new file mode 100644 index 0000000..b6e2b68 --- /dev/null +++ b/cards/KC.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/KD.svg b/cards/KD.svg new file mode 100644 index 0000000..20f4d35 --- /dev/null +++ b/cards/KD.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/KH.svg b/cards/KH.svg new file mode 100644 index 0000000..732d9ee --- /dev/null +++ b/cards/KH.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/KS.svg b/cards/KS.svg new file mode 100644 index 0000000..509a923 --- /dev/null +++ b/cards/KS.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/QC.svg b/cards/QC.svg new file mode 100644 index 0000000..ca33405 --- /dev/null +++ b/cards/QC.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/QD.svg b/cards/QD.svg new file mode 100644 index 0000000..e0cfbaf --- /dev/null +++ b/cards/QD.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/QH.svg b/cards/QH.svg new file mode 100644 index 0000000..afc048a --- /dev/null +++ b/cards/QH.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/QS.svg b/cards/QS.svg new file mode 100644 index 0000000..30d6c17 --- /dev/null +++ b/cards/QS.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/TC.svg b/cards/TC.svg new file mode 100644 index 0000000..351e51c --- /dev/null +++ b/cards/TC.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/TD.svg b/cards/TD.svg new file mode 100644 index 0000000..bbd4c88 --- /dev/null +++ b/cards/TD.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/TH.svg b/cards/TH.svg new file mode 100644 index 0000000..018e4d9 --- /dev/null +++ b/cards/TH.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/cards/TS.svg b/cards/TS.svg new file mode 100644 index 0000000..e859e11 --- /dev/null +++ b/cards/TS.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/index.html b/index.html index 93efaa2..a9f880d 100644 --- a/index.html +++ b/index.html @@ -7,30 +7,49 @@ Tripeaks Solver - +
-

Tripeaks Solver

-

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.

+

+ 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. +

-

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)

+

+ 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. +

-

Entry is case-insensitive, and you may use either any delimeter (space, comma, colon, etc.) or no delimeter. Valid examples:

+

+ Entry is case-insensitive, and you can separate cards with any + character (space, comma, etc), or use no separator. Valid examples: +

    -
  • 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
    • -
  • 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
    • -
  • 7c03s0qsjc00JSasTSadtcqd9s4s2h9h8sjh6c3dks5s5c6h9C2Cac8C6d5DTH8dkckd9d4c5h8hqh6s
    • +
  • + 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 +
    • +
  • + 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 +
    • +
  • + 7c03s0qsjc00JSasTSadtcqd9s4s2h9h8sjh6c3dks5s5c6h9C2Cac8C6d5DTH8dkckd9d4c5h8hqh6s +
- -
+
+
+ + + -
- - + + + + + + + + + + + + + + +
- -
-
    - -
-
-
-
diff --git a/main.js b/main.js index f8514f2..4cfa21c 100644 --- a/main.js +++ b/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 `` - } else { - return `` - } - }, - 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)); diff --git a/style-cards.css b/style-cards.css deleted file mode 100644 index f13b598..0000000 --- a/style-cards.css +++ /dev/null @@ -1,630 +0,0 @@ -/** - * Styles for CSS Playing Cards - * - * @author Anika Henke - * @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; } diff --git a/style.scss b/style.scss index 55c1893..09a9ea1 100644 --- a/style.scss +++ b/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%; + } } } }