From 6e101b6ac0cb3ab6b7651835c97a6adc475efe00 Mon Sep 17 00:00:00 2001
From: m1k1o <sedivy.miro@gmail.com>
Date: Sun, 18 Oct 2020 14:39:31 +0200
Subject: [PATCH 1/2] create avatars component

---
 client/src/components/avatar.vue  | 15 +++++++++++++++
 client/src/components/chat.vue    |  4 +++-
 client/src/components/context.vue |  4 +++-
 client/src/components/members.vue | 14 ++++++++------
 4 files changed, 29 insertions(+), 8 deletions(-)
 create mode 100644 client/src/components/avatar.vue

diff --git a/client/src/components/avatar.vue b/client/src/components/avatar.vue
new file mode 100644
index 00000000..43eda6d2
--- /dev/null
+++ b/client/src/components/avatar.vue
@@ -0,0 +1,15 @@
+<template>
+	<img :src="`https://ui-avatars.com/api/?name=${seed}&size=${size}`" />
+</template>
+
+<script lang="ts">
+  import { Vue, Component, Prop } from 'vue-property-decorator'
+
+  @Component({
+    name: 'neko-avatar',
+  })
+  export default class extends Vue {
+  	@Prop(String) readonly seed: string | undefined;
+  	@Prop(Number) readonly size: number | undefined;
+  }
+</script>
diff --git a/client/src/components/chat.vue b/client/src/components/chat.vue
index 619909af..965114d5 100644
--- a/client/src/components/chat.vue
+++ b/client/src/components/chat.vue
@@ -4,7 +4,7 @@
       <template v-for="(message, index) in history">
         <li :key="index" class="message" v-if="message.type === 'text'">
           <div class="author" @contextmenu.stop.prevent="onContext($event, { member: member(message.id) })">
-            <img :src="`https://api.adorable.io/avatars/40/${member(message.id).displayname}.png`" />
+            <neko-avatar :seed="member(message.id).displayname" :size="40" />
           </div>
           <div class="content">
             <div class="content-head">
@@ -329,6 +329,7 @@
   import Markdown from './markdown'
   import Content from './context.vue'
   import Emoji from './emoji.vue'
+  import Avatar from './avatar.vue'
 
   const length = 512 // max length of message
 
@@ -338,6 +339,7 @@
       'neko-markdown': Markdown,
       'neko-context': Content,
       'neko-emoji': Emoji,
+      'neko-avatar': Avatar,
     },
   })
   export default class extends Vue {
diff --git a/client/src/components/context.vue b/client/src/components/context.vue
index db2de331..da746e2b 100644
--- a/client/src/components/context.vue
+++ b/client/src/components/context.vue
@@ -3,7 +3,7 @@
     <template slot-scope="child" v-if="child.data">
       <li class="header">
         <div class="user">
-          <img :src="`https://api.adorable.io/avatars/25/${child.data.member.displayname}.png`" />
+          <neko-avatar :seed="child.data.member.displayname" :size="25" />
           <strong>{{ child.data.member.displayname }}</strong>
         </div>
       </li>
@@ -137,11 +137,13 @@
 
   // @ts-ignore
   import { VueContext } from 'vue-context'
+  import Avatar from './avatar.vue'
 
   @Component({
     name: 'neko-context',
     components: {
       'vue-context': VueContext,
+      'neko-avatar': Avatar,
     },
   })
   export default class extends Vue {
diff --git a/client/src/components/members.vue b/client/src/components/members.vue
index 5f8cf7f4..ae884d73 100644
--- a/client/src/components/members.vue
+++ b/client/src/components/members.vue
@@ -4,7 +4,7 @@
       <ul class="members-list">
         <li v-if="member">
           <div :class="[{ host: member.id === host }, 'self', 'member']">
-            <img :src="`https://api.adorable.io/avatars/50/${member.displayname}.png`" />
+            <neko-avatar :seed="member.displayname" :size="50" />
           </div>
         </li>
         <template v-for="(member, index) in members">
@@ -13,11 +13,11 @@
             :key="index"
             v-tooltip="{ content: member.displayname, placement: 'bottom', offset: -15, boundariesElement: 'body' }"
           >
-            <div :class="[{ host: member.id === host, admin: member.admin }, 'member']">
-              <img
-                :src="`https://api.adorable.io/avatars/50/${member.displayname}.png`"
-                @contextmenu.stop.prevent="onContext($event, { member })"
-              />
+            <div
+              :class="[{ host: member.id === host, admin: member.admin }, 'member']"
+              @contextmenu.stop.prevent="onContext($event, { member })"
+            >
+              <neko-avatar :seed="member.displayname" :size="50" />
             </div>
           </li>
         </template>
@@ -161,11 +161,13 @@
   import { Member } from '~/neko/types'
 
   import Content from './context.vue'
+  import Avatar from './avatar.vue'
 
   @Component({
     name: 'neko-members',
     components: {
       'neko-context': Content,
+      'neko-avatar': Avatar,
     },
   })
   export default class extends Vue {

From aeb98e60cd387cb7c11360ccc4755ef2d5931126 Mon Sep 17 00:00:00 2001
From: m1k1o <sedivy.miro@gmail.com>
Date: Sun, 18 Oct 2020 15:13:12 +0200
Subject: [PATCH 2/2] custom avatars

---
 client/src/components/avatar.vue  | 43 ++++++++++++++++++++++++++++---
 client/src/components/chat.vue    |  4 +--
 client/src/components/context.vue |  4 +--
 client/src/components/members.vue |  6 ++---
 4 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/client/src/components/avatar.vue b/client/src/components/avatar.vue
index 43eda6d2..bfa0170e 100644
--- a/client/src/components/avatar.vue
+++ b/client/src/components/avatar.vue
@@ -1,7 +1,30 @@
 <template>
-	<img :src="`https://ui-avatars.com/api/?name=${seed}&size=${size}`" />
+  <!--
+      <img :src="`https://ui-avatars.com/api/?name=${seed}&size=${size}`" />
+  -->
+  <div class="avatar" :style="{
+    width: size + 'px',
+    height: size + 'px',
+    lineHeight: size + 'px',
+    fontSize: (size/2) + 'px',
+    backgroundColor: Background(),
+  }">
+    {{ seed.substring(0, 2).toUpperCase() }}
+  </div>
 </template>
 
+<style lang="scss" scoped>
+  .avatar {
+    user-select: none;
+    text-align: center;
+    background: white;
+    color: black;
+    display: inline-block;
+    overflow: hidden;
+    border-radius: 50%;
+  }
+</style>
+
 <script lang="ts">
   import { Vue, Component, Prop } from 'vue-property-decorator'
 
@@ -9,7 +32,21 @@
     name: 'neko-avatar',
   })
   export default class extends Vue {
-  	@Prop(String) readonly seed: string | undefined;
-  	@Prop(Number) readonly size: number | undefined;
+    @Prop(String) readonly seed: string | undefined;
+    @Prop(Number) readonly size: number | undefined;
+
+    Background() {
+      let a = 0, b = 0, c = 0;
+      for(let i = 0; i < this.seed.length; i++) {
+        a += this.seed.charCodeAt(i) * 3;
+        b += this.seed.charCodeAt(i) * 5;
+        c += this.seed.charCodeAt(i) * 7;
+      }
+
+      let x = Math.floor(128 + (a % 128));
+      let y = Math.floor(128 + (b % 128));
+      let z = Math.floor(128 + (c % 128));
+      return "rgb(" + x + "," + y + "," + z + ")";
+    }
   }
 </script>
