From 63e2fe4a497dc771da6a936b13c8be323b0c911d Mon Sep 17 00:00:00 2001 From: Adam Piontek Date: Sun, 11 Sep 2022 09:55:51 -0400 Subject: [PATCH] progress towards rendering playing cards preview, separated parsed cardsToSolve into --- index.html | 23 +- main.js | 11 +- style-cards.css | 630 ++++++++++++++++++++++++++++++++++++++++++++++++ style.scss | 11 + 4 files changed, 671 insertions(+), 4 deletions(-) create mode 100644 style-cards.css diff --git a/index.html b/index.html index e946b48..f97d0e7 100644 --- a/index.html +++ b/index.html @@ -11,6 +11,7 @@
+

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.

@@ -25,6 +26,7 @@
  • 7c03s0qsjc00JSasTSadtcqd9s4s2h9h8sjh6c3dks5s5c6h9C2Cac8C6d5DTH8dkckd9d4c5h8hqh6s
    • +
    + + + +
    +
    - + +
    + + 2 + ♦ + +
    + +
    diff --git a/main.js b/main.js index 92ba599..9c3e635 100644 --- a/main.js +++ b/main.js @@ -1,7 +1,16 @@ import "./style.scss"; +import "./style-cards.css"; import Alpine from "alpinejs"; // import 'bootstrap/dist/js/bootstrap' +Alpine.store('global', { + cardsToSolve: [] +}) + +Alpine.data("playingCardsPreview", () => ({ + testing: true +})); + Alpine.data("cardsInputForm", () => ({ // "constants" for validation etc nonAlphaNumRegEx: /[\W_]+/g, @@ -120,7 +129,7 @@ Alpine.data("cardsInputForm", () => ({ } // set the game cards to try solving, based on current input - this.cardsToSolve = Array(this.deck.length - this.validCards.length) + this.$store.global.cardsToSolve = Array(this.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 new file mode 100644 index 0000000..f13b598 --- /dev/null +++ b/style-cards.css @@ -0,0 +1,630 @@ +/** + * 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 502d457..e918dc1 100644 --- a/style.scss +++ b/style.scss @@ -1 +1,12 @@ @import "../node_modules/bootstrap/scss/bootstrap"; + +.playingCards { + .card { + box-shadow: .1em .1em .3em #999 !important; + .suit { + &::after { + line-height: .8 !important; + } + } + } +} \ No newline at end of file