Add Xray Preview

src/components/publics/PublicPreview.svelte

@@ -45,7 +45,7 @@
         camera = new THREE.PerspectiveCamera(fov, 1, near, far);
 
         renderer = new THREE.WebGLRenderer();
-        renderer.setSize(500, 300);
+        renderer.setSize(500, 500);
         controls = new OrbitControls(camera, renderer.domElement);
         controls.autoRotate = true;
         controls.autoRotateSpeed = 1;
@@ -113,7 +113,7 @@
     }
 </script>
 
-<div style="height: 300px" class="w-full relative">
+<div style="height: 500px" class="w-full relative">
     <div bind:this={div} class="w-full h-full">
 
     </div>

src/components/publics/XRayPreview.svelte

@@ -0,0 +1,52 @@
+<!--
+  -   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;
+
+    let size = 100;
+
+    function mouseMove(e: MouseEvent) {
+        let x = e.offsetX;
+        let y = e.offsetY;
+
+        xray.style.clipPath = `circle(${size}px at ${x}px ${y}px)`;
+    }
+
+    function reset() {
+        xray.style.clipPath = 'circle(0px at 0 0)';
+    }
+
+    function handleScroll(e: WheelEvent) {
+        size += e.deltaY / -20;
+        if (size < 20) {
+            size = 20;
+        }
+        mouseMove(e);
+    }
+</script>
+
+<div class="relative overflow-hidden rounded-xl" on:mousemove={mouseMove} on:mousewheel|preventDefault={handleScroll} 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>