Changeset View
Standalone View
binaries/data/mods/public/gui/lobby/LobbyPage/PlayerColor.js
/** | /** | ||||||||
* The purpose of this class is to determine a color per playername and to apply that color, | * The purpose of this class is to determine and apply a rating color per player based on how high/low it is, | ||||||||
* escape reserved characters and add a moderator prefix when displaying playernames. | * and to color playernames based on their role. | ||||||||
*/ | */ | ||||||||
class PlayerColor | class PlayerColor | ||||||||
{ | { | ||||||||
} | } | ||||||||
Grapjas: I'll fix all the lint complaints next patch. | |||||||||
/** | /** | ||||||||
* Generate a (mostly) unique color for this player based on their name. | * Make a color based on role. Purple if moderator, white otherwise (because in some cases black is default). | ||||||||
* @see https://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-jquery-javascript | * | ||||||||
* @param {string} role. | |||||||||
Done Inline Actionsthis variable name is very confusing Silier: this variable name is very confusing
also it is redundant, in most cases font is white by… | |||||||||
Done Inline Actionsdefault color for playlist seems to be black, but for most other elements it seems to be white indeed. Grapjas: default color for playlist seems to be black, but for most other elements it seems to be white… | |||||||||
* @Returns {string} containing a RGB color value converted from HSL. | |||||||||
*/ | */ | ||||||||
PlayerColor.GetPlayerColor = function(playername) | PlayerColor.ColorPlayerNameByRole = function(role) | ||||||||
Done Inline Actionsalso function should be renamed to GetPlayerColorByRating Silier: also function should be renamed to GetPlayerColorByRating | |||||||||
Done Inline Actions*for playerlist I'll clarify next patch. Grapjas: *for playerlist
I'll clarify next patch. | |||||||||
{ | { | ||||||||
// Generate a probably-unique hash for the player name and use that to create a color. | return (role == "moderator") ? hslToRgb(0.78, 1, 0.65).join(" ") : hslToRgb(1, 1, 1).join(" "); | ||||||||
let hash = 0; | } | ||||||||
for (let i in playername) | |||||||||
hash = playername.charCodeAt(i) + ((hash << 5) - hash); | |||||||||
// First create the color in RGB then HSL, clamp the lightness so it's not too dark to read, and then convert back to RGB to display. | |||||||||
// The reason for this roundabout method is this algorithm can generate values from 0 to 255 for RGB but only 0 to 100 for HSL; this gives | |||||||||
// us much more variety if we generate in RGB. Unfortunately, enforcing that RGB values are a certain lightness is very difficult, so | |||||||||
// we convert to HSL to do the computation. Since our GUI code only displays RGB colors, we have to convert back. | |||||||||
let [h, s, l] = rgbToHsl(hash >> 24 & 0xFF, hash >> 16 & 0xFF, hash >> 8 & 0xFF); | |||||||||
return hslToRgb(h, s, Math.max(0.7, l)).join(" "); | |||||||||
}; | |||||||||
/** | /** | ||||||||
* Colorizes the given nickname with a color unique and deterministic for that player. | * Use rating value to calculate a HSL color. | ||||||||
* | |||||||||
* @param {string || number} rating - Use rating to calculate a color based on its value. | |||||||||
* @Returns {string} containing a RGB color value converted from HSL. | |||||||||
Done Inline Actionsirrelevant, nuke it Silier: irrelevant, nuke it | |||||||||
* @handy functions for conversion rgbToHsl(255, 255, 255) || hslToRgb(1, 1, 1). | |||||||||
*/ | */ | ||||||||
PlayerColor.ColorPlayerName = function(playername, rating, role) | PlayerColor.GetColorByRating = function(rating) | ||||||||
Done Inline Actionsit looks like function could be kept with small changes Silier: it looks like function could be kept with small changes | |||||||||
Done Inline Actionsmaybe ApplyTagByRole or something also this function does not have much sense to be here by itself, it has nothing to do with player colour another concerne here, Silier: maybe ApplyTagByRole or something
this still sounds like it is suppoused to return true/false… | |||||||||
{ | { | ||||||||
let name = rating ? | // quick return if the player is unrated. | ||||||||
sprintf(translate("%(nick)s (%(rating)s)"), { | if(isNaN(rating)) | ||||||||
Not Done Inline Actions
Silier: | |||||||||
"nick": playername, | return hslToRgb(1, 1, 1).join(" "); | ||||||||
"rating": rating | |||||||||
}) : | let hslHue = 0.13; | ||||||||
playername; | let hslSaturation = 0.82; | ||||||||
let hslLightness = Math.max(0.5, Math.min(1200 / rating, 1)).toFixed(2); | |||||||||
Not Done Inline Actionsdirect return might be better at this point, there would not be need to reasignment Silier: direct return might be better at this point, there would not be need to reasignment | |||||||||
if (role == "moderator") | |||||||||
name = PlayerColor.ModeratorPrefix + name; | |||||||||
return coloredText(escapeText(name), PlayerColor.GetPlayerColor(playername)); | |||||||||
}; | |||||||||
/** | // players below 1200 slowly become green. | ||||||||
* A symbol which is prepended to the nickname of moderators. | if (rating < 1200) | ||||||||
*/ | { | ||||||||
PlayerColor.ModeratorPrefix = "@"; | hslHue = 0.30; | ||||||||
hslLightness = Math.max(0.5, Math.min(rating / 1200, 1)).toFixed(2); | |||||||||
} | |||||||||
// Players above 2000 slowly become red. | |||||||||
else if (rating >= 2000) | |||||||||
{ | |||||||||
hslHue = Math.max(0.01, Math.min(0.13 - (String(rating).substring(1,3) / 350), 0.13)).toFixed(2); | |||||||||
} | |||||||||
Done Inline Actionsyou are returning basically the same code 3 times, Silier: you are returning basically the same code 3 times,
i suggest to change in branches hslHue… | |||||||||
// TODO: Remove global required by formatPlayerInfo | // Players inbetween (1200-1999) go from white to gold/yellow. | ||||||||
var getPlayerColor = PlayerColor.GetPlayerColor; | return hslToRgb(hslHue, hslSaturation, hslLightness).join(" "); | ||||||||
}; | |||||||||
Done Inline Actionsalso while renaming, rename this one as well Silier: also while renaming, rename this one as well | |||||||||
No newline at end of file | |||||||||
Done Inline Actionsthis is wrong name considering what function does Silier: this is wrong name considering what function does |
I'll fix all the lint complaints next patch.