3D Public Preview Initial Test

src/components/3d/PublicPreview.svelte

@@ -0,0 +1,105 @@
+<!--
+  -   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">
+    import * as THREE from "three";
+    import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
+    import { OrbitControls } from "three/addons/controls/OrbitControls.js";
+    import {onMount} from "svelte";
+
+    export let file: string;
+    export let fov: number = 60;
+    export let near: number = 1
+    export let far: number = 1000;
+    export let distance: number = 100;
+
+    let loaded = false;
+
+    let div: HTMLDivElement;
+    let scene: THREE.Scene;
+    let camera: THREE.PerspectiveCamera;
+    let renderer: THREE.WebGLRenderer;
+    let controls: OrbitControls;
+    let light: THREE.AmbientLight;
+
+    onMount(() => {
+        scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x171717);
+        camera = new THREE.PerspectiveCamera(fov, 1, near, far);
+
+        renderer = new THREE.WebGLRenderer();
+        renderer.setSize(500, 300);
+        controls = new OrbitControls(camera, renderer.domElement);
+        controls.autoRotate = true;
+        controls.autoRotateSpeed = 1;
+
+        const loader = new GLTFLoader();
+
+        loader.load(`/3d/${file}.glb`, (gltf) => {
+            let s = scene.add(gltf.scene);
+
+            let cube_bbox = new THREE.Box3();
+            cube_bbox.setFromObject(gltf.scene);
+            let center = new THREE.Vector3();
+            cube_bbox.getCenter(center);
+
+            controls.target = center;
+            camera.position.set(0, center.y, distance);
+
+            controls.update();
+        }, undefined, console.log);
+
+        div.append(renderer.domElement);
+
+        light = new THREE.AmbientLight(0xffffff, 1);
+        scene.add(light);
+
+        new ResizeObserver(handleResize).observe(div);
+
+        function animate() {
+            requestAnimationFrame( animate );
+
+            renderer.render( scene, camera );
+            controls.update();
+        }
+
+        animate();
+
+        loaded = true;
+    });
+
+    function handleResize() {
+        let width = div.clientWidth;
+        let height = div.clientHeight;
+
+        camera.aspect = width / height;
+        camera.updateProjectionMatrix();
+
+        renderer.setSize(width, height, true);
+    }
+</script>
+
+<div bind:this={div} class="w-full h-full">
+
+</div>
+
+{#if !loaded}
+    <slot></slot>
+{/if}
+

src/components/Navbar.svelte

@@ -63,6 +63,7 @@
                     <a class="btn btn-gray my-1"
                        href={l("/announcements")}>{t("navbar.links.home.announcements")}</a>
                     <a class="btn btn-gray" href={l("/about")}>{t("navbar.links.home.about")}</a>
+                    <a class="btn btn-gray" href={l("/publics")}>{t("navbar.links.home.publics")}</a>
                     <a class="btn btn-gray" href={l("/downloads")}>{t("navbar.links.home.downloads")}</a>
                     <a class="btn btn-gray" href={l("/faq")}>{t("navbar.links.home.faq")}</a>
                 </div>

src/content/config.ts

@@ -80,6 +80,26 @@ export const announcements = defineCollection({
     }),
 });
 
+export const publics = defineCollection({
+    type: "data",
+    schema: ({image}) => z.object({
+        "name": z.string(),
+        "description": z.string(),
+        "id": z.number().positive(),
+        "creator": z.string().array().optional(),
+        "showcase": z.string().url().optional(),
+        "camera": z.object({
+            "fov": z.number().optional(),
+            "near": z.number().optional(),
+            "far": z.number().optional(),
+            "distance": z.number().optional(),
+        }).optional(),
+        "image": image(),
+        "xray": image().optional(),
+        "gamemode": reference("modes"),
+    }),
+});
+
 export const collections = {
     "pages": pages,
     "help": help,
@@ -87,4 +107,5 @@ export const collections = {
     "rules": rules,
     "downloads": downloads,
     "announcements": announcements,
+    "publics": publics,
 };

src/content/publics/frostbite.json

@@ -0,0 +1,8 @@
+{
+  "name": "Frostbite",
+  "description": "A simple, lightweight description of a frostbite.",
+  "id": 123,
+  "creator": ["Test", "Test2"],
+  "gamemode": "wargear",
+  "image": "../../images/WarGears.png"
+}

src/i18n/common/en.json

@@ -9,6 +9,7 @@
         "title": "Home",
         "announcements": "Announcements",
         "about": "About",
+        "publics": "Publics",
         "downloads": "Downloads",
         "faq": "FAQ"
       },

src/pages/publics/[schem].astro

@@ -0,0 +1,33 @@
+---
+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 { Image } from "astro:assets";
+
+export const getStaticPaths = createGetStaticPaths(async () => {
+    const pages = await getCollection("publics");
+
+    return pages.map((entry) => ({
+        props: {
+            schem: entry,
+        },
+        params: {
+            schem: entry.id,
+        },
+    }));
+});
+
+const { schem }: { schem: CollectionEntry<"publics">} = Astro.props;
+---
+
+<PageLayout title={schem.data.name}>
+    <h1 class="text-5xl font-bold" transition:name={schem.data.name + "-title"}>{schem.data.name}</h1>
+    <PublicPreview client:idle file={schem.id}>
+        <Image transition:name={schem.data.name + "-img"} src={schem.data.image} alt={schem.data.name}></Image>
+    </PublicPreview>
+    <p transition:name={schem.data.name + "-desc"}>{schem.data.description}</p>
+    <p>
+        Erbauer: {schem.data.creator.join(", ")}
+    </p>
+</PageLayout>

src/pages/publics/index.astro

@@ -0,0 +1,25 @@
+---
+import PageLayout from "../../layouts/PageLayout.astro";
+import {getCollection} from "astro:content";
+import {l} from "../../util/util";
+import { Image } from "astro:assets";
+import Card from "@components/Card.svelte";
+
+const publics = await getCollection("publics");
+---
+
+<PageLayout title="Publics">
+    <div>
+        {publics.map((pub) => (
+            <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"} />
+                    </div>
+                    <h2 class="font-bold text-5xl" transition:name={pub.data.name + "-title"}>{pub.data.name}</h2>
+                    <h3 transition:name={pub.data.name + "-desc"}>{pub.data.description}</h3>
+                </Card>
+            </a>
+        ))}
+    </div>
+</PageLayout>