client: Add colour coding to make people distinguishable despite

changing pfps

packages/backend/package.json

@@ -40,6 +40,7 @@
 		"cli-highlight": "2.1.11",
 		"color-convert": "2.0.1",
 		"content-disposition": "0.5.4",
+		"crc": "^4.1.1",
 		"date-fns": "2.28.0",
 		"deep-email-validator": "0.1.21",
 		"escape-regexp": "0.0.1",

packages/client/src/components/MkNoteSub.vue

@@ -87,7 +87,7 @@ const replies: foundkey.entities.Note[] = props.conversation?.filter(item => ite
 			margin: 0 8px 0 0;
 			width: 38px;
 			height: 38px;
-			border-radius: calc(8% / 38);
+			border-radius: 50%;
 		}
 
 		> .body {

packages/client/src/components/global/avatar.vue

@@ -1,15 +1,16 @@
 <template>
-<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: defaultStore.state.squareAvatars }" :style="{ color }" :title="acct(user)" @click="onClick">
+<span v-if="disableLink" v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect handleHash" :class="{ cat: user.isCat, square: defaultStore.state.squareAvatars }" :style="{ color, background: handleHash }" :title="acct(user)" @click="onClick">
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </span>
-<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect" :class="{ cat: user.isCat, square: defaultStore.state.squareAvatars }" :style="{ color }" :to="userPage(user)" :title="acct(user)" :target="target">
+<MkA v-else v-user-preview="disablePreview ? undefined : user.id" class="eiwwqkts _noSelect handleHash" :class="{ cat: user.isCat, square: defaultStore.state.squareAvatars }" :style="{ color, background: handleHash }" :to="userPage(user)" :title="acct(user)" :target="target">
 	<img class="inner" :src="url" decoding="async"/>
 	<MkUserOnlineIndicator v-if="showIndicator" class="indicator" :user="user"/>
 </MkA>
 </template>
 
 <script lang="ts" setup>
+import crc32 from 'crc/crc32';
 import { watch } from 'vue';
 import * as foundkey from 'foundkey-js';
 import { getStaticImageUrl } from '@/scripts/get-static-image-url';
@@ -39,6 +40,19 @@ const url = $computed(() => defaultStore.state.disableShowingAnimatedImages
 	? getStaticImageUrl(props.user.avatarUrl)
 	: props.user.avatarUrl);
 
+// colors from Nature Methods column by Bang Wong
+// https://www.nature.com/articles/nmeth.1618
+const hashlette = ['rgb(0, 0, 0)', 'rgb(230, 159, 0)', 'rgb(86, 180, 233)', 'rgb(0, 158, 115)', 'rgb(240, 228, 66)', 'rgb(0, 114, 178)', 'rgb(213, 94, 0)', 'rgb(204, 121, 167)'] as const;
+
+const handleHash = $computed(() => {
+	const stripColours = crc32(acct(props.user)).toString(8).split('').map(digitStr => hashlette[parseInt(digitStr)]);
+	const fraction = 1 / stripColours.length;
+	const positions = stripColours.flatMap((colour, idx) =>
+		[`${colour} ${fraction * idx}turn`, `${colour} ${fraction * (idx + 1)}turn`]
+	);
+	return `conic-gradient(${positions})`;
+});
+
 function onClick(ev: MouseEvent) {
 	emit('click', ev);
 }
@@ -91,6 +105,14 @@ watch(() => props.user.avatarBlurhash, () => {
 		height: 100%;
 	}
 
+	&.handleHash {
+		> .inner {
+			padding: 10%;
+			width: 80%;
+			height: 80%;
+		}
+	}
+
 	> .indicator {
 		position: absolute;
 		z-index: 1;

yarn.lock

@@ -3649,6 +3649,7 @@ __metadata:
     cli-highlight: 2.1.11
     color-convert: 2.0.1
     content-disposition: 0.5.4
+    crc: ^4.1.1
     cross-env: 7.0.3
     date-fns: 2.28.0
     deep-email-validator: 0.1.21
@@ -5160,6 +5161,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crc@npm:^4.1.1":
+  version: 4.1.1
+  resolution: "crc@npm:4.1.1"
+  peerDependencies:
+    buffer: ">=6.0.3"
+  checksum: b2ab89547bd47ac8bdaadcd362d94aa9ddda2ddfe7267e0b449f62a83739bd8f99e9874e4933652d5653ab5f9703eebba9665d03206d600cef2ded9ff3c5c1e2
+  languageName: node
+  linkType: hard
+
 "create-require@npm:^1.1.0":
   version: 1.1.1
   resolution: "create-require@npm:1.1.1"