From 05c1ed26a8298440cc8b45b1525b5e4b1c41fa47 Mon Sep 17 00:00:00 2001 From: partha120804 <138643473+partha120804@users.noreply.github.com> Date: Tue, 2 Jul 2024 14:04:06 +0530 Subject: [PATCH 1/7] reordered --- favicon.ico => assets/favicon.ico | Bin {img => assets/images}/404pic.png | Bin Screenshot.png => assets/images/Screenshot.png | Bin assets/{ => images}/emoji-1.png | Bin assets/{ => images}/emoji-2.png | Bin assets/{ => images}/emoji-3.png | Bin assets/{ => images}/emoji-4.png | Bin assets/{ => images}/emoji-5.png | Bin package-lock.json => assets/package-lock.json | 0 {sounds => assets/sounds}/bgMusic.mp3 | Bin {sounds => assets/sounds}/click.mp3 | Bin {sounds => assets/sounds}/fill.mp3 | Bin {sounds => assets/sounds}/win.mp3 | Bin assets/{ => videos}/2.mp4 | Bin assets/{ => videos}/3.mp4 | Bin assets/{ => videos}/Dot Box Tutorial.mp4 | Bin assets/{ => videos}/FAQ.mp4 | Bin assets/{ => videos}/default.mp4 | Bin index.html | 9 ++++----- emoji.js => js/emoji.js | 0 game.js => js/maingame.js | 0 script.js => js/script.js | 0 404.html => pages/404.html | 0 FAQs.html => pages/FAQs.html | 0 about.html => pages/about.html | 0 contributors.html => pages/contributors.html | 0 game.html => pages/game.html | 0 howtoplay.html => pages/howtoplay.html | 0 privacypolicy.html => pages/privacypolicy.html | 0 termsofservice.html => pages/termsofservice.html | 0 FAQs.css => styles/FAQs.css | 0 about.css => styles/about.css | 0 style.css => styles/mainstyle.css | 0 33 files changed, 4 insertions(+), 5 deletions(-) rename favicon.ico => assets/favicon.ico (100%) rename {img => assets/images}/404pic.png (100%) rename Screenshot.png => assets/images/Screenshot.png (100%) rename assets/{ => images}/emoji-1.png (100%) rename assets/{ => images}/emoji-2.png (100%) rename assets/{ => images}/emoji-3.png (100%) rename assets/{ => images}/emoji-4.png (100%) rename assets/{ => images}/emoji-5.png (100%) rename package-lock.json => assets/package-lock.json (100%) rename {sounds => assets/sounds}/bgMusic.mp3 (100%) rename {sounds => assets/sounds}/click.mp3 (100%) rename {sounds => assets/sounds}/fill.mp3 (100%) rename {sounds => assets/sounds}/win.mp3 (100%) rename assets/{ => videos}/2.mp4 (100%) rename assets/{ => videos}/3.mp4 (100%) rename assets/{ => videos}/Dot Box Tutorial.mp4 (100%) rename assets/{ => videos}/FAQ.mp4 (100%) rename assets/{ => videos}/default.mp4 (100%) rename emoji.js => js/emoji.js (100%) rename game.js => js/maingame.js (100%) rename script.js => js/script.js (100%) rename 404.html => pages/404.html (100%) rename FAQs.html => pages/FAQs.html (100%) rename about.html => pages/about.html (100%) rename contributors.html => pages/contributors.html (100%) rename game.html => pages/game.html (100%) rename howtoplay.html => pages/howtoplay.html (100%) rename privacypolicy.html => pages/privacypolicy.html (100%) rename termsofservice.html => pages/termsofservice.html (100%) rename FAQs.css => styles/FAQs.css (100%) rename about.css => styles/about.css (100%) rename style.css => styles/mainstyle.css (100%) diff --git a/favicon.ico b/assets/favicon.ico similarity index 100% rename from favicon.ico rename to assets/favicon.ico diff --git a/img/404pic.png b/assets/images/404pic.png similarity index 100% rename from img/404pic.png rename to assets/images/404pic.png diff --git a/Screenshot.png b/assets/images/Screenshot.png similarity index 100% rename from Screenshot.png rename to assets/images/Screenshot.png diff --git a/assets/emoji-1.png b/assets/images/emoji-1.png similarity index 100% rename from assets/emoji-1.png rename to assets/images/emoji-1.png diff --git a/assets/emoji-2.png b/assets/images/emoji-2.png similarity index 100% rename from assets/emoji-2.png rename to assets/images/emoji-2.png diff --git a/assets/emoji-3.png b/assets/images/emoji-3.png similarity index 100% rename from assets/emoji-3.png rename to assets/images/emoji-3.png diff --git a/assets/emoji-4.png b/assets/images/emoji-4.png similarity index 100% rename from assets/emoji-4.png rename to assets/images/emoji-4.png diff --git a/assets/emoji-5.png b/assets/images/emoji-5.png similarity index 100% rename from assets/emoji-5.png rename to assets/images/emoji-5.png diff --git a/package-lock.json b/assets/package-lock.json similarity index 100% rename from package-lock.json rename to assets/package-lock.json diff --git a/sounds/bgMusic.mp3 b/assets/sounds/bgMusic.mp3 similarity index 100% rename from sounds/bgMusic.mp3 rename to assets/sounds/bgMusic.mp3 diff --git a/sounds/click.mp3 b/assets/sounds/click.mp3 similarity index 100% rename from sounds/click.mp3 rename to assets/sounds/click.mp3 diff --git a/sounds/fill.mp3 b/assets/sounds/fill.mp3 similarity index 100% rename from sounds/fill.mp3 rename to assets/sounds/fill.mp3 diff --git a/sounds/win.mp3 b/assets/sounds/win.mp3 similarity index 100% rename from sounds/win.mp3 rename to assets/sounds/win.mp3 diff --git a/assets/2.mp4 b/assets/videos/2.mp4 similarity index 100% rename from assets/2.mp4 rename to assets/videos/2.mp4 diff --git a/assets/3.mp4 b/assets/videos/3.mp4 similarity index 100% rename from assets/3.mp4 rename to assets/videos/3.mp4 diff --git a/assets/Dot Box Tutorial.mp4 b/assets/videos/Dot Box Tutorial.mp4 similarity index 100% rename from assets/Dot Box Tutorial.mp4 rename to assets/videos/Dot Box Tutorial.mp4 diff --git a/assets/FAQ.mp4 b/assets/videos/FAQ.mp4 similarity index 100% rename from assets/FAQ.mp4 rename to assets/videos/FAQ.mp4 diff --git a/assets/default.mp4 b/assets/videos/default.mp4 similarity index 100% rename from assets/default.mp4 rename to assets/videos/default.mp4 diff --git a/index.html b/index.html index 02ebaac..a57051f 100644 --- a/index.html +++ b/index.html @@ -4,23 +4,22 @@ - - - + + + - + - con" href="./favicon.ico" type="image/x-icon"> Dots & Boxes Game
- 404 pic - + 404 pic +
\ No newline at end of file diff --git a/pages/FAQs.html b/pages/FAQs.html index bdcb613..835a671 100644 --- a/pages/FAQs.html +++ b/pages/FAQs.html @@ -4,8 +4,8 @@ - - + + FAQs @@ -20,18 +20,18 @@
-

