feat(BadgePreview): bigger preview window

1 files changed, 91 insertions, 96 deletions

diff --git a/src/lib/User/BadgeWall/BadgePreview.svelte b/src/lib/User/BadgeWall/BadgePreview.svelte
index 912889df..7ba34843 100644
--- a/src/lib/User/BadgeWall/BadgePreview.svelte
+++ b/src/lib/User/BadgeWall/BadgePreview.svelte
@@ -5,41 +5,15 @@
 	import { databaseTimeToDate } from '$lib/Utility/time';
 	import locale from '$stores/locale';
 	import { onMount } from 'svelte';
-	import { cubicOut } from 'svelte/easing';
-	import { tweened } from 'svelte/motion';
 	import root from '$lib/Utility/root';
+	import ParallaxImage from '$lib/Image/ParallaxImage.svelte';
 
 	export let selectedBadge: Badge | undefined;
 	export let onNext: () => void = () => {};
 	export let onPrevious: () => void = () => {};
 
+	let source = cdn(thumbnail(selectedBadge?.image || '')) || '';
 	let badgeReference: HTMLImageElement;
-	const mouse = tweened(
-		{ x: 0, y: 0 },
-		{
-			duration: 300 * 1.75,
-			easing: cubicOut
-		}
-	);
-
-	const handleMouseMove = (event: MouseEvent) => {
-		const boundingRectangle = badgeReference.getBoundingClientRect();
-		const factor = 1.25;
-		const limit = 300 * 1.75;
-
-		if ($mouse.x === 0 && $mouse.y === 0) $mouse = { x: event.clientX, y: event.clientY };
-
-		$mouse.x +=
-			(-(event.clientX - boundingRectangle.left - boundingRectangle.width / 2) - $mouse.x) * factor;
-		$mouse.y +=
-			(-(event.clientY - boundingRectangle.top - boundingRectangle.height / 2) - $mouse.y) * factor;
-		$mouse.x = Math.max(Math.min($mouse.x, limit), -limit);
-		$mouse.y = Math.max(Math.min($mouse.y, limit), -limit);
-	};
-
-	const handleMouseLeave = () => {
-		$mouse = { x: 0, y: 0 };
-	};
 
 	$: {
 		if (selectedBadge && selectedBadge.image) {
@@ -47,7 +21,7 @@
 
 			image.src = cdn(selectedBadge.image) || '';
 			image.onload = () => {
-				badgeReference.src = image.src;
+				source = image.src;
 			};
 		}
 	}
