Merge pull request #182 from GameSphere-MultiPlayer/main

Merge PRs from main to feature

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}

README.md

@@ -92,3 +92,58 @@ ________________________________________________________________________________
 8. Once you're satisfied with your pull request, click the "Create pull request" button to submit it.
 
 **Note:** In order to create a pull request, you must have a fork of the original repository in your GitHub account and you must have made the changes in that forked repository.
+
+__________________________________________________________________________________________________________________________________________________________________
+## 🎮 Gaming Rule
+
+The game is very simple and easy to play, it's a multiplayer game where each player gets one chance to play alternatively. The goal is to maximize the number of boxes owned. The game continues until no box is left unoccupied. 
+
+### How to Play
+1. **Setup:** At the start of the game, choose the number of squares you want to have by specifying the number of rows and columns. The range is from 5 to 30 for both rows and columns. Also, specify the number of players, which can be from 2 to 6.
+
+2. **Gameplay:** 
+   - Players take turns marking one side of a square on the board.
+   - If a side completes a square along with previous marks, the player gets the box and an extra chance to play.
+   - The game requires strategic thinking to maximize the number of boxes owned.
+
+3. **Winning:** The player with the most boxes owned at the end of the game wins. 
+
+
+## Dot Box Game Strategies
+
+### 1. **Claiming Territory** 🏰
+   - **Early Game:** Focus on securing territory to build a strong foundation. 
+   - **Mid to Late Game:** Prioritize closing boxes to prevent opponents from claiming territory.
+
+### 2. **Box Closure** 📦
+   - **Immediate Closure:** Always close a box if possible, unless it would immediately grant your opponent an advantage.
+   - **Forcing Closure:** Try to force your opponent into closing a box that would benefit you more than them.
+
+### 3. **Defensive Play** 🛡️
+   - **Blocking Moves:** Use blocking moves to prevent your opponent from closing boxes or claiming territory.
+   - **Strategic Sacrifice:** Sacrifice a box to prevent your opponent from getting a bigger advantage.
+
+### 4. **Offensive Play** ⚔️
+   - **Box Stealing:** Aim to steal boxes from your opponent by closing boxes that they are about to complete.
+   - **Forcing Mistakes:** Force your opponent into making mistakes by creating complex board states.
+
+### 5. **Control the Center** 🎯
+   - **Strategic Importance:** The center of the board is crucial for controlling the game. Try to maintain a strong presence there.
+   - **Access Points:** Keep control of the access points to the center to limit your opponent's options.
+
+### 6. **Predictive Play** 🔮
+   - **Anticipating Moves:** Try to anticipate your opponent's moves and plan your strategy accordingly.
+   - **Stay Flexible:** Be prepared to adapt your strategy based on your opponent's actions.
+
+### 7. **Endgame Strategies** 🏁
+   - **Counting Boxes:** Keep track of the number of boxes each player has closed to determine the best moves in the endgame.
+   - **Protecting Lead:** If you're ahead, focus on protecting your lead rather than taking risks.
+
+### 8. **Mind Games** 🧠
+   - **Bluffing:** Occasionally make moves that seem advantageous to your opponent but actually benefit you in the long run.
+   - **Psychological Warfare:** Use your opponent's expectations against them to gain an advantage.
+## Features
+- Multiplayer game supporting 2 to 6 players.
+- Strategic gameplay requiring tactical thinking.
+- Customizable board size with rows and columns from 5 to 30.
+- Dynamic gameplay where players earn extra chances for completing squares.

background/README.md

@@ -0,0 +1 @@
+This folder contains all the backgroud video themes used in this project. 

index.html

@@ -7,12 +7,15 @@
 
 	<!-- Stylesheet -->
 	<link rel="stylesheet" href="style.css" />
+	<link rel="stylesheet" href="theme.css" />
+	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
 	<!-- JavaScript files -->
 	<script defer src="./js/edge.js"></script>
 	<script defer src="./js/box.js"></script>
 	<script defer src="./js/board.js"></script>
 	<script defer src="./js/game.js"></script>
+	<script defer src="./js/theme.js"></script>
 
 	<!-- Logo of the game -->
 	<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
@@ -29,48 +32,52 @@
 			<source src="./back.mp4" type="video/mp4">
 		</video>
 		<div class="form">
