YouthSkillTable: highlight player capabilities with background colors

[minj]

Original issue 701 created by asdfasdfasdf on 2011-02-27T10:59:59.000Z:

Some time ago I requested a feature to highlight skill capabilities (and therefore training importance) in youth skill table with different background colors. (Can't find the issue anymore, it has probably been deleted.)

In the meantime, I have implemented it myself and think it is very helpful when choosing lineup and training for a match. Please have a look at the screenshot - I'd be happy if you included the code (or a similar feature) in skilltable.js.

The basic rules for coloring are:

• more yellow means more capability to improve skill further in academy
• stronger color means higher training importance (i.e. higher max skill)
• max skills < 4 are regarded unimportant and displayed in gray

The code is pretty straightforward, as I did not dive very deep into foxtrick's architecture, just modified the skill method. In case you choose to include this feature, it should probably be possible to deactivate it (people who do not regard it helpful will regard it ugly ;-) and to configure the value of max skill to be regarded unimportant.

Here is the modified skill method of my skilltable.js file:

var skill = function(cell, skill) { if (typeof(skill) === "object") { // in youth team, returned skill is an object cell.setAttribute("index", skill.current * 9 + skill.max + skill.maxed); if (skill.maxed) { cell.className = "maxed"; } if (skill.current !== 0 || skill.max !== 0) { var current = skill.current ? skill.current : "-"; var max = skill.max ? skill.max : "-"; cell.appendChild(doc.createTextNode(current + "/" + max));

                    if(skill.max > 3) {
                        // normalized values for convenience in further calculations
                        var skillBase = {}; // skills below 4 are not regarded as interesting
                        skillBase.max = skill.max>3 ? skill.max-3 : 0;
                        skillBase.current = skill.current>3 ? skill.current-3 : 0;

                        // calculate color for capability of improvement
                        var  [r0](https://code.google.com/p/foxtrick/source/detail?r=0);
                        if(skillBase.max > skillBase.current) {
                            r = ((skillBase.max - skillBase.current) / skillBase.max) * 255+51;
                        }
                        var g = 255;
                        var b = 0;

                        // apply alpha, indicating max skill
                        var a = 1 - skillBase.max / 5; // assuming max skill will never exceed 8...
                        if(a<0) a=0; //... but just to be sure
                        if(a != 1) { 
                            r = Math.round(r+(255-r)*a);
                            g = Math.round(g+(255-g)*a);
                            b = Math.round(b+(255-b)*a);
                        }
                        cell.style.backgroundColor='rgb('+r+','+g+','+b+')';
                    } else if (skill.max != 0) {
                        // display unimportant skills/low capabilities in gray
                        cell.style.backgroundColor='rgb(204,204,204)';
                        cell.style.color='rgb(102,102,102)';
                    }
                } 

            }
            else {
                cell.appendChild(doc.createTextNode(skill));
            }
        };

[minj]

Comment #1 originally posted by CoRrRan on 2011-04-06T10:25:35.000Z:

This issue is related to issue # 553. I think it would be a nice (additional) feature for FoxTrick. (I had something similar in an Excel spreadsheet for my youthplayers.) Perhaps the colouring should follow the already used (green) colours in FoxTrick though.

[minj]

Comment #2 originally posted by asdfasdfasdf on 2011-04-08T18:29:02.000Z:

Thanks for digging the old issue out - somehow I have not been able to find it.

Let me explain why I preferred this coloring over the "normal" Foxtrick colors: Foxtrick uses shades of Green to visualise one-dimensional scales, e.g. a player's skill.

My intention was to visualise two dimensions:

1. The player's maximum skill. (stronger color means higher max skill)
2. The amount of training needed to reach max skill (yellower means more skill steps yet to take)

[minj]

Comment #3 originally posted by ryan on 2011-06-29T05:29:56.000Z:

Hi, thanks for the code, I've applied in c4dee267b15c3cb44da66439b019ce7e882a2ad5 r6611. Please inform me with your username at Hattrick as I would like to acknowledge your contribution in the release notes. :-)

Status: Fixed Owner: [ryan](mailto:ryan@ryanium.com)

[minj]

Comment #4 originally posted by asdfasdfasdf on 2011-10-29T08:58:59.000Z:

Woah, great... thanks a lot for adding this, I just discovered it. :)

I know it's already released but in case you still want to put an acknowledgement somewhere: my hattrick username is foulpelz.

Thanks again for adding this feature :)

[minj]

Comment #5 originally posted by ryan on 2011-12-01T14:09:04.000Z:

Thanks, I've corrected your name there in 0.8.1.