diff --git a/main.js b/main.js index 894486f..01a5861 100644 --- a/main.js +++ b/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)){ diff --git a/style.css b/style.css index e5c92f7..95645d7 100644 --- a/style.css +++ b/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; } -} \ No newline at end of file +} + +.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; + } +} +