From 4d8a87ed5750355bd4f6ca3a74b994c7d68ab2e4 Mon Sep 17 00:00:00 2001
From: Lucas Patenaude <LUPA7501@colorado.edu>
Date: Tue, 23 Apr 2024 21:18:34 -0600
Subject: [PATCH] Links added to each team in live score cards

---
 .../scoreboard-header/game-card.css              |  9 +++++++--
 .../navigation-bar/current-match-information.js  |  2 ++
 .../scoreboard-header/game-card.hbs              | 16 ++++++++++------
 3 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/game-card.css b/ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/game-card.css
index 111da45..f9452c2 100644
--- a/ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/game-card.css
+++ b/ProjectSourceCode/src/resources/css/navigation-bar/scoreboard-header/game-card.css
@@ -13,7 +13,6 @@
     overflow: hidden; /* Hide the overflowing skewed content */
     transform: skewX(-20deg); /* Skew the banner to create a triangular side */
     transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition for smooth transformation and box-shadow */
-    cursor: pointer; /* Change cursor to pointer on hover */
     
     transition: transform 0.4s ease; /* Add transition for smooth effect */
 }
@@ -61,11 +60,17 @@
 
 /* Container for each team in card's information */
 .team {
-    display: flex; /* Keeps all items in a row */
     align-items: center; /* Center items vertically */
     padding: 5px;
 }
 
+.team a {
+    color: black;
+    display: flex;
+    text-decoration: none;
+    margin: 0;
+}
+
 
 .team p {
     margin: 0; /* Remove default margin */
diff --git a/ProjectSourceCode/src/resources/middleware/navigation-bar/current-match-information.js b/ProjectSourceCode/src/resources/middleware/navigation-bar/current-match-information.js
index 251ac68..a57a137 100644
--- a/ProjectSourceCode/src/resources/middleware/navigation-bar/current-match-information.js
+++ b/ProjectSourceCode/src/resources/middleware/navigation-bar/current-match-information.js
@@ -35,10 +35,12 @@ const fetchMatchesData = async (req, res, next) => {
             // Extract relevant data from the API response
             const matches = response.data.matches.map(match => ({
                 homeTeam: {
+                    teamID: match.homeTeam.id,
                     name: match.homeTeam.tla,
                     crest: match.homeTeam.crest,
                 },
                 awayTeam: {
+                    teamID: match.awayTeam.id,
                     name: match.awayTeam.tla,
                     crest: match.awayTeam.crest,
                 },
diff --git a/ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/game-card.hbs b/ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/game-card.hbs
index db34089..b078c07 100644
--- a/ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/game-card.hbs
+++ b/ProjectSourceCode/src/views/partials/navigation-bar/scoreboard-header/game-card.hbs
@@ -6,15 +6,19 @@
 
             <!-- Team 1 Name with Score -->
             <div class="team">
-                <img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
-                <p id="team-name">{{ homeTeam.name }}</p> <!-- {{team1.name}} -->
-                <p id="team-score">{{ score.homeScore }}</p>
+                <a href="/club/{{homeTeam.teamID}}">
+                    <img src="{{ homeTeam.crest }}" alt="{{ homeTeam.name }} Crest">
+                    <p id="team-name">{{ homeTeam.name }}</p> <!-- {{team1.name}} -->
+                    <p id="team-score">{{ score.homeScore }}</p>
+                </a>
             </div>
             <!-- Team 2 Name with Score -->
             <div class="team">
-                <img src="{{ awayTeam.crest }}" alt="{{ awayTeam.name }} Crest">
-                <p id="team-name">{{ awayTeam.name }}</p> <!-- {{team1.name}} -->
-                <p id="team-score">{{ score.awayScore }}</p>
+                <a href="/club/{{awayTeam.teamID}}">
+                    <img src="{{ awayTeam.crest }}" alt="{{ awayTeam.name }} Crest">
+                    <p id="team-name">{{ awayTeam.name }}</p> <!-- {{team1.name}} -->
+                    <p id="team-score">{{ score.awayScore }}</p>
+                </a>
             </div>
         </div>