Added fake dealer card + Reshufle text

main.js

@@ -150,9 +150,14 @@ function addDealerScore(num){
 }
 
 function reshuffle(){
-    alert('Reshuffling ...')
+    let reshufl = document.createElement('h1');
+    reshufl.classList.add('reshufl');
+    reshufl.innerHTML = 'Reshuffling';
     currentDeck = deepCopyDeck(Deck);
-    setTimeout(200);
+    document.body.append(reshufl);
+    setTimeout(() => {
+        reshufl.remove();
+    }, 2000);
 }
 
 function createCard(imgSource, people){
@@ -270,6 +275,15 @@ function dealerHit(option){
     addCardDealer(option);
 }
 
+function dealerFakeCardGet(){
+    let backCard = document.createElement('img');
+    backCard.src = './BlackJackCards/BACK.png';
+    backCard.classList.add('card');
+    backCard.classList.add('backCard');
+    document.querySelector('#dealerScore').innerHTML += ` + ???`;
+    document.querySelector('.cards1').append(backCard);
+}
+
 function hit(){
     addCard();
     if(score === 21 && playerCards.length === 2){
@@ -282,9 +296,11 @@ function startCards(){
     hit();
     dealerCardGet(cardsleft());
     hit();
+    dealerFakeCardGet();
 }
 
 function stand(option){
+    document.querySelector('.backCard').remove();
     if(score === 0) return;
     dealerHit(option);
     if(score>21 || (score < dealerScore && dealerScore<=21)){

style.css

@@ -28,6 +28,9 @@ img.card{ /* 726 : 500 */
 img.card:last-child{
     margin: 0;
 }
+.backCard{
+    border-radius: 10px;
+}
 .cards{
     height: 200px;
     margin: .5rem 0;
@@ -67,7 +70,7 @@ h2{
 @keyframes pop{
     0%{
         scale: 0.5;
-        transform: translate(-100%, -50%);
+        transform: translate(-50%, -50%);
     }
     100%{
         scale: 1;
@@ -102,4 +105,33 @@ button#resetBTN{
     img.card{
         margin: 0 -6.5rem 0 0;
     }
-}
+}
+
+.reshufl{
+    position: absolute;
+    top: 0;
+    background-color: #444;
+    padding: 1rem 2rem 1.5rem 2rem;
+    /*border-radius: 0 0 3rem 3rem;*/
+    animation: downTop linear 2s;
+}
+
+@keyframes downTop{
+    0%{
+        transform: translateY(-100%);
+        border-radius: 3rem;
+    }
+    50%{
+        transform: translateY(0%);
+        border-radius: 0 0 3rem 3rem;
+    }
+    75%{
+        transform: translateY(0%);
+        border-radius: 0 0 3rem 3rem;
+    }
+    100%{
+        transform: translateY(-100%);
+        border-radius: 3rem;
+    }
+}
+