From 9148c2b8e21493599dcd8ae4277199c22b9d1092 Mon Sep 17 00:00:00 2001
From: Gregory Trullemans <redj@MacBook-Pro-de-Gregory.local>
Date: Sun, 19 Dec 2021 20:42:32 +0100
Subject: [PATCH] Update Score UI

---
 .../peoples/gymnasts/list_scores_chronos.html | 49 +++++++++++++++++--
 1 file changed, 44 insertions(+), 5 deletions(-)

diff --git a/templates/peoples/gymnasts/list_scores_chronos.html b/templates/peoples/gymnasts/list_scores_chronos.html
index 41da0a6a62..33d7f97c0e 100644
--- a/templates/peoples/gymnasts/list_scores_chronos.html
+++ b/templates/peoples/gymnasts/list_scores_chronos.html
@@ -190,6 +190,26 @@
 </div>
 
 <script type="text/javascript">
+    var ctx = document.getElementById("chartjs_chrono").getContext("2d");
+    var gradient_stroke_1 = ctx.createLinearGradient(0, 230, 0, 50);
+    var gradient_stroke_2 = ctx.createLinearGradient(0, 230, 0, 50);
+    var gradient_stroke_3 = ctx.createLinearGradient(0, 230, 0, 50);
+
+    gradient_stroke_1.addColorStop(1, 'rgba(255, 99, 132, 0.4)');
+    gradient_stroke_1.addColorStop(0.75, 'rgba(255, 99, 132, 0.3)');
+    gradient_stroke_1.addColorStop(0.5, 'rgba(255, 99, 132, 0.2)');
+    gradient_stroke_1.addColorStop(0.25, 'rgba(255, 99, 132, 0)');
+
+    gradient_stroke_2.addColorStop(1, 'rgba(255, 159, 64, 0.4)');
+    gradient_stroke_2.addColorStop(0.75, 'rgba(255, 159, 64, 0.3)');
+    gradient_stroke_2.addColorStop(0.5, 'rgba(255, 159, 64, 0.2)');
+    gradient_stroke_2.addColorStop(0.25, 'rgba(255, 159, 64, 0)');
+
+    gradient_stroke_3.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
+    gradient_stroke_3.addColorStop(0.75, 'rgba(54, 162, 235, 0.3)');
+    gradient_stroke_3.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
+    gradient_stroke_3.addColorStop(0.25, 'rgba(54, 162, 235, 0)');
+
     new Chart(document.getElementById("chartjs_routine"),{
         type: 'line',
         data:{
@@ -197,7 +217,7 @@
                 {% if score_routine1_list %}
                 {
                     label: 'L1',
-                    backgroundColor: 'rgb(255, 99, 132, 0.25)',
+                    backgroundColor: gradient_stroke_1,
                     borderColor: 'rgb(255, 99, 132)',
                     fill: true,
                     data: [
@@ -214,7 +234,7 @@
                 {% if score_routine2_list %}
                 {
                     label: 'L2',
-                    backgroundColor: 'rgb(255, 159, 64, 0.25)',
+                    backgroundColor: gradient_stroke_2,
                     borderColor: 'rgb(255, 159, 64)',
                     fill: true,
                     data: [
@@ -231,7 +251,7 @@
                 {% if score_routine3_list %}
                 {
                     label: 'L3',
-                    backgroundColor: 'rgb(54, 162, 235, 0.25)',
+                    backgroundColor: gradient_stroke_3,
                     borderColor: 'rgb(54, 162, 235)',
                     fill: true,
                     data: [
@@ -283,6 +303,25 @@
         http://www.chartjs.org/samples/latest/scales/time/line-point-data.html
     */
 
+    var ctx = document.getElementById("chartjs_chrono").getContext("2d");
+    var gradient_stroke_1 = ctx.createLinearGradient(0, 230, 0, 50);
+    var gradient_stroke_2 = ctx.createLinearGradient(0, 230, 0, 50);
+
+    gradient_stroke_1.addColorStop(1, 'rgba(75, 192, 192, 0.4)');
+    gradient_stroke_1.addColorStop(0.75, 'rgba(75, 192, 192, 0.3)');
+    gradient_stroke_1.addColorStop(0.5, 'rgba(75, 192, 192, 0.2)');
+    gradient_stroke_1.addColorStop(0.25, 'rgba(75, 192, 192, 0)');
+
+    gradient_stroke_2.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
+    gradient_stroke_2.addColorStop(0.75, 'rgba(54, 162, 235, 0.3)');
+    gradient_stroke_2.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
+    gradient_stroke_2.addColorStop(0.25, 'rgba(54, 162, 235, 0)');
+
+    gradient_stroke_3.addColorStop(1, 'rgba(54, 162, 235, 0.4)');
+    gradient_stroke_3.addColorStop(0.75, 'rgba(54, 162, 235, 0.3)');
+    gradient_stroke_3.addColorStop(0.5, 'rgba(54, 162, 235, 0.2)');
+    gradient_stroke_3.addColorStop(0.25, 'rgba(54, 162, 235, 0)');
+
     new Chart(document.getElementById("chartjs_chrono"),{
         type: 'line',
         data:{
@@ -290,7 +329,7 @@
                 {% if chrono_10c %}
                 {
                     label: '10 |',
-                    backgroundColor: 'rgb(75, 192, 192, 0.25)',
+                    backgroundColor: gradient_stroke_1,
                     borderColor: 'rgb(75, 192, 192)',
                     fill: true,
                     data: [
@@ -307,7 +346,7 @@
                 {% if chrono_r1 %}
                 {
                     label: 'L1',
-                    backgroundColor: 'rgb(54, 162, 235, 0.25)',
+                    backgroundColor: gradient_stroke_2,
                     borderColor: 'rgb(54, 162, 235)',
                     fill: true,
                     data: [