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