diff options
| author | Fuwn <[email protected]> | 2024-04-18 19:17:05 -0700 |
|---|---|---|
| committer | Fuwn <[email protected]> | 2024-04-18 19:17:05 -0700 |
| commit | bd3bf548c27f6be204cf89d98944b76ccdd01078 (patch) | |
| tree | 2b19b411b33e89f6badde4e02a5f7a659369441c /src/lib | |
| parent | feat(badgepreview): higher tween duration (diff) | |
| download | due.moe-bd3bf548c27f6be204cf89d98944b76ccdd01078.tar.xz due.moe-bd3bf548c27f6be204cf89d98944b76ccdd01078.zip | |
feat(badges): limit rotation
Diffstat (limited to 'src/lib')
| -rw-r--r-- | src/lib/BadgeWall/BadgePreview.svelte | 3 | ||||
| -rw-r--r-- | src/lib/FallbackBadge.svelte | 5 |
2 files changed, 7 insertions, 1 deletions
diff --git a/src/lib/BadgeWall/BadgePreview.svelte b/src/lib/BadgeWall/BadgePreview.svelte index 689ae927..dd2b7fd9 100644 --- a/src/lib/BadgeWall/BadgePreview.svelte +++ b/src/lib/BadgeWall/BadgePreview.svelte @@ -20,6 +20,7 @@ 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 }; @@ -27,6 +28,8 @@ (-(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 = () => { diff --git a/src/lib/FallbackBadge.svelte b/src/lib/FallbackBadge.svelte index 8e5c9a5d..f7953e30 100644 --- a/src/lib/FallbackBadge.svelte +++ b/src/lib/FallbackBadge.svelte @@ -22,7 +22,7 @@ const mouse = tweened( { x: 0, y: 0 }, { - duration: 1, + duration: 75, easing: cubicOut } ); @@ -40,6 +40,7 @@ const handleMouseMove = (event: MouseEvent) => { const boundingRectangle = badgeReference.getBoundingClientRect(); const factor = 1.25; + const limit = 50; if ($mouse.x === 0 && $mouse.y === 0) $mouse = { x: event.clientX, y: event.clientY }; @@ -47,6 +48,8 @@ (-(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 = () => { |