added outfit presenter for collection presentation

minerobe.client/src/lib/components/outfit/OutfitPresenter/OutfitPresenter.scss

@@ -0,0 +1,9 @@
+.outfit-presenter {
+  aspect-ratio: 1;
+  min-width: 60px;
+  max-width: 60px;
+  transition: box-shadow var(--time);
+  &.dragging {
+    box-shadow: inset 0px 0px 0px 5px var(--color-accent);
+  }
+}

minerobe.client/src/lib/components/outfit/OutfitPresenter/OutfitPresenter.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+  import OutfitPackageSnapshotRender from "$lib/components/render/OutfitPackageSnapshotRender.svelte";
+  import { defaultRenderer } from "$src/data/cache";
+  import { MODEL_TYPE } from "$src/data/consts";
+  import {
+    CreateDefaultRenderProvider,
+    type RenderProvider,
+  } from "$src/data/render";
+  import type { OutfitPackage } from "$src/model/package";
+  import { onMount } from "svelte";
+
+  export let item: OutfitPackage = null;
+  export let readonly: boolean = false;
+  export let renderProvider: RenderProvider = null;
+
+  onMount(async () => {
+    if (renderProvider == null) {
+      const defaultRender = await CreateDefaultRenderProvider($defaultRenderer);
+      renderProvider =
+        item.model === MODEL_TYPE.ALEX
+          ? defaultRender.alex
+          : defaultRender.steve;
+    }
+  });
+
+  let isDragging = false;
+  //drop support
+  const handleRenderDrop = (e) => {
+    isDragging = false;
+  };
+  const handleRenderDragOver = (e) => {
+    isDragging = true;
+    e.preventDefault();
+  };
+  const handleRenderDragEnter = (e) => {
+    isDragging = true;
+    e.preventDefault();
+  };
+  const handleRenderDragLeave = (e) => {
+    isDragging = false;
+    e.preventDefault();
+  };
+</script>
+
+<!-- svelte-ignore a11y-no-static-element-interactions -->
+<div
+  class="outfit-presenter"
+  class:dragging={isDragging && !readonly}
+  on:drop={handleRenderDrop}
+  on:dragover={handleRenderDragOver}
+  on:dragenter={handleRenderDragEnter}
+  on:dragleave={handleRenderDragLeave}
+>
+  {#if renderProvider != null && item != null}
+    <OutfitPackageSnapshotRender {renderProvider} {item}/>
+  {:else}
+    <div class="loading">Loading...</div>
+  {/if}
+</div>
+
+<style lang="scss">
+  @import "OutfitPresenter.scss";
+</style>

minerobe.client/src/routes/explore/+page.svelte

@@ -7,8 +7,20 @@
   import { onMount } from "svelte";
   import Menu from "$lib/components/base/Menu/Menu.svelte";
   import Select from "$lib/components/base/Select/Select.svelte";
+  import OutfitPresenter from "$lib/components/outfit/OutfitPresenter/OutfitPresenter.svelte";
 
-  onMount(() => {});
+  import { appState } from "$data/cache";
+  import { GetStudioPackage } from "$src/api/wardrobe";
+  import { APP_STATE } from "$src/data/consts";
+  let testpackage = null;
+  let laoded = false;
+  onMount(async () => {
+    appState.subscribe(async (state) => {
+      if (state != APP_STATE.READY) return;
+      testpackage = await GetStudioPackage();
+      laoded = true;
+    });
+  });
   const compare = (a, b) => {
     return a?.value == b;
   };
@@ -44,6 +56,9 @@
       selectedItem={"item2"}
       items={["item1", "item2", "item3"]}
     ></Select>
+    {#if laoded}
+      <OutfitPresenter item={testpackage} />
+    {/if}
   </div>
 </div>