Add: Generated Avatar colors
This commit is contained in:
parent
a22e35affe
commit
44368a71e1
GPG Key ID:
63020D8D3F4A164F
@ -1,4 +1,7 @@
|
||||
<script>
|
||||
import { generateQuadColors } from "$lib/client/color";
|
||||
import { hashOf } from "$lib/client/hash";
|
||||
|
||||
/**
|
||||
* @type {import("$types/base").User}
|
||||
*/
|
||||
@ -8,6 +11,63 @@
|
||||
* @type {number}
|
||||
*/
|
||||
export let size;
|
||||
|
||||
/**
|
||||
* @type {import("$types/base").User | null}
|
||||
*/
|
||||
export let user;
|
||||
|
||||
/**
|
||||
* @param {import("$types/base").User | null} user
|
||||
* @returns {string}
|
||||
*/
|
||||
function getSeedForOptionalUser(user) {
|
||||
if (user) return String(user.id);
|
||||
return String(Math.random());
|
||||
}
|
||||
|
||||
$: colors = generateQuadColors(getSeedForOptionalUser(user));
|
||||
|
||||
/**
|
||||
* @typedef {{r: number, g: number, b: number}} rgb
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {rgb} color
|
||||
* @returns {string}
|
||||
*/
|
||||
function colorToCSS(color) {
|
||||
return `rgb(${color.r}, ${color.g}, ${color.b})`;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {{
|
||||
* c1: rgb,
|
||||
* c2: rgb,
|
||||
* c3: rgb,
|
||||
* c4: rgb,
|
||||
* c13: rgb,
|
||||
* c14: rgb,
|
||||
* c23: rgb,
|
||||
* c24: rgb
|
||||
* }} colors
|
||||
* @returns {string}
|
||||
*/
|
||||
function createStyleForColors(colors) {
|
||||
return `
|
||||
--color-1: ${colorToCSS(colors.c1)};
|
||||
--color-2: ${colorToCSS(colors.c2)};
|
||||
--color-3: ${colorToCSS(colors.c3)};
|
||||
--color-4: ${colorToCSS(colors.c4)};
|
||||
--color-1-3: ${colorToCSS(colors.c13)};
|
||||
--color-1-4: ${colorToCSS(colors.c14)};
|
||||
--color-2-3: ${colorToCSS(colors.c23)};
|
||||
--color- 2-4: ${colorToCSS(colors.c24)};
|
||||
${user ? '' : 'filter: grayscale(1) contrast(0.5);'}
|
||||
`;
|
||||
}
|
||||
|
||||
$: style = createStyleForColors(colors);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@ -16,6 +76,6 @@
|
||||
}
|
||||
</style>
|
||||
|
||||
<svg class="icon" viewBox="0 0 100 100" height={size} width={size}>
|
||||
<svg class="icon" viewBox="0 0 100 100" height={size} width={size} style={style}>
|
||||
<use href="/avatar.svg#avatar"></use>
|
||||
</svg>
|
||||
|
||||
@ -84,7 +84,7 @@
|
||||
|
||||
<div class="message">
|
||||
<div class="avatar">
|
||||
<Avatar size={48}></Avatar>
|
||||
<Avatar size={48} user={comment.author}></Avatar>
|
||||
</div>
|
||||
<div class="content">
|
||||
<GlowFX borderRadius={16}>
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
<div class="body">
|
||||
<article class="post">
|
||||
<div class="postHead">
|
||||
<Avatar size={64}></Avatar>
|
||||
<Avatar size={64} user={post.author}></Avatar>
|
||||
<div class="titleBar">
|
||||
<div class="postInfo">
|
||||
<Mention user={post.author}></Mention>
|
||||
|
||||
@ -103,7 +103,7 @@
|
||||
|
||||
<div class="postContainer">
|
||||
<div class="sidePad">
|
||||
<Avatar size={32}></Avatar>
|
||||
<Avatar size={32} user={post.author}></Avatar>
|
||||
<RatingVertical rating={post.rating}></RatingVertical>
|
||||
</div>
|
||||
|
||||
|
||||
@ -17,5 +17,5 @@
|
||||
</style>
|
||||
|
||||
<Mention user={user}>
|
||||
<Avatar size={iconSize}></Avatar>
|
||||
<Avatar size={iconSize} seed={user?.id}></Avatar>
|
||||
</Mention>
|
||||
|
||||
68
src/lib/client/color.js
Normal file
68
src/lib/client/color.js
Normal file
@ -0,0 +1,68 @@
|
||||
import seedrandom from "seedrandom";
|
||||
|
||||
/**
|
||||
* @typedef {{r: number, g: number, b: number}} rgb
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {seedrandom.PRNG} random
|
||||
* @returns {rgb}
|
||||
*/
|
||||
function createColor(random) {
|
||||
const r = random.quick();
|
||||
const g = random.quick();
|
||||
const b = random.quick();
|
||||
const normal = Math.pow(r, 2) + Math.pow(g, 2) + Math.pow(b, 2);
|
||||
return {
|
||||
r: Math.round(r / normal * 255),
|
||||
g: Math.round(g / normal * 255),
|
||||
b: Math.round(b / normal * 255)
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {rgb} a
|
||||
* @param {rgb} b
|
||||
* @returns {rgb}
|
||||
*/
|
||||
function mixColors(a, b) {
|
||||
return {
|
||||
r: Math.round(a.r * b.r / 255),
|
||||
g: Math.round(a.g * b.g / 255),
|
||||
b: Math.round(a.b * b.b / 255),
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} seed
|
||||
* @returns {{
|
||||
* c1: rgb,
|
||||
* c2: rgb,
|
||||
* c3: rgb,
|
||||
* c4: rgb,
|
||||
* c13: rgb,
|
||||
* c14: rgb,
|
||||
* c23: rgb,
|
||||
* c24: rgb
|
||||
* }}
|
||||
*/
|
||||
export function generateQuadColors(seed) {
|
||||
const r = seedrandom(seed);
|
||||
|
||||
const c1 = createColor(r);
|
||||
const c2 = createColor(r);
|
||||
const c3 = createColor(r);
|
||||
const c4 = createColor(r);
|
||||
|
||||
return {
|
||||
c1: c1,
|
||||
c2: c2,
|
||||
c3: c3,
|
||||
c4: c4,
|
||||
c13: mixColors(c1, c3),
|
||||
c14: mixColors(c1, c4),
|
||||
c23: mixColors(c2, c3),
|
||||
c24: mixColors(c2, c4),
|
||||
};
|
||||
}
|
||||
22
src/lib/client/hash.js
Normal file
22
src/lib/client/hash.js
Normal file
@ -0,0 +1,22 @@
|
||||
/**
|
||||
* https://stackoverflow.com/a/8076436
|
||||
* @param {string} string
|
||||
* @returns {number}
|
||||
*/
|
||||
export function hashCode(string) {
|
||||
var hash = 0;
|
||||
for (var i = 0; i < string.length; i++) {
|
||||
var code = string.charCodeAt(i);
|
||||
hash = ((hash<<5)-hash)+code;
|
||||
hash = hash & hash; // Convert to 32bit integer
|
||||
}
|
||||
return hash;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {any} any
|
||||
* @returns {number}
|
||||
*/
|
||||
export function hashOf(any) {
|
||||
return hashCode(String(any));
|
||||
}
|
||||
@ -7,99 +7,57 @@
|
||||
viewBox="0 0 100 100"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
|
||||
sodipodi:docname="avatar.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#232323"
|
||||
bordercolor="#424242"
|
||||
borderopacity="1"
|
||||
inkscape:showpageshadow="false"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pagecheckerboard="false"
|
||||
inkscape:deskcolor="#1e1e1e"
|
||||
inkscape:document-units="px"
|
||||
inkscape:clip-to-page="false"
|
||||
labelstyle="default"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.54386574"
|
||||
inkscape:cx="1420.3873"
|
||||
inkscape:cy="418.30177"
|
||||
inkscape:window-width="3440"
|
||||
inkscape:window-height="1417"
|
||||
inkscape:window-x="-8"
|
||||
inkscape:window-y="-8"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1">
|
||||
<inkscape:grid
|
||||
id="grid1"
|
||||
units="px"
|
||||
originx="0"
|
||||
originy="0"
|
||||
spacingx="1"
|
||||
spacingy="1"
|
||||
empcolor="#0099e5"
|
||||
empopacity="0.30196078"
|
||||
color="#0099e5"
|
||||
opacity="0.14901961"
|
||||
empspacing="5"
|
||||
dotted="false"
|
||||
gridanglex="30"
|
||||
gridanglez="30"
|
||||
visible="false" />
|
||||
</sodipodi:namedview>
|
||||
<defs
|
||||
id="defs1">
|
||||
</defs>
|
||||
id="defs1" />
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="avatar">
|
||||
<g
|
||||
id="g7">
|
||||
<rect
|
||||
style="fill:#ffffff"
|
||||
id="rect1"
|
||||
width="100"
|
||||
height="100"
|
||||
x="0"
|
||||
y="0" />
|
||||
<rect
|
||||
style="mix-blend-mode:multiply;fill:#712e91;fill-opacity:1;stroke-width:0.402561"
|
||||
id="rect4"
|
||||
width="72.597359"
|
||||
height="181.80991"
|
||||
x="20.128069"
|
||||
y="-24.013468"
|
||||
transform="rotate(-45)" />
|
||||
<rect
|
||||
style="mix-blend-mode:multiply;fill:#712e91;fill-opacity:1;stroke-width:0.402561"
|
||||
id="rect5"
|
||||
width="72.597359"
|
||||
height="181.80991"
|
||||
x="-92.725426"
|
||||
y="-20.194273"
|
||||
transform="rotate(-45)" />
|
||||
<rect
|
||||
style="mix-blend-mode:multiply;fill:#6fff75;fill-opacity:1;stroke-width:0.402561"
|
||||
id="rect6"
|
||||
width="72.597359"
|
||||
height="181.80991"
|
||||
x="90.838745"
|
||||
y="-90.904953"
|
||||
transform="rotate(45)" />
|
||||
<rect
|
||||
style="mix-blend-mode:multiply;fill:#ff9c32;fill-opacity:1;stroke-width:0.402561"
|
||||
id="rect7"
|
||||
width="72.597359"
|
||||
height="181.80991"
|
||||
x="-22.014748"
|
||||
y="-90.904953"
|
||||
transform="rotate(45)" />
|
||||
</g>
|
||||
<circle
|
||||
style="fill:#ffffff;fill-opacity:1;stroke-width:0.0569325"
|
||||
id="path1"
|
||||
cx="50"
|
||||
cy="50"
|
||||
r="28.466251" />
|
||||
<path
|
||||
id="rect4"
|
||||
style="mix-blend-mode:normal;fill:var(--color-1);fill-opacity:1;stroke-width:0.402561"
|
||||
d="m 45.763067,50.571946 -25.635383,0.01105 v 40.255373 l 25.632621,0.01104 c 5.536176,-12.587996 5.761582,-27.191656 0.0028,-40.277465 z"
|
||||
transform="rotate(-45)" />
|
||||
<path
|
||||
id="rect5"
|
||||
style="mix-blend-mode:normal;fill:var(--color-2);fill-opacity:1;stroke-width:0.402561"
|
||||
d="m -20.127684,50.582994 -25.595332,-0.10358 c -5.683409,12.853508 -5.683248,27.607036 -0.0055,40.459766 l 25.599837,-0.09982 z"
|
||||
transform="rotate(-45)" />
|
||||
<path
|
||||
id="rect6"
|
||||
style="mix-blend-mode:normal;fill:var(--color-3);fill-opacity:1;stroke-width:0.402561"
|
||||
d="m 90.846649,-20.127684 -0.0073,40.256363 25.599863,0.09982 c 5.67607,-12.8489601 5.67837,-27.597966 0,-40.448718 z"
|
||||
transform="rotate(45)" />
|
||||
<path
|
||||
id="rect7"
|
||||
style="mix-blend-mode:normal;fill:var(--color-4);fill-opacity:1;stroke-width:0.402561"
|
||||
d="m 24.982138,-20.228502 c -5.676074,12.8489601 -5.678373,27.597966 0,40.448718 l 25.600856,-0.09253 -0.0055,-40.255368 z m 3.860085,47.570885 c 0.114634,0.175155 0.233731,0.348023 0.350791,0.522044 -0.11731,-0.173469 -0.235707,-0.347105 -0.350791,-0.522044 z m 1.285774,1.860298 c 0.209419,0.290295 0.424405,0.577795 0.640815,0.864549 -0.21638,-0.28559 -0.430607,-0.574591 -0.640815,-0.864549 z m 1.393497,1.83544 c 0.409829,0.516193 0.833281,1.025449 1.26644,1.528842 -0.431655,-0.502479 -0.854542,-1.011237 -1.26644,-1.528842 z m 1.535748,1.842344 c 0.335636,0.383642 0.678179,0.762331 1.027515,1.138 -0.346814,-0.375617 -0.691845,-0.753278 -1.027515,-1.138 z"
|
||||
transform="rotate(45)" />
|
||||
<path
|
||||
id="rect15"
|
||||
style="mix-blend-mode:normal;fill:var(--color-2-3);fill-opacity:1;stroke-width:0.402561"
|
||||
d="m -20.127684,90.838362 -25.609624,0.101299 c 2.456862,5.667344 6.04389,10.729079 10.381969,15.126359 4.397275,4.33808 9.458961,7.92516 15.126304,10.38202 z"
|
||||
transform="rotate(-45)" />
|
||||
<path
|
||||
id="rect16"
|
||||
style="mix-blend-mode:normal;fill:var(--color-1-3);fill-opacity:1;stroke-width:0.402561"
|
||||
d="m 45.766216,90.849797 -25.638532,-0.01143 0.09286,25.601188 c 5.667343,-2.45686 10.737519,-6.03545 15.134794,-10.37353 4.380584,-4.38724 7.918459,-9.539492 10.410878,-15.216223 z"
|
||||
transform="rotate(-45)" />
|
||||
<path
|
||||
id="rect17"
|
||||
style="mix-blend-mode:normal;fill:var(--color-1-4);fill-opacity:1;stroke-width:0.402561"
|
||||
d="M 35.355339,35.355339 C 30.958064,31.017261 25.89639,27.43017 20.229046,24.973307 l -0.101362,25.609687 25.637555,-0.01046 C 43.27282,44.895806 39.735923,39.742582 35.355339,35.355339 Z"
|
||||
transform="rotate(-45)" />
|
||||
<path
|
||||
id="path24"
|
||||
style="mix-blend-mode:normal;fill:var(--color-2-4);fill-opacity:1;stroke-width:0.402561"
|
||||
d="m -20.220545,24.981808 c -5.667343,2.456863 -10.737519,6.035453 -15.134794,10.373531 -4.338078,4.397275 -7.926869,9.45725 -10.383732,15.124593 l 25.611387,0.103062 z"
|
||||
transform="rotate(-45)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 3.5 KiB |
Loading…
x
Reference in New Issue
Block a user