Reprototyping of scoreboard without bootstrap carousel

ProjectSourceCode/src/resources/css/live-scoreboard/scoreboard.css

@@ -1,16 +1,21 @@
+#scoreboard-container {
+    display: flex;
+    transition: transform 0.5s ease;
+  }
+
 .league-container {
     display: flex;
     justify-content: flex-start; /* Align cards to the left */
-
     border: 1px solid rgb(206, 202, 202);
 }
 
 /* Styling for each card representing a live game */
 #game-card {
+    flex: 0 0 auto;
     border: 1px solid #ccc;
     padding: 20px; /* Increase padding to increase the apparent height */
     margin: 10px 10px;
     min-height: 100px; /* Set a minimum height for the cards */
+    min-width: 150px;
     box-sizing: border-box; /* Include padding and border in the element's total width and height */
 }
-

ProjectSourceCode/src/resources/js/live-scoreboard/carousel.js

@@ -0,0 +1,31 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const carouselInner = document.querySelector('#scoreboard-container');
+    const carouselItems = Array.from(carouselInner.children);
+    const carouselControlPrev = document.querySelector('.carousel-control-prev');
+    const carouselControlNext = document.querySelector('.carousel-control-next');
+    let currentIndex = 0;
+
+    const updateCarousel = () => {
+      carouselItems.forEach((item, index) => {
+        if (index === currentIndex) {
+          item.classList.add('active');
+        } else {
+          item.classList.remove('active');
+        }
+      });
+    };
+
+    carouselControlPrev.addEventListener('click', () => {
+      if (currentIndex > 0) {
+        currentIndex--;
+        updateCarousel();
+      }
+    });
+
+    carouselControlNext.addEventListener('click', () => {
+      if (currentIndex < carouselItems.length - 1) {
+        currentIndex++;
+        updateCarousel();
+      }
+    });
+  });