From f60bbe00a6f7f2ff1e1cd1f55ee1919bf5ebd8f1 Mon Sep 17 00:00:00 2001
From: Lucas Patenaude <LUPA7501@colorado.edu>
Date: Sun, 14 Apr 2024 17:37:28 -0600
Subject: [PATCH] Gradient color script added to goal difference column

---
 .../css/league-pages/league-table.css         |  6 ++--
 .../change-goal-difference-color.js           | 29 ++++++++++++++-----
 .../src/views/pages/leagues-page.hbs          |  2 +-
 3 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/ProjectSourceCode/src/resources/css/league-pages/league-table.css b/ProjectSourceCode/src/resources/css/league-pages/league-table.css
index aa78a61..1a3a2cc 100644
--- a/ProjectSourceCode/src/resources/css/league-pages/league-table.css
+++ b/ProjectSourceCode/src/resources/css/league-pages/league-table.css
@@ -11,14 +11,12 @@
     padding: 15px;
 }
 
-
-
 #club-logo-row {
-    width: 20px; 
+    width: 25px; 
 }
 
 #table-club-logo {
-    width: 20px;
+    width: 25px;
     margin-right: 5px;
     cursor: pointer;
 
diff --git a/ProjectSourceCode/src/resources/js/league-page/change-goal-difference-color.js b/ProjectSourceCode/src/resources/js/league-page/change-goal-difference-color.js
index 2ae9de2..a4e764a 100644
--- a/ProjectSourceCode/src/resources/js/league-page/change-goal-difference-color.js
+++ b/ProjectSourceCode/src/resources/js/league-page/change-goal-difference-color.js
@@ -1,14 +1,29 @@
-// script.js
 document.addEventListener("DOMContentLoaded", function() {
-    var goalDifferenceCells = document.querySelectorAll("#standings-table tbody td:nth-child(8)"); // Selecting the cells in the goal_difference column
+    var goalDifferenceCells = document.querySelectorAll("#goal-difference-column"); // Selecting the cells in the goal_difference column
 
     goalDifferenceCells.forEach(function(cell) {
         var goalDifference = parseInt(cell.textContent);
+        var color;
 
-        if (goalDifference < 0) {
-            cell.style.color = "red"; // Change text color to red for negative goal difference
-        } else if (goalDifference > 0) {
-            cell.style.color = "green"; // Change text color to green for positive goal difference
-        } // If goal difference is 0, leave text color unchanged
+        if (goalDifference < 0) 
+        {
+            // Gradually darken the text color for negative goal differences
+            var darkenFactor = Math.ceil(goalDifference / -10); // Calculate the darken factor
+            var shade = Math.max(0, 255 - darkenFactor * 25); // Calculate the shade of red
+            color = "rgb(" + shade + ", 0, 0)"; // Create the color value
+        } 
+        else if (goalDifference > 0) 
+        {
+            // Gradually darken the text color for positive goal differences
+            var darkenFactor = Math.floor(goalDifference / 10); // Calculate the darken factor
+            var shade = Math.max(0, 155 - darkenFactor * 15); // Adjusted the starting point to make greens darker
+            color = "rgb(0, " + shade + ", 0)"; // Create the color value
+        } 
+        else 
+        {
+            color = "inherit"; // If goal difference is 0, leave text color unchanged
+        }
+
+        cell.style.color = color; // Apply the calculated color
     });
 });
diff --git a/ProjectSourceCode/src/views/pages/leagues-page.hbs b/ProjectSourceCode/src/views/pages/leagues-page.hbs
index cfd467b..e84c468 100644
--- a/ProjectSourceCode/src/views/pages/leagues-page.hbs
+++ b/ProjectSourceCode/src/views/pages/leagues-page.hbs
@@ -42,7 +42,7 @@
                             <td>{{wins}}</td>
                             <td>{{losses}}</td>
                             <td>{{draws}}</td>
-                            <td>{{goal_difference}}</td>
+                            <td id="goal-difference-column">{{goal_difference}}</td>
                             <td id="points-column">{{points}}</td>
                         </tr>
                         {{/each}}