+		<div class="overlay-container">
 			<h1 class="heading"
 				style="font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; color:rgb(52, 76, 100);">
 				▁ ▂ ▄ ▅ ▆ ▇ █ <span style="color:  rgb(87, 166, 161);">MAXIMISE</span> BOXES!! █ ▇ ▆ ▅ ▄ ▂ ▁
 			</h1>
 
 			<h3 class="instructions-heading" style="color: white; background-color: rgb(87, 123, 141);">Instructions</h3>
 
-			<p class="instructions" style="color: rgb(52, 76, 100);">
+			<p class="instructions" style="color: rgb(211, 211, 211);">
+				<br>
 				1. Select the number of rows, columns and players. <br>
 				2. The player who has maximum number of boxes on board is the winner. <br>
 				3. Players will switch after every turn. But the player who has filled the last box, will get one extra
 				chance
 				consecutively. <br>
 			</p>
 
+        </div>
 		</div>
-
+		<div class="overlay-container">
 		<!-- Form page -->
 		<div class="form">
+
 			<div>
-				<h2 style="color: rgb(52, 76, 100);">What size of Board do you want? :</h2>
+				<h2 style="color: rgb(211, 211, 211);">What size of Board do you want? :</h2>
 			</div>
 
 			<div class="form-item">
-				<label for="rows" style="color: rgb(52, 76, 100);">Rows : <span class="details">(between 5 and 30)</span></label>
+				<label for="rows" style="color: rgb(211, 211, 211);">Rows : <span class="details">(between 5 and 30)</span></label>
 				<input type="number" id="rows" min="5" max="30" value="6" />
 			</div>
 
 			<div class="form-item">
-				<label for="columns" style="color: rgb(52, 76, 100);">Columns : <span class="details">(between 5 and 30)</span></label>
+				<label for="columns" style="color: rgb(211, 211, 211);">Columns : <span class="details">(between 5 and 30)</span></label>
 				<input type="number" id="columns" min="5" max="30" value="6" />
 			</div>
 
 			<div class="form-item">
-				<label for="players-count" style="color: rgb(52, 76, 100);">Players : <span class="details">(between 2 and 6)</span></label>
+				<label for="players-count" style="color: rgb(211, 211, 211);">Players : <span class="details">(between 2 and 6)</span></label>
 				<input type="number" id="players-count" min="2" max="6" value="2" />
 			</div>
 
 			<button class="start-btn" style="background-color:rgb(87, 123, 141);">START</button>
 
 		</div>
-
+		</div>
 
 	</div>
 
@@ -85,9 +92,22 @@ <h2 style="color: rgb(52, 76, 100);">What size of Board do you want? :</h2>
 
 	<!-- Game Page -->
 	<div class="board" style="margin-top: 154px;"></div>
+	<div>
+	<button id="theme-button" class="theme-btn">Change Theme</button>
+    <div id="theme-options" class="hidden">
+        <button class="theme-option" data-video="back.mp4">Starry Night</button>
+        <button class="theme-option" data-video="back2.mp4">Aurora</button>
+        <button class="theme-option" data-video="back3.mp4">Waterfall</button>
+		<button class="theme-option" data-video="back4.mp4">Garden</button>
+		<button class="theme-option" data-video="back5.mp4">Beach</button> 
+    </div>
+   <!-- Background Videos -->
+   <video autoplay loop muted plays-inline class="back" id="background-video">
+	<source src="./background/back4.mp4" type="video/mp4">
+</video>
+
+	<button class="mute-btn"><i class="fa fa-volume-up fa-2x"></i></button>
 
 </body>
 
 </html>
-<!--Video by <a href="https://pixabay.com/users/blendertimer-9538909/?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=80645">Daniel Roberts</a> from <a href="https://pixabay.com//?utm_source=link-attribution&utm_medium=referral&utm_campaign=video&utm_content=80645">Pixabay</a>
-</a>-->

js/game.js

@@ -160,6 +160,23 @@ class Game {
 	}
 }
 
+// Selecting the mute button and icon
+const muteBtn = document.querySelector(".mute-btn");
+const muteIcon = document.querySelector(".mute-btn i");
+
+// Event listener for mute button
+muteBtn.addEventListener("click", () => {
+	if (bgMusic.paused) {
+		bgMusic.play();
+		muteIcon.classList.remove("fa-volume-off"); // Remove mute icon
+		muteIcon.classList.add("fa-volume-up");    // Add unmute icon
+	} else {
+		bgMusic.pause();
+		muteIcon.classList.remove("fa-volume-up");  // Remove unmute icon
+		muteIcon.classList.add("fa-volume-off");   // Add mute icon
+	}
+});
+
 // Declaring Global Variables
 
 const settingsUI = document.querySelector(".settings")
