feat: masonry layout and edit maps/textures

src/lib/components/generate/publish-popup.svelte

@@ -5,7 +5,7 @@
   const publishPopup = writable(false);
   let asset;
   let thumbnail;
-  export function recieve_asset(asset_, thumbnail_) {
+  export function send_asset(asset_, thumbnail_) {
     asset = asset_;
     thumbnail = Array.from(thumbnail_);
     publishPopup.set(true);

src/lib/components/generate/util.svelte

@@ -1,17 +1,20 @@
 <script>
   import { Loader2 } from "lucide-svelte";
+  import { browser } from "$app/environment";
   export let init;
 </script>
 
 <section class="container flex w-full items-center justify-center p-4">
   <div class="relative w-full">
     <canvas id="bevy-canvas" oncontextmenu="return false;" class="w-full" />
-    {#await init()}
-      <div
-        class="absolute top-0 flex h-full w-full items-center justify-center bg-white dark:bg-black"
-      >
-        <Loader2 class="h-20 w-20 animate-spin" />
-      </div>
-    {/await}
+    {#if browser}
+      {#await init()}
+        <div
+          class="absolute top-0 flex h-full w-full items-center justify-center bg-white dark:bg-black"
+        >
+          <Loader2 class="h-20 w-20 animate-spin" />
+        </div>
+      {/await}
+    {/if}
   </div>
 </section>

src/routes/browse/+page.svelte

@@ -23,23 +23,32 @@
         collection of procedurally generated assets.
       </p>
     </div>
-    <div class="my-4 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
+    <div
+      class="my-4 columns-1 gap-4 sm:columns-2 md:columns-3 lg:columns-4"
+    >
       {#each data.assets as asset}
-        <Card.Root class="animate-gradient p-[2px] hover:border-transparent hover:bg-gradient-to-r">
-          <div class="flex h-full flex-col rounded-md bg-background">
-            <Card.Header class="flex justify-center">
-              <img src={asset.thumbnail} alt="Asset thumbnail" />
-            </Card.Header>
-            <Card.Content>
-              <Card.Title>{asset.title}</Card.Title>
-              {#if asset.description}
-                <Card.Description>{asset.description}</Card.Description>
-              {:else}
-                <Card.Description class="text-italic">No description provided</Card.Description>
-              {/if}
-            </Card.Content>
-          </div>
-        </Card.Root>
+        <button
+          on:click={() => (window.location.href = `/generate/${asset.type}?id=${asset.id}`)}
+          class="w-full my-2"
+        >
+          <Card.Root
+            class="animate-gradient p-[2px] hover:border-transparent hover:bg-gradient-to-r"
+          >
+            <div class="flex flex-col rounded-md bg-background">
+              <Card.Header class="flex justify-center">
+                <img src={asset.thumbnail} alt="Asset thumbnail" />
+              </Card.Header>
+              <Card.Content>
+                <Card.Title>{asset.title}</Card.Title>
+                {#if asset.description}
+                  <Card.Description>{asset.description}</Card.Description>
+                {:else}
+                  <Card.Description class="text-italic">No description provided</Card.Description>
+                {/if}
+              </Card.Content>
+            </div>
+          </Card.Root>
+        </button>
       {/each}
     </div>
   </div>

src/routes/generate/[util]/+page.server.ts

@@ -0,0 +1,18 @@
+import { error } from "@sveltejs/kit";
+import prisma from "$lib/prisma";
+
+const utils = ["map", "terrain", "planet"];
+/** @type {import('./$types').PageLoad} */
+export async function load({ params, url }) {
+
+  if (utils.includes(params.util)) {
+    let asset;
+    if (url.searchParams.get("id")) {
+      if (url.searchParams.get("id")) {
+        asset = await prisma.asset.findUnique({ where: { id: url.searchParams.get("id") } });
+      }
+    }
+    return { asset: JSON.stringify(asset?.data), util: params.util };
+  }
+  error(404, "Not found");
+}

src/routes/generate/[util]/+page.svelte

@@ -1,11 +1,23 @@
-<script>
+<script context="module">
+  import { get } from "svelte/store";
   import { page } from "$app/stores";
+  export function recieve_asset() {
+    return get(page).data.asset;
+  }
+</script>
+
+<script>
   import Util from "$lib/components/generate/util.svelte";
   import PublishPopup from "$lib/components/generate/publish-popup.svelte";
   import background from "$lib/assets/gradient.png";
+  import init_map from "../../../utils/map";
+  import init_terrain from "../../../utils/terrain";
+  import init_planet from "../../../utils/planet";
 
   /** @type {import('./$types').PageData} */
   export let data;
+  const utils = { map: init_map, terrain: init_terrain, planet: init_planet };
+  let init = utils[data.util];
 </script>
 
 <section>
@@ -14,7 +26,7 @@
     style="mask-image: url({background})"
   ></div>
   <div class="z-[-10] h-[1000px] w-full backdrop-blur">
-    <Util init={data.init} />
+    <Util {init} />
   </div>
   <PublishPopup util={data.util} session={$page.data.session} />
 </section>

utils/map/src/main.rs

@@ -13,10 +13,14 @@ use wasm_bindgen::prelude::wasm_bindgen;
 
 #[wasm_bindgen(raw_module = "../../lib/components/generate/publish-popup.svelte")]
 extern "C" {
-    fn recieve_asset(asset: &str, thumbnail: &[u8]);
+    fn send_asset(asset: &str, thumbnail: &[u8]);
     fn dark_theme() -> bool;
 }
 
+#[wasm_bindgen(raw_module = "../../routes/generate/[util]/+page.svelte")]
+extern "C" {
+    fn recieve_asset() -> Option<String>;
+}
 fn main() {
     App::new()
         .add_plugins(
@@ -72,7 +76,13 @@ fn setup(mut commands: Commands) {
             ..default()
         })
         .with_children(|parent| {
-            parent.spawn(MapBundle::default());
+            parent.spawn(MapBundle {
+                map: match recieve_asset() {
+                    Some(map) => serde_json::from_str(&map).expect("Could not deserialize map"),
+                    None => Map::default(),
+                },
+                ..default()
+            });
         });
 }
 
@@ -216,9 +226,9 @@ fn export_gui(
         .clone()
         .try_into_dynamic()
         .expect("Could not convert to dynamic")
-        .resize_to_fill(
-            300.min(map.image_size[0]),
-            300.min(map.image_size[1]),
+        .resize(
+            200.min(map.image_size[0]),
+            200.min(map.image_size[1]),
             if map.anti_aliasing {
                 FilterType::Triangle
             } else {
@@ -242,7 +252,7 @@ fn export_gui(
         .show(contexts.ctx_mut(), |ui| {
             #[cfg(target_arch = "wasm32")]
             if ui.button("Publish").clicked() {
-                recieve_asset(
+                send_asset(
                     &serde_json::to_string::<Map>(&map).expect("Cannot serialize Map"),
                     &thumbnail_buffer,
                 );

utils/planet/src/main.rs

@@ -13,7 +13,7 @@ use wasm_bindgen::prelude::wasm_bindgen;
 
 #[wasm_bindgen(raw_module = "../../lib/components/generate/publish-popup.svelte")]
 extern "C" {
-    fn recieve_asset(asset: &str);
+    fn send_asset(asset: &str, thumbnail: &[u8]);
 }
 
 fn main() {
@@ -96,10 +96,12 @@ fn gui(mut contexts: EguiContexts, mut query: Query<&mut Planet>) {
         ui.heading("Config");
         ui.separator();
 
+        #[cfg(target_arch = "wasm32")]
         if ui.button("Publish").clicked() {
             {
-                recieve_asset(
+                send_asset(
                     &serde_json::to_string::<Planet>(&planet).expect("Cannot serialize Planet"),
+                    &[],
                 );
             }
         }

utils/terrain/src/main.rs

@@ -13,7 +13,7 @@ use wasm_bindgen::prelude::wasm_bindgen;
 
 #[wasm_bindgen(raw_module = "../../lib/components/generate/publish-popup.svelte")]
 extern "C" {
-    fn recieve_asset(asset: &str);
+    fn send_asset(asset: &str, thumbnail: &[u8]);
 }
 
 fn main() {
@@ -97,10 +97,12 @@ fn gui(mut contexts: EguiContexts, mut query: Query<&mut Terrain>) {
         ui.heading("Config");
         ui.separator();
 
+        #[cfg(target_arch = "wasm32")]
         if ui.button("Publish").clicked() {
             {
-                recieve_asset(
+                send_asset(
                     &serde_json::to_string::<Terrain>(&terrain).expect("Cannot serialize Terrain"),
+                    &[],
                 );
             }
         }