diff --git a/client/src/components/chat.vue b/client/src/components/chat.vue
index 965114d5..83abf8c8 100644
--- a/client/src/components/chat.vue
+++ b/client/src/components/chat.vue
@@ -4,7 +4,7 @@
       <template v-for="(message, index) in history">
         <li :key="index" class="message" v-if="message.type === 'text'">
           <div class="author" @contextmenu.stop.prevent="onContext($event, { member: member(message.id) })">
-            <neko-avatar :seed="member(message.id).displayname" :size="40" />
+            <neko-avatar class="avatar" :seed="member(message.id).displayname" :size="40" />
           </div>
           <div class="content">
             <div class="content-head">
@@ -106,7 +106,7 @@
             background: $style-primary;
             margin: 0px 10px 10px 0px;
 
-            img {
+            .avatar {
               width: 100%;
             }
           }
diff --git a/client/src/components/context.vue b/client/src/components/context.vue
index da746e2b..8c1901ae 100644
--- a/client/src/components/context.vue
+++ b/client/src/components/context.vue
@@ -3,7 +3,7 @@
     <template slot-scope="child" v-if="child.data">
       <li class="header">
         <div class="user">
-          <neko-avatar :seed="child.data.member.displayname" :size="25" />
+          <neko-avatar class="avatar" :seed="child.data.member.displayname" :size="25" />
           <strong>{{ child.data.member.displayname }}</strong>
         </div>
       </li>
@@ -80,7 +80,7 @@
           align-content: center;
           padding: 5px 0;
 
-          img {
+          .avatar {
             width: 25px;
             height: 25px;
             border-radius: 50%;
diff --git a/client/src/components/members.vue b/client/src/components/members.vue
index ae884d73..8974c3d0 100644
--- a/client/src/components/members.vue
+++ b/client/src/components/members.vue
@@ -4,7 +4,7 @@
       <ul class="members-list">
         <li v-if="member">
           <div :class="[{ host: member.id === host }, 'self', 'member']">
-            <neko-avatar :seed="member.displayname" :size="50" />
+            <neko-avatar class="avatar" :seed="member.displayname" :size="50" />
           </div>
         </li>
         <template v-for="(member, index) in members">
@@ -17,7 +17,7 @@
               :class="[{ host: member.id === host, admin: member.admin }, 'member']"
               @contextmenu.stop.prevent="onContext($event, { member })"
             >
-              <neko-avatar :seed="member.displayname" :size="50" />
+              <neko-avatar class="avatar" :seed="member.displayname" :size="50" />
             </div>
           </li>
         </template>
@@ -130,7 +130,7 @@
               border-radius: 50%;
             }
 
-            img {
+            .avatar {
               border-radius: 50%;
               overflow: hidden;
               width: 100%;