From 7e247cfc161c5a8493729d5b259216009fa7ed69 Mon Sep 17 00:00:00 2001 From: VDawg Date: Thu, 2 Nov 2023 16:20:05 +0200 Subject: [PATCH] small improvments --- .../components}/DiscordProfilePicture.svelte | 37 ++++++++++------- src/lib/images/amongus/green.webp | Bin 0 -> 3204 bytes src/lib/images/amongus/gun.webp | Bin 0 -> 2388 bytes src/lib/images/amongus/red.webp | Bin 0 -> 3114 bytes src/routes/CommunitySlice.svelte | 13 +++--- src/routes/Hypractive.svelte | 2 +- src/routes/PreviewRiceSlice.svelte | 2 +- static/imgs/square_pattern.svg | 38 ++++++++++++++++++ 8 files changed, 70 insertions(+), 22 deletions(-) rename src/{routes => lib/components}/DiscordProfilePicture.svelte (83%) mode change 100755 => 100644 create mode 100644 src/lib/images/amongus/green.webp create mode 100644 src/lib/images/amongus/gun.webp create mode 100644 src/lib/images/amongus/red.webp create mode 100644 static/imgs/square_pattern.svg diff --git a/src/routes/DiscordProfilePicture.svelte b/src/lib/components/DiscordProfilePicture.svelte old mode 100755 new mode 100644 similarity index 83% rename from src/routes/DiscordProfilePicture.svelte rename to src/lib/components/DiscordProfilePicture.svelte index 4886947..9263422 --- a/src/routes/DiscordProfilePicture.svelte +++ b/src/lib/components/DiscordProfilePicture.svelte @@ -2,7 +2,7 @@ import clsx from 'clsx' import { createEventDispatcher, getContext, onDestroy, onMount } from 'svelte' import { spring } from 'svelte/motion' - import { contextId as ctxId } from './CommunitySlice.svelte' + import { contextId as ctxId } from '../../routes/CommunitySlice.svelte' import { lerp } from '$lib/Helper.mjs' import { inview } from 'svelte-inview' @@ -22,6 +22,13 @@ export let contextId = ctxId export let isAnimating = true + /** @type {HTMLElement}*/ + export let element = undefined + /** @type {HTMLImageElement}*/ + export let imageWrapper + /** @type {HTMLImageElement}*/ + export let imageElement + const { biggestSize, getSectionElement } = getContext(contextId) const dispatch = createEventDispatcher() @@ -34,8 +41,6 @@ precision: 0.001 }) - /** @type {HTMLImageElement}*/ - let imageElement let hasEnteredView = false let hasImageLoaded = false @@ -92,6 +97,7 @@ style:translate={coordinates.map((xy) => xy + 'px').join(' ')} style="width: {size}px; height: {size}px;--delay: {delay}ms;" aria-hidden="true" + bind:this={element} >
- (hasImageLoaded = true)} - src={image} - alt="community profile picture" - aria-hidden="true" - on:mouseenter={(event) => dispatch('hover', event)} - class:hover:scale-125={!!quote} - loading="lazy" - /> +
+ (hasImageLoaded = true)} + src={image} + alt="community profile picture" + aria-hidden="true" + on:mouseenter={(event) => dispatch('hover', event)} + class:hover:scale-125={!!quote} + loading="lazy" + /> + +
{#if quote}