카드 뒤집기

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
ul {
    list-style: none;
}
img {
    width: 100%;
    vertical-align: top;
}
body {
    background: #c9ad97;
}
.wrap__card {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
.card__inner {
    width: 700px;
    height: 700px;
    background-color: #fff;
    border-radius: 20px;
    padding: 30px;
}
.cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: space-around;
    width: 100%;
    height: 100%;
}
.cards li {
    width: calc(100% / 4 - 20px);
    height: calc(100% / 4 - 20px);
    perspective: 1000px;
    transform-style: preserve-3d;
    position: relative;
}
.cards li .view {
    position: absolute;
    padding: 15%;
    transition: transform 0.6s linear;
    backface-visibility: hidden;
    border-radius: 10px;
    width: 100%;
    height: 100%;
    user-select: none;
    pointer-events: none;
}
.cards li .view.front {
    padding: 10%;
    background: #f1758c;
    transform:  rotateY(0deg);
}
.cards li.flip .view.front {
    transform:  rotateY(180deg);
}
.cards li .view.back {
    background: #c9ad97;
    transform:  rotateY(-180deg);
}
.cards li.flip .view.back {
    transform:  rotateY(0deg);
}
.cards li.shake {
    animation: shake 0.35s ease-in-out;
}
@keyframes shake {
    0%   {transform: translateX(0);}
    20%  {transform: translateX(-13px);}
    40%  {transform: translateX(13px);}
    80%  {transform: translateX(8px);}
    60%  {transform: translateX(-8px);}
    100% {transform: translateX(0);}
}

// 01. HTML/CSS 디자인 구성
// 02. 클릭한 카드 뒤집기
// 03. 클릭한 카드 뒤집기 확인하기(첫번째, 두번째)
// 04. 클릭한 카드의 두개의 이미지 가져오기
// 05. 두개의 이미지 비교하기
// 06. 틀린 이미지 애니메이션 효과 주기
// 07. 빨리 클릭하면 버그 발생 처리하기

const cards = document.querySelectorAll(".cards li");

let cardOne, cardTwo;
let disableDeck = false;

function flipCard(e){
    let clickedCard = e.target;

    if(clickedCard !== cardOne && !disableDeck){
        clickedCard.classList.add("flip");

        if(!cardOne){
            return cardOne = clickedCard;
        }
        cardTwo = clickedCard;
        disableDeck = true; 

        let cardOneIng = cardOne.querySelector(".back img").src;
        let cardTwoIng = cardTwo.querySelector(".back img").src;

        matchCards(cardOneIng, cardTwoIng);
    }
}

function matchCards(img1, img2){
    if(img1 == img2){
        cardOne.classList.removeEventListener("click", flipCard);
        cardTwo.classList.removeEventListener("click", flipCard);
        cardOne = cardTwo = "";
        disableDeck = false;
    } else {
        setTimeout(() => {
            cardOne.classList.add("shake");
            cardTwo.classList.add("shake");
        }, 400)
        setTimeout(() => {
            cardOne.classList.remove("shake", "flip");
            cardTwo.classList.remove("shake", "flip");
            cardOne = cardTwo = "";
            disableDeck = false;
        }, 1200)
    }
}

cards.forEach(card => {
    card.addEventListener("click", flipCard);
})