diff --git a/assets/js/gamesData.json b/assets/js/gamesData.json index 9fd6705e79..d01de691d6 100644 --- a/assets/js/gamesData.json +++ b/assets/js/gamesData.json @@ -587,7 +587,7 @@ }, "116": { "gameTitle": "3d Box", - "gameUrl": "3d_Box Game", + "gameUrl": "3d_Box_Game", "thumbnailUrl": "3d_Box.webp" }, "117": { @@ -1585,12 +1585,12 @@ "gameUrl": "Lady_Tiger_Hunter", "thumbnailUrl": "" }, - "316": { + "316": { "gameTitle": "Stone Paper Scissor", "gameUrl": "Stone_Paper_Scissor", "thumbnailUrl": "favicon.webp" }, - + "317": { "gameTitle": "Flashlight Pointer Game", "gameUrl": "Flashlight_Pointer_Game", @@ -1940,192 +1940,164 @@ "gameTitle": "Bulls_and_Cows", "gameUrl": "Bulls_and_Cows", "thumbnailUrl": "bulls-and-cows.png" - }, - "387":{ - + "387": { "gameTitle": "Earth_Guardian", "gameUrl": "Earth_Guardian", "thumbnailUrl": "Earth_Guardian.png" }, - "388":{ - - "gameTitle" : "Technical_Mind_Game", - "gameUrl" : "Technical_Mind_Game", - "thumbnailUrl" : "Technical_Mind_Game.png" -}, - "389":{ + "388": { + "gameTitle": "Technical_Mind_Game", + "gameUrl": "Technical_Mind_Game", + "thumbnailUrl": "Technical_Mind_Game.png" + }, + "389": { "gameTitle": "Memory Cards Game", "gameUrl": "Memory_Cards_Game", "thumbnailUrl": "Memory_Cards_Game.png" }, - "390":{ + "390": { "gameTitle": "escaperoom", "gameUrl": "escaperoom", "thumbnailUrl": "escaperoom.png" }, - "391":{ + "391": { "gameTitle": "Dice Roller", "gameUrl": "Dice_Roller", "thumbnailUrl": "Dice_Roller.png" - }, - "392":{ + "392": { "gameTitle": "Dragon Tower", "gameUrl": "Dragon_Tower", "thumbnailUrl": "Dragon_Tower.png" }, - "412":{ - - "gameTitle": "Chrome_Dino_Game", + "393": { + "gameTitle": "Chrome_Dino_Game", "gameUrl": "Chrome_Dino_Game", "thumbnailUrl": "Chrome_Dino_Game.png" - - }, - "394":{ - "gameTitle": "path finder puzzle", - "gameUrl": "path_finder", - "thumbnailUrl": "pathfinder.png" + "394": { + "gameTitle": "path finder puzzle", + "gameUrl": "path_finder", + "thumbnailUrl": "pathfinder.png" }, - "401":{ - + "395": { "gameTitle": "Chess.com", - "gameUrl": "Chess.com", - "thumbnailUrl": "Chess.com.jpg" - - - }, - "399":{ - + "gameUrl": "Chess.com", + "thumbnailUrl": "Chess.com.jpg" + }, + "396": { "gameTitle": "Brick_and_Ball", "gameUrl": "Brick_and_Ball", "thumbnailUrl": "Brick_and_Ball.png" - }, -"413":{ - + "397": { "gameTitle": "Dot Connect", "gameUrl": "Dot_Connect", "thumbnailUrl": "Dot_Connect.png" + }, -}, - -"396":{ - "gameTitle": "path finder puzzle", - "gameUrl": "path_finder", - "thumbnailUrl": "pathfinder.png" -}, -"414":{ - "gameTitle": "NameFate", - "gameUrl": "namefate", - "thumbnailUrl": "namefate.png" -} -, -"500":{ - "gameTitle": "Menja block breaker", - "gameUrl": "Menja_block_breaker", - "thumbnailUrl": "menja_Block_breaker.png" -}, -"393":{ - - "gameTitle": "Pop My Balloon", - "gameUrl": "Pop_My_Balloon", - "thumbnailUrl": "Pop_My_Balloon.png" - -}, -"397":{ - "gameTitle": "Tower Stack", - "gameUrl": "Tower_Stack", - "thumbnailUrl": "Tower_Stack.png" - -}, -"395":{ - - "gameTitle": "Virtual Pet Game", - "gameUrl": "Virtual_Pet_Game", - "thumbnailUrl": "Virtual_Pet_Game.png" - - "gameTitle": "path finder puzzle", - "gameUrl": "path_finder", - "thumbnailUrl": "pathfinder.png" -}, -"411":{ "gameTitle": "Tiny Fishing", -"gameUrl": "Tiny_Fishing", -"thumbnailUrl": "Tiny_Fishing.png" -}, -"398":{ -"410":{ - "gameTitle": "Shrek Vs Wild", - "gameUrl": "Shrek_Vs_Wild", - "thumbnailUrl": "Shrek_Vs_Wild.png" -}, -"409":{ - "gameTitle": "Hover_Board_Effect", - "gameUrl": "Hover_Board_Effect", - "thumbnailUrl": "Hover_Board_Effect.png" -}, -"405":{ - "gameTitle": "Candy_Crush_Saga", - "gameUrl": "Candy_Crush_Saga", - "thumbnailUrl": "Candy_Crush_Saga.png" -},"419":{ - - "gameTitle": "16_Puzzle", - "gameUrl": "16_Puzzle", - "thumbnailUrl": "16_Puzzle.png" -}, -"420":{ - "gameTitle" : "Colour_Generator_Game", - "gameUrl": "Colour_Generator_Game", - "thumbnailUrl": "Colour_Generator_Game.png" - }, -"406":{ - "gameTitle": "Knife_hit", - "gameUrl": "Knife_hit", - "thumbnailUrl": "Knife_hit.png" -},"415":{ - "gameTitle": "Anagram_Checker_Game", - "gameUrl": "Anagram_Checker_Game", - "thumbnailUrl": "Anagram_Checker_Game.png" - -}, -"407":{ - "gameTitle": "Screen_Pet_Game", - "gameUrl": "Screen_Pet_Game", - "thumbnailUrl": "Screen_Pet_Game.png" - -},"416":{ - "gameTitle": "Guess_The_Song", - "gameUrl": "Guess_The_Song", - "thumbnailUrl": "Guess_The_Song.png" + "398": { + "gameTitle": "path finder puzzle", + "gameUrl": "path_finder", + "thumbnailUrl": "pathfinder.png" + }, + "399": { + "gameTitle": "NameFate", + "gameUrl": "namefate", + "thumbnailUrl": "namefate.png" + }, + "400": { + "gameTitle": "Menja block breaker", + "gameUrl": "Menja_block_breaker", + "thumbnailUrl": "menja_Block_breaker.png" + }, + "401": { + "gameTitle": "Pop My Balloon", + "gameUrl": "Pop_My_Balloon", + "thumbnailUrl": "Pop_My_Balloon.png" + }, + "402": { + "gameTitle": "Tower Stack", + "gameUrl": "Tower_Stack", + "thumbnailUrl": "Tower_Stack.png" + }, + "403": { + "gameTitle": "Virtual Pet Game", + "gameUrl": "Virtual_Pet_Game", + "thumbnailUrl": "Virtual_Pet_Game.png" + }, + "404": { + "gameTitle": "Tiny Fishing", + "gameUrl": "Tiny_Fishing", + "thumbnailUrl": "Tiny_Fishing.png" + }, + "405": { + "gameTitle": "Shrek Vs Wild", + "gameUrl": "Shrek_Vs_Wild", + "thumbnailUrl": "Shrek_Vs_Wild.png" + }, + "406": { + "gameTitle": "Hover_Board_Effect", + "gameUrl": "Hover_Board_Effect", + "thumbnailUrl": "Hover_Board_Effect.png" + }, + "407": { + "gameTitle": "Candy_Crush_Saga", + "gameUrl": "Candy_Crush_Saga", + "thumbnailUrl": "Candy_Crush_Saga.png" + }, + "408": { + "gameTitle": "16_Puzzle", + "gameUrl": "16_Puzzle", + "thumbnailUrl": "16_Puzzle.png" + }, + "409": { + "gameTitle": "Colour_Generator_Game", + "gameUrl": "Colour_Generator_Game", + "thumbnailUrl": "Colour_Generator_Game.png" + }, + "410": { + "gameTitle": "Knife_hit", + "gameUrl": "Knife_hit", + "thumbnailUrl": "Knife_hit.png" + }, + "411": { + "gameTitle": "Anagram_Checker_Game", + "gameUrl": "Anagram_Checker_Game", + "thumbnailUrl": "Anagram_Checker_Game.png" + }, + "412": { + "gameTitle": "Screen_Pet_Game", + "gameUrl": "Screen_Pet_Game", + "thumbnailUrl": "Screen_Pet_Game.png" + }, + "413": { + "gameTitle": "Guess_The_Song", + "gameUrl": "Guess_The_Song", + "thumbnailUrl": "Guess_The_Song.png" + }, + "414": { + "gameTitle": "Brick Buster", + "gameUrl": "Brick Buster", + "thumbnailUrl": "Brick.png" + }, + "415": { + "gameTitle": "Soccer", + "gameUrl": "Soccer", + "thumbnailUrl": "Soccer" + }, + "416": { + "gameTitle": "Pen_Pointer_Fight", + "gameUrl": "PenPointerFight", + "thumbnailUrl": "PenPointerFight.png" + }, + "417": { + "gameTitle": "MathQuiz", + "gameUrl": "MathQuiz", + "thumbnailUrl": "MathQuiz.png" } -},"408":{ - "gameTitle": "Brick Buster", - "gameUrl": "Brick Buster", - "thumbnailUrl": "Brick.png" - }, - "417":{ - "gameTitle": "Ball in Maze", - "gameUrl": "Ball_in_Maze", - "thumbnailUrl": "Ball_in_Maze.png" - }, - "409":{ - "gameTitle": "Soccer", - "gameUrl": "Soccer", - "thumbnailUrl": "Soccer" -}, -"409":{"gameTitle": "Pen_Pointer_Fight", -"gameUrl": "PenPointerFight", -"thumbnailUrl": "PenPointerFight.png" -}, -"418":{ -"gameTitle": "MathQuiz", -"gameUrl": "MathQuiz", -"thumbnailUrl": "MathQuiz.png" -} - } diff --git a/assets/js/index.js b/assets/js/index.js index 6bf16f73ff..482dee0c76 100644 --- a/assets/js/index.js +++ b/assets/js/index.js @@ -4,7 +4,7 @@ const generateLiTags = (gamesData, searchText = "") => { const liTags = []; searchText = searchText.trim().toLowerCase(); // Trim whitespace and convert to lowercase - for (let tagNumber = 1; tagNumber <= 418; tagNumber++) { + for (let tagNumber = 1; tagNumber <= 417; tagNumber++) { const gameData = gamesData[tagNumber.toString()]; if (gameData) { @@ -22,7 +22,9 @@ const generateLiTags = (gamesData, searchText = "") => {
${tagNumber}. ${gameTitle} 🔗 - +
@@ -163,9 +165,8 @@ document.addEventListener("DOMContentLoaded", () => { function like(button, tagNumber, gameData) { button.classList.toggle("liked"); const isLiked = button.classList.contains("liked"); - + // Store both liked state and game data in localStorage localStorage.setItem(`liked-${tagNumber}`, isLiked); localStorage.setItem(`game-${tagNumber}`, JSON.stringify(gameData)); } - diff --git a/assets/js/script.js b/assets/js/script.js index 1ab605cb4e..51b7560143 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -1,103 +1,101 @@ -'use strict'; +"use strict"; // Pagination in games section // Variable for Active Page let pageActive = 0; -const previousPageTile = document.getElementById('prev-page-tile'); -const nextPageTile = document.getElementById('next-page-tile'); +const previousPageTile = document.getElementById("prev-page-tile"); +const nextPageTile = document.getElementById("next-page-tile"); function getPageNumbers() { - const pagination_section = document.querySelector('.pagination_section'); - const games = document.querySelectorAll('.project-item'); + const pagination_section = document.querySelector(".pagination_section"); + const games = document.querySelectorAll(".project-item"); pagination_section.innerHTML = ""; - for (let i = 0; i < games.length; i+=20){ - const child = document.createElement('div'); - if (i == 0){ - child.innerHTML = `
${i/20 + 1}
` + for (let i = 0; i < games.length; i += 20) { + const child = document.createElement("div"); + if (i == 0) { + child.innerHTML = `
${ + i / 20 + 1 + }
`; } else { - child.innerHTML = `
${i/20 + 1}
` + child.innerHTML = `
${i / 20 + 1}
`; } pagination_section.appendChild(child); } pageActive = 0; - previousPageTile.setAttribute('disabled', true); + previousPageTile.setAttribute("disabled", true); for (let i = 20; i < games.length; i++) { games[i].style.display = "none"; } } - function getProjectsInPage() { - const pageTile = document.querySelectorAll('.page-tile'); - const games = document.querySelectorAll('.project-item'); + const pageTile = document.querySelectorAll(".page-tile"); + const games = document.querySelectorAll(".project-item"); const clickSound = document.getElementById("clickSound"); - for (let i = 0; i < games.length; i++){ - games[i].addEventListener('click', () => { + for (let i = 0; i < games.length; i++) { + games[i].addEventListener("click", () => { clickSound.play(); }); } pageTile.forEach((elem, index) => { - elem.addEventListener('click', () => { + elem.addEventListener("click", () => { window.scrollTo({ - top: 0, - behavior: 'smooth' + top: 0, + behavior: "smooth", }); - pageTile[pageActive].classList.remove('active'); + pageTile[pageActive].classList.remove("active"); pageActive = index; - elem.classList.add('active'); - const page = Number(elem.textContent)-1; - if (page > 0){ - previousPageTile.removeAttribute('disabled'); + elem.classList.add("active"); + const page = Number(elem.textContent) - 1; + if (page > 0) { + previousPageTile.removeAttribute("disabled"); } else { - previousPageTile.setAttribute('disabled', true); + previousPageTile.setAttribute("disabled", true); } - - if (index == pageTile.length-1){ - nextPageTile.setAttribute('disabled', true); + + if (index == pageTile.length - 1) { + nextPageTile.setAttribute("disabled", true); } else { - nextPageTile.removeAttribute('disabled'); + nextPageTile.removeAttribute("disabled"); } - for (let i = 0; i < games.length; i++){ - if (i >= page*20 && i < page*20 + 20){ + for (let i = 0; i < games.length; i++) { + if (i >= page * 20 && i < page * 20 + 20) { games[i].style.display = "block"; } else { games[i].style.display = "none"; } } - }) + }); }); } - function goToNextPage() { - const pageTile = document.querySelectorAll('.page-tile'); - pageTile[pageActive].classList.remove('active'); + const pageTile = document.querySelectorAll(".page-tile"); + pageTile[pageActive].classList.remove("active"); pageActive++; pageTile[pageActive].click(); - pageTile[pageActive].classList.add('active'); + pageTile[pageActive].classList.add("active"); window.scrollTo({ top: 0, - behavior: 'smooth' + behavior: "smooth", }); } - function goToPreviousPage() { - const pageTile = document.querySelectorAll('.page-tile'); - pageTile[pageActive].classList.remove('active'); + const pageTile = document.querySelectorAll(".page-tile"); + pageTile[pageActive].classList.remove("active"); pageActive--; pageTile[pageActive].click(); - pageTile[pageActive].classList.add('active'); + pageTile[pageActive].classList.add("active"); window.scrollTo({ top: 0, - behavior: 'smooth' + behavior: "smooth", }); } - // testimonials variables const testimonialsItem = document.querySelectorAll("[data-testimonials-item]"); const modalContainer = document.querySelector("[data-modal-container]"); @@ -113,47 +111,46 @@ const modalText = document.querySelector("[data-modal-text]"); const testimonialsModalFunc = function () { modalContainer.classList.toggle("active"); overlay.classList.toggle("active"); -} +}; // add click event to all modal items for (let i = 0; i < testimonialsItem.length; i++) { - testimonialsItem[i].addEventListener("click", function () { - modalImg.src = this.querySelector("[data-testimonials-avatar]").src; modalImg.alt = this.querySelector("[data-testimonials-avatar]").alt; - modalTitle.innerHTML = this.querySelector("[data-testimonials-title]").innerHTML; - modalText.innerHTML = this.querySelector("[data-testimonials-text]").innerHTML; + modalTitle.innerHTML = this.querySelector( + "[data-testimonials-title]" + ).innerHTML; + modalText.innerHTML = this.querySelector( + "[data-testimonials-text]" + ).innerHTML; testimonialsModalFunc(); - }); - } // add click event to modal close button modalCloseBtn && modalCloseBtn.addEventListener("click", testimonialsModalFunc); overlay && overlay.addEventListener("click", testimonialsModalFunc); - - // custom select variables const select = document.querySelector("[data-select]"); const selectItems = document.querySelectorAll("[data-select-item]"); const selectValue = document.querySelector("[data-selecct-value]"); const filterBtn = document.querySelectorAll("[data-filter-btn]"); -select && select.addEventListener("click", function () { elementToggleFunc(this); }); +select && + select.addEventListener("click", function () { + elementToggleFunc(this); + }); // add event in all select items for (let i = 0; i < selectItems.length; i++) { selectItems[i].addEventListener("click", function () { - let selectedValue = this.innerText.toLowerCase(); selectValue.innerText = this.innerText; elementToggleFunc(select); filterFunc(selectedValue); - }); } @@ -161,9 +158,7 @@ for (let i = 0; i < selectItems.length; i++) { const filterItems = document.querySelectorAll("[data-filter-item]"); const filterFunc = function (selectedValue) { - for (let i = 0; i < filterItems.length; i++) { - if (selectedValue === "all") { filterItems[i].classList.add("active"); } else if (selectedValue === filterItems[i].dataset.category) { @@ -171,18 +166,14 @@ const filterFunc = function (selectedValue) { } else { filterItems[i].classList.remove("active"); } - } - -} +}; // add event in all filter button items for large screen let lastClickedBtn = filterBtn[0]; for (let i = 0; i < filterBtn.length; i++) { - filterBtn[i].addEventListener("click", function () { - let selectedValue = this.innerText.toLowerCase(); selectValue.innerText = this.innerText; filterFunc(selectedValue); @@ -190,77 +181,58 @@ for (let i = 0; i < filterBtn.length; i++) { lastClickedBtn.classList.remove("active"); this.classList.add("active"); lastClickedBtn = this; - }); - } // Code for enabling Light-Dark THEME - -function applyTheme() { - var slider = document.getElementById("themeToggle"); - var isDarkTheme = localStorage.getItem("isDarkTheme"); - - if (isDarkTheme === "true") { - slider.checked = true; - enableDarkTheme(); - } else { - slider.checked = false; - disableDarkTheme(); - } -} - function toggleTheme() { var slider = document.getElementById("themeToggle"); if (slider.checked) { - localStorage.setItem("isDarkTheme", "true"); - enableDarkTheme(); - } else { - localStorage.setItem("isDarkTheme", "false"); disableDarkTheme(); + } else { + enableDarkTheme(); } } function enableDarkTheme() { - var elements = document.getElementsByTagName('*'); + var elements = document.getElementsByTagName("*"); for (var i = 0; i < elements.length; i++) { var element = elements[i]; if ( - element.tagName !== 'BODY' && - !element.classList.contains('ignore-dark-theme') && - !element.classList.contains('project-category') && - !element.classList.contains('footer') + element.tagName !== "BODY" && + !element.classList.contains("ignore-dark-theme") && + !element.classList.contains("project-category") && + !element.classList.contains("footer") ) { - element.classList.add('dark-theme'); + element.classList.add("dark-theme"); } } // Adding specific background color for the footer - var footer = document.querySelector('footer'); + var footer = document.querySelector("footer"); if (footer) { - footer.classList.add('dark-theme'); + footer.classList.add("dark-theme"); } } - function disableDarkTheme() { - var elements = document.getElementsByTagName('*'); + var elements = document.getElementsByTagName("*"); for (var i = 0; i < elements.length; i++) { var element = elements[i]; if ( - element.tagName !== 'BODY' && - !element.classList.contains('ignore-dark-theme') && - !element.classList.contains('project-category') + element.tagName !== "BODY" && + !element.classList.contains("ignore-dark-theme") && + !element.classList.contains("project-category") ) { - element.classList.remove('dark-theme'); + element.classList.remove("dark-theme"); } } } -document.addEventListener("DOMContentLoaded", applyTheme); - -window.onscroll = function() {scrollFunction()}; +window.onscroll = function () { + scrollFunction(); +}; function scrollFunction() { var wrapper = document.getElementById("themeToggleWrapper"); @@ -271,7 +243,6 @@ function scrollFunction() { } } - // contact form variables const form = document.querySelector("[data-form]"); const formInputs = document.querySelectorAll("[data-form-input]"); @@ -280,80 +251,64 @@ const formBtn = document.querySelector("[data-form-btn]"); // add event to all form input field for (let i = 0; i < formInputs.length; i++) { formInputs[i].addEventListener("input", function () { - // check form validation if (form.checkValidity()) { formBtn.removeAttribute("disabled"); } else { formBtn.setAttribute("disabled", ""); } - }); } - - // // page navigation variables const navigationLinks = document.querySelectorAll("[data-nav-link]"); const pages = document.querySelectorAll("[data-page]"); // add event to all nav link for (let i = 0; i < navigationLinks.length; i++) { - - - for (let i = 0; i < pages.length; i++) { - if (this.innerHTML.toLowerCase() === pages[i].dataset.page) { - pages[i].classList.add("active"); - navigationLinks[i].classList.add("active"); - window.scrollTo(0, 0); - } else { - pages[i].classList.remove("active"); - navigationLinks[i].classList.remove("active"); - } + for (let i = 0; i < pages.length; i++) { + if (this.innerHTML.toLowerCase() === pages[i].dataset.page) { + pages[i].classList.add("active"); + navigationLinks[i].classList.add("active"); + window.scrollTo(0, 0); + } else { + pages[i].classList.remove("active"); + navigationLinks[i].classList.remove("active"); } - - + } } - - function search_game() { - let input = document.getElementById('searchbar').value; + let input = document.getElementById("searchbar").value; input = input.toLowerCase(); - let searchelement = document.getElementsByClassName('project-item active'); - for (let i = 0; i < searchelement.length; i++) { - if (!searchelement[i].innerHTML.toLowerCase().includes(input)) { - searchelement[i].style.display="none"; - } - else { - searchelement[i].style.display="list-item"; - } + let searchelement = document.getElementsByClassName("project-item active"); + for (let i = 0; i < searchelement.length; i++) { + if (!searchelement[i].innerHTML.toLowerCase().includes(input)) { + searchelement[i].style.display = "none"; + } else { + searchelement[i].style.display = "list-item"; + } } } function scrollToTop() { window.scrollTo({ top: 0, - behavior: 'smooth' + behavior: "smooth", }); } -document.addEventListener('DOMContentLoaded', () => { +document.addEventListener("DOMContentLoaded", () => { fetchGamesData(); }); let gamesData = {}; function fetchGamesData() { - fetch('./assets/js/gamesData.json') // Assuming gamesData.json is in the same directory - .then(response => response.json()) - .then(data => { + fetch("./assets/js/gamesData.json") // Assuming gamesData.json is in the same directory + .then((response) => response.json()) + .then((data) => { gamesData = data; }) - .catch(error => console.error('Error fetching games data:', error)); + .catch((error) => console.error("Error fetching games data:", error)); } - - - - -