FAQs

+

FAQs

- How do I win the game? + How do I win the game?

The objective is to capture more boxes than your opponent. Each box you complete by drawing lines between adjacent dots scores you a point. The player with the most points when all boxes are claimed wins the game.

@@ -40,7 +40,7 @@

FAQs

- How do I set up the game? + How do I set up the game?

Choose your desired grid size to customize the game's difficulty. Start by connecting the dots on the grid, taking turns with your opponent.

@@ -49,7 +49,7 @@

FAQs

- What happens if I complete a box? + What happens if I complete a box?

Completing a box by drawing its final line scores you a point and grants you an extra turn. This strategic element adds depth to gameplay. @@ -59,7 +59,7 @@

FAQs

- When does the game end? + When does the game end?

The game ends when all boxes on the grid have been claimed by drawing lines. At this point, the player with the highest score, based on the number of boxes captured, wins.

@@ -67,7 +67,7 @@

FAQs

- Is there a strategy involved in playing this game? + Is there a strategy involved in playing this game?

Yes, strategic line selection is crucial. Thinking ahead to maximize the number of boxes you can capture while preventing your opponent from doing the same is key to winning. @@ -77,7 +77,7 @@

FAQs

- What if I need help or have more questions about gameplay? + What if I need help or have more questions about gameplay?

If you have any more questions or need assistance with the rules, feel free to refer to the instructions or ask your opponent for clarification.You can also add suggestions in Feedback Form.Enjoy the game! @@ -88,7 +88,7 @@

FAQs

