diff --git a/.gitignore b/.gitignore index 496ee2c..8ebd579 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ -.DS_Store \ No newline at end of file +.DS_Store +.vscode +*.code-workspace \ No newline at end of file diff --git a/app.js b/app.js index 1051452..b77562b 100644 --- a/app.js +++ b/app.js @@ -1,7 +1,7 @@ const options = ["rock", "paper", "scissor"]; let score = { you: 0, - computer: 0 + computer: 0, }; const WIN_GREEN = "#6ac475"; const LOSE_RED = "#c4736a"; @@ -16,10 +16,37 @@ btns.forEach((btn) => { btn.addEventListener("click", () => { const playerA = btn.querySelector("label").innerText; const playerB = options[getRandomInt()]; - compare(playerA, playerB); + countdown().then(() => { + compare(playerA, playerB); + }); }); }); +async function countdown() { + return new Promise((resolve) => { + const countdownSayings = [...options, "shoot!"].map((x) => x.toUpperCase()); + let counter = 0; + const countdownLabel = document.querySelector(".result"); + countdownLabel.innerText = ""; + countdownLabel.style.color = "#fff"; + const inst = setInterval(changeText, 500); + + function changeText() { + countdownLabel.innerText = countdownSayings[counter]; + counter++; + + if (counter >= countdownSayings.length) { + counter = 0; + clearInterval(inst); + setTimeout(() => { + countdownLabel.innerText = ""; + resolve(); + }, 500); + } + } + }); +} + function compare(player, computer) { const won = "YOU WON"; const lose = "YOU LOST"; @@ -103,7 +130,6 @@ function update(player, computer) { } } - //Reset Game Button --------------------------------- const resetBtn = document.querySelector(".reset"); resetBtn.addEventListener("click", () => { @@ -116,7 +142,6 @@ resetBtn.addEventListener("click", () => { document.querySelector(".hands .computer-hand").src = "rock.png"; }); - // // Mapping // // 0 -> rock, 1->paper, 2->scissor // const options = ["rock", "paper", "scissor"]; diff --git a/index.html b/index.html index d855c7d..5980ac3 100644 --- a/index.html +++ b/index.html @@ -1,70 +1,75 @@ - - - - - - - - Rock,paper & scissor - - - - -
-
-

Rock, Paper & Scissors

+ + + + + + + + Rock,paper & scissor + + + + + + +
+
+

Rock, Paper & Scissors

+
+ +
+

+ You +
+
+ Score: 0 +

+

+ Computer +
+
+ Score: 0 +

+
+ +
+
+ +

+
-
-

- You +

Choose an option

+
+ + +
+
-
-
- -

- -
+ +
+ +
-

Choose an option

-
- - - -
-
- - -
- -
+
+ -
- - + \ No newline at end of file diff --git a/style.css b/style.css index e78b36a..17dc47a 100644 --- a/style.css +++ b/style.css @@ -15,9 +15,8 @@ section { width: 80vw; } - /*--- Reset Button -----*/ -.reset{ +.reset { background: #0f0f0f; border: 1px solid #fff; color: #fff; @@ -29,12 +28,12 @@ section { transition: all 0.3s ease; } -.reset:hover{ +.reset:hover { background: #fff; color: #0f0f0f; } -.reset-div{ +.reset-div { text-align: center; } /*--------------------*/ @@ -55,21 +54,20 @@ section { text-align: center; } -.score h2{ +.score h2 { font-weight: 400; } -.score hr{ +.score hr { margin-top: 25px; margin-bottom: 25px; } -.winner{ +.winner { font-weight: 400; } -@media screen and (max-width:725px) { - +@media screen and (max-width: 725px) { } .match { display: flex; @@ -118,66 +116,71 @@ section { background-color: transparent; } -.options button label{ +.options button label { font-size: 18px; margin-top: 0px; opacity: 0; display: none; } -.options button:hover > label{ +.options button:hover > label { margin-top: 25px; display: inline-block; opacity: 1; } -.options button img{ +.options button img { height: 50px; } -.options .paper img{ +.options .paper img { width: 50px; height: auto; } -.options .rock img{ +.options .rock img { margin-top: 10px; } -.options .scissor img{ +.options .scissor img { margin-top: 10px; } +h2.result { + width: 300px; +} + @media screen and (max-width: 810px) { - .score{ + .score { max-width: 60vw; } - .player-hand, .computer-hand { + .player-hand, + .computer-hand { width: 215px; } - h2.result{ + h2.result { font-size: 1.3rem; } - h2.winner{ + h2.winner { font-size: 1.5rem; } } @media screen and (max-width: 550px) { - .score{ + .score { max-width: 70vw; } - .hands{ + .hands { gap: 1rem; } -.player-hand, -.computer-hand{ - width: 170px; -} -h2.result{ - font-size: 1.2rem; -} -h2.winner{ - font-size: 1.5rem; -} + .player-hand, + .computer-hand { + width: 170px; + } + h2.result { + font-size: 1.2rem; + } + h2.winner { + font-size: 1.5rem; + } }