diff --git a/app.js b/app.js index 8acbdef..1b68490 100644 --- a/app.js +++ b/app.js @@ -17,9 +17,9 @@ function getRandomInt() { const btns = document.querySelectorAll(".options button"); btns.forEach((btn) => { btn.addEventListener("click", () => { - document.querySelector(".hands .player-hand").src = "rock.png"; - document.querySelector(".hands .computer-hand").src = "rock.png"; - playerHand.classList.add('shakePlayer') + document.querySelector(".hands .player-hand").src = "../icons/rock-icon.png"; + document.querySelector(".hands .computer-hand").src = "../icons/rock-icon.png"; + playerHand.classList.add('shakePlayer') computerHand.classList.add('shakeComputer') const playerA = btn.querySelector("label").innerText; const playerB = options[getRandomInt()]; @@ -87,9 +87,9 @@ function compare(player, computer) { // computerHand.classList.remove('shake') } function update(player, computer) { - const rock = "rock.png"; - const paper = "paper.png"; - const scissor = "scissor.png"; + const rock = "../icons/rock-icon.png"; + const paper = "../icons/hand-icon.png"; + const scissor = "../icons/scissor-icon.png"; // playerHand if (player == "rock") { @@ -121,8 +121,8 @@ resetBtn.addEventListener("click", () => { document.querySelector(".score .you").innerText = score.you; document.querySelector(".score .computer").innerText = score.computer; document.querySelector(".hands .result").innerText = ""; - document.querySelector(".hands .player-hand").src = "rock.png"; - document.querySelector(".hands .computer-hand").src = "rock.png"; + document.querySelector(".hands .player-hand").src = "../icons/rock-icon.png"; + document.querySelector(".hands .computer-hand").src = "../icons/rock-icon.png"; }); diff --git a/index.html b/index.html index d855c7d..5a4666a 100644 --- a/index.html +++ b/index.html @@ -15,50 +15,52 @@
-

Rock, Paper & Scissors

-
- -
-

- You -
-
- Score: 0 -

-

- Computer -
-
- Score: 0 -

+

- +
+ +

- +
+ +
+
-

Choose an option

+ +
+
+

You

+
+

Score: 0

+
+
+

Computer

+
+

Score: 0

+
+
diff --git a/paper.png b/paper.png deleted file mode 100644 index f80d8b7..0000000 Binary files a/paper.png and /dev/null differ diff --git a/paper.svg b/paper.svg deleted file mode 100644 index 7afd90c..0000000 --- a/paper.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/rock.png b/rock.png deleted file mode 100644 index 536a33b..0000000 Binary files a/rock.png and /dev/null differ diff --git a/rock.svg b/rock.svg deleted file mode 100644 index 692e50f..0000000 --- a/rock.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/scissor.png b/scissor.png deleted file mode 100644 index 08997a0..0000000 Binary files a/scissor.png and /dev/null differ diff --git a/scissor.svg b/scissor.svg deleted file mode 100644 index 2f72ac8..0000000 --- a/scissor.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/style.css b/style.css index ff56940..1e02f7e 100644 --- a/style.css +++ b/style.css @@ -14,14 +14,17 @@ 100% { transform: translateY(0) } } -html, +html { + box-sizing: border-box; +} body { padding: 0; margin: 0; - width: 100%; - overflow-x: hidden; - background: #0f0f0f; - color: #fff; + width: 100vw; + height: 100vh; + overflow: hidden; + background: url('../icons/background.png') center center/cover no-repeat; + color: #222; font-family: "Open Sans", sans-serif; } @@ -51,6 +54,11 @@ section { } .reset-div{ + position: absolute; + left: 50%; + bottom: 20px; + transform: translateX(-50%); + width: 100vw; text-align: center; } /*--------------------*/ @@ -72,7 +80,9 @@ section { } .score h2{ - font-weight: 400; + font-weight: bold; + color: #fff; + font-family: Monaco, monospace; } .score hr{ @@ -80,6 +90,13 @@ section { margin-bottom: 25px; } +.score-block { + background: #222; + border-radius: 18px; + padding: 18px 28px; + display: inline-block; + box-shadow: 0 2px 8px #222; +} .winner{ font-weight: 400; } @@ -94,17 +111,17 @@ section { @media screen and (max-width:725px) { } -.match { +.hands { + position: absolute; + top: 50%; + left: 0; + width: 50vw; display: flex; - flex-direction: column; + justify-content: center; align-items: center; - justify-content: space-between; - margin-top: -2rem; -} - -.match h2 { - font-size: 2rem; - text-align: center; + gap: 15vw; + transform: translateY(-50%); + pointer-events: none; } .match .hands { @@ -124,11 +141,15 @@ section { } .options { - min-height: 130px; + position: absolute; + left: 50%; + bottom: 100px; + transform: translateX(-50%); + min-height: 120px; display: flex; - align-items: flex-start; - gap: 1.5rem; - margin: 0 auto; + align-items: flex-end; + gap: 0.5rem; + margin: 0; justify-content: center; } @@ -152,13 +173,15 @@ section { margin-top: 25px; display: inline-block; opacity: 1; + color: #000; } .options button img{ - height: 50px; + height: 130px; + width: 130px; } -.options .paper img{ +.options .hand img{ width: 50px; height: auto; } @@ -193,9 +216,11 @@ section { .hands{ gap: 1rem; } -.player-hand, -.computer-hand{ - width: 170px; + .user-symbol { + margin-left: -5vw; /* Moves the user hand left */ +} +.computer-symbol { + margin-right: 0; /* Adjusts the computer hand */ } h2.result{ font-size: 1.2rem;