rewardo for gordo

public/checklist.html

@@ -97,6 +97,27 @@
   <br><br>
 </div>
 
+<!-- Include confetti-js library -->
+<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
+
+<!-- Reward Modal -->
+<div class="modal fade" id="videoModal" tabindex="-1" aria-labelledby="videoModalLabel" aria-hidden="true">
+  <div class="modal-dialog modal-dialog-centered">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title" id="videoModalLabel">Félicitations !</h5>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+      </div>
+      <div class="modal-body text-center">
+        <video id="rewardVideo" width="75%" controls>
+          <source src="video/reward.mp4" type="video/mp4">
+          Votre navigateur ne supporte pas la vidéo.
+        </video>
+      </div>
+    </div>
+  </div>
+</div>
+
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
 <script>
   window.onload = async function () {
@@ -156,9 +177,35 @@
     const watchedMoviesCount = watchedMovies.length;
     document.getElementById('watched-ratio').innerText = `Vu: ${watchedMoviesCount} / ${totalMoviesCount} (${((watchedMoviesCount / totalMoviesCount) * 100).toFixed(1)}%)`;
 
+    function launchConfetti() {
+      const duration = 3 * 1000; // 3 seconds
+      const animationEnd = Date.now() + duration;
+      const colors = ['#bb0000', '#ffffff', '#FFD700'];
+
+      function frame() {
+        const timeLeft = animationEnd - Date.now();
+        if (timeLeft <= 0) return;
+        confetti({
+          particleCount: 5,
+          angle: 60,
+          spread: 55,
+          origin: { x: 0 }
+        });
+        confetti({
+          particleCount: 5,
+          angle: 120,
+          spread: 55,
+          origin: { x: 1 }
+        });
+        requestAnimationFrame(frame);
+      }
+      frame();
+    }
+
     function updateProgressBar(watchedCount, totalCount) {
       const progressBar = document.getElementById('progress-bar');
       const percentage = (watchedCount / totalCount) * 100;
+      console.log(percentage);
       progressBar.style.width = `${percentage}%`;
 
       if (percentage <= 50) {
@@ -168,6 +215,14 @@
       }
 
       progressBar.setAttribute('aria-valuenow', Math.round(percentage));
+
+      const videoModal = new bootstrap.Modal(document.getElementById("videoModal"));
+
+      if (percentage === 100) {
+        videoModal.show();
+        launchConfetti();
+        document.getElementById("rewardVideo").play();
+      }
     }
 
     updateProgressBar(watchedMoviesCount, totalMoviesCount);
@@ -235,6 +290,11 @@
           const updatedWatchedCount = updatedWatchedMovies.length;
           document.getElementById('watched-ratio').innerText = `Vu: ${updatedWatchedCount} / ${totalMoviesCount} (${((updatedWatchedCount / totalMoviesCount) * 100).toFixed(1)}%)`;
           updateProgressBar(updatedWatchedCount, totalMoviesCount);
+
+          // Recalculate and update movies per day
+          const moviesLeft = totalMoviesCount - updatedWatchedCount;
+          const moviesPerDay = daysLeft > 0 ? (moviesLeft / daysLeft).toFixed(2) : moviesLeft;
+          document.getElementById('movies-per-day').textContent = `À voir par jour: ${moviesPerDay} films`;
         }
       });
     });
@@ -247,6 +307,14 @@
       localStorage.removeItem('auth_token');
       window.location.href = '/';
     });
+
+    // Stop the video when the modal is closed
+    const videoModal = document.getElementById("videoModal");
+    const rewardVideo = document.getElementById("rewardVideo");
+    videoModal.addEventListener("hidden.bs.modal", function () {
+      rewardVideo.pause();
+      rewardVideo.currentTime = 0;
+    });
   };
 </script>
 </body>