GitButler Integration Commit

This is an integration commit for the virtual branches that GitButler is tracking.

Due to GitButler managing multiple virtual branches, you cannot switch back and
forth between git branches and virtual branches easily. 

If you switch to another branch, GitButler will need to be reinitialized.
If you commit on this branch, GitButler will throw it away.

Here are the branches that are currently applied:
 - Virtual branch (refs/gitbutler/Virtual-branch)
   branch head: 6e6eb5069f
   - .gitignore
 - update-frostbite-images-2024 (refs/gitbutler/update-frostbite-images-2024)
   branch head: 6e6eb5069f
   - .gitignore
 - master (refs/gitbutler/master)

Your previous branch was: 073d474bc3

The sha for that commit was: 073d474bc3

For more information about what we're doing here, check out our docs:
https://docs.gitbutler.com/features/virtual-branches/integration-branch

src/components/publics/PublicPreview.svelte

@@ -22,9 +22,8 @@
     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 pub: CollectionEntry<"publics">;
+    export let file: string;
     export let fov: number = 60;
     export let near: number = 1
     export let far: number = 1000;
@@ -41,10 +40,6 @@
     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);
@@ -57,8 +52,8 @@
 
         const loader = new GLTFLoader();
 
-        loader.load(`/3d/${pub.id}.glb`, (gltf) => {
+        loader.load(`/3d/${file}.glb`, (gltf) => {
-            scene.add(gltf.scene);
+            let s = scene.add(gltf.scene);
 
             let cube_bbox = new THREE.Box3();
             cube_bbox.setFromObject(gltf.scene);
@@ -69,9 +64,7 @@
             camera.position.set(0, center.y, distance);
 
             controls.update();
-        }, undefined, (e) => {
+        }, undefined, console.log);
-            console.error(e);
-        });
 
         div.append(renderer.domElement);
 

src/components/publics/XRayPreview.svelte

@@ -20,19 +20,29 @@
 <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(100px at ${x}px ${y}px)`;
+        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:mouseleave={reset} role="img">
+<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">

src/content/config.ts

@@ -97,7 +97,6 @@ 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/publics/frostbite/area_render_2_.png",
+  "image": "../../images/area_render_2_.png",
-  "xray": "../../images/publics/frostbite/area_render_1_.png"
+  "xray": "../../images/area_render_1_.png"
 }

src/content/publics/ghostleviathan.json

@@ -1,9 +0,0 @@
-{
-  "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

@@ -1,9 +0,0 @@
-{
-  "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

@@ -1,9 +0,0 @@
-{
-  "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 pub={schem} imageHeight={schem.data.image.height}>
+    <PublicPreview client:idle file={schem.id} imageHeight={schem.data.image.height}>
-        <Image class="object-contain" transition:name={schem.data.id + "-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.id + "-desc"}>{schem.data.description}</p>
     <p>

src/pages/publics/index.astro

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