diff --git a/.DS_Store b/.DS_Store index a5dfa61..9ad0548 100644 Binary files a/.DS_Store and b/.DS_Store differ diff --git a/assets/e.png b/assets/e.png new file mode 100644 index 0000000..983b6f4 Binary files /dev/null and b/assets/e.png differ diff --git a/assets/s.png b/assets/s.png new file mode 100644 index 0000000..e5a2336 Binary files /dev/null and b/assets/s.png differ diff --git a/assets/t.png b/assets/t.png new file mode 100644 index 0000000..02c386d Binary files /dev/null and b/assets/t.png differ diff --git a/index.css b/index.css index b95ef92..9a68cc5 100644 --- a/index.css +++ b/index.css @@ -99,7 +99,19 @@ .fadeout { visibility: hidden; opacity: 0; - transition: visibility 0s 0.8s, opacity 0.8s linear; + transition: visibility 0s 0.5s, opacity 0.5s linear; +} + +.fadein { + visibility: visible; + opacity: 1; + transition: opacity 0.5s linear; +} + +.quickfadein { + visibility: visible; + opacity: 1; + transition: opacity 0.1s linear; } .unselected img { diff --git a/index.js b/index.js index 8324809..61a0e5d 100644 --- a/index.js +++ b/index.js @@ -151,7 +151,7 @@ board.addEventListener("click", function(e) { card.classList.add("fadeout") }) setTimeout(function() {swapCards(selectedCards) - }, 1000) + }, 500) } //if it isn't a set, unselect those cards else { @@ -194,6 +194,10 @@ function swapCards(selectedCards) { newCard = shuffledCards[0] removeCards(1) swapCard(card, newCard) + + setTimeout(function() { + card.classList.remove("fadein") + },500) } else { card.remove() @@ -212,7 +216,7 @@ function swapCards(selectedCards) { //changes innerHTML, classes, and dataset information on the card we are swapping out function swapCard(card, newCard) { card.querySelector(".shapes").innerHTML = svgBuilder(newCard) - card.classList = `card ${newCard.number} ${newCard.color} ${newCard.shape} ${newCard.fill}` + card.classList = `card ${newCard.number} ${newCard.color} ${newCard.shape} ${newCard.fill} fadein` card.dataset.id = `${newCard.id}` card.dataset.number = `${newCard.number}` card.dataset.color = `${newCard.color}` @@ -315,8 +319,9 @@ options.addEventListener("click", function(e) { //if no set button was clicked, check if there is a set on the board if (e.target.dataset.action === "noset") { const cardsOnBoard = board.querySelectorAll('.card') + const testCards = board.querySelectorAll(".three") //if there is a set, alert the user - if (checkForSetOnBoard(cardsOnBoard)) { + if (checkForSetOnBoard(testCards)) { cardsOnBoard.forEach(function(card) { card.classList.add("wrong") }) @@ -325,7 +330,7 @@ options.addEventListener("click", function(e) { cardsOnBoard.forEach(function(card) { card.classList.remove("wrong") }) - },900) + },500) console.log("there is a set on the board") } //if there is not a set on the board, reshuffle the cards