mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 09:21:25 +00:00
change deterministic icons gen
This commit is contained in:
parent
30ba427227
commit
4b3aa19874
@ -6,36 +6,7 @@ import { nip19 } from "nostr-tools";
|
|||||||
import { getMetadata } from "../../utils/utils";
|
import { getMetadata } from "../../utils/utils";
|
||||||
import ContentPreview from "../Modals/TextModal";
|
import ContentPreview from "../Modals/TextModal";
|
||||||
import { renderMedia } from "../../utils/FileUpload";
|
import { renderMedia } from "../../utils/FileUpload";
|
||||||
|
import { getIconFromHash } from "../../utils/deterministicProfileIcon";
|
||||||
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];
|
|
||||||
};
|
|
||||||
|
|
||||||
const timeAgo = (unixTime: number) => {
|
const timeAgo = (unixTime: number) => {
|
||||||
const seconds = Math.floor(new Date().getTime() / 1000 - unixTime);
|
const seconds = Math.floor(new Date().getTime() / 1000 - unixTime);
|
||||||
@ -67,7 +38,7 @@ const PostCard = ({
|
|||||||
replyCount: number;
|
replyCount: number;
|
||||||
}) => {
|
}) => {
|
||||||
let { comment, file } = parseContent(event);
|
let { comment, file } = parseContent(event);
|
||||||
const colorCombo = getColorFromHash(event.pubkey, colorCombos);
|
const icon = getIconFromHash(event.pubkey);
|
||||||
|
|
||||||
let metadataParsed = null;
|
let metadataParsed = null;
|
||||||
if (metadata !== null) {
|
if (metadata !== null) {
|
||||||
@ -96,7 +67,7 @@ const PostCard = ({
|
|||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
className={`h-7 w-7 bg-gradient-to-r ${colorCombo} rounded-full`}
|
className={`h-7 w-7 ${icon} rounded-full`}
|
||||||
/>
|
/>
|
||||||
<div className="text-sm font-semibold">Anonymous</div>
|
<div className="text-sm font-semibold">Anonymous</div>
|
||||||
</>
|
</>
|
||||||
|
@ -5,36 +5,7 @@ import { Event } from 'nostr-tools';
|
|||||||
import { getMetadata } from '../../utils/utils';
|
import { getMetadata } from '../../utils/utils';
|
||||||
import ContentPreview from '../Modals/TextModal';
|
import ContentPreview from '../Modals/TextModal';
|
||||||
import { renderMedia } from '../../utils/FileUpload';
|
import { renderMedia } from '../../utils/FileUpload';
|
||||||
|
import { getIconFromHash } from '../../utils/deterministicProfileIcon';
|
||||||
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];
|
|
||||||
};
|
|
||||||
|
|
||||||
const timeAgo = (unixTime: number) => {
|
const timeAgo = (unixTime: number) => {
|
||||||
const seconds = Math.floor((new Date().getTime() / 1000) - unixTime);
|
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 OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event | null, replyCount: number}) => {
|
||||||
const { comment, file } = parseContent(event);
|
const { comment, file } = parseContent(event);
|
||||||
const colorCombo = getColorFromHash(event.pubkey, colorCombos);
|
const icon = getIconFromHash(event.pubkey);
|
||||||
|
|
||||||
let metadataParsed = null;
|
let metadataParsed = null;
|
||||||
if (metadata !== null) {
|
if (metadata !== null) {
|
||||||
@ -76,7 +47,7 @@ const OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event
|
|||||||
</>
|
</>
|
||||||
:
|
:
|
||||||
<>
|
<>
|
||||||
<div className={`h-8 w-8 bg-gradient-to-r ${colorCombo} rounded-full`} />
|
<div className={`h-8 w-8 ${icon} rounded-full`} />
|
||||||
<div className="ml-2 text-md font-semibold">Anonymous</div>
|
<div className="ml-2 text-md font-semibold">Anonymous</div>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
|
@ -6,36 +6,7 @@ import { nip19 } from 'nostr-tools';
|
|||||||
import { getMetadata, uniqBy } from '../../utils/utils';
|
import { getMetadata, uniqBy } from '../../utils/utils';
|
||||||
import ContentPreview from '../Modals/TextModal';
|
import ContentPreview from '../Modals/TextModal';
|
||||||
import { renderMedia } from '../../utils/FileUpload';
|
import { renderMedia } from '../../utils/FileUpload';
|
||||||
|
import { getIconFromHash } from '../../utils/deterministicProfileIcon';
|
||||||
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];
|
|
||||||
};
|
|
||||||
|
|
||||||
const timeAgo = (unixTime: number) => {
|
const timeAgo = (unixTime: number) => {
|
||||||
const seconds = Math.floor((new Date().getTime() / 1000) - unixTime);
|
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 ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, metadata: Event | null, replyCount: number, repliedTo: Event[] }) => {
|
||||||
const { comment, file } = parseContent(event);
|
const { comment, file } = parseContent(event);
|
||||||
const colorCombo = getColorFromHash(event.pubkey, colorCombos);
|
const icon = getIconFromHash(event.pubkey);
|
||||||
// const [events, setEvents] = useState<Event[]>([]);
|
// const [events, setEvents] = useState<Event[]>([]);
|
||||||
|
|
||||||
let metadataParsed = null;
|
let metadataParsed = null;
|
||||||
@ -82,7 +53,7 @@ const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, m
|
|||||||
</>
|
</>
|
||||||
:
|
:
|
||||||
<>
|
<>
|
||||||
<div className={`h-8 w-8 bg-gradient-to-r ${colorCombo} rounded-full`} />
|
<div className={`h-8 w-8 ${icon} rounded-full`} />
|
||||||
<div className="ml-2 text-md font-semibold">Anonymous</div>
|
<div className="ml-2 text-md font-semibold">Anonymous</div>
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
@ -105,7 +76,7 @@ const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, m
|
|||||||
{event.kind == 0 ? (
|
{event.kind == 0 ? (
|
||||||
<img className={`h-5 w-5 rounded-full`} src={getMetadata(event)?.picture} />
|
<img className={`h-5 w-5 rounded-full`} src={getMetadata(event)?.picture} />
|
||||||
) : (
|
) : (
|
||||||
<div className={`h-5 w-5 bg-gradient-to-r ${getColorFromHash(event.pubkey, colorCombos)} rounded-full`} />
|
<div className={`h-5 w-5 ${getIconFromHash(event.pubkey)} rounded-full`} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
40
client/src/utils/deterministicProfileIcon.ts
Normal file
40
client/src/utils/deterministicProfileIcon.ts
Normal file
@ -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]}`;
|
||||||
|
};
|
Loading…
Reference in New Issue
Block a user