From 608e9364dd058f94313583e05ab0658f3c368032 Mon Sep 17 00:00:00 2001 From: MadhurimaNayak <124715194+MadhurimaNayak@users.noreply.github.com> Date: Thu, 6 Jun 2024 16:43:25 +0530 Subject: [PATCH] Defined different themes more prominently --- index.html | 79 ++++++++++++++++++++++++++++++++---------------------- js/game.js | 25 +++++++++++++++++ style.css | 45 +++++++++++++++++++++++++++---- 3 files changed, 112 insertions(+), 37 deletions(-) diff --git a/index.html b/index.html index 44fccd9..f0b7137 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,6 @@ + @@ -15,53 +16,66 @@ Dots & Boxes Game +
-
-

▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂

-

Instructions

+
+
+

▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂

-

- 1. Select the number of rows, columns and players.
- 2. The player who has maximum number of boxes on board is the winner.
- 3. Players will switch after every turn. But the player who has filled the last box, will get one extra - chance consecutively.
-

-
+

Instructions

-
-
- - +

+ 1. Select the number of rows, columns and players.
+ 2. The player who has maximum number of boxes on board is the winner.
+ 3. Players will switch after every turn. But the player who has filled the last box, will get one extra + chance consecutively.
+

-
- - -
-
- - -
-
- - +
+
+
+ + + +
+ +
+ + +
+
+ +
+ + +
+
+ +
+ + +
+
+ + + +
-
-

Created with ❤️ by Chrome Gaming

@@ -88,4 +102,5 @@

Instructions

- + + \ No newline at end of file diff --git a/js/game.js b/js/game.js index 44b23e6..b7453a6 100644 --- a/js/game.js +++ b/js/game.js @@ -197,6 +197,31 @@ const selectedTheme = themeSelect.value; video.src = `./assets/${selectedTheme}.mp4`; // Update video source based on theme video2.src = `./assets/${selectedTheme}.mp4`; // Update video source based on theme + + var element=document.querySelector(".whole-background"); + var element2=document.querySelector(".right-background"); + var element3=document.querySelector(".score"); + + + if(selectedTheme==2){ + element.style.backgroundColor = "rgba(241, 41, 34, 0.957)"; + element2.classList.remove('hover-effect-1','hover-effect-2', 'hover-effect-3'); + element2.classList.add('hover-effect-2'); + element3.style.backgroundColor = "rgba(241, 41, 34, 0.957)"; + + } + else if(selectedTheme==3){ + element.style.backgroundColor = "rgba(79, 163, 221, 0.950)"; + element2.classList.remove('hover-effect-1','hover-effect-2', 'hover-effect-3'); + element2.classList.add('hover-effect-3'); + element3.style.backgroundColor = "rgba(79, 163, 221, 0.950)"; + } + else{ + element.style.backgroundColor = "rgba(231, 181, 55, 0.979)"; + element2.classList.remove('hover-effect-1','hover-effect-2', 'hover-effect-3'); + element2.classList.add('hover-effect-1'); + element3.style.backgroundColor = "rgba(231, 181, 55, 0.979)"; + } }); diff --git a/style.css b/style.css index 07a1e70..90f099e 100644 --- a/style.css +++ b/style.css @@ -225,6 +225,7 @@ a { max-width: 200px; text-align: center; border-radius: 1rem; + box-shadow:0px 1px 4px rgba(6, 6, 6, 0.829); } .player-turn .bg.win { @@ -283,17 +284,20 @@ h1 { .settings .form { display: flex; flex-direction: column; - gap: 1.4rem; - max-width: 550px; + justify-content: center; + max-width: 475px; padding: 1rem; font-size: 20px; - padding-left: 7%; + padding-left: 3%; + padding-right: 3%; } .settings .form-item { display: flex; flex-direction: column; gap: 0.2rem; + width:260px; + } .settings .form-item input { @@ -306,7 +310,7 @@ h1 { .settings .form-item .details { font-style: italic; - color: #999; + color: #3e3e3e; font-size: 15px; } @@ -366,10 +370,11 @@ h1 { .score{ - background-color: rgba(96, 87, 87, 0.822); + background-color: rgba(231, 181, 55, 0.979); padding: 50px; border: #111; border-radius: 10px; + box-shadow:0px 5px 15px rgba(6, 6, 6, 0.829); } .flex{ @@ -396,3 +401,33 @@ h1 { .flex-btn button:hover { background: rgb(75, 75, 75); } + +.whole-background{ + display:flex; + gap:1rem; + background-color: rgba(231, 181, 55, 0.979); + /*background-color: rgba(6, 159, 103, 0.957);*/ + border-radius: 10px; + padding:10px 20px; + box-shadow:0px 5px 15px rgba(6, 6, 6, 0.829); +} +.right-background{ + padding: 20px 50px; + border-radius:10px; + max-width: 350px; + transition:background-color 0.5s ease; +} + +.right-background:hover{ + background-color: rgba(236, 66, 109, 0.329); +} + +.hover-effect-1:hover{ + background-color: rgba(236, 66, 109, 0.329); +} +.hover-effect-2:hover{ + background-color: rgba(218, 216, 219, 0.612); +} +.hover-effect-3:hover{ + background-color: rgba(117, 214, 179, 0.817); +}