diff --git a/src/content/profiles.json b/src/content/profiles.json new file mode 100644 index 0000000..3437887 --- /dev/null +++ b/src/content/profiles.json @@ -0,0 +1,227 @@ +[ + { + "image": "https://cdn.discordapp.com/avatars/372809091208445953/a_33fd25e26c0ba17c05566bc3179c6476.gif", + "class": "outline-red-500", + "coordinates": [187, 296], + "size": 172 + }, + { + "image": "https://cdn.discordapp.com/avatars/444952344308744203/9ee39cd422568dad9e70319df27b2560.webp", + "class": "outline-yellow-500", + "coordinates": [735, 441], + "size": 164 + }, + { + "image": "https://cdn.discordapp.com/avatars/419880181101232129/2f57c8e5e681c5d8608d07c83053815f.webp", + "class": "outline-orange-500", + "coordinates": [391, 615], + "size": 149 + }, + { + "image": "https://cdn.discordapp.com/avatars/378704069726044170/415dcb2ef8d1ef635e35e1d04d523cba.webp", + "class": "outline-amber-500", + "coordinates": [568, 594], + "size": 120 + }, + { + "image": "https://cdn.discordapp.com/avatars/623781003382751243/95435efc86709ac7e347ca205bda665e.webp", + "class": "outline-orange-500", + "coordinates": [525, 764], + "size": 80 + }, + { + "image": "https://cdn.discordapp.com/avatars/862314649307054080/2dd9cbd31f5c53811ece2f5abdeab2bf.webp", + "class": "outline-cyan-400", + "coordinates": [648, 709], + "size": 128 + }, + { + "image": "https://cdn.discordapp.com/avatars/967764496527532083/5dc06d112653a529ecbae3b6f4225a93.webp", + "class": "outline-sky-500", + "coordinates": [53, 399], + "size": 75 + }, + { + "image": "https://cdn.discordapp.com/avatars/163678036401586177/0930f3f6f0839b4f9c59846e185aa8ad.webp", + "class": "outline-yellow-500", + "coordinates": [24, 341], + "size": 49 + }, + { + "image": "https://cdn.discordapp.com/avatars/223160360461402122/c6552a1c768613bffb83bf88e4ce2632.webp", + "class": "outline-red-500", + "coordinates": [47, 86], + "size": 48 + }, + { + "image": "https://cdn.discordapp.com/avatars/979473046404476998/c9a4af31050a785d896f7880f9d268e3.webp", + "class": "outline-amber-500", + "coordinates": [1038, 446], + "size": 52 + }, + { + "image": "https://cdn.discordapp.com/avatars/486802226577276929/4c1cd003e9c7b7c19a858b38cca7104a.webp", + "class": "outline-cyan-500", + "coordinates": [273, 760], + "size": 52, + "quote": "\"meds\"" + }, + { + "image": "https://cdn.discordapp.com/avatars/837425748435796060/248cd938377647404e3d8d1c53b639cf.webp", + "class": "outline-orange-500", + "coordinates": [648, 364], + "size": 80 + }, + { + "image": "https://cdn.discordapp.com/avatars/480024733535174668/5453c57e69ff16f495d8dcbd597070e9.webp", + "class": "outline-purple-500", + "coordinates": [772, 651], + "size": 62 + }, + { + "image": "https://cdn.discordapp.com/avatars/544368824842190861/1fbf29ea7ca9c2109b97af2ede3806fa.webp", + "class": "outline-lime-500", + "coordinates": [736, 277], + "size": 101 + }, + { + "image": "https://cdn.discordapp.com/avatars/344854021166727180/5c5daa4bc6b540eab0832da1ee5c2385.webp", + "class": "outline-yellow-500", + "coordinates": [898, 364], + "size": 68 + }, + { + "image": "https://cdn.discordapp.com/avatars/579120037034721281/c7b4341806d515f5d92bb53e322a4728.webp", + "class": "outline-rose-500", + "coordinates": [887, 159], + "size": 39 + }, + { + "image": "https://cdn.discordapp.com/avatars/246125351464337418/10c8bb5456d1ca1cebf2edff62b7001f.webp", + "class": "outline-amber-500", + "coordinates": [1023, 552], + "size": 48 + }, + { + "image": "https://cdn.discordapp.com/avatars/143031299152674816/4a143f00b0e014e9c3da37cd8599b106.webp", + "class": "outline-pink-500", + "coordinates": [147, 553], + "size": 87 + }, + { + "image": "https://cdn.discordapp.com/avatars/194157962498015232/ab11cc35bd9d057769254d1d3e29e468.webp", + "class": "outline-amber-500 ", + "coordinates": [65, 643], + "size": 74 + }, + { + "image": "https://cdn.discordapp.com/avatars/482139697796349953/ce63690cf5adb8e096b4472bc0c175e8.webp", + "class": "outline-stone-500 ", + "coordinates": [263, 653], + "size": 65 + }, + { + "image": "https://cdn.discordapp.com/avatars/273110996938260481/5d2ea7a0ad5a29e0de5b3918bfa82ab2.webp", + "class": "outline-yellow-500 bg-black ", + "coordinates": [893, 622], + "size": 80, + "quote": "\"piss blob\"" + }, + { + "image": "https://cdn.discordapp.com/avatars/231040215085481984/7f378337240110b76e6e9baa31f83670.webp", + "class": "outline-amber-500", + "coordinates": [354, 798], + "size": 80 + }, + { + "image": "https://cdn.discordapp.com/avatars/784153590595321876/04cbb92b7fe3fea8a6cdb4e2fd8562c5.webp", + "class": "outline-white", + "coordinates": [583, 824], + "size": 69, + "quote": "Perfect being" + }, + { + "image": "https://cdn.discordapp.com/avatars/408513270916579338/bac966d3bae8ad01546ee32584917be9.webp", + "class": "outline-rose-300", + "coordinates": [275, 844], + "size": 40 + }, + { + "image": "https://cdn.discordapp.com/avatars/860670651026767942/7122b752fa6097472f8c76cc4458e33b.webp", + "class": "outline-orange-500", + "coordinates": [939, 552], + "size": 48 + }, + { + "image": "https://cdn.discordapp.com/avatars/520860407720837131/3e73c777553fcd67f2f17bc119b79f15.webp", + "class": "outline-orange-500 ", + "coordinates": [458, 913], + "size": 35 + }, + { + "image": "https://cdn.discordapp.com/avatars/390226958241366016/513b77487a9fa01b1256c4dc8e1b0c55.webp", + "class": "outline-blue-500 ", + "coordinates": [858, 707], + "size": 45 + }, + { + "image": "https://cdn.discordapp.com/avatars/594256188422488069/1e532709dbd756c172c54add8536e558.webp", + "class": "outline-blue-500 bg-black ", + "coordinates": [8, 477], + "size": 54 + }, + { + "image": "https://cdn.discordapp.com/avatars/531392146767347712/0b5e5671e7e8eb0e4f6ec547c686667b.webp", + "class": "outline-orange-500 bg-stone-800", + "coordinates": [950, 277], + "size": 47 + }, + { + "image": "https://cdn.discordapp.com/avatars/194584980922433536/6e4d6f981d56356b9c913d2a4e0df126.webp", + "class": "outline-blue-500 bg-black ", + "coordinates": [69, 561], + "size": 54 + }, + { + "image": "https://cdn.discordapp.com/avatars/561863734264594452/e9d1b128f8a32849ae4e2a0d86d16fdb.webp", + "class": "outline-orange-500 bg-black ", + "coordinates": [908, 463], + "size": 54 + }, + { + "image": "https://cdn.discordapp.com/avatars/426690378830184448/09181b1b476f221b7850702158778c1a.webp", + "class": "outline-blue-500 bg-black ", + "coordinates": [823, 184], + "size": 44 + }, + { + "image": "https://cdn.discordapp.com/avatars/219573494713810945/5202607a6cf5e34ed705308459d0115c.webp", + "class": "outline-stone-900 bg-black ", + "coordinates": [133, 493], + "size": 49 + }, + { + "image": "https://cdn.discordapp.com/avatars/317785409763541002/3b62b9f9fd403e8d9f8a5175b90eae8f.webp", + "class": "outline-blue-500 bg-black ", + "coordinates": [119, 202], + "size": 49 + }, + { + "image": "https://cdn.discordapp.com/avatars/465960044094160908/db149a0d49fd80cf7caf7cc2a637e084.webp", + "class": "outline-yellow-500 bg-black ", + "coordinates": [179, 671], + "size": 69 + }, + { + "image": "https://cdn.discordapp.com/avatars/706672850907430942/9330c50f778f6d3776da15335dfb5b3f.webp", + "class": "outline-stone-500 bg-black ", + "coordinates": [771, 818], + "size": 49 + }, + { + "image": "https://cdn.discordapp.com/avatars/708440359587414067/2bcdf703f69ee35c4cf39b2a89c429e8.webp", + "class": "outline-lime-500 bg-black ", + "coordinates": [1018, 123], + "size": 28 + } +] diff --git a/src/routes/home-slices/CommunitySlice.svelte b/src/routes/home-slices/CommunitySlice.svelte index 7971dd4..bccda09 100644 --- a/src/routes/home-slices/CommunitySlice.svelte +++ b/src/routes/home-slices/CommunitySlice.svelte @@ -6,342 +6,23 @@ import Button from '$lib/components/Button.svelte' import DiscordIcon from '~icons/prime/discord' import DiscordProfilePicture from '$lib/components/DiscordProfilePicture.svelte' - import { setContext } from 'svelte' + import { onMount, setContext } from 'svelte' import Title from '$lib/components/Title.svelte' import background from '$lib/images/community-bg.webp' import amongUsGreenImage from '$lib/images/amongus/green.webp' import { discordLink } from '$lib/constants.mjs' + import profiles from '../../content/profiles.json' let sectionElement let isDraggingChan = false - // Okay everything multiplied by 24 const validSizes = [16, 20, 24, 32, 40, 48, 64, 80, 96, 100, 128, 160, 240, 320, 640] - /** @type {{image: string coordinates: [number, number] containerClass: string}[], size: number, quote?: string } */ - const profiles = [ - { - // vaxry - image: - 'https://cdn.discordapp.com/avatars/372809091208445953/a_33fd25e26c0ba17c05566bc3179c6476.gif?size=48', - coordinates: [187, 296], - size: 172, - class: 'outline-red-500' - }, - { - // fufexan - image: - 'https://cdn.discordapp.com/avatars/444952344308744203/9ee39cd422568dad9e70319df27b2560.webp', - coordinates: [735, 441], - size: 164, - class: 'outline-yellow-500' - }, - { - // notashelf - image: - 'https://cdn.discordapp.com/avatars/419880181101232129/2f57c8e5e681c5d8608d07c83053815f.webp', - coordinates: [391, 615], - size: 149, - class: 'outline-orange-500' - }, - { - // Mathisbuilder - image: - 'https://cdn.discordapp.com/avatars/378704069726044170/415dcb2ef8d1ef635e35e1d04d523cba.webp', - coordinates: [568, 594], - size: 120, - class: 'outline-amber-500' - }, - { - // dani_2048 - image: - 'https://cdn.discordapp.com/avatars/623781003382751243/abea149ded923e8f4cd6f56bff016368.webp', - coordinates: [525, 764], - size: 80, - class: 'outline-orange-500' - }, - { - // end_4 - image: - 'https://cdn.discordapp.com/avatars/862314649307054080/2dd9cbd31f5c53811ece2f5abdeab2bf.webp', - coordinates: [648, 709], - size: 128, - class: 'outline-cyan-400' - }, - { - // liquidovski - image: - 'https://cdn.discordapp.com/avatars/283259320802476042/7aa4969a2ce25638da49b54dcd862a35.webp', - coordinates: [65, 208], - size: 100, - class: 'outline-lime-500' - }, - { - // roasted.cheese - image: - 'https://cdn.discordapp.com/avatars/967764496527532083/5dc06d112653a529ecbae3b6f4225a93.webp', - coordinates: [53, 399], - size: 75, - class: 'outline-sky-500' - }, - { - // donnan - image: - 'https://cdn.discordapp.com/avatars/163678036401586177/0930f3f6f0839b4f9c59846e185aa8ad.webp?size=128', - coordinates: [24, 341], - size: 49, - class: 'outline-yellow-500' - }, - { - // captainiveau - image: - 'https://cdn.discordapp.com/avatars/223160360461402122/c6552a1c768613bffb83bf88e4ce2632.webp?size=128', - coordinates: [47, 86], - size: 48, - class: 'outline-red-500' - }, - { - // sioodmy - image: - 'https://cdn.discordapp.com/avatars/979473046404476998/c9a4af31050a785d896f7880f9d268e3.webp', - coordinates: [1038, 446], - size: 52, - class: 'outline-amber-500' - }, - { - image: '/imgs/profile_pictures/_anon.webp', - coordinates: [-85, 566], - size: 40, - class: 'outline-sky-500' - }, - { - // Angry snow man - // psidotdiamparenthesis4pt5tol4poi - image: - 'https://cdn.discordapp.com/avatars/486802226577276929/4c1cd003e9c7b7c19a858b38cca7104a.webp', - coordinates: [273, 760], - size: 52, - quote: '"meds"', - class: 'outline-cyan-500' - }, - { - // outfoxxed - image: - 'https://cdn.discordapp.com/avatars/837425748435796060/248cd938377647404e3d8d1c53b639cf.webp', - coordinates: [648, 364], - size: 80, - class: 'outline-orange-500' - }, - { - // kirottum - image: - 'https://cdn.discordapp.com/avatars/480024733535174668/5453c57e69ff16f495d8dcbd597070e9.webp', - coordinates: [772, 651], - size: 62, - class: 'outline-purple-500' - }, - { - // beardwarrior - image: - 'https://cdn.discordapp.com/avatars/544368824842190861/1fbf29ea7ca9c2109b97af2ede3806fa.webp', - coordinates: [736, 277], - size: 101, - class: 'outline-lime-500' - }, - { - // heisfer - image: - 'https://cdn.discordapp.com/avatars/344854021166727180/0c8dd04188df26093164406cc1367f58.webp', - coordinates: [898, 364], - size: 68, - class: 'outline-yellow-500' - }, - { - image: amongUsGreenImage, - coordinates: [873, 224], - size: 79, - class: 'outline-green-500' - }, - { - // SimplyKyle! - image: - 'https://cdn.discordapp.com/avatars/579120037034721281/c7b4341806d515f5d92bb53e322a4728.webp', - coordinates: [887, 159], - size: 39, - class: 'outline-rose-500' - }, - { - // thesuncat - image: - 'https://cdn.discordapp.com/avatars/246125351464337418/10c8bb5456d1ca1cebf2edff62b7001f.webp', - coordinates: [1023, 552], - size: 48, - class: 'outline-amber-500' - }, - { - // flafy - image: - 'https://cdn.discordapp.com/avatars/143031299152674816/4a143f00b0e014e9c3da37cd8599b106.webp', - coordinates: [147, 553], - size: 87, - class: 'outline-pink-500' - }, - { - // vagahbond - image: - 'https://cdn.discordapp.com/avatars/194157962498015232/ab11cc35bd9d057769254d1d3e29e468.webp', - coordinates: [65, 643], - size: 74, - class: 'outline-amber-500 ' - }, - { - // flick0 - image: - 'https://cdn.discordapp.com/avatars/482139697796349953/ce63690cf5adb8e096b4472bc0c175e8.webp', - coordinates: [263, 653], - size: 65, - class: 'outline-stone-500 ' - }, - { - // jacekpoz - image: '/imgs/profile_pictures/jacekpoz.svg', - coordinates: [893, 622], - size: 80, - class: 'outline-yellow-500 bg-black ', - quote: '"piss blob"' - }, - { - // aylur - image: - 'https://cdn.discordapp.com/avatars/231040215085481984/7f378337240110b76e6e9baa31f83670.webp', - coordinates: [354, 798], - size: 80, - class: 'outline-amber-500' - }, - { - // aleph.nought - image: - 'https://cdn.discordapp.com/avatars/784153590595321876/04cbb92b7fe3fea8a6cdb4e2fd8562c5.webp', - coordinates: [583, 824], - size: 69, - class: 'outline-white', - quote: 'Perfect being' - }, - { - // jappie3 - image: - 'https://cdn.discordapp.com/avatars/408513270916579338/bac966d3bae8ad01546ee32584917be9.webp', - coordinates: [275, 844], - size: 40, - class: 'outline-rose-300' - }, - { - // nwg.piotr - image: - 'https://cdn.discordapp.com/avatars/860670651026767942/7122b752fa6097472f8c76cc4458e33b.webp', - coordinates: [939, 552], - size: 48, - class: 'outline-orange-500' - }, - { - // xsty_ - image: - 'https://cdn.discordapp.com/avatars/520860407720837131/3e73c777553fcd67f2f17bc119b79f15.webp', - coordinates: [458, 913], - size: 35, - class: 'outline-orange-500 ' - }, - { - // petingoso - image: - 'https://cdn.discordapp.com/avatars/390226958241366016/513b77487a9fa01b1256c4dc8e1b0c55.webp', - coordinates: [858, 707], - size: 45, - class: 'outline-blue-500 ' - }, - { - // eriedaberrie - image: - 'https://cdn.discordapp.com/avatars/594256188422488069/1e532709dbd756c172c54add8536e558.webp', - coordinates: [8, 477], - size: 54, - class: 'outline-blue-500 bg-black ' - }, - { - // errornointernet - image: - 'https://cdn.discordapp.com/avatars/531392146767347712/0b5e5671e7e8eb0e4f6ec547c686667b.webp', - coordinates: [950, 277], - size: 47, - class: 'outline-orange-500 bg-stone-800' - }, - { - // kosslan - image: - 'https://cdn.discordapp.com/avatars/194584980922433536/7bb58205667ad9a6bf2791b59b32c109.webp', - coordinates: [69, 561], - size: 54, - class: 'outline-blue-500 bg-black ' - }, - { - // lassebq - image: - 'https://cdn.discordapp.com/avatars/561863734264594452/e9d1b128f8a32849ae4e2a0d86d16fdb.webp', - coordinates: [908, 463], - size: 54, - class: 'outline-orange-500 bg-black ' - }, - { - // poutineburgerman - image: - 'https://cdn.discordapp.com/avatars/426690378830184448/09181b1b476f221b7850702158778c1a.webp', - coordinates: [823, 184], - size: 44, - class: 'outline-blue-500 bg-black ' - }, - { - // visualdawg - image: - 'https://cdn.discordapp.com/avatars/219573494713810945/5202607a6cf5e34ed705308459d0115c.webp', - coordinates: [133, 493], - size: 49, - class: 'outline-stone-900 bg-black ' - }, - { - // wickedlyhost - image: - 'https://cdn.discordapp.com/avatars/317785409763541002/279527807f4263888fa75b2d7e68daf7.webp', - coordinates: [119, 202], - size: 49, - class: 'outline-blue-500 bg-black ' - }, - { - // yavko - image: - 'https://cdn.discordapp.com/guilds/961691461554950145/users/465960044094160908/avatars/11672d8e456e31a85a3d89b31fff913b.webp', - coordinates: [179, 671], - size: 69, - class: 'outline-yellow-500 bg-black ' - }, - { - // mcgoth - image: - 'https://cdn.discordapp.com/avatars/706672850907430942/9330c50f778f6d3776da15335dfb5b3f.webp', - coordinates: [771, 818], - size: 49, - class: 'outline-stone-500 bg-black ' - }, - { - // brainless.bitch - image: - 'https://cdn.discordapp.com/avatars/708440359587414067/2bcdf703f69ee35c4cf39b2a89c429e8.webp', - coordinates: [1018, 123], - size: 28, - class: 'outline-lime-500 bg-black ' - }, + /** @type {Promise}*/ + let allProfilesPromise = new Promise(() => {}) - // - // Extras + /** @type {import('./Types').CommunityProfile[]} */ + const extraProfiles = [ { image: 'imgs/chan/joy.svg', coordinates: [284, 533], @@ -358,6 +39,20 @@ onHover: ({ detail: { srcElement } }) => !isDraggingChan && (srcElement.src = 'imgs/chan/wink.svg') }, + { + // jacekpoz + image: '/imgs/profile_pictures/jacekpoz.svg', + coordinates: [893, 622], + size: 80, + class: 'outline-yellow-500 bg-black ', + quote: '"piss blob"' + }, + { + image: amongUsGreenImage, + coordinates: [873, 224], + size: 79, + class: 'outline-green-500' + }, { image: '/imgs/profile_pictures/chan_1.webp', coordinates: [91, 799], @@ -375,14 +70,14 @@ coordinates: [1000, 744], size: 32, class: 'outline-cyan-500' + }, + { + image: '/imgs/profile_pictures/_anon.webp', + coordinates: [-85, 566], + size: 40, + class: 'outline-sky-500' } ] - .map(({ image, size, ...profile }) => ({ - ...profile, - size, - image: image + '?size=' + validSizes.find((_, index) => size <= validSizes[index]) - })) - .sort(({ size: a }, { size: b }) => b - a) setContext(contextId, { biggestSize: profiles.reduce( @@ -395,6 +90,18 @@ ), getSectionElement: () => sectionElement }) + + onMount(() => { + allProfilesPromise = import('../../content/profiles.json').then(({ default: profiles }) => { + return [...profiles, ...extraProfiles] + .map(({ image, size, ...profile }) => ({ + ...profile, + size, + image: image + '?size=' + validSizes.find((_, index) => size <= validSizes[index]) + })) + .sort(({ size: a }, { size: b }) => b - a) + }) + })
-
-
- {#each profiles as { onDragEnd, onDragStart, onHover, ...props }} - - {/each} + {#await allProfilesPromise then allProfiles} +
+
+ {#each allProfiles as { onDragEnd, onDragStart, onHover, ...props }} + + {/each} +
-
+ {/await} void + onDragEnd?: (event: DragEvent) => void + onHover?: (event: MouseEvent) => void +} diff --git a/static/imgs/chan/joy.svg b/static/imgs/chan/joy.svg index 9afc278..fdaa6e7 100755 --- a/static/imgs/chan/joy.svg +++ b/static/imgs/chan/joy.svg @@ -1,238 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/static/imgs/chan/surprise.svg b/static/imgs/chan/surprise.svg index 9f6317b..a09bcad 100755 --- a/static/imgs/chan/surprise.svg +++ b/static/imgs/chan/surprise.svg @@ -1,273 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/static/imgs/chan/tongueout.svg b/static/imgs/chan/tongueout.svg index ce56937..d209c6c 100755 --- a/static/imgs/chan/tongueout.svg +++ b/static/imgs/chan/tongueout.svg @@ -1,258 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/static/imgs/chan/wink.svg b/static/imgs/chan/wink.svg index 70b7557..81c7e2a 100755 --- a/static/imgs/chan/wink.svg +++ b/static/imgs/chan/wink.svg @@ -1,252 +1 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 7f6ebf0..48e276c 100755 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,7 +3,7 @@ const colors = require('tailwindcss/colors') /** @type {import('tailwindcss').Config} */ export default { - content: ['./src/**/**/*.{html,js,svelte,ts}'], + content: ['./src/**/**/*.{html,js,svelte,ts}', './src/content/profiles.json'], theme: { extend: { colors: { black: '#090b0c', primary: '#58E1FF', secondary: '#00A2F8' },