Gradient color script added to goal difference column

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;
 

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
     });
 });

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}}