mcMMO Dashboard v1.22.01

- Tint for chart now available!

- Comparison page update:
> Link to player page
> Highlighting the best comparison label

- New download folder to add pre-made template
> You can add an upload.css file to add a theme on your dashboard. Visit mcmmo.nicolasvaillant.net/themes (coming soon) for exclusive custom themes!

- Cleaned up code in the project

Author: NicolasVaillant

config/parameters.css

@@ -11,6 +11,15 @@
     --border-of-elements-light-color: 27 31 35;
     --border-of-elements-dark-color: 255 255 255;
 
+    /*Tint for chartJS*/
+    --tint1_: #57A0E5;
+    --tint2_: #ED6D85;
+    --tint3_: #6DBEBF;
+    --tint4_: #F2A354;
+    --tint5_: #9268F6;
+    --tint6_: #F7CF6B;
+    --tint7_: #C9CBCF;
+
     /*Adapt the size of the website for wide screen*/
     /*!important is required at the end of the property to override the initial one*/
     --size-aside-wide-screen:400px!important;

resources/css/root.css

@@ -23,6 +23,13 @@
     --border-color: rgba(var(--rgb_border) / 15%);
     --btn-main-bg: rgba(var(--rgb) / 100%);
     --btn-main-bg-hover: rgba(var(--rgb) / 100%);
+    --tint1: var(--tint1_);
+    --tint2: var(--tint2_);
+    --tint3: var(--tint3_);
+    --tint4: var(--tint4_);
+    --tint5: var(--tint5_);
+    --tint6: var(--tint6_);
+    --tint7: var(--tint7_);
     --x:0;
     --y:0;
     --grad1: rgb(36, 41, 46);

resources/js/comparison.js

@@ -340,7 +340,8 @@ function chartComparison(data){
                 label : tp[i].name,
                 data : function (){
                     return tp[i].skills
-                }()
+                }(),
+                backgroundColor: generateColors(7, i)
             }
         )
     }

resources/js/index.js

@@ -93,6 +93,8 @@ function loadDatasetChartAbilities(player){
                         return user[i].skills
                     }(),
                     hidden: false,
+                    borderColor: generateColors(7),
+                    backgroundColor: generateColors(7, i)
                 }
             )
         }
@@ -163,17 +165,14 @@ chart_select.addEventListener('change', function (){
 function updateGraph(value){
     let duplicate = []
     let current
-
     if(datasetChartAbilities[0].length < value){
         current = datasetChartAbilities[0].length
     }else{
         current = value
     }
-
     for (let i = 0; i < current; i++) {
         duplicate[i] = datasetChartAbilities[0][i]
     }
-
     chartAbilitiesGraph.data.datasets = duplicate
     chartAbilitiesGraph.update()
 }
@@ -185,7 +184,6 @@ let chartAbilitiesGraph,
     chartBestAbilitiesGraph
 
 function chartAbilities(){
-
     let data_chart_default = {
         labels: Object.values(translation[languageSelect].ab),
         datasets: datasetChartAbilities[0],
@@ -287,6 +285,7 @@ function chartBestAbilities(player){
             {
                 label: 'EXP',
                 data: sumA,
+                backgroundColor: generateColors(7)
             }
         ]
     }

resources/js/shared.js

@@ -454,4 +454,19 @@ function displayElement(element, data){
     });
 }
 
-function backToTop(){window.scroll(0, 0)}
+function backToTop(){window.scroll(0, 0)}
+
+function generateColors(numColors, value = 0) {
+    let colors = [];
+    if(value !== 0){
+        colors.push(getComputedStyle(document.documentElement).getPropertyValue('--tint' + value % 7));
+        return colors;
+    }else{
+        for (let i = 0; i < numColors; i++) {
+            const index = i % 7;
+            colors.push(getComputedStyle(document.documentElement).getPropertyValue('--tint' + (index + 1)));
+        }
+        return colors;
+    }
+
+}

resources/js/user.js

@@ -142,7 +142,8 @@ fLoadUser().then(r => {
 const ctx_compare = document.getElementById('chart_user_compare');
 let chartCompareGraph
 function chartCompare(best_player, current_player){
-
+    const tint1 = getComputedStyle(document.documentElement).getPropertyValue('--tint1')
+    const tint5 = getComputedStyle(document.documentElement).getPropertyValue('--tint5')
     let tp = []
     tp.push(current_player, best_player)
     let datasets = []
@@ -152,7 +153,9 @@ function chartCompare(best_player, current_player){
                 label : tp[i].name,
                 data : function (){
                     return tp[i].skills
-                }()
+                }(),
+                borderColor: [tint1, tint5],
+                backgroundColor: generateColors(7, i)
             }
         )
     }
@@ -199,6 +202,7 @@ function setLabel(player){
         }
     }
 }
+
 function getKeyByValue(object, value) {
     return Object.keys(object).filter(key => object[key] === value);
 }
@@ -234,10 +238,6 @@ function createLabel(array){
     }
 }
 
-function styleUserPageOffline(){
-    console.log('Browser is offline')
-}
-
 function userData(player){
     const last_connection_user = document.querySelector('.last-connection-user')
     const last_connection = player.last_connection
@@ -765,6 +765,7 @@ function setChart(player){
             label : 'All Abilities (exp)',
             data : skill_array,
             hidden: false,
+            backgroundColor: generateColors(7)
         }
     )
     let data_chart_default = {