Unique color per nick

This commit is contained in:
Mattias Erming 2014-03-23 02:48:40 +01:00
parent cd68d12436
commit 678f6e3c08
3 changed files with 63 additions and 10 deletions

View File

@ -1,6 +1,6 @@
html,
body {
font: 12px Consolas, monospace;
font: 13px "Consolas", monospace;
height: 100%;
}
a:focus {
@ -164,6 +164,7 @@ h2 {
background: #fff;
border-left: 1px solid #ddd;
bottom: 30px;
line-height: 1.4em;
overflow-y: auto;
padding: 4px 0;
position: absolute;
@ -173,20 +174,23 @@ h2 {
}
#chat .users .user {
display: block;
color: #f00;
padding: 0 8px;
}
#chat .messages {
bottom: 30px;
left: 0;
overflow-y: auto;
padding: 4px 8px;
padding: 4px 0;
position: absolute;
right: 160px;
top: 43px;
word-wrap: break-word;
z-index: 0;
}
#chat .message {
line-height: 1.4em;
padding: 0 6px;
}
#chat .message .time {
color: #bbb;
}

View File

@ -90,7 +90,7 @@
</div>
<div class="users">
{{#each users}}
<a href="{{name}}" class="user">
<a href="{{name}}" class="user" style="color: {{color name}}">
{{mode}}{{name}}
</a>
{{/each}}
@ -99,8 +99,8 @@
{{#each messages}}
<div class="message {{type}}">
<span class="time">{{time}}</span>
<a href="{{user}}" class="user">{{mode}}{{user}}</a>
<span class="text">{{type}} {{{autoLink text}}}</span>
<a href="{{user}}" class="user" style="color: {{color user}}">{{mode}}{{user}}</a>
<span class="text">{{type}} {{{link text}}}</span>
</div>
{{/each}}
</div>
@ -114,7 +114,7 @@
<script type="text/html" id="user">
{{#users}}
<a href="{{name}}" class="user">
<a href="{{name}}" class="user" style="color: {{color name}}">
{{mode}}{{name}}
</a>
{{/users}}
@ -124,8 +124,8 @@
{{#messages}}
<div class="message {{type}}">
<span class="time">{{time}}</span>
<a href="{{user}}" class="user">{{mode}}{{user}}</a>
<span class="text">{{type}} {{{autoLink text}}}</span>
<a href="{{user}}" class="user" style="color: {{color user}}">{{mode}}{{user}}</a>
<span class="text">{{type}} {{{link text}}}</span>
</div>
{{/messages}}
</script>

View File

@ -215,9 +215,58 @@ $(function() {
};
});
Handlebars.registerHelper("autoLink", function(text) {
Handlebars.registerHelper("link", function(text) {
var text = Handlebars.Utils.escapeExpression(text);
return URI.withinString(text, function(url) {
return "<a href='" + url + "' target='_blank'>" + url + "</a>";
});
});
Handlebars.registerHelper("color", function(text) {
return get_color(text);
});
// colornicks
// https://github.com/avidal
function clean_nick(nick) {
// attempts to clean up a nickname
// by removing alternate characters from the end
// nc_ becomes nc, avidal` becomes avidal
nick = nick.toLowerCase();
// typically ` and _ are used on the end alone
nick = nick.replace(/[`_]+$/, '');
// remove |<anything> from the end
nick = nick.replace(/|.*$/, '');
return nick;
}
function hash(nick) {
var cleaned = clean_nick(nick);
var h = 0;
for(var i = 0; i < cleaned.length; i++) {
h = cleaned.charCodeAt(i) + (h << 6) + (h << 16) - h;
}
return h;
}
function get_color(nick) {
var nickhash = hash(nick);
// get a random value for the hue
var h = nickhash % 360;
var l = 50;
var s = 100;
// playing around with some numbers
h = 360 + (h % 40);
return "hsl(" + h + "," + s + "%," + l + "%)";
}