finished Skin UGC

nonpacks/static/js/packs_preview.js

@@ -173,15 +173,9 @@
         return baseTextures.concat(featureTextures);
     }
 
-    async function open(btn) {
-        const member = btn.dataset.member;
-        const name = btn.dataset.name || member;
-        const modelFormat = btn.dataset.modelFormat || '.geo.json';
-        const slug = btn.dataset.projectSlug || '';
-        const opts = { baseUrl: btn.dataset.baseUrl, vanillaBaseUrl: btn.dataset.vanillaBaseUrl, defaultTexture: btn.dataset.defaultTexture || null };
-        if (!member || !opts.baseUrl || busy) return;
-        busy = true;
-
+    // Create (or reset) the full-screen Blockbench overlay + fresh iframe and
+    // wait for the app to be ready. Returns false on failure.
+    async function prepareOverlay(name) {
         const overlayEl = ensureOverlay();
         overlayEl.hidden = false;
         document.querySelector('#bb-overlay-title').textContent = name;
@@ -209,12 +203,20 @@
             };
             window.addEventListener('message', onMsg);
         });
+        if (!ready) setStatus('Blockbench failed to start.');
+        return ready;
+    }
 
-        if (!ready) {
-            setStatus('Blockbench failed to start.');
-            busy = false;
-            return;
-        }
+    async function open(btn) {
+        const member = btn.dataset.member;
+        const name = btn.dataset.name || member;
+        const modelFormat = btn.dataset.modelFormat || '.geo.json';
+        const slug = btn.dataset.projectSlug || '';
+        const opts = { baseUrl: btn.dataset.baseUrl, vanillaBaseUrl: btn.dataset.vanillaBaseUrl, defaultTexture: btn.dataset.defaultTexture || null };
+        if (!member || !opts.baseUrl || busy) return;
+        busy = true;
+
+        if (!(await prepareOverlay(name))) { busy = false; return; }
 
         setStatus('Loading model…');
         try {
@@ -254,6 +256,34 @@
         busy = false;
     }
 
+    // Load a Minecraft skin into Blockbench's built-in "Minecraft Skin" project.
+    async function openSkin(btn) {
+        const member = btn.dataset.member;
+        const name = btn.dataset.name || member;
+        const opts = { baseUrl: btn.dataset.baseUrl };
+        if (!member || !opts.baseUrl || busy) return;
+        busy = true;
+
+        if (!(await prepareOverlay(name))) { busy = false; return; }
+
+        setStatus('Loading skin…');
+        try {
+            const select = btn.closest('.skin-card')?.querySelector('.skin-model-select');
+            const model = select ? select.value : 'steve';
+            const img = await loadImage(assetUrl(opts.baseUrl, member));
+            iframe.contentWindow.postMessage({
+                type: 'packs-open-skin',
+                name: name,
+                model: model,
+                dataUrl: imageDataUrl(img),
+            }, window.location.origin);
+            setStatus('Applying…');
+        } catch (e) {
+            setStatus('Could not load skin: ' + e.message);
+        }
+        busy = false;
+    }
+
     window.addEventListener('message', (e) => {
         if (e.origin !== window.location.origin) return;
         if (!e.data) return;
@@ -266,5 +296,5 @@
         }
     });
 
-    window.PacksPreview = { open: open, close: close };
+    window.PacksPreview = { open: open, openSkin: openSkin, close: close };
 })();