<!-- @migration-task Error while migrating Svelte code: This migration would change the name of a slot making the component unusable -->
<!--
  -   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">
    let xray: HTMLDivElement;

    function mouseMove(e: MouseEvent) {
        let x = e.offsetX;
        let y = e.offsetY;

        xray.style.clipPath = `circle(100px at ${x}px ${y}px)`;
    }

    function reset() {
        xray.style.clipPath = 'circle(0px at 0 0)';
    }
</script>

<div class="relative overflow-hidden rounded-xl" on:mousemove={mouseMove} on:mouseleave={reset} role="img">
    <slot name="normal"></slot>
    <div bind:this={xray} class="absolute top-0 left-0 right-0 bottom-0 xray" style="clip-path: circle(0px at 0 0);">
        <slot name="xray">
            <slot name="normal"></slot>
        </slot>
    </div>
</div>