@@ -182,6 +199,8 @@ startBtn.addEventListener("click", () => {
 	game = new Game(rows, columns, playersCount)
 	settingsUI.style.display = "none"
 	heading.style.display = "none"
+        document.getElementById('theme-options').style.display = 'none';
+        document.getElementById('theme-button').style.display = 'none';
 });
 
 function calculate(value, min, max) {

js/theme.js

@@ -0,0 +1,51 @@
+function setBackgroundVideo(videoSrc) {
+    const videoElement = document.querySelector('video.back');
+    videoElement.querySelector('source').setAttribute('src', videoSrc);
+    videoElement.load();
+    videoElement.play();
+}
+
+document.getElementById('theme-button').addEventListener('click', () => {
+    const themeOptions = document.getElementById('theme-options');
+    if (themeOptions.style.visibility === 'hidden' || themeOptions.style.visibility === '') {
+        themeOptions.style.visibility = 'visible';
+    } else {
+        themeOptions.style.visibility = 'hidden';
+    }
+});
+
+document.querySelectorAll('.theme-option').forEach(button => {
+    button.addEventListener('click', (event) => {
+        const videoSrc = `./background/${event.target.getAttribute('data-video')}`;
+        setBackgroundVideo(videoSrc);
+
+        // Save selected video in localStorage to persist the theme
+        localStorage.setItem('selectedTheme', videoSrc);
+        localStorage.setItem('selectedThemeName', event.target.innerText);
+
+        // Remove 'selected' class from all theme options
+        document.querySelectorAll('.theme-option').forEach(option => {
+            option.classList.remove('selected');
+        });
+
+        // Add 'selected' class to the clicked option
+        event.target.classList.add('selected');
+
+        // Hide theme options after selection
+        document.getElementById('theme-options').style.visibility = 'hidden';
+    });
+});
+
+// Check localStorage for saved theme and apply it
+document.addEventListener('DOMContentLoaded', () => {
+    const savedTheme = localStorage.getItem('selectedTheme');
+    const savedThemeName = localStorage.getItem('selectedThemeName');
+    if (savedTheme) {
+        setBackgroundVideo(savedTheme);
+        document.querySelectorAll('.theme-option').forEach(option => {
+            if (option.innerText === savedThemeName) {
+                option.classList.add('selected');
+            }
+        });
+    }
+});

style.css

@@ -207,7 +207,7 @@ a {
 	justify-content: center;
 	color: rgba(0, 0, 0, 0.864);
 	padding-top: 10px;
-	border-top: solid 1px #f9f9f9;
+
 }
 
 .player-turn .bg {
@@ -342,4 +342,22 @@ h1 {
 		width: auto;
 		height: 100%;
 	}
+}
+
+.mute-btn {
+	background-color: #333;
+	border: none;
+	cursor: pointer;
+	padding: 10px 15px;
+	border-radius: 5px;
+}
+
+.mute-btn i {
+	color: #ffffff;
+	font-size: 24px;
+	transition: color 0.3s ease;
+}
+
+.mute-btn:hover i {
+	color: #fff;
 }

theme.css

@@ -0,0 +1,54 @@
+.theme-btn {
+    position: fixed;
+    top: 10px;
+    right: 10px;
+    padding: 10px 20px;
+    cursor: pointer;
+    background-color: #57667d;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    z-index: 1000;
+}
+
+#theme-options {
+    position: fixed;
+    top: 50px;
+    right: 10px;
+    display: flex;
+    flex-direction: column;
+    background: rgba(0, 0, 0, 0.8);
+    padding: 10px;
+    border-radius: 5px;
+    z-index: 1000;
+    visibility: hidden;
+}
+
+.theme-option {
+    margin: 5px 0;
+    padding: 10px;
+    cursor: pointer;
+    background-color: #444;
+    color: white;
+    border: none;
+    border-radius: 5px;
+}
+
+.hidden {
+    display: none;
+}
+
+
+.overlay-container {
+    position: relative;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
+    padding: 20px;
+    border-radius: 10px;
+    color: white;
+}
+
+.theme-option.selected {
+    border: 2px solid #00f;
+    background-color: rgba(0, 0, 255, 0.1);
+}