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) => {
+        loader.load(`/3d/${pub.id}.glb`, (gltf) => {
-            let s = scene.add(gltf.scene);
+            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",
+  "image": "../../images/publics/frostbite/area_render_2_.png",
-  "xray": "../../images/area_render_1_.png"
+  "xray": "../../images/publics/frostbite/area_render_1_.png"
 }

src/layouts/NavbarLayout.astro

@@ -29,7 +29,7 @@ const {title, description} = Astro.props;
                 <div class="flex-1 flex justify-evenly items-center md:items-start mt-4 md:flex-row flex-col gap-y-4">
                     <div class="footer-card">
                         <h1>Serverstatus</h1>
-                        <ServerStatus transition:persist client:visible />
+                        <ServerStatus transition:persist client:only="svelte" />
                     </div>
                     <div class="footer-card">
                         <h1>Links</h1>

src/pages/index.astro

@@ -44,7 +44,7 @@ function mapMap<T, K, J>(i: Map<T, K>, fn: (key: T, value: K) => J): J[] {
             class="w-full object-cover rounded-b-2xl shadow-2xl dark:brightness-75"
             style="height: calc(100vh + 1rem)" draggable="false" loading="eager"/>
         <drop-in class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center">
-            <h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow"
+            <h1 class="text-4xl sm:text-6xl md:text-8xl font-extrabold text-white -translate-y-16 opacity-0 barlow tracking-wider"
                 style="transition: transform .7s ease-out, opacity .7s linear; text-shadow: 2px 2px 5px black;">
                 <span class="text-yellow-400">{t("home.title.first")}</span><span
                     class="text-neutral-600">{t("home.title.second")}</span>

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}>
+    <PublicPreview client:idle pub={schem} imageHeight={schem.data.image.height}>
-        <Image transition:name={schem.data.id + "-img"} src={schem.data.image} alt={schem.data.name}></Image>
+        <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>
+    {gamemodes.filter(value => publics.map(value1 => value1.data.gamemode.id).includes(value.id)).map((gamemode) => (
-        {publics.map((pub) => (
+        <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>