progress towards rendering playing cards preview, separated parsed cardsToSolve into
This commit is contained in:
parent
6681f0ec1c
commit
63e2fe4a49
4 changed files with 671 additions and 4 deletions
23
index.html
23
index.html
|
|
@ -11,6 +11,7 @@
|
|||
<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>
|
||||
|
|
@ -25,6 +26,7 @@
|
|||
<li>7c03s0qsjc00JSasTSadtcqd9s4s2h9h8sjh6c3dks5s5c6h9C2Cac8C6d5DTH8dkckd9d4c5h8hqh6s</li>
|
||||
</ul>
|
||||
|
||||
<!-- User input of game cards -->
|
||||
<form
|
||||
id="cardsInputForm"
|
||||
x-data="cardsInputForm"
|
||||
|
|
@ -46,7 +48,7 @@
|
|||
:class="{ 'is-valid': isFormValid && inputValue.length > 2, 'is-invalid': !isFormValid && inputValue.length > 2 }"
|
||||
maxlength="206"
|
||||
@keyup.debounce="validateCardsInput()"
|
||||
:placeholder="useDelim ? 'e.g., 2S TC 4S QD KH 5S 9S ...' : 'e.g., 2STC4SQDKH5S9S...'"
|
||||
placeholder="e.g., 2S TC 4S QD KH 5S 9S ..."
|
||||
/>
|
||||
|
||||
<template x-for="msg in validMessages">
|
||||
|
|
@ -65,6 +67,13 @@
|
|||
</template>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
|
||||
<!-- Friendly display of game cards -->
|
||||
<div
|
||||
id="playingCardsPreview"
|
||||
x-data="playingCardsPreview">
|
||||
|
||||
<div class="mb-3">
|
||||
<label
|
||||
id="cardsToSolveLabel"
|
||||
|
|
@ -76,13 +85,21 @@
|
|||
id="cardsToSolve"
|
||||
aria-describedby="cardsToSolveLabel"
|
||||
class="form-control"
|
||||
x-text="cardsToSolve.join(' ')"
|
||||
x-text="$store.global.cardsToSolve.join(' ')"
|
||||
rows="4"
|
||||
disabled
|
||||
readonly
|
||||
></textarea>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<div id="playingCardsDisplay" class="playingCards">
|
||||
<span class="card rank-2 diams">
|
||||
<span class="rank">2</span>
|
||||
<span class="suit">♦</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
11
main.js
11
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));
|
||||
|
|
|
|||
630
style-cards.css
Normal file
630
style-cards.css
Normal file
|
|
@ -0,0 +1,630 @@
|
|||
/**
|
||||
* 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; }
|
||||
11
style.scss
11
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue