diff --git a/components/Message.vue b/components/Message.vue index 2bcdcfc..e1d3c6c 100644 --- a/components/Message.vue +++ b/components/Message.vue @@ -40,7 +40,7 @@
- + {{ author?.display_name || author?.username }} @@ -71,6 +71,7 @@ import DOMPurify from 'dompurify'; import { parse } from 'marked'; import type { MessageProps } from '~/types/props'; +import generateIrcColor from '~/utils/generateIrcColor'; const props = defineProps(); @@ -117,6 +118,8 @@ onMounted(async () => { // showHover.value = !showHover.value; //} +console.log(props.authorColor) + const menuItems = [ { name: "Reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } } ] diff --git a/components/MessageArea.vue b/components/MessageArea.vue index d59b862..cae68f1 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/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..d2ed643 --- /dev/null +++ b/utils/generateIrcColor.ts @@ -0,0 +1,12 @@ +import xxhash from "xxhash-wasm" + +const { h64 } = await xxhash() + +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