81 lines
2.7 KiB
Svelte
81 lines
2.7 KiB
Svelte
<!--
|
|
- This file is a part of the SteamWar software.
|
|
-
|
|
- Copyright (C) 2024 SteamWar.de-Serverteam
|
|
-
|
|
- This program is free software: you can redistribute it and/or modify
|
|
- it under the terms of the GNU Affero General Public License as published by
|
|
- the Free Software Foundation, either version 3 of the License, or
|
|
- (at your option) any later version.
|
|
-
|
|
- This program is distributed in the hope that it will be useful,
|
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
- GNU Affero General Public License for more details.
|
|
-
|
|
- You should have received a copy of the GNU Affero General Public License
|
|
- along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
-->
|
|
|
|
<script lang="ts">
|
|
import { twMerge } from "tailwind-merge";
|
|
import { onMount } from "svelte";
|
|
|
|
let cardElement: HTMLDivElement = $state();
|
|
|
|
function rotateElement(event: MouseEvent) {
|
|
if (!hoverEffect) return;
|
|
|
|
const x = event.clientX;
|
|
const y = event.clientY;
|
|
|
|
const boundingRect = cardElement.getBoundingClientRect();
|
|
const centerX = boundingRect.left + boundingRect.width / 2;
|
|
const centerY = boundingRect.top + boundingRect.height / 2;
|
|
|
|
const rotateX = (centerY - y) / 20;
|
|
const rotateY = -(centerX - x) / 20;
|
|
|
|
cardElement.style.setProperty("--rotate-x", `${rotateX}deg`);
|
|
cardElement.style.setProperty("--rotate-y", `${rotateY}deg`);
|
|
}
|
|
|
|
function resetElement() {
|
|
cardElement.style.setProperty("--rotate-x", "0");
|
|
cardElement.style.setProperty("--rotate-y", "0");
|
|
}
|
|
|
|
interface Props {
|
|
hoverEffect?: boolean;
|
|
extraClasses?: string;
|
|
children?: import("svelte").Snippet;
|
|
}
|
|
|
|
let { hoverEffect = true, extraClasses = "", children }: Props = $props();
|
|
let classes = $derived(twMerge("w-72 border-2 border-gray-100 flex flex-col items-center p-8 m-4 rounded-xl shadow-lg bg-zinc-900 dark:border-gray-800 dark:text-gray-100", extraClasses));
|
|
</script>
|
|
|
|
<div class={classes} bind:this={cardElement} onmousemove={rotateElement} onmouseleave={resetElement} class:hoverEffect>
|
|
{@render children?.()}
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
div {
|
|
transform: perspective(1000px) rotateX(var(--rotate-x, 0)) rotateY(var(--rotate-y, 0)) !important;
|
|
|
|
transition: scale 300ms cubic-bezier(0.2, 3, 0.67, 0.6);
|
|
|
|
:global(h1) {
|
|
@apply text-xl font-bold mt-4;
|
|
}
|
|
|
|
:global(svg) {
|
|
@apply transition-transform duration-300 ease-in-out hover:scale-110 hover:drop-shadow-2xl;
|
|
}
|
|
}
|
|
|
|
.hoverEffect:hover {
|
|
scale: 105%;
|
|
}
|
|
</style>
|