From 4b3aa19874fbb3b8cf9761e5f5317b7136d8eb08 Mon Sep 17 00:00:00 2001 From: smolgrrr Date: Fri, 3 Nov 2023 00:36:47 +1100 Subject: [PATCH] change deterministic icons gen --- client/src/components/PostCard/PostCard.tsx | 35 ++--------------- client/src/components/Thread/OPCard.tsx | 35 ++--------------- client/src/components/Thread/ReplyCard.tsx | 37 ++---------------- client/src/utils/deterministicProfileIcon.ts | 40 ++++++++++++++++++++ 4 files changed, 50 insertions(+), 97 deletions(-) create mode 100644 client/src/utils/deterministicProfileIcon.ts diff --git a/client/src/components/PostCard/PostCard.tsx b/client/src/components/PostCard/PostCard.tsx index 368d35a..0add60c 100644 --- a/client/src/components/PostCard/PostCard.tsx +++ b/client/src/components/PostCard/PostCard.tsx @@ -6,36 +6,7 @@ import { nip19 } from "nostr-tools"; import { getMetadata } from "../../utils/utils"; import ContentPreview from "../Modals/TextModal"; import { renderMedia } from "../../utils/FileUpload"; - -const colorCombos = [ - "from-red-400 to-yellow-500", - "from-green-400 to-blue-500", - "from-purple-400 to-pink-500", - "from-yellow-400 to-orange-500", - "from-indigo-400 to-purple-500", - "from-pink-400 to-red-500", - "from-blue-400 to-indigo-500", - "from-orange-400 to-red-500", - "from-teal-400 to-green-500", - "from-cyan-400 to-teal-500", - "from-lime-400 to-green-500", - "from-amber-400 to-orange-500", - "from-rose-400 to-pink-500", - "from-violet-400 to-purple-500", - "from-sky-400 to-cyan-500", -]; - -const getColorFromHash = (id: string, colors: string[]): string => { - // Create a simple hash from the event.id - let hash = 0; - for (let i = 0; i < id.length; i++) { - hash = (hash << 5) - hash + id.charCodeAt(i); - } - - // Use the hash to pick a color from the colors array - const index = Math.abs(hash) % colors.length; - return colors[index]; -}; +import { getIconFromHash } from "../../utils/deterministicProfileIcon"; const timeAgo = (unixTime: number) => { const seconds = Math.floor(new Date().getTime() / 1000 - unixTime); @@ -67,7 +38,7 @@ const PostCard = ({ replyCount: number; }) => { let { comment, file } = parseContent(event); - const colorCombo = getColorFromHash(event.pubkey, colorCombos); + const icon = getIconFromHash(event.pubkey); let metadataParsed = null; if (metadata !== null) { @@ -96,7 +67,7 @@ const PostCard = ({ ) : ( <>
Anonymous
diff --git a/client/src/components/Thread/OPCard.tsx b/client/src/components/Thread/OPCard.tsx index 9386608..121851b 100644 --- a/client/src/components/Thread/OPCard.tsx +++ b/client/src/components/Thread/OPCard.tsx @@ -5,36 +5,7 @@ import { Event } from 'nostr-tools'; import { getMetadata } from '../../utils/utils'; import ContentPreview from '../Modals/TextModal'; import { renderMedia } from '../../utils/FileUpload'; - -const colorCombos = [ - 'from-red-400 to-yellow-500', - 'from-green-400 to-blue-500', - 'from-purple-400 to-pink-500', - 'from-yellow-400 to-orange-500', - 'from-indigo-400 to-purple-500', - 'from-pink-400 to-red-500', - 'from-blue-400 to-indigo-500', - 'from-orange-400 to-red-500', - 'from-teal-400 to-green-500', - 'from-cyan-400 to-teal-500', - 'from-lime-400 to-green-500', - 'from-amber-400 to-orange-500', - 'from-rose-400 to-pink-500', - 'from-violet-400 to-purple-500', - 'from-sky-400 to-cyan-500' -]; - -const getColorFromHash = (id: string, colors: string[]): string => { - // Create a simple hash from the event.id - let hash = 0; - for (let i = 0; i < id.length; i++) { - hash = (hash << 5) - hash + id.charCodeAt(i); - } - - // Use the hash to pick a color from the colors array - const index = Math.abs(hash) % colors.length; - return colors[index]; -}; +import { getIconFromHash } from '../../utils/deterministicProfileIcon'; const timeAgo = (unixTime: number) => { const seconds = Math.floor((new Date().getTime() / 1000) - unixTime); @@ -56,7 +27,7 @@ const timeAgo = (unixTime: number) => { const OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event | null, replyCount: number}) => { const { comment, file } = parseContent(event); - const colorCombo = getColorFromHash(event.pubkey, colorCombos); + const icon = getIconFromHash(event.pubkey); let metadataParsed = null; if (metadata !== null) { @@ -76,7 +47,7 @@ const OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event : <> -
+
Anonymous
} diff --git a/client/src/components/Thread/ReplyCard.tsx b/client/src/components/Thread/ReplyCard.tsx index 86a2486..a415130 100644 --- a/client/src/components/Thread/ReplyCard.tsx +++ b/client/src/components/Thread/ReplyCard.tsx @@ -6,36 +6,7 @@ import { nip19 } from 'nostr-tools'; import { getMetadata, uniqBy } from '../../utils/utils'; import ContentPreview from '../Modals/TextModal'; import { renderMedia } from '../../utils/FileUpload'; - -const colorCombos = [ - 'from-red-400 to-yellow-500', - 'from-green-400 to-blue-500', - 'from-purple-400 to-pink-500', - 'from-yellow-400 to-orange-500', - 'from-indigo-400 to-purple-500', - 'from-pink-400 to-red-500', - 'from-blue-400 to-indigo-500', - 'from-orange-400 to-red-500', - 'from-teal-400 to-green-500', - 'from-cyan-400 to-teal-500', - 'from-lime-400 to-green-500', - 'from-amber-400 to-orange-500', - 'from-rose-400 to-pink-500', - 'from-violet-400 to-purple-500', - 'from-sky-400 to-cyan-500' -]; - -const getColorFromHash = (id: string, colors: string[]): string => { - // Create a simple hash from the event.id - let hash = 0; - for (let i = 0; i < id.length; i++) { - hash = (hash << 5) - hash + id.charCodeAt(i); - } - - // Use the hash to pick a color from the colors array - const index = Math.abs(hash) % colors.length; - return colors[index]; -}; +import { getIconFromHash } from '../../utils/deterministicProfileIcon'; const timeAgo = (unixTime: number) => { const seconds = Math.floor((new Date().getTime() / 1000) - unixTime); @@ -57,7 +28,7 @@ const timeAgo = (unixTime: number) => { const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, metadata: Event | null, replyCount: number, repliedTo: Event[] }) => { const { comment, file } = parseContent(event); - const colorCombo = getColorFromHash(event.pubkey, colorCombos); + const icon = getIconFromHash(event.pubkey); // const [events, setEvents] = useState([]); let metadataParsed = null; @@ -82,7 +53,7 @@ const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, m : <> -
+
Anonymous
} @@ -105,7 +76,7 @@ const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, m {event.kind == 0 ? ( ) : ( -
+
)}
))} diff --git a/client/src/utils/deterministicProfileIcon.ts b/client/src/utils/deterministicProfileIcon.ts new file mode 100644 index 0000000..e54eb5b --- /dev/null +++ b/client/src/utils/deterministicProfileIcon.ts @@ -0,0 +1,40 @@ +const gradientDirections = [ + "bg-gradient-to-t", + "bg-gradient-to-tr", + "bg-gradient-to-r", + "bg-gradient-to-br", + "bg-gradient-to-b", + "bg-gradient-to-bl", + "bg-gradient-to-l", + "bg-gradient-to-tl" +]; + +const colorCombos = [ + "from-red-300 to-yellow-700", + "from-green-300 to-blue-700", + "from-purple-300 to-pink-700", + "from-yellow-300 to-orange-700", + "from-indigo-300 to-purple-700", + "from-pink-300 to-red-700", + "from-blue-300 to-indigo-700", + "from-orange-300 to-red-700", + "from-teal-300 to-green-700", + "from-cyan-300 to-teal-700", + "from-lime-300 to-green-700", + "from-amber-300 to-orange-700", + "from-rose-300 to-pink-700", + "from-violet-300 to-purple-700", + "from-sky-300 to-cyan-700", +]; + +export const getIconFromHash = (id: string): string => { + let hash = 0; + for (let i = 0; i < id.length; i++) { + hash = (hash << 5) - hash + id.charCodeAt(i); + } + + const colorIndex = Math.abs(hash) % colorCombos.length; + const directionIndex = Math.abs(Math.floor(hash / colorCombos.length)) % gradientDirections.length; + + return `${gradientDirections[directionIndex]} ${colorCombos[colorIndex]}`; +}; \ No newline at end of file