Refactoring

src/components/publics/PublicPreview.svelte

@@ -22,8 +22,9 @@
     import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
     import { OrbitControls } from "three/addons/controls/OrbitControls.js";
     import {onDestroy, onMount} from "svelte";
+    import { CollectionEntry } from "astro:content";
 
-    export let file: string;
+    export let pub: CollectionEntry<"publics">;
     export let fov: number = 60;
     export let near: number = 1
     export let far: number = 1000;
@@ -40,6 +41,10 @@
     let observer: ResizeObserver;
 
     onMount(() => {
+        if (!pub.data["3d"]) {
+            return;
+        }
+
         scene = new THREE.Scene();
         scene.background = new THREE.Color(0x171717);
         camera = new THREE.PerspectiveCamera(fov, 1, near, far);
@@ -52,8 +57,8 @@
 
         const loader = new GLTFLoader();
 
-        loader.load(`/3d/${file}.glb`, (gltf) => {
-            let s = scene.add(gltf.scene);
+        loader.load(`/3d/${pub.id}.glb`, (gltf) => {
+            scene.add(gltf.scene);
 
             let cube_bbox = new THREE.Box3();
             cube_bbox.setFromObject(gltf.scene);
@@ -64,7 +69,9 @@
             camera.position.set(0, center.y, distance);
 
             controls.update();
-        }, undefined, console.log);
+        }, undefined, (e) => {
+            console.error(e);
+        });
 
         div.append(renderer.domElement);
 

src/components/publics/XRayPreview.svelte

@@ -20,29 +20,19 @@
 <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)`;
+        xray.style.clipPath = `circle(100px 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">
+<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">

src/content/config.ts

@@ -97,6 +97,7 @@ export const publics = defineCollection({
         "image": image(),
         "xray": image().optional(),
         "gamemode": reference("modes"),
+        "3d": z.boolean().optional().default(true),
     }),
 });
 

src/content/publics/frostbite.json

@@ -4,6 +4,6 @@
   "id": 123,
   "creator": ["Test", "Test2"],
   "gamemode": "wargear",
-  "image": "../../images/area_render_2_.png",
-  "xray": "../../images/area_render_1_.png"
+  "image": "../../images/publics/frostbite/area_render_2_.png",
+  "xray": "../../images/publics/frostbite/area_render_1_.png"
 }

src/content/publics/ghostleviathan.json

@@ -0,0 +1,9 @@
+{
+  "name": "GhostLeviathan",
+  "description": "A simple, lightweight description of a GhostLeviathan.",
+  "id": 789,
+  "creator": ["Test", "Test2"],
+  "gamemode": "wargear",
+  "image": "../../images/publics/ghostleviathan/area_render_9_.png",
+  "3d": false
+}

src/content/publics/lilith.json

@@ -0,0 +1,9 @@
+{
+  "name": "Lilith",
+  "description": "A simple, lightweight description of a Lilith.",
+  "id": 456,
+  "creator": ["Test", "Test2"],
+  "gamemode": "wargear",
+  "image": "../../images/publics/lilith/area_render_11_.png",
+  "3d": false
+}

src/content/publics/warpedowl.json

@@ -0,0 +1,9 @@
+{
+  "name": "WarpedOwl",
+  "description": "A simple, lightweight description of a WarpedOwl.",
+  "id": 456,
+  "creator": ["Test", "Test2"],
+  "gamemode": "wargear",
+  "image": "../../images/publics/warpedowl/area_render_12_.png",
+  "3d": false
+}

src/pages/publics/[schem].astro

@@ -23,8 +23,8 @@ const { schem }: { schem: CollectionEntry<"publics">} = Astro.props;
 
 <PageLayout title={schem.data.name}>
     <h1 class="text-5xl font-bold w-fit" transition:name={schem.data.id + "-title"}>{schem.data.name}</h1>
-    <PublicPreview client:idle file={schem.id} imageHeight={schem.data.image.height}>
-        <Image transition:name={schem.data.id + "-img"} src={schem.data.image} alt={schem.data.name}></Image>
+    <PublicPreview client:idle pub={schem} imageHeight={schem.data.image.height}>
+        <Image class="object-contain" transition:name={schem.data.id + "-img"} src={schem.data.image} alt={schem.data.name}></Image>
     </PublicPreview>
     <p transition:name={schem.data.id + "-desc"}>{schem.data.description}</p>
     <p>

src/pages/publics/index.astro

@@ -5,25 +5,30 @@ import {l} from "../../util/util";
 import { Image } from "astro:assets";
 import Card from "@components/Card.svelte";
 import XRayPreview from "@components/publics/XRayPreview.svelte";
+import {t} from "astro-i18n";
 
+const gamemodes = await getCollection("modes");
 const publics = await getCollection("publics");
 ---
 
 <PageLayout title="Publics">
-    <div>
-        {publics.map((pub) => (
+    {gamemodes.filter(value => publics.map(value1 => value1.data.gamemode.id).includes(value.id)).map((gamemode) => (
+        <h1 class="text-4xl font-bold">{t(`${gamemode.data.translationKey}.title`)}</h1>
+        <div class="grid grid-cols-2 gap-2">
+            {publics.filter(value => value.data.gamemode.id == gamemode.id).map((pub) => (
                 <a href={l("/publics/" + pub.id)}>
-                <Card extraClasses="w-full mx-0">
+                    <Card extraClasses="w-full m-0" hoverEffect={false}>
                         <div class="flex justify-center">
                             <XRayPreview client:load>
                                 <Image style="width: 500px" slot="normal" src={pub.data.image} alt={pub.data.name} transition:name={pub.data.id + "-img"} />
                                 {pub.data.xray && <Image slot="xray" class="bg-zinc-50 dark:bg-zinc-900" src={pub.data.xray} alt={pub.data.name} />}
                             </XRayPreview>
                         </div>
-                    <h2 class="font-bold text-5xl" transition:name={pub.data.id + "-title"}>{pub.data.name}</h2>
+                        <h2 class="font-bold text-3xl" transition:name={pub.data.id + "-title"}>{pub.data.name}</h2>
                         <h3 transition:name={pub.data.id + "-desc"}>{pub.data.description}</h3>
                     </Card>
                 </a>
             ))}
         </div>
+    ))}
 </PageLayout>