Add: Generated Avatar colors

src/comp/avatar.svelte

@@ -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>

src/comp/comment.svelte

@@ -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}>

src/comp/page/post.svelte

@@ -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>

src/comp/postcard.svelte

@@ -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>
 

src/comp/useritem.svelte

@@ -17,5 +17,5 @@
 </style>
 
 <Mention user={user}>
-  <Avatar size={iconSize}></Avatar>
+  <Avatar size={iconSize} seed={user?.id}></Avatar>
 </Mention>

src/lib/client/color.js

@@ -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),
+  };
+}

src/lib/client/hash.js

@@ -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));
+}

static/avatar.svg

@@ -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">
+     id="defs1" />
-  </defs>
   <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
      id="avatar">
-    <g
+    <circle
-       id="g7">
+       style="fill:#ffffff;fill-opacity:1;stroke-width:0.0569325"
-      <rect
+       id="path1"
-         style="fill:#ffffff"
+       cx="50"
-         id="rect1"
+       cy="50"
-         width="100"
+       r="28.466251" />
-         height="100"
+    <path
-         x="0"
-         y="0" />
-      <rect
-         style="mix-blend-mode:multiply;fill:#712e91;fill-opacity:1;stroke-width:0.402561"
        id="rect4"
-         width="72.597359"
+       style="mix-blend-mode:normal;fill:var(--color-1);fill-opacity:1;stroke-width:0.402561"
-         height="181.80991"
+       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"
-         x="20.128069"
-         y="-24.013468"
        transform="rotate(-45)" />
-      <rect
+    <path
-         style="mix-blend-mode:multiply;fill:#712e91;fill-opacity:1;stroke-width:0.402561"
        id="rect5"
-         width="72.597359"
+       style="mix-blend-mode:normal;fill:var(--color-2);fill-opacity:1;stroke-width:0.402561"
-         height="181.80991"
+       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"
-         x="-92.725426"
-         y="-20.194273"
        transform="rotate(-45)" />
-      <rect
+    <path
-         style="mix-blend-mode:multiply;fill:#6fff75;fill-opacity:1;stroke-width:0.402561"
        id="rect6"
-         width="72.597359"
+       style="mix-blend-mode:normal;fill:var(--color-3);fill-opacity:1;stroke-width:0.402561"
-         height="181.80991"
+       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"
-         x="90.838745"
-         y="-90.904953"
        transform="rotate(45)" />
-      <rect
+    <path
-         style="mix-blend-mode:multiply;fill:#ff9c32;fill-opacity:1;stroke-width:0.402561"
        id="rect7"
-         width="72.597359"
+       style="mix-blend-mode:normal;fill:var(--color-4);fill-opacity:1;stroke-width:0.402561"
-         height="181.80991"
+       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"
-         x="-22.014748"
-         y="-90.904953"
        transform="rotate(45)" />
-    </g>
+    <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>