diff --git a/background/README.md b/background/README.md new file mode 100644 index 0000000..a3fce1c --- /dev/null +++ b/background/README.md @@ -0,0 +1 @@ +This folder contains all the backgroud video themes used in this project. diff --git a/background/back.mp4 b/background/back.mp4 new file mode 100644 index 0000000..4a51806 Binary files /dev/null and b/background/back.mp4 differ diff --git a/background/back2.mp4 b/background/back2.mp4 new file mode 100644 index 0000000..6ae443f Binary files /dev/null and b/background/back2.mp4 differ diff --git a/background/back3.mp4 b/background/back3.mp4 new file mode 100644 index 0000000..343bc22 Binary files /dev/null and b/background/back3.mp4 differ diff --git a/background/back4.mp4 b/background/back4.mp4 new file mode 100644 index 0000000..07b6d7d Binary files /dev/null and b/background/back4.mp4 differ diff --git a/background/back5.mp4 b/background/back5.mp4 new file mode 100644 index 0000000..ec64a0e Binary files /dev/null and b/background/back5.mp4 differ diff --git a/index.html b/index.html index ad088a7..0ca6868 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + @@ -14,6 +15,7 @@ + @@ -30,6 +32,7 @@
+

▁ ▂ ▄ ▅ ▆ ▇ █ MAXIMISE BOXES!! █ ▇ ▆ ▅ ▄ ▂ ▁ @@ -37,7 +40,8 @@

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 @@ -45,33 +49,35 @@

+
-

What size of Board do you want? :

+

What size of Board do you want? :

- +
- +
- +
- +

@@ -86,11 +92,22 @@

What size of Board do you want? :

+
+ + + + - \ No newline at end of file diff --git a/js/game.js b/js/game.js index a13d21b..1d4e593 100644 --- a/js/game.js +++ b/js/game.js @@ -199,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) { diff --git a/js/theme.js b/js/theme.js new file mode 100644 index 0000000..d518726 --- /dev/null +++ b/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'); + } + }); + } +}); diff --git a/style.css b/style.css index e46821c..fd72280 100644 --- a/style.css +++ b/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 { diff --git a/theme.css b/theme.css new file mode 100644 index 0000000..6cca67a --- /dev/null +++ b/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); +}