Add files via upload
This commit is contained in:
Jessica Guarato
GitHub
commit
1c99d6fbb9
21
LICENSE.txt
Normal file
21
LICENSE.txt
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
The MIT License (MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2022 by Jessica Guarato (https://codepen.io/jguarato/pen/PoRQPqG)
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
4
README.md
Normal file
4
README.md
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
# Solitaire (desktop browsers only)
|
||||||
|
|
||||||
|
A Pen created on CodePen.io. Original URL: [https://codepen.io/jguarato/pen/PoRQPqG](https://codepen.io/jguarato/pen/PoRQPqG).
|
||||||
|
|
||||||
49
dist/index.html
vendored
Normal file
49
dist/index.html
vendored
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en" >
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<title>CodePen - Solitaire (desktop browsers only)</title>
|
||||||
|
<link rel="stylesheet" href="./style.css">
|
||||||
|
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- partial:index.partial.html -->
|
||||||
|
<div class="top-area">
|
||||||
|
<div class="container">
|
||||||
|
<div class="left-area">
|
||||||
|
<div id="deck" class="deck"></div>
|
||||||
|
<div id="top-cards" class="top-cards"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right-area">
|
||||||
|
<div class="pile"><span id="spade-cards">♠</span></div>
|
||||||
|
<div class="pile"><span id="heart-cards">♥</span></div>
|
||||||
|
<div class="pile"><span id="diamond-cards">♦</span></div>
|
||||||
|
<div class="pile"><span id="club-cards">♣</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="bottom-area">
|
||||||
|
<div class="row"></div>
|
||||||
|
<div class="row"></div>
|
||||||
|
<div class="row"></div>
|
||||||
|
<div class="row"></div>
|
||||||
|
<div class="row"></div>
|
||||||
|
<div class="row"></div>
|
||||||
|
<div class="row"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
Created by <a class="name-dark">jguarato</a> •
|
||||||
|
<a href="https://codepen.io/jguarato" target="_blank">Check out my other Pens</a> •
|
||||||
|
<a href="https://github.com/jguarato" target="_blank">Follow me on GitHub</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
|
<!-- partial -->
|
||||||
|
<script src="./script.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
414
dist/script.js
vendored
Normal file
414
dist/script.js
vendored
Normal file
@ -0,0 +1,414 @@
|
|||||||
|
function createCard(rank, suit, higher) {
|
||||||
|
|
||||||
|
let suitSymbol, cardColor;
|
||||||
|
switch (suit) {
|
||||||
|
case 'spade':
|
||||||
|
suitSymbol = '♠';
|
||||||
|
cardColor = 'black';
|
||||||
|
break;
|
||||||
|
case 'heart':
|
||||||
|
suitSymbol = '♥';
|
||||||
|
cardColor = 'red';
|
||||||
|
break;
|
||||||
|
case 'diamond':
|
||||||
|
suitSymbol = '♦';
|
||||||
|
cardColor = 'red';
|
||||||
|
break;
|
||||||
|
case 'club':
|
||||||
|
suitSymbol = '♣';
|
||||||
|
cardColor = 'black';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
suitSymbol = '🃏';
|
||||||
|
cardColor = 'black';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
let frontInnerHTML = `<div class="inner-info card-rank">${rank}</div>`;
|
||||||
|
frontInnerHTML += `<div class="inner-info card-suit-small">${suitSymbol}</div>`;
|
||||||
|
frontInnerHTML += `<div class="inner-info card-suit-big">${suitSymbol}</div>`;
|
||||||
|
|
||||||
|
return {
|
||||||
|
rank,
|
||||||
|
higher,
|
||||||
|
inner: frontInnerHTML,
|
||||||
|
suit,
|
||||||
|
color: cardColor,
|
||||||
|
below: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDeck() {
|
||||||
|
|
||||||
|
const cardRanking = ['A', '2', '3', '4', '5',
|
||||||
|
'6', '7', '8', '9', '10', 'J', 'Q', 'K'];
|
||||||
|
|
||||||
|
const cardSuits = ['spade', 'heart', 'diamond', 'club'];
|
||||||
|
|
||||||
|
const deck = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < cardSuits.length; i++) {
|
||||||
|
for (let j = 0; j < cardRanking.length; j++) {
|
||||||
|
|
||||||
|
const higherRank = cardRanking[j + 1] ? cardRanking[j + 1] : null;
|
||||||
|
const newCard = createCard(cardRanking[j], cardSuits[i], higherRank);
|
||||||
|
deck.push(newCard);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return deck;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function shuffleCards(deck) {
|
||||||
|
return deck.sort(() => Math.random() - 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function putCardsInDeck(cards) {
|
||||||
|
|
||||||
|
const deck = document.getElementById('deck');
|
||||||
|
|
||||||
|
cards.forEach(() => {
|
||||||
|
deck.innerHTML += `<div class="card back"></div>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
const cardsInDeck = deck.querySelectorAll('.card');
|
||||||
|
|
||||||
|
cards.forEach((card, index) => {
|
||||||
|
cardsInDeck[index].cardInfo = card;
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function turnCard() {
|
||||||
|
|
||||||
|
const isLastCard = this === this.parentNode.lastElementChild;
|
||||||
|
const isCardVisible = this.style.visibility !== 'hidden';
|
||||||
|
const isCardFacingDown = this.classList.contains('back');
|
||||||
|
|
||||||
|
if (isLastCard && isCardVisible) {
|
||||||
|
|
||||||
|
if (isCardFacingDown) {
|
||||||
|
|
||||||
|
this.classList.remove('back');
|
||||||
|
this.classList.add(`${this.cardInfo.suit}`);
|
||||||
|
this.innerHTML = this.cardInfo.inner;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setAttribute('draggable', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function turnCardBack(card) {
|
||||||
|
|
||||||
|
card.classList.remove(`${card.cardInfo.suit}`);
|
||||||
|
card.classList.add('back');
|
||||||
|
card.innerHTML = '';
|
||||||
|
card.setAttribute('draggable', false);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function distributeCards() {
|
||||||
|
|
||||||
|
const piles = document.querySelectorAll('.row');
|
||||||
|
|
||||||
|
piles.forEach((pile, index) => {
|
||||||
|
|
||||||
|
for (let i = 0; i < index + 1; i++) {
|
||||||
|
|
||||||
|
const deck = document.getElementById('deck');
|
||||||
|
const topCard = deck.lastElementChild;
|
||||||
|
|
||||||
|
if (i === index) {
|
||||||
|
turnCard.apply(topCard);
|
||||||
|
}
|
||||||
|
|
||||||
|
deck.removeChild(topCard);
|
||||||
|
pile.append(topCard);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function showTopCard(topCards, deck, deckTopCard) {
|
||||||
|
|
||||||
|
if (deckTopCard.cardInfo) {
|
||||||
|
|
||||||
|
deck.removeChild(deckTopCard);
|
||||||
|
topCards.append(deckTopCard);
|
||||||
|
|
||||||
|
if (topCards.childElementCount > 1) {
|
||||||
|
topCards.childNodes[0].setAttribute('draggable', false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (topCards.childElementCount > 2) {
|
||||||
|
topCards.childNodes[1].setAttribute('draggable', false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (topCards.childElementCount > 3) {
|
||||||
|
|
||||||
|
topCards.childNodes[2].setAttribute('draggable', false);
|
||||||
|
|
||||||
|
const firstCard = topCards.firstElementChild;
|
||||||
|
|
||||||
|
turnCardBack(firstCard);
|
||||||
|
firstCard.style.visibility = 'hidden';
|
||||||
|
|
||||||
|
topCards.removeChild(firstCard);
|
||||||
|
deck.prepend(firstCard);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function returnCardsToDeck(topCards, deck) {
|
||||||
|
|
||||||
|
const cardsToDeck = [];
|
||||||
|
|
||||||
|
topCards.childNodes.forEach(card => {
|
||||||
|
turnCardBack(card);
|
||||||
|
card.style.visibility = 'hidden';
|
||||||
|
cardsToDeck.push(card);
|
||||||
|
});
|
||||||
|
|
||||||
|
cardsToDeck.forEach(card => {
|
||||||
|
deck.prepend(card);
|
||||||
|
});
|
||||||
|
|
||||||
|
topCards.innerHTML = '';
|
||||||
|
|
||||||
|
const cardsInDeck = deck.querySelectorAll('.card');
|
||||||
|
|
||||||
|
cardsInDeck.forEach(card => {
|
||||||
|
card.style.visibility = 'visible';
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkDeckCards() {
|
||||||
|
|
||||||
|
const topCards = document.getElementById('top-cards');
|
||||||
|
const deck = document.getElementById('deck');
|
||||||
|
const deckTopCard = deck.lastElementChild;
|
||||||
|
|
||||||
|
if (!deckTopCard) {
|
||||||
|
returnCardsToDeck(topCards, deck);
|
||||||
|
} else if (deckTopCard.style.visibility === 'hidden') {
|
||||||
|
returnCardsToDeck(topCards, deck);
|
||||||
|
} else {
|
||||||
|
showTopCard(topCards, deck, deckTopCard);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function changeCardPosition(cardToDrop, dropSpot, checkCondition) {
|
||||||
|
|
||||||
|
if (checkCondition) {
|
||||||
|
|
||||||
|
const cardAbove = cardToDrop.previousSibling;
|
||||||
|
|
||||||
|
cardToDrop.parentNode.removeChild(cardToDrop);
|
||||||
|
dropSpot.append(cardToDrop);
|
||||||
|
|
||||||
|
if (cardToDrop.cardInfo.below) {
|
||||||
|
cardToDrop.cardInfo.below.forEach(card => dropSpot.append(card));
|
||||||
|
}
|
||||||
|
|
||||||
|
return cardAbove;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function dropInRow(cardToDrop, dropSpot) {
|
||||||
|
|
||||||
|
const cardToDropInfo = cardToDrop.cardInfo;
|
||||||
|
const lastCardInRow = dropSpot.lastElementChild;
|
||||||
|
|
||||||
|
if (lastCardInRow) {
|
||||||
|
|
||||||
|
const lastCardInfo = lastCardInRow.cardInfo;
|
||||||
|
|
||||||
|
if (lastCardInfo && lastCardInRow.draggable) {
|
||||||
|
|
||||||
|
const checkRank = lastCardInfo.rank === cardToDropInfo.higher;
|
||||||
|
const checkColor = lastCardInfo.color !== cardToDropInfo.color;
|
||||||
|
|
||||||
|
return changeCardPosition(cardToDrop, dropSpot, (checkRank && checkColor));
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
const checkRank = cardToDrop.cardInfo.rank === 'K';
|
||||||
|
|
||||||
|
return changeCardPosition(cardToDrop, dropSpot, checkRank);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function dropInPile(cardToDrop, dropSpot) {
|
||||||
|
|
||||||
|
const cardToDropInfo = cardToDrop.cardInfo;
|
||||||
|
const lastCardInPile = dropSpot.lastElementChild;
|
||||||
|
|
||||||
|
if (!cardToDropInfo.below) {
|
||||||
|
|
||||||
|
if (lastCardInPile) {
|
||||||
|
|
||||||
|
const lastCardInfo = lastCardInPile.cardInfo;
|
||||||
|
|
||||||
|
if (lastCardInfo) {
|
||||||
|
|
||||||
|
const checkRank = lastCardInfo.higher === cardToDropInfo.rank;
|
||||||
|
const checkSuit = lastCardInfo.suit === cardToDropInfo.suit;
|
||||||
|
|
||||||
|
if (checkRank && checkSuit) {
|
||||||
|
lastCardInPile.setAttribute('draggable', false);
|
||||||
|
}
|
||||||
|
|
||||||
|
return changeCardPosition(cardToDrop, dropSpot, (checkRank && checkSuit));
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
const checkRank = cardToDropInfo.rank === 'A';
|
||||||
|
const checkSuit = lastCardInPile.id.split('-')[0] === cardToDropInfo.suit;
|
||||||
|
|
||||||
|
return changeCardPosition(cardToDrop, dropSpot, (checkRank && checkSuit));
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function dropCard(event, cardToDrop) {
|
||||||
|
|
||||||
|
const tgt = event.target;
|
||||||
|
|
||||||
|
const findSpot = function (element, htmlClass) {
|
||||||
|
|
||||||
|
const classList = element.classList;
|
||||||
|
|
||||||
|
if (classList) {
|
||||||
|
|
||||||
|
if (classList.contains(htmlClass)) {
|
||||||
|
return element;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
return findSpot(element.parentNode, htmlClass);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const dropSpot = findSpot(tgt, 'row') || findSpot(tgt, 'pile');
|
||||||
|
|
||||||
|
let cardAbove;
|
||||||
|
|
||||||
|
if (dropSpot) {
|
||||||
|
|
||||||
|
if (dropSpot.classList.contains('row')) {
|
||||||
|
|
||||||
|
cardAbove = dropInRow(cardToDrop, dropSpot);
|
||||||
|
|
||||||
|
} else if (dropSpot.classList.contains('pile')) {
|
||||||
|
|
||||||
|
cardAbove = dropInPile(cardToDrop, dropSpot);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cardAbove) {
|
||||||
|
turnCard.apply(cardAbove);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkGameOver() {
|
||||||
|
|
||||||
|
const piles = document.querySelectorAll('.pile');
|
||||||
|
|
||||||
|
let allPilesComplete = true;
|
||||||
|
|
||||||
|
piles.forEach(pile => {
|
||||||
|
allPilesComplete = allPilesComplete && (pile.childElementCount - 1) === 13;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (allPilesComplete) {
|
||||||
|
alert('YOU WIN!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetSelections(card) {
|
||||||
|
|
||||||
|
card.cardInfo.below = null;
|
||||||
|
card = null;
|
||||||
|
|
||||||
|
return card;
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragRowCards(card) {
|
||||||
|
|
||||||
|
const cardParent = card.parentNode;
|
||||||
|
const isLastCard = card === cardParent.lastElementChild;
|
||||||
|
|
||||||
|
if (!isLastCard) {
|
||||||
|
|
||||||
|
card.cardInfo.below = [];
|
||||||
|
|
||||||
|
for (let i = cardParent.childElementCount - 1; i >= 0; i--) {
|
||||||
|
|
||||||
|
if (cardParent.childNodes[i] === card) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
card.cardInfo.below.unshift(cardParent.childNodes[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const globalDeck = createDeck();
|
||||||
|
const shuffledDeck = shuffleCards(globalDeck);
|
||||||
|
putCardsInDeck(shuffledDeck);
|
||||||
|
distributeCards();
|
||||||
|
|
||||||
|
const deck = document.getElementById('deck');
|
||||||
|
deck.addEventListener('click', checkDeckCards);
|
||||||
|
|
||||||
|
const cards = document.getElementsByClassName('card');
|
||||||
|
for (let i = 0; i < cards.length; i++) {
|
||||||
|
cards[i].addEventListener('click', turnCard);
|
||||||
|
}
|
||||||
|
|
||||||
|
let selectedCard = null;
|
||||||
|
|
||||||
|
document.addEventListener("dragstart", event => {
|
||||||
|
if (event.target.draggable) {
|
||||||
|
selectedCard = event.target;
|
||||||
|
dragRowCards(selectedCard);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("dragover", event => {
|
||||||
|
event.preventDefault();
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
document.addEventListener("drop", event => {
|
||||||
|
event.preventDefault();
|
||||||
|
dropCard(event, selectedCard);
|
||||||
|
selectedCard = resetSelections(selectedCard);
|
||||||
|
checkGameOver();
|
||||||
|
});
|
||||||
256
dist/style.css
vendored
Normal file
256
dist/style.css
vendored
Normal file
@ -0,0 +1,256 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Poppins:wght@300;400;500;600&display=swap');
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
background-color: #147246;
|
||||||
|
font: 400 1.2em sans-serif;
|
||||||
|
line-height: 1.2;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: fit-content;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 0;
|
||||||
|
margin: 2vmin;
|
||||||
|
width: 7.6vmin;
|
||||||
|
height: 11vmin;
|
||||||
|
box-shadow: inset 0px 0px 1vmin 0.2vmin #c3c6c6;
|
||||||
|
border-radius: 0.8vmin;
|
||||||
|
background-color: #f5f9fa;
|
||||||
|
font-family: Roboto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-rank {
|
||||||
|
width: 48%;
|
||||||
|
float: left;
|
||||||
|
margin-left: 0.4vmin;
|
||||||
|
margin-right: 0.3vmin;
|
||||||
|
letter-spacing: -0.8vmin;
|
||||||
|
font-size: 4vmin;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-suit-small {
|
||||||
|
width: 40%;
|
||||||
|
float: left;
|
||||||
|
font-size: 4vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-suit-big {
|
||||||
|
width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
line-height: 0.6;
|
||||||
|
font-size: 8vmin;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-document url-prefix() {
|
||||||
|
.card-rank {
|
||||||
|
margin-right: 0.3vmin;
|
||||||
|
font-size: 4vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-suit-small {
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 3vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-suit-big {
|
||||||
|
line-height: 0.8;
|
||||||
|
font-size: 7vmin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.card.diamond .inner-info,
|
||||||
|
.card.heart .inner-info {
|
||||||
|
background: linear-gradient(to right, #c21f02, #ff2802, #c21f02, #ff2802, #c21f02);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.club .inner-info,
|
||||||
|
.card.spade .inner-info {
|
||||||
|
background: linear-gradient(to right, #242222, #534f51, #242222, #534f51, #242222);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
box-shadow: inset 0px 0px 0.2vmin 0.2vmin #0a2f41;
|
||||||
|
background: linear-gradient(315deg, #242222, #534f51, #242222, #534f51, #242222);
|
||||||
|
background: linear-gradient(315deg, #0a3142, #104c66, #12506b, #1b7ca5, #2195ca);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-area {
|
||||||
|
padding-top: 2vmin;
|
||||||
|
width: 100vw;
|
||||||
|
height: 16vmin;
|
||||||
|
background-color: #1b4934;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-area,
|
||||||
|
.right-area {
|
||||||
|
display: flex;
|
||||||
|
place-content: center;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-area {
|
||||||
|
width: 41vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-area {
|
||||||
|
width: 57vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck {
|
||||||
|
margin: 2vmin;
|
||||||
|
width: 7.6vmin;
|
||||||
|
height: 11vmin;
|
||||||
|
box-shadow: inset 0px 0px 0vmin 0.5vmin #c3c6c644;
|
||||||
|
border-radius: 0.8vmin;
|
||||||
|
background-color: #c3c6c60c;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck::before {
|
||||||
|
content: "⟲";
|
||||||
|
width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 7vmin;
|
||||||
|
text-align: center;
|
||||||
|
color: #c3c6c644;
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck .card {
|
||||||
|
position: absolute;
|
||||||
|
transform: translateX(-2vmin) translateY(-2vmin);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-cards {
|
||||||
|
width: 55%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-cards .card {
|
||||||
|
margin-right: -5vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.pile {
|
||||||
|
padding: 0;
|
||||||
|
margin: 2vmin;
|
||||||
|
width: 7.6vmin;
|
||||||
|
height: 11vmin;
|
||||||
|
box-shadow: inset 0px 0px 0vmin 0.5vmin #c3c6c644;
|
||||||
|
border-radius: 0.8vmin;
|
||||||
|
background-color: #c3c6c60c;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pile span {
|
||||||
|
width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 8vmin;
|
||||||
|
text-align: center;
|
||||||
|
color: #c3c6c644;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.pile .card {
|
||||||
|
position: absolute;
|
||||||
|
transform: translateX(-2vmin) translateY(-2vmin);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-area {
|
||||||
|
display: flex;
|
||||||
|
place-content: center;
|
||||||
|
width: 100vmin;
|
||||||
|
min-height: 100%;
|
||||||
|
height: fit-content;
|
||||||
|
padding-top: 4vmin;
|
||||||
|
padding-bottom: 10vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: grid;
|
||||||
|
margin-right: 1%;
|
||||||
|
width: 12%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row::before {
|
||||||
|
content: "";
|
||||||
|
width: 7.6vmin;
|
||||||
|
height: 11vmin;
|
||||||
|
box-shadow: inset 0px 0px 0vmin 0.5vmin #c3c6c644;
|
||||||
|
border-radius: 0.8vmin;
|
||||||
|
background-color: #c3c6c60c;
|
||||||
|
transform: translateX(2vmin) translateY(2vmin);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row .card {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row .card:not(:first-child) {
|
||||||
|
margin-top: -8vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: fit-content;
|
||||||
|
margin-top: 25vmin;
|
||||||
|
padding: 1vmin 0;
|
||||||
|
background-color: #1e1f26;
|
||||||
|
font-size: 1.6vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p {
|
||||||
|
margin: 1vmin;
|
||||||
|
text-align: center;
|
||||||
|
color: #F5F5F5;
|
||||||
|
font-family: Poppins;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:link {
|
||||||
|
color: #b3a290;
|
||||||
|
}
|
||||||
|
footer a:visited {
|
||||||
|
color: #91d4d0;
|
||||||
|
}
|
||||||
|
footer a:hover {
|
||||||
|
color: #ff3300;
|
||||||
|
}
|
||||||
|
footer a:active {
|
||||||
|
color: #ff3300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-dark {
|
||||||
|
color: #91d4d0;
|
||||||
|
text-decoration: none;
|
||||||
|
background: linear-gradient(to right, #91d4d0 50%, #ff3300 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
34
src/index.html
Normal file
34
src/index.html
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<div class="top-area">
|
||||||
|
<div class="container">
|
||||||
|
<div class="left-area">
|
||||||
|
<div id="deck" class="deck"></div>
|
||||||
|
<div id="top-cards" class="top-cards"></div>
|
||||||
|
</div>
|
||||||
|
<div class="right-area">
|
||||||
|
<div class="pile"><span id="spade-cards">♠</span></div>
|
||||||
|
<div class="pile"><span id="heart-cards">♥</span></div>
|
||||||
|
<div class="pile"><span id="diamond-cards">♦</span></div>
|
||||||
|
<div class="pile"><span id="club-cards">♣</span></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="container">
|
||||||
|
<div class="bottom-area">
|
||||||
|
<div class="row"></div>
|
||||||
|
<div class="row"></div>
|
||||||
|
<div class="row"></div>
|
||||||
|
<div class="row"></div>
|
||||||
|
<div class="row"></div>
|
||||||
|
<div class="row"></div>
|
||||||
|
<div class="row"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<p>
|
||||||
|
Created by <a class="name-dark">jguarato</a> •
|
||||||
|
<a href="https://codepen.io/jguarato" target="_blank">Check out my other Pens</a> •
|
||||||
|
<a href="https://github.com/jguarato" target="_blank">Follow me on GitHub</a>
|
||||||
|
</p>
|
||||||
|
</footer>
|
||||||
414
src/script.js
Normal file
414
src/script.js
Normal file
@ -0,0 +1,414 @@
|
|||||||
|
function createCard(rank, suit, higher) {
|
||||||
|
|
||||||
|
let suitSymbol, cardColor;
|
||||||
|
switch (suit) {
|
||||||
|
case 'spade':
|
||||||
|
suitSymbol = '♠';
|
||||||
|
cardColor = 'black';
|
||||||
|
break;
|
||||||
|
case 'heart':
|
||||||
|
suitSymbol = '♥';
|
||||||
|
cardColor = 'red';
|
||||||
|
break;
|
||||||
|
case 'diamond':
|
||||||
|
suitSymbol = '♦';
|
||||||
|
cardColor = 'red';
|
||||||
|
break;
|
||||||
|
case 'club':
|
||||||
|
suitSymbol = '♣';
|
||||||
|
cardColor = 'black';
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
suitSymbol = '🃏';
|
||||||
|
cardColor = 'black';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
let frontInnerHTML = `<div class="inner-info card-rank">${rank}</div>`;
|
||||||
|
frontInnerHTML += `<div class="inner-info card-suit-small">${suitSymbol}</div>`;
|
||||||
|
frontInnerHTML += `<div class="inner-info card-suit-big">${suitSymbol}</div>`;
|
||||||
|
|
||||||
|
return {
|
||||||
|
rank,
|
||||||
|
higher,
|
||||||
|
inner: frontInnerHTML,
|
||||||
|
suit,
|
||||||
|
color: cardColor,
|
||||||
|
below: null
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createDeck() {
|
||||||
|
|
||||||
|
const cardRanking = ['A', '2', '3', '4', '5',
|
||||||
|
'6', '7', '8', '9', '10', 'J', 'Q', 'K'];
|
||||||
|
|
||||||
|
const cardSuits = ['spade', 'heart', 'diamond', 'club'];
|
||||||
|
|
||||||
|
const deck = [];
|
||||||
|
|
||||||
|
for (let i = 0; i < cardSuits.length; i++) {
|
||||||
|
for (let j = 0; j < cardRanking.length; j++) {
|
||||||
|
|
||||||
|
const higherRank = cardRanking[j + 1] ? cardRanking[j + 1] : null;
|
||||||
|
const newCard = createCard(cardRanking[j], cardSuits[i], higherRank);
|
||||||
|
deck.push(newCard);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return deck;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function shuffleCards(deck) {
|
||||||
|
return deck.sort(() => Math.random() - 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
function putCardsInDeck(cards) {
|
||||||
|
|
||||||
|
const deck = document.getElementById('deck');
|
||||||
|
|
||||||
|
cards.forEach(() => {
|
||||||
|
deck.innerHTML += `<div class="card back"></div>`;
|
||||||
|
});
|
||||||
|
|
||||||
|
const cardsInDeck = deck.querySelectorAll('.card');
|
||||||
|
|
||||||
|
cards.forEach((card, index) => {
|
||||||
|
cardsInDeck[index].cardInfo = card;
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function turnCard() {
|
||||||
|
|
||||||
|
const isLastCard = this === this.parentNode.lastElementChild;
|
||||||
|
const isCardVisible = this.style.visibility !== 'hidden';
|
||||||
|
const isCardFacingDown = this.classList.contains('back');
|
||||||
|
|
||||||
|
if (isLastCard && isCardVisible) {
|
||||||
|
|
||||||
|
if (isCardFacingDown) {
|
||||||
|
|
||||||
|
this.classList.remove('back');
|
||||||
|
this.classList.add(`${this.cardInfo.suit}`);
|
||||||
|
this.innerHTML = this.cardInfo.inner;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setAttribute('draggable', true);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function turnCardBack(card) {
|
||||||
|
|
||||||
|
card.classList.remove(`${card.cardInfo.suit}`);
|
||||||
|
card.classList.add('back');
|
||||||
|
card.innerHTML = '';
|
||||||
|
card.setAttribute('draggable', false);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function distributeCards() {
|
||||||
|
|
||||||
|
const piles = document.querySelectorAll('.row');
|
||||||
|
|
||||||
|
piles.forEach((pile, index) => {
|
||||||
|
|
||||||
|
for (let i = 0; i < index + 1; i++) {
|
||||||
|
|
||||||
|
const deck = document.getElementById('deck');
|
||||||
|
const topCard = deck.lastElementChild;
|
||||||
|
|
||||||
|
if (i === index) {
|
||||||
|
turnCard.apply(topCard);
|
||||||
|
}
|
||||||
|
|
||||||
|
deck.removeChild(topCard);
|
||||||
|
pile.append(topCard);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function showTopCard(topCards, deck, deckTopCard) {
|
||||||
|
|
||||||
|
if (deckTopCard.cardInfo) {
|
||||||
|
|
||||||
|
deck.removeChild(deckTopCard);
|
||||||
|
topCards.append(deckTopCard);
|
||||||
|
|
||||||
|
if (topCards.childElementCount > 1) {
|
||||||
|
topCards.childNodes[0].setAttribute('draggable', false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (topCards.childElementCount > 2) {
|
||||||
|
topCards.childNodes[1].setAttribute('draggable', false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (topCards.childElementCount > 3) {
|
||||||
|
|
||||||
|
topCards.childNodes[2].setAttribute('draggable', false);
|
||||||
|
|
||||||
|
const firstCard = topCards.firstElementChild;
|
||||||
|
|
||||||
|
turnCardBack(firstCard);
|
||||||
|
firstCard.style.visibility = 'hidden';
|
||||||
|
|
||||||
|
topCards.removeChild(firstCard);
|
||||||
|
deck.prepend(firstCard);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function returnCardsToDeck(topCards, deck) {
|
||||||
|
|
||||||
|
const cardsToDeck = [];
|
||||||
|
|
||||||
|
topCards.childNodes.forEach(card => {
|
||||||
|
turnCardBack(card);
|
||||||
|
card.style.visibility = 'hidden';
|
||||||
|
cardsToDeck.push(card);
|
||||||
|
});
|
||||||
|
|
||||||
|
cardsToDeck.forEach(card => {
|
||||||
|
deck.prepend(card);
|
||||||
|
});
|
||||||
|
|
||||||
|
topCards.innerHTML = '';
|
||||||
|
|
||||||
|
const cardsInDeck = deck.querySelectorAll('.card');
|
||||||
|
|
||||||
|
cardsInDeck.forEach(card => {
|
||||||
|
card.style.visibility = 'visible';
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkDeckCards() {
|
||||||
|
|
||||||
|
const topCards = document.getElementById('top-cards');
|
||||||
|
const deck = document.getElementById('deck');
|
||||||
|
const deckTopCard = deck.lastElementChild;
|
||||||
|
|
||||||
|
if (!deckTopCard) {
|
||||||
|
returnCardsToDeck(topCards, deck);
|
||||||
|
} else if (deckTopCard.style.visibility === 'hidden') {
|
||||||
|
returnCardsToDeck(topCards, deck);
|
||||||
|
} else {
|
||||||
|
showTopCard(topCards, deck, deckTopCard);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
function changeCardPosition(cardToDrop, dropSpot, checkCondition) {
|
||||||
|
|
||||||
|
if (checkCondition) {
|
||||||
|
|
||||||
|
const cardAbove = cardToDrop.previousSibling;
|
||||||
|
|
||||||
|
cardToDrop.parentNode.removeChild(cardToDrop);
|
||||||
|
dropSpot.append(cardToDrop);
|
||||||
|
|
||||||
|
if (cardToDrop.cardInfo.below) {
|
||||||
|
cardToDrop.cardInfo.below.forEach(card => dropSpot.append(card));
|
||||||
|
}
|
||||||
|
|
||||||
|
return cardAbove;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function dropInRow(cardToDrop, dropSpot) {
|
||||||
|
|
||||||
|
const cardToDropInfo = cardToDrop.cardInfo;
|
||||||
|
const lastCardInRow = dropSpot.lastElementChild;
|
||||||
|
|
||||||
|
if (lastCardInRow) {
|
||||||
|
|
||||||
|
const lastCardInfo = lastCardInRow.cardInfo;
|
||||||
|
|
||||||
|
if (lastCardInfo && lastCardInRow.draggable) {
|
||||||
|
|
||||||
|
const checkRank = lastCardInfo.rank === cardToDropInfo.higher;
|
||||||
|
const checkColor = lastCardInfo.color !== cardToDropInfo.color;
|
||||||
|
|
||||||
|
return changeCardPosition(cardToDrop, dropSpot, (checkRank && checkColor));
|
||||||
|
}
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
const checkRank = cardToDrop.cardInfo.rank === 'K';
|
||||||
|
|
||||||
|
return changeCardPosition(cardToDrop, dropSpot, checkRank);
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function dropInPile(cardToDrop, dropSpot) {
|
||||||
|
|
||||||
|
const cardToDropInfo = cardToDrop.cardInfo;
|
||||||
|
const lastCardInPile = dropSpot.lastElementChild;
|
||||||
|
|
||||||
|
if (!cardToDropInfo.below) {
|
||||||
|
|
||||||
|
if (lastCardInPile) {
|
||||||
|
|
||||||
|
const lastCardInfo = lastCardInPile.cardInfo;
|
||||||
|
|
||||||
|
if (lastCardInfo) {
|
||||||
|
|
||||||
|
const checkRank = lastCardInfo.higher === cardToDropInfo.rank;
|
||||||
|
const checkSuit = lastCardInfo.suit === cardToDropInfo.suit;
|
||||||
|
|
||||||
|
if (checkRank && checkSuit) {
|
||||||
|
lastCardInPile.setAttribute('draggable', false);
|
||||||
|
}
|
||||||
|
|
||||||
|
return changeCardPosition(cardToDrop, dropSpot, (checkRank && checkSuit));
|
||||||
|
|
||||||
|
} else {
|
||||||
|
|
||||||
|
const checkRank = cardToDropInfo.rank === 'A';
|
||||||
|
const checkSuit = lastCardInPile.id.split('-')[0] === cardToDropInfo.suit;
|
||||||
|
|
||||||
|
return changeCardPosition(cardToDrop, dropSpot, (checkRank && checkSuit));
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function dropCard(event, cardToDrop) {
|
||||||
|
|
||||||
|
const tgt = event.target;
|
||||||
|
|
||||||
|
const findSpot = function (element, htmlClass) {
|
||||||
|
|
||||||
|
const classList = element.classList;
|
||||||
|
|
||||||
|
if (classList) {
|
||||||
|
|
||||||
|
if (classList.contains(htmlClass)) {
|
||||||
|
return element;
|
||||||
|
|
||||||
|
} else {
|
||||||
|
return findSpot(element.parentNode, htmlClass);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
return;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
const dropSpot = findSpot(tgt, 'row') || findSpot(tgt, 'pile');
|
||||||
|
|
||||||
|
let cardAbove;
|
||||||
|
|
||||||
|
if (dropSpot) {
|
||||||
|
|
||||||
|
if (dropSpot.classList.contains('row')) {
|
||||||
|
|
||||||
|
cardAbove = dropInRow(cardToDrop, dropSpot);
|
||||||
|
|
||||||
|
} else if (dropSpot.classList.contains('pile')) {
|
||||||
|
|
||||||
|
cardAbove = dropInPile(cardToDrop, dropSpot);
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
if (cardAbove) {
|
||||||
|
turnCard.apply(cardAbove);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function checkGameOver() {
|
||||||
|
|
||||||
|
const piles = document.querySelectorAll('.pile');
|
||||||
|
|
||||||
|
let allPilesComplete = true;
|
||||||
|
|
||||||
|
piles.forEach(pile => {
|
||||||
|
allPilesComplete = allPilesComplete && (pile.childElementCount - 1) === 13;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (allPilesComplete) {
|
||||||
|
alert('YOU WIN!');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function resetSelections(card) {
|
||||||
|
|
||||||
|
card.cardInfo.below = null;
|
||||||
|
card = null;
|
||||||
|
|
||||||
|
return card;
|
||||||
|
}
|
||||||
|
|
||||||
|
function dragRowCards(card) {
|
||||||
|
|
||||||
|
const cardParent = card.parentNode;
|
||||||
|
const isLastCard = card === cardParent.lastElementChild;
|
||||||
|
|
||||||
|
if (!isLastCard) {
|
||||||
|
|
||||||
|
card.cardInfo.below = [];
|
||||||
|
|
||||||
|
for (let i = cardParent.childElementCount - 1; i >= 0; i--) {
|
||||||
|
|
||||||
|
if (cardParent.childNodes[i] === card) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
card.cardInfo.below.unshift(cardParent.childNodes[i]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const globalDeck = createDeck();
|
||||||
|
const shuffledDeck = shuffleCards(globalDeck);
|
||||||
|
putCardsInDeck(shuffledDeck);
|
||||||
|
distributeCards();
|
||||||
|
|
||||||
|
const deck = document.getElementById('deck');
|
||||||
|
deck.addEventListener('click', checkDeckCards);
|
||||||
|
|
||||||
|
const cards = document.getElementsByClassName('card');
|
||||||
|
for (let i = 0; i < cards.length; i++) {
|
||||||
|
cards[i].addEventListener('click', turnCard);
|
||||||
|
}
|
||||||
|
|
||||||
|
let selectedCard = null;
|
||||||
|
|
||||||
|
document.addEventListener("dragstart", event => {
|
||||||
|
if (event.target.draggable) {
|
||||||
|
selectedCard = event.target;
|
||||||
|
dragRowCards(selectedCard);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
document.addEventListener("dragover", event => {
|
||||||
|
event.preventDefault();
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
document.addEventListener("drop", event => {
|
||||||
|
event.preventDefault();
|
||||||
|
dropCard(event, selectedCard);
|
||||||
|
selectedCard = resetSelections(selectedCard);
|
||||||
|
checkGameOver();
|
||||||
|
});
|
||||||
256
src/style.css
Normal file
256
src/style.css
Normal file
@ -0,0 +1,256 @@
|
|||||||
|
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&family=Poppins:wght@300;400;500;600&display=swap');
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background-color: #f7f7f7;
|
||||||
|
background-color: #147246;
|
||||||
|
font: 400 1.2em sans-serif;
|
||||||
|
line-height: 1.2;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
width: fit-content;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.card {
|
||||||
|
padding: 0;
|
||||||
|
margin: 2vmin;
|
||||||
|
width: 7.6vmin;
|
||||||
|
height: 11vmin;
|
||||||
|
box-shadow: inset 0px 0px 1vmin 0.2vmin #c3c6c6;
|
||||||
|
border-radius: 0.8vmin;
|
||||||
|
background-color: #f5f9fa;
|
||||||
|
font-family: Roboto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-rank {
|
||||||
|
width: 48%;
|
||||||
|
float: left;
|
||||||
|
margin-left: 0.4vmin;
|
||||||
|
margin-right: 0.3vmin;
|
||||||
|
letter-spacing: -0.8vmin;
|
||||||
|
font-size: 4vmin;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-suit-small {
|
||||||
|
width: 40%;
|
||||||
|
float: left;
|
||||||
|
font-size: 4vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-suit-big {
|
||||||
|
width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
line-height: 0.6;
|
||||||
|
font-size: 8vmin;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-document url-prefix() {
|
||||||
|
.card-rank {
|
||||||
|
margin-right: 0.3vmin;
|
||||||
|
font-size: 4vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-suit-small {
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 3vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-suit-big {
|
||||||
|
line-height: 0.8;
|
||||||
|
font-size: 7vmin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.card.diamond .inner-info,
|
||||||
|
.card.heart .inner-info {
|
||||||
|
background: linear-gradient(to right, #c21f02, #ff2802, #c21f02, #ff2802, #c21f02);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card.club .inner-info,
|
||||||
|
.card.spade .inner-info {
|
||||||
|
background: linear-gradient(to right, #242222, #534f51, #242222, #534f51, #242222);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.back {
|
||||||
|
box-shadow: inset 0px 0px 0.2vmin 0.2vmin #0a2f41;
|
||||||
|
background: linear-gradient(315deg, #242222, #534f51, #242222, #534f51, #242222);
|
||||||
|
background: linear-gradient(315deg, #0a3142, #104c66, #12506b, #1b7ca5, #2195ca);
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-area {
|
||||||
|
padding-top: 2vmin;
|
||||||
|
width: 100vw;
|
||||||
|
height: 16vmin;
|
||||||
|
background-color: #1b4934;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-area,
|
||||||
|
.right-area {
|
||||||
|
display: flex;
|
||||||
|
place-content: center;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-area {
|
||||||
|
width: 41vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right-area {
|
||||||
|
width: 57vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck {
|
||||||
|
margin: 2vmin;
|
||||||
|
width: 7.6vmin;
|
||||||
|
height: 11vmin;
|
||||||
|
box-shadow: inset 0px 0px 0vmin 0.5vmin #c3c6c644;
|
||||||
|
border-radius: 0.8vmin;
|
||||||
|
background-color: #c3c6c60c;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck::before {
|
||||||
|
content: "⟲";
|
||||||
|
width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
line-height: 1.6;
|
||||||
|
font-size: 7vmin;
|
||||||
|
text-align: center;
|
||||||
|
color: #c3c6c644;
|
||||||
|
position: absolute;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.deck .card {
|
||||||
|
position: absolute;
|
||||||
|
transform: translateX(-2vmin) translateY(-2vmin);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-cards {
|
||||||
|
width: 55%;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-cards .card {
|
||||||
|
margin-right: -5vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.pile {
|
||||||
|
padding: 0;
|
||||||
|
margin: 2vmin;
|
||||||
|
width: 7.6vmin;
|
||||||
|
height: 11vmin;
|
||||||
|
box-shadow: inset 0px 0px 0vmin 0.5vmin #c3c6c644;
|
||||||
|
border-radius: 0.8vmin;
|
||||||
|
background-color: #c3c6c60c;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pile span {
|
||||||
|
width: 100%;
|
||||||
|
height: inherit;
|
||||||
|
line-height: 1.4;
|
||||||
|
font-size: 8vmin;
|
||||||
|
text-align: center;
|
||||||
|
color: #c3c6c644;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.pile .card {
|
||||||
|
position: absolute;
|
||||||
|
transform: translateX(-2vmin) translateY(-2vmin);
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottom-area {
|
||||||
|
display: flex;
|
||||||
|
place-content: center;
|
||||||
|
width: 100vmin;
|
||||||
|
min-height: 100%;
|
||||||
|
height: fit-content;
|
||||||
|
padding-top: 4vmin;
|
||||||
|
padding-bottom: 10vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row {
|
||||||
|
display: grid;
|
||||||
|
margin-right: 1%;
|
||||||
|
width: 12%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row::before {
|
||||||
|
content: "";
|
||||||
|
width: 7.6vmin;
|
||||||
|
height: 11vmin;
|
||||||
|
box-shadow: inset 0px 0px 0vmin 0.5vmin #c3c6c644;
|
||||||
|
border-radius: 0.8vmin;
|
||||||
|
background-color: #c3c6c60c;
|
||||||
|
transform: translateX(2vmin) translateY(2vmin);
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row .card {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.row .card:not(:first-child) {
|
||||||
|
margin-top: -8vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: fit-content;
|
||||||
|
margin-top: 25vmin;
|
||||||
|
padding: 1vmin 0;
|
||||||
|
background-color: #1e1f26;
|
||||||
|
font-size: 1.6vmin;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer p {
|
||||||
|
margin: 1vmin;
|
||||||
|
text-align: center;
|
||||||
|
color: #F5F5F5;
|
||||||
|
font-family: Poppins;
|
||||||
|
}
|
||||||
|
|
||||||
|
footer a:link {
|
||||||
|
color: #b3a290;
|
||||||
|
}
|
||||||
|
footer a:visited {
|
||||||
|
color: #91d4d0;
|
||||||
|
}
|
||||||
|
footer a:hover {
|
||||||
|
color: #ff3300;
|
||||||
|
}
|
||||||
|
footer a:active {
|
||||||
|
color: #ff3300;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-dark {
|
||||||
|
color: #91d4d0;
|
||||||
|
text-decoration: none;
|
||||||
|
background: linear-gradient(to right, #91d4d0 50%, #ff3300 100%);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user