Scorecard partial template added + changes to file names for clarity purposes

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

@@ -1,19 +0,0 @@
-.scoreboard-container {
-    overflow-x: auto; /* Enable horizontal scrolling */
-    white-space: nowrap; /* Prevent cards from wrapping to the next line */
-}
-
-.league-container {
-    display: inline-block; /* Change display property to inline-block to prevent stretching */
-    border: 1px solid rgb(206, 202, 202);
-}
-
-#game-card {
-    display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */
-    border: 1px solid #ccc;
-    padding: 20px;
-    margin: 10px 0; /* Remove horizontal margin */
-    min-height: 100px;
-    min-width: 150px;
-    box-sizing: border-box;
-}

ProjectSourceCode/src/resources/css/scoreboard-header/game-card.css

@@ -0,0 +1,31 @@
+#game-card {
+    display: inline-block; /* Display cards as inline-block to allow them to sit next to each other */
+    border: 1px solid #ccc;
+    padding: 20px;
+    margin: 10px 2px; /* Remove horizontal margin */
+    min-height: 100px;
+    min-width: 150px;
+    box-sizing: border-box;
+}
+
+.left-side {
+    width: 70%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.right-side {
+    width: 30%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.team {
+    text-align: center;
+}
+
+.score {
+    text-align: center;
+}

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

@@ -0,0 +1,9 @@
+.scoreboard-container {
+    overflow-x: auto; /* Enable horizontal scrolling */
+    white-space: nowrap; /* Prevent cards from wrapping to the next line */
+    border: 1px solid rgb(227, 225, 225);
+}
+
+.league-container {
+    display: inline-block; /* Change display property to inline-block to prevent stretching */
+}

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

@@ -1,31 +0,0 @@
-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();
-      }
-    });
-  });

ProjectSourceCode/src/views/layouts/main.hbs

@@ -5,7 +5,7 @@
     <!-- TODO: Add the head.hbs partial here -->
     {{> head}}
 
-    {{> live-scoreboard/live-scoreboard}}
+    {{> scoreboard-header/scoreboard-header}}
     <!-- TODO: Add the nav.hbs partial here -->
     {{> nav}}
 

ProjectSourceCode/src/views/partials/head.hbs

@@ -6,7 +6,10 @@
   <!-- Linking forms.css -->
   <link rel="stylesheet" type="text/css" href="css/login_and_registration.css">
   <link rel="stylesheet" type="text/css" href="css/home-screen.css">
-  <link rel="stylesheet" type="text/css" href="css/live-scoreboard/scoreboard.css">
+
+    <!-- Scoreboard Header Stylesheets -->
+    <link rel="stylesheet" type="text/css" href="css/scoreboard-header/scoreboard.css">
+    <link rel="stylesheet" type="text/css" href="css/scoreboard-header/game-card.css">
 
   <title>Group 6 Final Project</title>
 

ProjectSourceCode/src/views/partials/live-scoreboard/live-scoreboard.hbs

@@ -1,50 +0,0 @@
- <div class="scoreboard-container" id="scoreboard">
-    <div class="scoreboard-league-container">
-        
-        <!-- Match Card 1 -->
-        <div class="card" id="game-card">
-            
-        </div>
-
-        <!-- Match Card 2 -->
-        <div class="card" id="game-card">
-            
-        </div>
-
-        <!-- Match Card 3 -->
-        <div class="card" id="game-card">
-            
-        </div>
-
-        <!-- Match Card 4 -->
-        <div class="card" id="game-card">
-            
-        </div>
-
-        <!-- Match Card 5 -->
-        <div class="card" id="game-card">
-            
-        </div>
-
-        <!-- Match Card 6 -->
-        <div class="card" id="game-card">
-            
-        </div>
-
-        <!-- Match Card 7 -->
-        <div class="card" id="game-card">
-            
-        </div>
-
-        <!-- Match Card 8 -->
-        <div class="card" id="game-card">
-            
-        </div>
-
-        <!-- Match Card 9 -->
-        <div class="card" id="game-card">
-            
-        </div>
-
-    </div>
-</div>

ProjectSourceCode/src/views/partials/scoreboard-header/game-card.hbs

@@ -0,0 +1,31 @@
+<!-- _score-card.hbs -->
+
+<div class="card" id="game-card">
+    <div class="card-body">
+
+        <!-- Left side (70%) -->
+        <div class="left-side" style="width: 70%; display: flex; flex-direction: column; justify-content: center;">
+            <!-- Team 1 Name -->
+            <div class="team" style="text-align: center;">
+                <p>team 1</p>
+                {{team1.name}}
+                <p>0</p>
+            </div>
+            <!-- Team 2 Name -->
+            <div class="team" style="text-align: center;">
+                <p>team 2</p>
+                {{team2.name}}
+                <p>1</p>
+            </div>
+        </div>
+
+        <!-- Right side (30%) -->
+        <div class="right-side" style="width: 30%; display: flex; justify-content: center; align-items: center;">
+            <!-- Time -->
+            <div class="score" style="text-align: center;">
+                {{time}}
+            </div>
+        </div>
+
+    </div>
+</div>

ProjectSourceCode/src/views/partials/scoreboard-header/scoreboard-header.hbs

@@ -0,0 +1,7 @@
+ <div class="scoreboard-container" id="scoreboard">
+    <div class="scoreboard-league-container">
+        
+        {{> scoreboard-header/game-card}}
+
+    </div>
+</div>