From 084314151be9d7ba0f22430ccd48655672be83e5 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Mon, 22 Jul 2024 10:36:07 +0530 Subject: [PATCH 1/9] player name input fields --- js/game.js | 75 +++++++- pages/game.html | 473 +++++++++++++++++++++++++----------------------- 2 files changed, 310 insertions(+), 238 deletions(-) diff --git a/js/game.js b/js/game.js index 1c1171aa..ffc5f474 100644 --- a/js/game.js +++ b/js/game.js @@ -1,7 +1,7 @@ class Game { static instance; // Singleton instance of Game class - constructor(rows, columns, playersCount) { + constructor(rows, columns, playersInfo) { if (Game.instance == null) Game.instance = this; this.playersUI = document.querySelector(".players"); @@ -15,6 +15,7 @@ class Game { playerWin: [], }; + this.players = [playersInfo]; this.players = [ { name: "Player 1", color: "pink", filledBoxes: 0 }, { name: "Player 2", color: "skyblue", filledBoxes: 0 }, @@ -24,9 +25,6 @@ class Game { { name: "Player 6", color: "orange", filledBoxes: 0 }, ]; - let p = this.players.length - playersCount; - for (let i = 0; i < p; i++) this.players.pop(); - this.currentPlayerIndex = 0; this.currentPlayer = this.players[this.currentPlayerIndex]; @@ -183,11 +181,6 @@ document.addEventListener("DOMContentLoaded", () => { bgMusic.volume = 0.1; bgMusic.play(); - const rows = calculate(rowsInput, 5, 30); - const columns = calculate(columnsInput, 5, 30); - const playersCount = calculate(playersInput, 2, 6); - - game = new Game(rows, columns, playersCount); const storedTheme = localStorage.getItem("selectedTheme"); const video = document.getElementById("myVideo"); video.src = `/assets/videos/${storedTheme}.mp4`; @@ -207,3 +200,67 @@ document.addEventListener("DOMContentLoaded", () => { function calculate(value, min, max) { return Math.min(Math.max(value, min), max); } + +const colors = [ + "red", + "blue", + "green", + "yellow", + "purple", + "orange", + "pink", + "cyan", +]; + +function addPlayerInfo() { + const playerInputsDiv = document.getElementById("playerInputs"); + const playerCount = playerInputsDiv.childElementCount / 2 + 1; // Calculate new player count + + // Create player name input + const nameInput = document.createElement("input"); + nameInput.type = "text"; + nameInput.placeholder = `Player ${playerCount} Name`; + nameInput.id = `playerName${playerCount}`; + + // Create color select dropdown + const colorSelect = document.createElement("select"); + colorSelect.id = `playerColor${playerCount}`; + colors.forEach((color) => { + const option = document.createElement("option"); + option.value = color; + option.textContent = color; + colorSelect.appendChild(option); + }); + + // Append inputs to the form + playerInputsDiv.appendChild(nameInput); + playerInputsDiv.appendChild(colorSelect); +} + +document + .getElementById("playerForm") + .addEventListener("submit", function (event) { + event.preventDefault(); + for (let i = 1; i <= players.length; i++) { + const name = document.getElementById(`playerName${i}`).value; + const color = document.getElementById(`playerColor${i}`).value; + players.push({ name, color }); + } + startGame(players); + }); + +function startGame(players) { + // Your game initialization logic here + console.log("Starting game with players:", players); +} + +// Start the game + +const playBtn = document.getElementById("play-btn"); + +playBtn.addEventListener("click", () => { + const rows = calculate(rowsInput, 5, 30); + const columns = calculate(columnsInput, 5, 30); + const playersCount = calculate(playersInput, 2, 6); + game = new Game(rows, columns, playersInfo); +}); diff --git a/pages/game.html b/pages/game.html index 01496f75..c3eff143 100644 --- a/pages/game.html +++ b/pages/game.html @@ -1,242 +1,257 @@ + + + + + + + + + + + + + + + + + + - - - Dots & Boxes Game - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - - - - -
- -
-
- PlayerX's turn -
-
- - -
- -
- - - - - - - - - - - - - - - - -
- - -
- -
- Go Back to Home - Play Again -
-
- - - + .button-container #music-toggle:hover { + background-color: rgb(21, 39, 77); + } - + .button-container [title]:hover::after { + opacity: 1; + } + .circle { + position: absolute; + width: 25px; + height: 25px; + border-radius: 50%; + pointer-events: none; + background: radial-gradient( + circle, + rgba(73, 232, 247, 0.466), + rgba(141, 38, 172, 0.5) + ); + transition: transform 0.1s, left 0.1s, top 0.1s; + } + + .circle-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 9999; + } + + @media (max-width: 768px) { + .circle-container { + display: none; + } + } + + + + Dots & Boxes Game + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ +
+ +
+
+ + +
+ +
+
+ PlayerX's turn +
+
+ + +
+ +
+ + + + + + + + + + + + + + + +
+ + +
+ +
+ Go Back to Home + Play Again +
+
+ + From 9345a9c5beb61882d145a44a33b8b0c110e65f95 Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Tue, 23 Jul 2024 14:32:34 +0530 Subject: [PATCH 2/9] functionality added --- js/game.js | 140 ++++---- js/index.js | 4 +- pages/game.html | 814 +++++++++++++++++++++--------------------- styles/game.style.css | 14 + 4 files changed, 510 insertions(+), 462 deletions(-) diff --git a/js/game.js b/js/game.js index ffc5f474..aaf80c44 100644 --- a/js/game.js +++ b/js/game.js @@ -15,15 +15,15 @@ class Game { playerWin: [], }; - this.players = [playersInfo]; - this.players = [ - { name: "Player 1", color: "pink", filledBoxes: 0 }, - { name: "Player 2", color: "skyblue", filledBoxes: 0 }, - { name: "Player 3", color: "lightgreen", filledBoxes: 0 }, - { name: "Player 4", color: "magenta", filledBoxes: 0 }, - { name: "Player 5", color: "yellow", filledBoxes: 0 }, - { name: "Player 6", color: "orange", filledBoxes: 0 }, - ]; + this.players = playersInfo; + // this.players = [ + // { name: "Player 1", color: "pink", filledBoxes: 0 }, + // { name: "Player 2", color: "skyblue", filledBoxes: 0 }, + // { name: "Player 3", color: "lightgreen", filledBoxes: 0 }, + // { name: "Player 4", color: "magenta", filledBoxes: 0 }, + // { name: "Player 5", color: "yellow", filledBoxes: 0 }, + // { name: "Player 6", color: "orange", filledBoxes: 0 }, + // ]; this.currentPlayerIndex = 0; this.currentPlayer = this.players[this.currentPlayerIndex]; @@ -173,7 +173,7 @@ class Game { const rowsInput = Number(localStorage.getItem("rows")); const columnsInput = Number(localStorage.getItem("columns")); -const playersInput = Number(localStorage.getItem("players")); +const playersInput = Number(localStorage.getItem("playersCount")); const bgMusic = new Audio("../assets/sounds/bgMusic.mp3"); var game = null; @@ -181,6 +181,9 @@ document.addEventListener("DOMContentLoaded", () => { bgMusic.volume = 0.1; bgMusic.play(); + const playersCount = calculate(playersInput, 2, 6); + renderPlayerInputs(playersCount); + const storedTheme = localStorage.getItem("selectedTheme"); const video = document.getElementById("myVideo"); video.src = `/assets/videos/${storedTheme}.mp4`; @@ -201,66 +204,83 @@ function calculate(value, min, max) { return Math.min(Math.max(value, min), max); } -const colors = [ - "red", - "blue", - "green", - "yellow", - "purple", - "orange", - "pink", - "cyan", -]; - -function addPlayerInfo() { +function renderPlayerInputs(count) { const playerInputsDiv = document.getElementById("playerInputs"); - const playerCount = playerInputsDiv.childElementCount / 2 + 1; // Calculate new player count - - // Create player name input - const nameInput = document.createElement("input"); - nameInput.type = "text"; - nameInput.placeholder = `Player ${playerCount} Name`; - nameInput.id = `playerName${playerCount}`; - - // Create color select dropdown - const colorSelect = document.createElement("select"); - colorSelect.id = `playerColor${playerCount}`; - colors.forEach((color) => { - const option = document.createElement("option"); - option.value = color; - option.textContent = color; - colorSelect.appendChild(option); - }); - - // Append inputs to the form - playerInputsDiv.appendChild(nameInput); - playerInputsDiv.appendChild(colorSelect); + playerInputsDiv.innerHTML = ""; // Clear existing inputs + const colors = [ + "pink", + "skyblue", + "lightgreen", + "yellow", + "magenta", + "orange", + ]; + for (let i = 1; i <= count; i++) { + const div = document.createElement("div"); + div.classList.add("player-input"); + div.innerHTML = ` + + + + + + + + + + + + `; + playerInputsDiv.appendChild(div); + } } -document - .getElementById("playerForm") - .addEventListener("submit", function (event) { - event.preventDefault(); - for (let i = 1; i <= players.length; i++) { - const name = document.getElementById(`playerName${i}`).value; - const color = document.getElementById(`playerColor${i}`).value; - players.push({ name, color }); +function validateColors() { + const playersCount = calculate(playersInput, 2, 6); + const selectedColors = new Set(); + for (let i = 1; i <= playersCount; i++) { + const colorSelect = document.getElementById(`playerColor${i}`); + const color = colorSelect.value; + if (selectedColors.has(color)) { + alert( + `Color ${color} is already selected. Please choose a different color.` + ); + colorSelect.value = ""; + } else { + selectedColors.add(color); } - startGame(players); - }); + } +} -function startGame(players) { - // Your game initialization logic here - console.log("Starting game with players:", players); +function savePlayers() { + const playersCount = calculate(playersInput, 2, 6); + const playerData = []; + for (let i = 1; i <= playersCount; i++) { + const name = document.getElementById(`playerName${i}`).value; + const color = document.getElementById(`playerColor${i}`).value; + const filledBoxes = 0; + playerData.push({ name, color, filledBoxes }); + } + console.log(playerData); + localStorage.setItem("playerData", JSON.stringify(playerData)); } // Start the game - -const playBtn = document.getElementById("play-btn"); - playBtn.addEventListener("click", () => { + savePlayers(); + document.getElementById("playerSetup").style.display = "none"; const rows = calculate(rowsInput, 5, 30); const columns = calculate(columnsInput, 5, 30); - const playersCount = calculate(playersInput, 2, 6); + const playersInfo = JSON.parse(localStorage.getItem("playerData")); game = new Game(rows, columns, playersInfo); }); diff --git a/js/index.js b/js/index.js index 552fa5dc..bc9b9d79 100644 --- a/js/index.js +++ b/js/index.js @@ -1,13 +1,13 @@ let rows = document.querySelector("#rows"); let columns = document.querySelector("#columns"); -let players = document.querySelector("#players-count"); +let playersCount = document.querySelector("#players-count"); let startBtn = document.querySelector("#start-btn"); let selectedTheme = 1; startBtn.addEventListener("click", function () { localStorage.setItem("rows", rows.value); localStorage.setItem("columns", columns.value); - localStorage.setItem("players", players.value); + localStorage.setItem("playersCount", playersCount.value); localStorage.setItem("selectedTheme", selectedTheme); }); document.addEventListener("DOMContentLoaded", function () { diff --git a/pages/game.html b/pages/game.html index b0868543..38259154 100644 --- a/pages/game.html +++ b/pages/game.html @@ -33,22 +33,22 @@ margin-top: 20px; } - .button-container button, - .button-container a { - background-color: rgb(0, 166, 255); - color: white; - border: none; - padding: 13px 13px; - font-size: 14px; - cursor: pointer; - border-radius: 50%; - display: flex; - align-items: center; - justify-content: center; - text-decoration: none; - position: relative; - transition: background-color 0.3s ease; - } + .button-container button, + .button-container a { + background-color: rgb(0, 166, 255); + color: white; + border: none; + padding: 13px 13px; + font-size: 14px; + cursor: pointer; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + text-decoration: none; + position: relative; + transition: background-color 0.3s ease; + } .button-container #sound-toggle { background-color: rgb(12, 1, 1); @@ -85,233 +85,246 @@ background-color: rgb(21, 39, 77); } - .button-container [title]:hover::after { - opacity: 1; - } - - .circle { - position: absolute; - width: 25px; - height: 25px; - border-radius: 50%; - pointer-events: none; - background: radial-gradient(circle, rgba(73, 232, 247, 0.466), rgba(141, 38, 172, 0.5)); - transition: transform 0.1s, left 0.1s, top 0.1s; - } - - .circle-container { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - pointer-events: none; - z-index: 99999; - } - - - /* Tour */ - #tour-overlay { - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - background: rgba(0, 0, 0, 0.2); - display: none; - align-items: center; - justify-content: center; - z-index: 10000; - } - - .overlay-content ul { - text-align: left; - margin: 20px 0; - } - - .tour-step { - position: absolute; - display: none; - padding: 20px; - border-radius: 8px; - background: #fff0f5; - color: #000; - width: 314px; - } - - .tour-step.step-1 { - top: 20%; - left: 40%; - margin-top: -268px; - } - - .tour-step.step-2 { - top: 80%; - left: 15%; - margin-top: -16%; - } - - .tour-step.step-3 { - top: 20%; - right: 59%; - margin-top: -32%; - width: 399px; - padding: 20px; - } - - .tour-step.step-4 { - bottom: 30%; - left: 58%; - margin-bottom: -94px; - } - - .tour-step.step-5 { - top: 20%; - left: 34%; - margin-top: -67px; - width: 340px; - } - - .tour-step.step-6 { - top: 20%; - left: 37%; - margin-top: -201px; - width: 392px; - } - - .tour-step.step-7 { - top: 20%; - right: 58%; - margin-top: -31%; - width: 399px; - padding: 20px; - } - - .tour-controls { - position: absolute; - bottom: -40px; - width: 86%; - display: flex; - justify-content: center; - gap: 10px; - } - - .tour-controls .button { - background-color: rgb(0, 166, 255); - color: white; - border: none; - padding: 5px 17px; - border-radius: 4px; - cursor: pointer; - transition: background-color 0.3s ease; - } - - .tour-controls .button:hover { - background-color: rgb(69, 133, 254); - } - - #prev-step { - background-color: rgb(255, 165, 0); - } - - #skip-tour { - background-color: rgb(255, 0, 0); - } - - .overlay-content .button-container { - position: absolute; - bottom: 10px; - width: 100%; - display: flex; - justify-content: center; - gap: 10px; - } - - - @media (max-width : 768px){ - .circle-container{ - display: none; - } - } - - + .button-container [title]:hover::after { + opacity: 1; + } + + .circle { + position: absolute; + width: 25px; + height: 25px; + border-radius: 50%; + pointer-events: none; + background: radial-gradient( + circle, + rgba(73, 232, 247, 0.466), + rgba(141, 38, 172, 0.5) + ); + transition: transform 0.1s, left 0.1s, top 0.1s; + } + + .circle-container { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + pointer-events: none; + z-index: 99999; + } + + /* Tour */ + #tour-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.2); + display: none; + align-items: center; + justify-content: center; + z-index: 10000; + } + + .overlay-content ul { + text-align: left; + margin: 20px 0; + } + + .tour-step { + position: absolute; + display: none; + padding: 20px; + border-radius: 8px; + background: #fff0f5; + color: #000; + width: 314px; + } + + .tour-step.step-1 { + top: 20%; + left: 40%; + margin-top: -268px; + } + + .tour-step.step-2 { + top: 80%; + left: 15%; + margin-top: -16%; + } + + .tour-step.step-3 { + top: 20%; + right: 59%; + margin-top: -32%; + width: 399px; + padding: 20px; + } + + .tour-step.step-4 { + bottom: 30%; + left: 58%; + margin-bottom: -94px; + } + + .tour-step.step-5 { + top: 20%; + left: 34%; + margin-top: -67px; + width: 340px; + } + + .tour-step.step-6 { + top: 20%; + left: 37%; + margin-top: -201px; + width: 392px; + } + + .tour-step.step-7 { + top: 20%; + right: 58%; + margin-top: -31%; + width: 399px; + padding: 20px; + } + + .tour-controls { + position: absolute; + bottom: -40px; + width: 86%; + display: flex; + justify-content: center; + gap: 10px; + } + + .tour-controls .button { + background-color: rgb(0, 166, 255); + color: white; + border: none; + padding: 5px 17px; + border-radius: 4px; + cursor: pointer; + transition: background-color 0.3s ease; + } + + .tour-controls .button:hover { + background-color: rgb(69, 133, 254); + } + + #prev-step { + background-color: rgb(255, 165, 0); + } + + #skip-tour { + background-color: rgb(255, 0, 0); + } + + .overlay-content .button-container { + position: absolute; + bottom: 10px; + width: 100%; + display: flex; + justify-content: center; + gap: 10px; + } + + @media (max-width: 768px) { + .circle-container { + display: none; + } + } + Dots & Boxes Game - -
- - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
@@ -363,157 +368,166 @@ - - - - - - - - - - - - -
-
-
-

Game Tour

-

Welcome to the Dot-box game presented by Chrome Gaming!

Dot-Box is a game where players take - turns drawing lines between dots to create boxes. The player who completes the most boxes wins. It's - a simple yet strategic game enjoyed by people of all ages. Click the "Next" button to start the - tour.

-
- - -
-
- -
-

Step 1

-

This is Game Board! This is where the game is displayed, Play here by connecting the lines.

-
- - - -
-
- -
-

Step 3

-

Here’s where the player’s score is displayed, Keep track of your score as you play the game

-
- - - -
-
- -
-

Step 4

-

Here you can see the player’s turn indicator.

-
- - - -
-
- -
-

Step 5

-

This is the home button. Click to go back to the homepage.

-
- - - -
-
- -
-

Step 6

-

This is the sound toggle button. Click to mute/unmute the sound. Besides it there is a reset/restart - button.

-
- - - -
-
- -
-

Step 6

-

Now you are ready to start the game. Have fun!

-
- - -
-
-
-
- - - - - - - \ No newline at end of file + + + + + + + + + + + +
+
+
+

Game Tour

+

+ Welcome to the Dot-box game presented by Chrome Gaming!

+ Dot-Box is a game where players take turns drawing lines between + dots to create boxes. The player who completes the most boxes wins. + It's a simple yet strategic game enjoyed by people of all ages. + Click the "Next" button to start the tour. +

+
+ + +
+
+ +
+

Step 1

+

+ This is Game Board! This is where the game is displayed, Play here + by connecting the lines. +

+
+ + + +
+
+ +
+

Step 3

+

+ Here’s where the player’s score is displayed, Keep track of your + score as you play the game +

+
+ + + +
+
+ +
+

Step 4

+

Here you can see the player’s turn indicator.

+
+ + + +
+
+ +
+

Step 5

+

This is the home button. Click to go back to the homepage.

+
+ + + +
+
+ +
+

Step 6

+

+ This is the sound toggle button. Click to mute/unmute the sound. + Besides it there is a reset/restart button. +

+
+ + + +
+
+ +
+

Step 6

+

Now you are ready to start the game. Have fun!

+
+ + +
+
+
+
+ + + + + diff --git a/styles/game.style.css b/styles/game.style.css index 645ba95b..d7672787 100644 --- a/styles/game.style.css +++ b/styles/game.style.css @@ -280,3 +280,17 @@ body { min-height: 100%; z-index: -1; } + +#playerSetup { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.8); + z-index: 30; +} From b624108fd33ea8e7465750c5ecf318e134122c2a Mon Sep 17 00:00:00 2001 From: Harshil Gupta Date: Fri, 26 Jul 2024 16:40:06 +0530 Subject: [PATCH 3/9] merge resolve --- pages/game.html | 1721 +++++++++++++++++++++-------------------- styles/game.style.css | 9 +- 2 files changed, 871 insertions(+), 859 deletions(-) diff --git a/pages/game.html b/pages/game.html index 5d6ade7c..4f283631 100644 --- a/pages/game.html +++ b/pages/game.html @@ -1,8 +1,8 @@ - - - + + + @@ -14,617 +14,617 @@ - - - - + + + Dots & Boxes Game + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + animateCircles(); + }); +