diff --git a/components/Message.vue b/components/Message.vue index 9c2c0c8..06dc9cb 100644 --- a/components/Message.vue +++ b/components/Message.vue @@ -36,7 +36,7 @@
- + {{ author?.display_name || author?.username }} @@ -69,6 +69,7 @@ import DOMPurify from 'dompurify'; import { parse } from 'marked'; import type { MessageProps } from '~/types/props'; +import generateIrcColor from '~/utils/generateIrcColor'; import MessageMedia from './MessageMedia.vue'; import MessageReply from './UserInterface/MessageReply.vue'; diff --git a/components/MessageArea.vue b/components/MessageArea.vue index c91efe8..9a8f17f 100644 --- a/components/MessageArea.vue +++ b/components/MessageArea.vue @@ -7,6 +7,7 @@ :margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false" :last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me" :message="message" :is-reply="message.reply_to" + :author-color="`${generateIrcColor(message.user.uuid)}`" :reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
diff --git a/package.json b/package.json index 5d7d19e..42347b1 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,8 @@ "pinia-plugin-persistedstate": "^4.2.0", "typescript": "^5.8.3", "vue": "^3.5.13", - "vue-router": "^4.5.1" + "vue-router": "^4.5.1", + "xxhash-wasm": "^1.1.0" }, "packageManager": "pnpm@10.11.0", "license": "MIT", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6a8cf2c..6b461e5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -47,6 +47,9 @@ importers: vue-router: specifier: ^4.5.1 version: 4.5.1(vue@3.5.13(typescript@5.8.3)) + xxhash-wasm: + specifier: ^1.1.0 + version: 1.1.0 devDependencies: '@iconify-json/lucide': specifier: ^1.2.44 @@ -4744,6 +4747,9 @@ packages: engines: {node: '>= 0.10.0'} hasBin: true + xxhash-wasm@1.1.0: + resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==} + y18n@5.0.8: resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==} engines: {node: '>=10'} @@ -10146,6 +10152,8 @@ snapshots: cssfilter: 0.0.10 optional: true + xxhash-wasm@1.1.0: {} + y18n@5.0.8: {} yallist@3.1.1: {} diff --git a/types/props.ts b/types/props.ts index aa6ff0c..fe2b049 100644 --- a/types/props.ts +++ b/types/props.ts @@ -9,6 +9,7 @@ export interface MessageProps { format: "12" | "24", type: "normal" | "grouped", marginBottom: boolean, + authorColor: string, last: boolean, messageId: string, replyingTo?: boolean, diff --git a/utils/generateIrcColor.ts b/utils/generateIrcColor.ts new file mode 100644 index 0000000..24d4946 --- /dev/null +++ b/utils/generateIrcColor.ts @@ -0,0 +1,15 @@ +import xxhash from "xxhash-wasm" + +let h64: CallableFunction; +(async () => { + h64 = (await xxhash()).h64; +})(); + +export default (seed: string): string => { + const lightness = 50 + + // this should probably be cached eventually + const idHash = h64(seed) + + return `hsl(${idHash % 360n}, 100%, ${lightness}%)` +} \ No newline at end of file