e2m/dispatch
4
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Use HSLuv for nick colors

Browse source
This commit is contained in:
Ken-Håvard Lieng 2018-10-08 01:34:53 +02:00
parent 6146b27adc
commit afc80650e7
6 changed files with 19 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

4
client/src/js/components/pages/Chat/Message.js
View file

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react';
import classnames from 'classnames';
import stringToHSL from 'utils/color';
import stringToRGB from 'utils/color';
export default class Message extends PureComponent {
handleNickClick = () => this.props.onNickClick(this.props.message.from);
@ -20,7 +20,7 @@ export default class Message extends PureComponent {
const senderStyle = {};
if (message.from) {
senderStyle.color = stringToHSL(message.from);
senderStyle.color = stringToRGB(message.from);
}
return (

4
client/src/js/components/pages/Chat/UserListItem.js
View file

@ -1,5 +1,5 @@
import React, { PureComponent } from 'react';
import stringToHSL from 'utils/color';
import stringToRGB from 'utils/color';
export default class UserListItem extends PureComponent {
handleClick = () => this.props.onClick(this.props.user.nick);
@ -7,7 +7,7 @@ export default class UserListItem extends PureComponent {
render() {
const { user } = this.props;
const style = {
color: stringToHSL(user.nick),
color: stringToRGB(user.nick),
...this.props.style
};

11
client/src/js/utils/color.js
View file

@ -1,21 +1,22 @@
import fnv1a from '@sindresorhus/fnv1a';
import { hsluvToHex } from 'hsluv';
const colors = [];
for (let i = 0; i < 72; i++) {
colors[i] = `hsl(${i * 5}, 30%, 40%)`;
colors[i + 72] = `hsl(${i * 5}, 60%, 40%)`;
colors[i + 144] = `hsl(${i * 5}, 90%, 40%)`;
colors[i] = hsluvToHex([i * 5, 40, 50]);
colors[i + 72] = hsluvToHex([i * 5, 70, 50]);
colors[i + 144] = hsluvToHex([i * 5, 100, 50]);
}
const cache = {};
export default function stringToHSL(str) {
export default function stringToRGB(str) {
if (cache[str]) {
return cache[str];
}
const color = colors[fnv1a(str) % 216];
const color = colors[fnv1a(str) % colors.length];
cache[str] = color;
return color;
}