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

Use HSLuv for nick colors

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/bindata.go
View File

File diff suppressed because one or more lines are too long

1
client/package.json
View File

@ -60,6 +60,7 @@
"fontfaceobserver": "^2.0.9", "fontfaceobserver": "^2.0.9",
"formik": "1.3.1", "formik": "1.3.1",
"history": "4.5.1", "history": "4.5.1",
"hsluv": "^0.0.3",
"immer": "^1.7.2", "immer": "^1.7.2",
"js-cookie": "^2.1.4", "js-cookie": "^2.1.4",
"lodash": "^4.17.11", "lodash": "^4.17.11",

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

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

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

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

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

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

5
client/yarn.lock
View File

@ -4526,6 +4526,11 @@ hsla-regex@^1.0.0:
resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38" resolved "https://registry.yarnpkg.com/hsla-regex/-/hsla-regex-1.0.0.tgz#c1ce7a3168c8c6614033a4b5f7877f3b225f9c38"
integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg= integrity sha1-wc56MWjIxmFAM6S194d/OyJfnDg=
hsluv@^0.0.3:
version "0.0.3"
resolved "https://registry.yarnpkg.com/hsluv/-/hsluv-0.0.3.tgz#829107dafb4a9f8b52a1809ed02e091eade6754c"
integrity sha1-gpEH2vtKn4tSoYCe0C4JHq3mdUw=
html-comment-regex@^1.1.0: html-comment-regex@^1.1.0:
version "1.1.1" version "1.1.1"
resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e" resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.1.tgz#668b93776eaae55ebde8f3ad464b307a4963625e"