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>

src/content/publics/frostbite.json

@@ -4,5 +4,6 @@
   "id": 123,
   "creator": ["Test", "Test2"],
   "gamemode": "wargear",
-  "image": "../../images/WarGears.png"
+  "image": "../../images/2024-03-24_20.59.03.png",
+  "xray": "../../images/2024-03-24_20.59.59.png"
 }

src/pages/publics/[schem].astro

@@ -2,7 +2,7 @@
 import {createGetStaticPaths} from "astro-i18n";
 import { getCollection, CollectionEntry } from "astro:content";
 import PageLayout from "../../layouts/PageLayout.astro";
-import PublicPreview from "@components/3d/PublicPreview.svelte";
+import PublicPreview from "@components/publics/PublicPreview.svelte";
 import { Image } from "astro:assets";
 
 export const getStaticPaths = createGetStaticPaths(async () => {
@@ -22,11 +22,11 @@ const { schem }: { schem: CollectionEntry<"publics">} = Astro.props;
 ---
 
 <PageLayout title={schem.data.name}>
-    <h1 class="text-5xl font-bold w-fit" transition:name={schem.data.name + "-title"}>{schem.data.name}</h1>
+    <h1 class="text-5xl font-bold w-fit" transition:name={schem.data.id + "-title"}>{schem.data.name}</h1>
-    <PublicPreview client:idle file={schem.id}>
+    <PublicPreview client:idle file={schem.id} imageHeight={schem.data.image.height}>
-        <Image transition:name={schem.data.name + "-img"} src={schem.data.image} alt={schem.data.name}></Image>
+        <Image transition:name={schem.data.id + "-img"} src={schem.data.image} alt={schem.data.name}></Image>
     </PublicPreview>
-    <p transition:name={schem.data.name + "-desc"}>{schem.data.description}</p>
+    <p transition:name={schem.data.id + "-desc"}>{schem.data.description}</p>
     <p>
         Erbauer: {schem.data.creator.join(", ")}
     </p>

src/pages/publics/index.astro

@@ -4,6 +4,7 @@ import {getCollection} from "astro:content";
 import {l} from "../../util/util";
 import { Image } from "astro:assets";
 import Card from "@components/Card.svelte";
+import XRayPreview from "@components/publics/XRayPreview.svelte";
 
 const publics = await getCollection("publics");
 ---
@@ -14,10 +15,13 @@ const publics = await getCollection("publics");
             <a href={l("/publics/" + pub.id)}>
                 <Card extraClasses="w-full mx-0">
                     <div class="flex justify-center">
-                        <Image src={pub.data.image} alt={pub.data.name} transition:name={pub.data.name + "-img"} />
+                        <XRayPreview client:load>
+                            <Image slot="normal" src={pub.data.image} alt={pub.data.name} transition:name={pub.data.id + "-img"} />
+                            {pub.data.xray && <Image slot="xray" src={pub.data.xray} alt={pub.data.name} />}
+                        </XRayPreview>
                     </div>
-                    <h2 class="font-bold text-5xl" transition:name={pub.data.name + "-title"}>{pub.data.name}</h2>
+                    <h2 class="font-bold text-5xl" transition:name={pub.data.id + "-title"}>{pub.data.name}</h2>
-                    <h3 transition:name={pub.data.name + "-desc"}>{pub.data.description}</h3>
+                    <h3 transition:name={pub.data.id + "-desc"}>{pub.data.description}</h3>
                 </Card>
             </a>
         ))}