Add games to favourites and switch between all games to favourites.

assets/css/style.css

@@ -1375,6 +1375,28 @@ main {
 
 .project-item>a {
   width: 100%;
+  position: relative;
+}
+
+.project-item .favouriteIconWrapper {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  z-index: 1;
+  cursor: pointer;
+}
+
+.favorites {
+  position: fixed;
+  width: 2rem;
+  height: 2rem;
+  top: 1rem;
+  right: 1rem;
+  cursor: pointer;
 }
 
 .project-img {

assets/js/index.js

@@ -7,6 +7,7 @@ const generateLiTags = gamesData => {
 
     if (gameData) {
       const { gameTitle, gameUrl, thumbnailUrl } = gameData;
+      const isGameFavourite = JSONParse(getItem('favourites'))?.find(game => game.gameUrl === gameUrl)
 
       const liTag = `
           <li class="project-item active" data-filter-item data-category="open source">
@@ -20,6 +21,9 @@ const generateLiTags = gamesData => {
               <h3 class="project-title"><a href="https://github.com/kunjgit/GameZone/tree/main/Games/${gameUrl}" target="_blank" aria-label=${gameTitle}>${tagNumber}. ${gameTitle} 🔗</a></h3>
               <p class="project-category">Play and have fun!</p>
             </a>
+            <div class="favouriteIconWrapper">
+              <img src="./assets/images/${isGameFavourite ? 'favourite-filled' : 'favourite'}.png" alt="favourite-icon" class="favouriteIcon" id=${gameUrl} />
+            </div>
           </li>
         `;
 
@@ -30,14 +34,21 @@ const generateLiTags = gamesData => {
   return liTags.join('\n');
 };
 
+let isFavourites = false
+
 // Fetch the game data from the JSON file
 fetch('./assets/js/gamesData.json')
   .then(response => response.json())
   .then(gamesData => {
     const projectListContainer = document.querySelector('.project-list');
     projectListContainer.innerHTML = generateLiTags(gamesData);
+    const allIcons = document.getElementsByClassName('favouriteIcon')
+    for (let i = 0; i < allIcons.length; i++) {
+      allIcons[i].addEventListener('click', favouriteHandler)
+    }
     getPageNumbers();
     getProjectsInPage();
+    document.querySelector('.favorites').addEventListener('click', fetchFavourites)
   })
   .catch(error => console.error('Error fetching game data:', error));
 
@@ -61,3 +72,91 @@ searchContainer.addEventListener("click", function () {
   // Focus on the input field when the div is clicked
   searchInput.focus();
 });
+
+const favouriteHandler = (e) => {
+  fetch('./assets/js/gamesData.json')
+    .then(response => response.json())
+    .then(gamesData => {
+      const gamesArray = Array.from(Object.values(gamesData))
+
+      if (!getItem('favourites')) {
+        const clickedGame = gamesArray.filter(game => game.gameUrl === e.target.id)
+        setItem(JSONStringify(clickedGame))
+        imageSrcUpdate(e.target.id, 'favourite-filled')
+      } else {
+        const isGameFavourite = JSONParse(getItem('favourites')).find(game => game.gameUrl === e.target.id)
+        if (isGameFavourite) {
+          const clickedGame = JSONParse(getItem('favourites')).filter(game => game.gameUrl !== e.target.id)
+          setItem(JSONStringify(clickedGame))
+          imageSrcUpdate(e.target.id, 'favourite')
+        } else {
+          const clickedGame = gamesArray.find(game => game.gameUrl === e.target.id)
+          setItem(JSONStringify([...JSONParse(getItem('favourites')), clickedGame]))
+          imageSrcUpdate(e.target.id, 'favourite-filled')
+        }
+      }
+    }
+  )
+}
+
+const imageSrcUpdate = (id, type) => {
+  const newImageUrl = document.getElementById(id).src.split('/')
+  newImageUrl[5] = `${type}.png`
+  newImageUrl.join('/')
+  document.getElementById(id).src = newImageUrl.join('/')
+}
+
+const fetchFavourites = () => {
+  isFavourites = !isFavourites
+  fetch('./assets/js/gamesData.json')
+    .then(response => response.json())
+    .then(gamesData => {
+      const gamesArray = Array.from(Object.values(gamesData))
+      if (isFavourites) {
+        const favorites = JSONParse(getItem('favourites'))
+
+        const finalGamesToRender = Object.assign({}, gamesArray.map(game => {
+          if (favorites.find(el => el.gameUrl === game.gameUrl)) {
+            return game
+          }
+        }).filter(game => game))
+
+        // to update the indexing from 0 to 1
+        const updatedJSON = {};
+        Object.keys(finalGamesToRender).forEach(key => {
+          const newIndex = parseInt(key) + 1;
+          updatedJSON[newIndex] = finalGamesToRender[key];
+        });
+
+        favoritesUpdate(updatedJSON)
+      } else {
+        favoritesUpdate(gamesData)
+      }
+    })  
+}
+
+const favoritesUpdate = (data) => {
+  const projectListContainer = document.querySelector('.project-list');
+  projectListContainer.innerHTML = generateLiTags(data);
+  getPageNumbers();
+  getProjectsInPage();
+
+  const allIcons = document.getElementsByClassName('favouriteIcon')
+  for (let i = 0; i < allIcons.length; i++) {
+    allIcons[i].addEventListener('click', favouriteHandler)
+  }
+}
+
+const getItem = () => {
+  return localStorage.getItem('favourites')
+}
+const setItem = (data) => {
+  return localStorage.setItem('favourites', data)
+}
+
+const JSONParse = (data) => {
+  return JSON.parse(data)
+}
+const JSONStringify = (data) => {
+  return JSON.stringify(data)
+}

index.html

@@ -70,6 +70,8 @@
   <span class="slider"></span>
 </label>
 
+<img src="./assets/images/favorites.png" class="favorites" />
+
 <body>
 
   <!-- BACKGROUND PARTICLES -->