Added dynamic stats display feature & Enhanced UI

Author: hoangsonww

README.md

@@ -60,6 +60,7 @@ Upon launching The MovieVerse, you'll be greeted with a user-friendly interface
 - View detailed information about an actor by clicking the 'Details' button on any actor in a movie's details page.
 - Create a movie timeline by clicking the 'Timeline' button on the navigation bar.
 - View a list of movies from a specific time period by clicking on the corresponding year in the timeline.
+- View all your interesting statistics with a dynamically updating display that will work best on a desktop. On mobile, you can click the 'About' button on the top navbar to view your statistics.
 - And more!
 
 ## Technologies

index.html

@@ -55,9 +55,9 @@ <h1 id="my-heading" style="margin-bottom: -10px">
             </h1>
         </a>
 
-        <div id="local-time">
-            <p id="time-label">Your Current Time:</p>
-            <h1 id="clock" class="clock"></h1>
+        <div id="local-time" style="cursor: pointer">
+            <p id="stats-label" class="clock" style="font-size: 16px"></p>
+            <h1 id="stats-display" class="clock"></h1>
         </div>
 
         <!-- Create a button to toggle the side navigation bar -->

index.js

@@ -96,18 +96,189 @@ function showMovies(movies, mainElement) {
 
         movieEl.addEventListener('click', () => {
             localStorage.setItem('selectedMovieId', id);
+            updateUniqueMoviesViewed(id);
             window.location.href = 'src/html/movie-details.html';
+            updateMovieVisitCount(id, title);
         });
 
         mainElement.appendChild(movieEl);
     });
     applySettings();
 }
 
+function updateUniqueMoviesViewed(movieId) {
+    let viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+    if (!viewedMovies.includes(movieId)) {
+        viewedMovies.push(movieId);
+        localStorage.setItem('uniqueMoviesViewed', JSON.stringify(viewedMovies));
+    }
+}
+
 clearButton.addEventListener('click', () => {
     window.location.reload();
 });
 