@@ -60,6 +34,8 @@
 	}
 
 	onMount(() => {
+		badgeReference = document.querySelector('.badge-container-image') as HTMLImageElement;
+
 		const handleClickOutside = (event: any) => {
 			if (event.target.classList.contains('popup')) selectedBadge = undefined;
 		};
@@ -111,7 +87,10 @@
 	const onClick = (event: MouseEvent) => {
 		event.preventDefault();
 
-		if (event.clientX < badgeReference.getBoundingClientRect().left + badgeReference.width / 2) {
+		if (
+			event.clientX <
+			badgeReference.getBoundingClientRect().left + badgeReference.getBoundingClientRect().width / 2
+		) {
 			onPrevious();
 		} else {
 			onNext();
@@ -121,47 +100,44 @@
 
 {#if selectedBadge}
 	<div class="badge-preview">
-		{#if selectedBadge.image}
-			<div
-				on:mousemove={handleMouseMove}
-				on:mouseleave={handleMouseLeave}
-				role="img"
-				class="badge-container"
-			>
-				<a href={'#'} on:click={onClick}>
-					<img
-						src={cdn(thumbnail(selectedBadge.image))}
-						bind:this={badgeReference}
-						style="transform: perspective(1000px) rotateX({$mouse.y / 10}deg) rotateY({-$mouse.x /
-							10}deg);"
-						alt={selectedBadge.description}
-					/>
-				</a>
-			</div>
+		<div class="badge-preview-badge">
+			{#if selectedBadge.image}
+				<div role="img" class="badge-container">
+					<a href={'#'} on:click={onClick} class="badge-container-image">
+						<ParallaxImage
+							{source}
+							alternativeText="selectedBadge.description"
+							limit={100}
+							duration={1500}
+						/>
+					</a>
+				</div>
 
-			<p />
-		{/if}
+				<p />
+			{/if}
+		</div>
 
-		{#if selectedBadge.time}
-			{$locale().dateFormatter(databaseTimeToDate(selectedBadge.time))}
+		<div class="badge-preview-information">
+			{#if selectedBadge.time}
+				{$locale().dateFormatter(databaseTimeToDate(selectedBadge.time))}
 
-			{#if (selectedBadge.designer || selectedBadge.source || selectedBadge.post) && !selectedBadge.description}
-				<p />
-			{:else if selectedBadge.description}
-				<br />
+				{#if (selectedBadge.designer || selectedBadge.source || selectedBadge.post) && !selectedBadge.description}
+					<p />
+				{:else if selectedBadge.description}
+					<br />
+				{/if}
 			{/if}
-		{/if}
 
-		{#if selectedBadge.description}
-			{selectedBadge.description}
+			{#if selectedBadge.description}
+				{selectedBadge.description}
 
-			<p />
-		{/if}
+				<p />
+			{/if}
 
-		{#if selectedBadge.designer}
-			<b>Designer:</b>
+			{#if selectedBadge.designer}
+				<b>Designer:</b>
 
-			<!-- {#if selectedBadge.designer.startsWith('http')}
+				<!-- {#if selectedBadge.designer.startsWith('http')}
 				<a href={selectedBadge.designer} target="_blank">
 					{selectedBadge.designer}
 				</a>
@@ -172,57 +148,62 @@
 			{:else}
 				{selectedBadge.designer}
 			{/if} -->
-			{@html classifyDesigner(selectedBadge.designer)}
+				{@html classifyDesigner(selectedBadge.designer)}
 
-			<br />
-		{/if}
+				<br />
+			{/if}
 
-		{#if selectedBadge.post && selectedBadge.post !== '#'}
-			<b>{selectedBadge.post.includes('forum') ? 'Forum' : 'Activity'}:</b>
+			{#if selectedBadge.post && selectedBadge.post !== '#'}
+				<b>{selectedBadge.post.includes('forum') ? 'Forum' : 'Activity'}:</b>
 
-			<a href={selectedBadge.post} target="_blank">
-				{selectedBadge.post}
-			</a>
+				<a href={selectedBadge.post} target="_blank">
+					{selectedBadge.post}
+				</a>
 
-			<br />
-		{/if}
+				<br />
+			{/if}
 
-		{#if selectedBadge.source}
-			<b>Source:</b>
+			{#if selectedBadge.source}
+				<b>Source:</b>
 
-			{#if selectedBadge.source.startsWith('http')}
-				<!-- <a href={selectedBadge.source} target="_blank">
+				{#if selectedBadge.source.startsWith('http')}
+					<!-- <a href={selectedBadge.source} target="_blank">
 					{selectedBadge.source}
 				</a> -->
-				{@html classifySource(selectedBadge.source)}
-			{:else}
-				{selectedBadge.source}
-			{/if}
+					{@html classifySource(selectedBadge.source)}
+				{:else}
+					{selectedBadge.source}
+				{/if}
 
-			<br />
-		{/if}
+				<br />
+			{/if}
 
-		{#if selectedBadge.category}
-			<b>Category:</b>
+			{#if selectedBadge.category}
+				<b>Category:</b>
 
-			<a href={`?category=${selectedBadge.category}`} on:click={() => (selectedBadge = undefined)}>
-				{selectedBadge.category}
-			</a>
+				<a
+					href={`?category=${selectedBadge.category}`}
+					on:click={() => (selectedBadge = undefined)}
+				>
+					{selectedBadge.category}
+				</a>
 
-			<br />
-		{/if}
+				<br />
+			{/if}
 
-		<b>SauceNAO:</b>
-		<a href={`https://saucenao.com/search.php?url=${selectedBadge.image}`} target="_blank">
-			Search
-		</a>
+			<b>SauceNAO:</b>
+			<a href={`https://saucenao.com/search.php?url=${selectedBadge.image}`} target="_blank">
+				Search
+			</a>
+		</div>
 	</div>
 {/if}
 
 <style>
-	.badge-preview img {
+	:global(.badge-preview img) {
 		border-radius: 8px;
-		max-width: 25vh;
+		max-height: 50vh;
+		height: auto;
 		width: 100%;
 	}
 
@@ -231,4 +212,18 @@
 		justify-content: center;
 		align-items: center;
 	}
+
+	.badge-preview {
+		display: flex;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		gap: 1rem;
+	}
+
+	@media (max-width: 768px) {
+		.badge-preview {
+			flex-direction: column;
+		}
+	}
 </style>