- + \ No newline at end of file diff --git a/pages/about.html b/pages/about.html index 8b5f1e9..9253b27 100644 --- a/pages/about.html +++ b/pages/about.html @@ -5,7 +5,7 @@ About Us - + @@ -16,14 +16,14 @@
From 15598bbe681f7676e6eaef6642d9776f89d8c509 Mon Sep 17 00:00:00 2001 From: partha120804 <138643473+partha120804@users.noreply.github.com> Date: Tue, 2 Jul 2024 15:04:20 +0530 Subject: [PATCH 5/7] managed the inline css and built separate css files for 3 pages --- js/{script.js => FAQs.js} | 16 ++--- pages/game.html | 16 ++--- pages/howtoplay.html | 133 ++++---------------------------------- styles/howtoplay.css | 109 +++++++++++++++++++++++++++++++ styles/privacypolicy.css | 82 +++++++++++++++++++++++ styles/termsofservice.css | 82 +++++++++++++++++++++++ 6 files changed, 300 insertions(+), 138 deletions(-) rename js/{script.js => FAQs.js} (68%) create mode 100644 styles/howtoplay.css create mode 100644 styles/privacypolicy.css create mode 100644 styles/termsofservice.css diff --git a/js/script.js b/js/FAQs.js similarity index 68% rename from js/script.js rename to js/FAQs.js index 9c749b1..7318d57 100644 --- a/js/script.js +++ b/js/FAQs.js @@ -17,11 +17,11 @@ drop.addEventListener('click', function(){ toggle= !toggle; if(toggle) { - img.src="assets/images/icon-plus.svg"; + img.src="../assets/images/icon-plus.svg"; } else { - img.src="assets/images/icon-minus.svg" + img.src="../assets/images/icon-minus.svg" } }) @@ -29,11 +29,11 @@ drop2.addEventListener('click', function(){ toggle= !toggle; if(toggle) { - img2.src="assets/images/icon-plus.svg"; + img2.src="../assets/images/icon-plus.svg"; } else { - img2.src="assets/images/icon-minus.svg" + img2.src="../assets/images/icon-minus.svg" } }) @@ -41,11 +41,11 @@ drop3.addEventListener('click', function(){ toggle= !toggle; if(toggle) { - img3.src="assets/images/icon-plus.svg"; + img3.src="../assets/images/icon-plus.svg"; } else { - img3.src="assets/images/icon-minus.svg" + img3.src="../assets/images/icon-minus.svg" } }) @@ -53,10 +53,10 @@ drop4.addEventListener('click', function(){ toggle= !toggle; if(toggle) { - img4.src="assets/images/icon-plus.svg"; + img4.src="../assets/images/icon-plus.svg"; } else { - img4.src="assets/images/icon-minus.svg" + img4.src="../assets/images/icon-minus.svg" } }) \ No newline at end of file diff --git a/pages/game.html b/pages/game.html index 57f733d..3a2bb24 100644 --- a/pages/game.html +++ b/pages/game.html @@ -6,18 +6,18 @@ - - + + - - - - + + + + - - + + Dots & Boxes Game diff --git a/pages/howtoplay.html b/pages/howtoplay.html index d4767b3..d895fbf 100644 --- a/pages/howtoplay.html +++ b/pages/howtoplay.html @@ -5,139 +5,28 @@ How to Play - Dot Box - + + - -
diff --git a/styles/howtoplay.css b/styles/howtoplay.css new file mode 100644 index 0000000..5fb4514 --- /dev/null +++ b/styles/howtoplay.css @@ -0,0 +1,109 @@ +body { + font-family: 'Helvetica Neue', Arial, sans-serif; + background-color: #f0f0f0; + margin: 0; + padding: 0; + color: #333; + overflow-x: hidden; +} + +.instructions-container { + display: flex; + flex-direction: column; + justify-content: center; + max-width: 55%; + margin: auto; + padding: 20px; + background: linear-gradient(to top, rgba(255, 184, 4, 0.78), white); + border-radius: 10px; + box-shadow: 0px 5px 15px rgba(6, 6, 6, 0.829); + text-align: left; + line-height: 1.6; + padding-bottom: 100px; +} + +.instructions-container h1 { + margin-bottom: 20px; + color: #25254a; + font-size: 28px; +} + +.instructions-container p, +.instructions-container li { + margin-bottom: 15px; + list-style-type: none; +} + +.instructions-container ol { + padding-left: 10px; + +} + +.instructions-container ol strong { + font-weight: 800; + font-size: large; +} + +.back-btn { + margin-top: 10px; + padding: 14px 20px; + background: rgb(37, 37, 74); + color: #fff; + text-align: center; + border-radius: 5px; + text-decoration: none; + font-weight: bold; + width: 90%; + align-self: center; +} + +.back-btn:hover { + background: #1a1a2f; +} + +@media (max-width: 767px) { + .instructions-container { + max-width: 90%; + padding: 15px 25px; + line-height: 1.5; + } +} + +.tutorial-video { + display: flex; + justify-content: center; + align-items: center; + margin: 20px 0; + border-radius: 10px; +} + +.tutorial-video video { + width: 70%; + border-radius: 10px; +} + +.nav-links { + letter-spacing: 4px; + display: flex; + justify-content: space-between; + align-items: center; + list-style: none; + width: 50%; + padding: 0; + color: white; + font-family: inherit; +} + +.nav-links li a, +.logo a { + color: white; +} + +button a { + background-color: transparent; +} + +.start { + padding: 10px 5px; + border-radius: 5px; +} \ No newline at end of file diff --git a/styles/privacypolicy.css b/styles/privacypolicy.css new file mode 100644 index 0000000..db30605 --- /dev/null +++ b/styles/privacypolicy.css @@ -0,0 +1,82 @@ +body { + font-family: 'Helvetica Neue', Arial, sans-serif; + background-color: #f0f0f0; + margin: 0; + padding: 0; + color: #333; + overflow-x: hidden; +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + max-width: 55%; + margin: auto; + padding: 20px; + background: linear-gradient(to top, rgba(255, 184, 4, 0.78), white); + border-radius: 10px; + box-shadow: 0px 5px 15px rgba(6, 6, 6, 0.829); + text-align: left; + line-height: 1.8; + padding-bottom: 50px; +} + +.header { + text-align: center; + margin-bottom: 20px; +} + +.title { + color: #25254a; + font-size: 36px; + +} + +.main-content { + text-align: left; +} + +.section { + margin-bottom: 20px; +} + +.section-title { + color: #25254a; + font-size: 24px; + margin-bottom: 10px; +} + +.section-content, +.list-item { + margin-bottom: 15px; +} + +.section-list { + padding-left: 20px; +} + +.back-btn { + margin-top: 30px; + padding: 10px 180px; + background: rgb(37, 37, 74); + color: #fff; + text-align: center; + margin-left: 180px; + border-radius: 5px; + width: 55%; + text-decoration: none; + font-weight: bold; +} + +.back-btn:hover { + background: #1a1a2f; +} + +@media (max-width: 767px) { + .container { + max-width: 90%; + padding: 15px 20px; + line-height: 1.5; + } +} \ No newline at end of file diff --git a/styles/termsofservice.css b/styles/termsofservice.css new file mode 100644 index 0000000..b8b6477 --- /dev/null +++ b/styles/termsofservice.css @@ -0,0 +1,82 @@ +body { + font-family: 'Helvetica Neue', Arial, sans-serif; + background-color: #f0f0f0; + margin: 0; + padding: 0; + color: #333; + overflow-x: hidden; +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + max-width: 55%; + margin: auto; + padding: 20px; + background: linear-gradient(to top, rgba(255, 184, 4, 0.78), white); + border-radius: 10px; + box-shadow: 0px 5px 15px rgba(6, 6, 6, 0.829); + text-align: left; + line-height: 1.8; + padding-bottom: 50px; +} + +.header { + text-align: center; + margin-bottom: 20px; +} + +.title { + color: #25254a; + font-size: 37px; +} + +.main-content { + text-align: left; +} + +.section { + margin-bottom: 20px; +} + +.section-title { + color: #25254a; + font-size: 24px; + margin-bottom: 10px; +} + +.section-content, +.list-item { + margin-bottom: 15px; +} + +.section-list { + padding-left: 20px; +} + +.back-btn { + margin-top: 30px; + padding: 10px 180px; + background: rgb(37, 37, 74); + color: #fff; + text-align: center; + margin-left: 180px; + border-radius: 5px; + width: 55%; + text-decoration: none; + font-weight: bold; + align-self: center; +} + +.back-btn:hover { + background: #1a1a2f; +} + +@media (max-width: 767px) { + .container { + max-width: 90%; + padding: 15px 20px; + line-height: 1.5; + } +} \ No newline at end of file From 7eab18f09485feb911625306de483526bc8bf1d7 Mon Sep 17 00:00:00 2001 From: partha120804 <138643473+partha120804@users.noreply.github.com> Date: Tue, 2 Jul 2024 15:11:51 +0530 Subject: [PATCH 6/7] all references are handled --- js/board.js | 4 ++-- js/game.js | 2 +- js/maingame.js | 2 +- styles/FAQs.css | 19 ++----------------- styles/mainstyle.css | 1 + 5 files changed, 7 insertions(+), 21 deletions(-) diff --git a/js/board.js b/js/board.js index 09775ad..01669d9 100644 --- a/js/board.js +++ b/js/board.js @@ -44,7 +44,7 @@ class Board { // addEdgeClickEventListener() { this.uiRoot.addEventListener("click", (e) => { - let click = new Audio('./sounds/click.mp3'); + let click = new Audio('../assets/sounds/click.mp3'); click.play(); if (!this.isFillingAdjacentBoxes) { if (e.target.classList.contains("edge")) { @@ -191,7 +191,7 @@ class Board { } fillBoxes() { - let fill = new Audio('./sounds/fill.mp3'); + let fill = new Audio('../assets/sounds/fill.mp3'); fill.play(); if (this.adjacentBoxesToFill.length != 0) { setTimeout(() => { diff --git a/js/game.js b/js/game.js index 7bf2a59..db64f55 100644 --- a/js/game.js +++ b/js/game.js @@ -166,7 +166,7 @@ class Game { const rowsInput = Number(localStorage.getItem("rows")); const columnsInput = Number(localStorage.getItem("columns")); const playersInput = Number(localStorage.getItem("players")); -const bgMusic = new Audio('./sounds/bgMusic.mp3'); +const bgMusic = new Audio('../assets/sounds/bgMusic.mp3'); var game = null document.addEventListener("DOMContentLoaded", () => { diff --git a/js/maingame.js b/js/maingame.js index 69799e4..b610346 100644 --- a/js/maingame.js +++ b/js/maingame.js @@ -50,7 +50,7 @@ class Game { this.isGameover = true bgMusic.pause(); - let winSound = new Audio('./sounds/win.mp3'); + let winSound = new Audio('../assets/sounds/win.mp3'); winSound.play(); const player = this.players.reduce((prev, current) => { diff --git a/styles/FAQs.css b/styles/FAQs.css index dc8cee0..11b3f5c 100644 --- a/styles/FAQs.css +++ b/styles/FAQs.css @@ -1,20 +1,5 @@ -@font-face { - font-family: WorkSans-Bold; - src: url(assets/fonts/static/WorkSans-Bold.ttf) format("truetype"); -} - -@font-face { - font-family: WorkSans-Regular; - src: url(assets/fonts/static/WorkSans-Regular.ttf) format("truetype"); -} - -@font-face { - font-family: WorkSans-SemiBold; - src: url(assets/fonts/static/WorkSans-SemiBold.ttf) format("truetype"); -} - body { - background-image: url("assets/images/background-pattern-desktop.svg"); + background-image: url("../assets/images/background-pattern-desktop.svg"); background-repeat: no-repeat; background-size: cover; background-color:rgb(223, 238, 247); @@ -101,7 +86,7 @@ h1 { left: 0%; width: 100%; height: 100%; /* Adjust height as needed */ - background-image: url("assets/FAQ.mp4"); /* Your moving background image */ + background-image: url("../assets/videos/FAQ.mp4"); /* Your moving background image */ background-size: cover; background-repeat: no-repeat; z-index: -1; /* Ensure it stays behind other content */ diff --git a/styles/mainstyle.css b/styles/mainstyle.css index 4a30921..615b7c8 100644 --- a/styles/mainstyle.css +++ b/styles/mainstyle.css @@ -671,6 +671,7 @@ input::-webkit-inner-spin-button { input[type="number"] { -moz-appearance: textfield; + appearance: textfield; } .button { From 260f11e076b442d24a84e3be675a7a411bb1179e Mon Sep 17 00:00:00 2001 From: partha120804 <138643473+partha120804@users.noreply.github.com> Date: Tue, 2 Jul 2024 15:21:33 +0530 Subject: [PATCH 7/7] commented a extra code --- styles/FAQs.css | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/styles/FAQs.css b/styles/FAQs.css index 11b3f5c..a4cd3cb 100644 --- a/styles/FAQs.css +++ b/styles/FAQs.css @@ -1,3 +1,24 @@ +/* + +// Commenting out this portion as there is no font folder in this codebase and this part is hence not applicable + +@font-face { + font-family: WorkSans-Bold; + src: url(../assets/fonts/static/WorkSans-Bold.ttf) format("truetype"); +} + +@font-face { + font-family: WorkSans-Regular; + src: url(../assets/fonts/static/WorkSans-Regular.ttf) format("truetype"); +} + +@font-face { + font-family: WorkSans-SemiBold; + src: url(../assets/fonts/static/WorkSans-SemiBold.ttf) format("truetype"); +} + +*/ + body { background-image: url("../assets/images/background-pattern-desktop.svg"); background-repeat: no-repeat;