+function rotateUserStats() {
+    const stats = [
+        {
+            label: "Your Current Time",
+            getValue: () => {
+                const now = new Date();
+                let hours = now.getHours();
+                let minutes = now.getMinutes();
+                hours = hours < 10 ? '0' + hours : hours;
+                minutes = minutes < 10 ? '0' + minutes : minutes;
+                return `${hours}:${minutes}`;
+            }
+        },
+        { label: "Most Visited Movie", getValue: getMostVisitedMovie },
+        { label: "Your Most Visited Director", getValue: getMostVisitedDirector },
+        { label: "Your Most Visited Actor", getValue: getMostVisitedActor },
+        {
+            label: "Your Unique Movies Discovered",
+            getValue: () => {
+                const viewedMovies = JSON.parse(localStorage.getItem('uniqueMoviesViewed')) || [];
+                return viewedMovies.length;
+            }
+        },
+        {
+            label: "Your Favorited Movies",
+            getValue: () => {
+                const favoritedMovies = JSON.parse(localStorage.getItem('favorites')) || [];
+                return favoritedMovies.length;
+            }
+        },
+        {
+            label: "Your Most Common Favorited Genre",
+            getValue: getMostCommonGenre
+        },
+        { label: "Your Created Watchlists", getValue: () => localStorage.getItem('watchlistsCreated') || 0 },
+        { label: "Your Average Movie Rating", getValue: () => localStorage.getItem('averageMovieRating') || 'Not Rated' },
+        {
+            label: "Your Unique Directors Discovered",
+            getValue: () => {
+                const viewedDirectors = JSON.parse(localStorage.getItem('uniqueDirectorsViewed')) || [];
+                return viewedDirectors.length;
+            }
+        },
+        {
+            label: "Your Unique Actors Discovered",
+            getValue: () => {
+                const viewedActors = JSON.parse(localStorage.getItem('uniqueActorsViewed')) || [];
+                return viewedActors.length;
+            }
+        },
+        {
+            label: "Your Unique Production Companies Discovered",
+            getValue: () => {
+                const viewedCompanies = JSON.parse(localStorage.getItem('uniqueCompaniesViewed')) || [];
+                return viewedCompanies.length;
+            }
+        },
+        { label: "Your Trivia Accuracy", getValue: getTriviaAccuracy }
+    ];
+
+    let currentStatIndex = 0;
+
+    function updateStatDisplay() {
+        const currentStat = stats[currentStatIndex];
+        document.getElementById('stats-label').textContent = currentStat.label + ':';
+        document.getElementById('stats-display').textContent = currentStat.getValue();
+        currentStatIndex = (currentStatIndex + 1) % stats.length;
+    }
+
+    updateStatDisplay();
+
+    const localTimeDiv = document.getElementById('local-time');
+    let statRotationInterval = setInterval(updateStatDisplay, 3000);
+
+    localTimeDiv.addEventListener('click', () => {
+        clearInterval(statRotationInterval);
+        updateStatDisplay();
+        statRotationInterval = setInterval(updateStatDisplay, 3000);
+    });
+}
+
+function updateMovieVisitCount(movieId, movieTitle) {
+    let movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+    if (!movieVisits[movieId]) {
+        movieVisits[movieId] = { count: 0, title: movieTitle };
+    }
+    movieVisits[movieId].count += 1;
+    localStorage.setItem('movieVisits', JSON.stringify(movieVisits));
+}
+
+function getMostVisitedMovie() {
+    const movieVisits = JSON.parse(localStorage.getItem('movieVisits')) || {};
+    let mostVisitedMovie = '';
+    let maxVisits = 0;
+
+    for (const movieId in movieVisits) {
+        if (movieVisits[movieId].count > maxVisits) {
+            mostVisitedMovie = movieVisits[movieId].title;
+            maxVisits = movieVisits[movieId].count;
+        }
+    }
+
+    return mostVisitedMovie || 'Not Available';
+}
+
+function getMostVisitedActor() {
+    const actorVisits = JSON.parse(localStorage.getItem('actorVisits')) || {};
+    let mostVisitedActor = '';
+    let maxVisits = 0;
+
+    for (const actorId in actorVisits) {
+        if (actorVisits[actorId].count > maxVisits) {
+            mostVisitedActor = actorVisits[actorId].name;
+            maxVisits = actorVisits[actorId].count;
+        }
+    }
+
+    return mostVisitedActor || 'Not Available';
+}
+
+function getMostVisitedDirector() {
+    const directorVisits = JSON.parse(localStorage.getItem('directorVisits')) || {};
+    let mostVisitedDirector = '';
+    let maxVisits = 0;
+
+    for (const directorId in directorVisits) {
+        if (directorVisits[directorId].count > maxVisits) {
+            mostVisitedDirector = directorVisits[directorId].name;
+            maxVisits = directorVisits[directorId].count;
+        }
+    }
+
+    return mostVisitedDirector || 'Not Available';
+}
+
+function getTriviaAccuracy() {
+    let triviaStats = JSON.parse(localStorage.getItem('triviaStats')) || { totalCorrect: 0, totalAttempted: 0 };
+    if (triviaStats.totalAttempted === 0) {
+        return 'No trivia attempted';
+    }
+    let accuracy = (triviaStats.totalCorrect / triviaStats.totalAttempted) * 100;
+    return `${accuracy.toFixed(1)}% accuracy`;
+}
+
+function getMostCommonGenre() {
+    const favoriteGenres = JSON.parse(localStorage.getItem('favoriteGenres')) || {};
+    let mostCommonGenre = '';
+    let maxCount = 0;
+
+    for (const genre in favoriteGenres) {
+        if (favoriteGenres[genre] > maxCount) {
+            mostCommonGenre = genre;
+            maxCount = favoriteGenres[genre];
+        }
+    }
+
+    return mostCommonGenre || 'Not Available';
+}
+
+document.addEventListener('DOMContentLoaded', rotateUserStats);
+
 /**
  * Fetches a random movie from the specified URL and redirects to the movie-details page.
  * @returns {Promise<void>} A promise that resolves when the movie is fetched
@@ -458,6 +629,7 @@ function showMoviesDirectorSpotlight(movies) {
         movieE1.addEventListener('click', () => {
             localStorage.setItem('selectedMovieId', id);
             window.location.href = 'src/html/movie-details.html';
+            updateMovieVisitCount(id, title);
         });
 
         main20.appendChild(movieE1);
@@ -517,22 +689,6 @@ document.addEventListener("DOMContentLoaded", function() {
     applySettings();
 });
 
-/**
- * Updates the clock.
- */
-function updateClock() {
-    var now = new Date();
-    var hours = now.getHours();
-    var minutes = now.getMinutes();
-    hours = hours < 10 ? '0' + hours : hours;
-    minutes = minutes < 10 ? '0' + minutes : minutes;
-    var timeString = hours + ':' + minutes;
-    document.getElementById('clock').innerHTML = timeString;
-}
-
-setInterval(updateClock, 1000);
-window.onload = updateClock;
-
 function checkAndClearLocalStorage() {
     const hasCleared = localStorage.getItem('hasUserClearedMovieVerseData');
     if (!hasCleared) {
@@ -551,6 +707,18 @@ function clearMovieVerseLocalStorage() {
     localStorage.removeItem('selectedActorId');
     localStorage.removeItem('selectedCompanyId');
     localStorage.removeItem('movieRatings');
+    localStorage.removeItem('triviaStats');
+    localStorage.removeItem('uniqueMoviesViewed');
+    localStorage.removeItem('uniqueDirectorsViewed');
+    localStorage.removeItem('uniqueActorsViewed');
+    localStorage.removeItem('uniqueCompaniesViewed');
+    localStorage.removeItem('favoriteGenres');
+    localStorage.removeItem('watchlistsCreated');
+    localStorage.removeItem('averageMovieRating');
+    localStorage.removeItem('backgroundImage');
+    localStorage.removeItem('textColor');
+    localStorage.removeItem('fontSize');
+    localStorage.removeItem('moviesFavorited');
 }
 
 function applySettings() {

manifest.json

@@ -24,4 +24,4 @@
         "purpose": "any maskable"
     }
   ]
-}
+}