微件:SaltSkinPreviewer：修订间差异

微件:SaltSkinPreviewer (查看源代码)

2022年8月20日 (六) 20:43的版本

添加303字节、 2022年8月20日 (星期六)

代码重写

可视化wikitext

Salt lovely

行政员、界面管理员、管理员

3,389

个编辑

@@ 第1行： / 第1行： @@
-<noinclude><pre><span class="skinview3d salt">[[文件:1.8皮肤模板 第二层镂空.png]]</span>
+<noinclude><pre><div class="salt salt-skin-view-3d" style="width: 250px; height: 350px;">[[文件:1.8皮肤模板 第二层镂空.png]]</div>
-<span class="skinview3d salt">https://attachment.mcbbs.net/forum/202004/26/203149z2t4el4ctdh4t1dt.png</span>
+<div class="salt salt-skin-view-3d" style="width: 400px; height: 400px;">https://minotar.net/skin/MHF_Steve</div>
 {{#Widget:SaltSkinPreviewer}}</pre>
-<span class="skinview3d salt">[[文件:1.8皮肤模板 第二层镂空.png]]</span>
+<div class="salt salt-skin-view-3d" style="width: 250px; height: 350px;">[[文件:1.8皮肤模板 第二层镂空.png]]</div>
-<span class="skinview3d salt">https://attachment.mcbbs.net/forum/202004/26/203149z2t4el4ctdh4t1dt.png</span>
+<div class="salt salt-skin-view-3d" style="width: 400px; height: 400px;">https://minotar.net/skin/MHF_Steve</div>
 {{#Widget:SaltSkinPreviewer}}
-这个预览功能使用了[https://github.com/bs-community/skinview3d bs-community的skinview3d开源库]于2020-12-31的版本，采用'''MIT许可证'''。
+这个预览功能使用了[https://github.com/bs-community/skinview3d bs-community的skinview3d开源库]于2020-12-31的版本，采用'''MIT许可证'''，Salt_lovely[https://github.com/Salt-lovely/skinview3d 编译上传于Github的版本]遵从原许可证。
-Salt_lovely[https://github.com/Salt-lovely/skinview3d 编译上传于Github的版本]遵从原许可证。
+主体功能实现于2022年8月20日重写，新版源代码详见[https://github.com/mcbbs-wiki/mcbbs-wiki-widget-repo Github仓库]，旧版源代码已经随着盐酱的旧电脑一起随风飘散。
+</noinclude><includeonly><script async>
+"use strict";
+(() => {
+  // src/utils/utils.ts
+  function docReady(fn) {
+    if (document.readyState === "loading") {
+      window.addEventListener("DOMContentLoaded", fn);
+    } else {
+      fn();
+    }
+  }
+  function sleep(time = 500) {
+    return new Promise((res) => {
+      setTimeout(() => res(), time);
+    });
+  }
+  async function waitTill(what, interval = 500, safeTime = 12e4) {
+    const startTime = Date.now();
+    while (!what()) {
+      await sleep(interval);
+      if (Date.now() - startTime > safeTime && !what())
+        throw new Error("Out Of Time");
+    }
+  }
-代码中<code>__awaiter</code>部分由Microsoft开发，释入公共领域，可随意使用；其余部分由Salt_lovely开发，使用'''AGPL v3许可证'''。
+  // src/utils/resource.ts
+  function addScript(url, asynchronous = false, key) {
+    if (key && document.getElementById(key))
+      return;
+    const scr = document.createElement("script");
+    scr.src = url;
+    scr.async = asynchronous;
+    if (key)
+      scr.id = key;
+    document.head.appendChild(scr);
+  }
-（这么屑的代码应该没有人偷）
+  // widget/SaltSkinPreviewer/widget.ts
-</noinclude><includeonly><script async>
+  var filterWebsite = [
-'use strict';
+     "https://mcbbs.wiki/",
-(function () {
+    "https://attachment.mcbbs.net/",
-     let __awaiter = (this && this.__awaiter) || function (saltArg, _arguments, P, generator) {
+     "https://minotar.net/"
-        function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+  ];
-        return new (P || (P = Promise))(function (resolve, reject) {
+  addScript("https://cdn.jsdelivr.net/gh/Salt-lovely/[email protected].2/bundles/skinview3d.bundle.js", true, "SaltSkinPreviewer");
-            function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+  docReady(async () => {
-            function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+    await waitTill(() => {
-            function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+      var _a;
-            step((generator = generator.apply(saltArg, _arguments || [])).next());
+      return (_a = window.skinview3d) == null ? void 0 : _a.SkinViewer;
-        });
+    });
-    };
+    const skinList = Array.from(document.querySelectorAll(".salt.salt-skin-view-3d"));
-     if (!document.querySelector('script[src^="https://cdn.jsdelivr.net/gh/Salt-lovely/skinview3d"]')) {
+    skinList.forEach((skin) => {
-        let s = document.createElement('script')
+      var _a;
-        s.src = 'https://cdn.jsdelivr.net/gh/Salt-lovely/[email protected].1/bundles/skinview3d.bundle.js'
+      skin.classList.remove("salt");
-        document.head.appendChild(s)
+      let src;
-    }
+      if (skin.querySelector("img")) {
-    let allowList = ['https://attachment.mcbbs.net/']
+        src = (_a = skin.querySelector("img")) == null ? void 0 : _a.src;
-    __awaiter(this, void 0, void 0, function* () {
+      } else
-        // 主要过程
+        src = skin.textContent;
-        let safe = 0
+      if (!src || src.length < 10)
-        while (typeof skinview3d == 'undefined' && safe < 100) {
+        return;
-            yield new Promise((resolve) => setTimeout(resolve, 1000));
+      if (!filterWebsite.some((site) => src.startsWith(site)))
-            // console.log(safe++)
+        return;
-        }
+      skin.innerHTML = "";
-        if (typeof skinview3d == 'undefined') {
+      const canvas = document.createElement("canvas");
-            throw new Error('没有成功下载skinview3d')
+      const option = {
-        }
+        canvas,
-        for (let s of Array.from(document.querySelectorAll('.skinview3d.salt'))) {
+        width: skin.offsetWidth,
-            s.classList.remove('salt') // 防止复读
+        height: skin.offsetHeight,
-            if (!(s instanceof HTMLElement)) { continue } // 略过非HTML元素
+        skin: src,
-            let temp, src = ''
+        fov: 50,
-            temp = s.querySelector('img') // 从img获取
+        zoom: 0.9
-            if (temp) {
+      };
-                src = temp.src || ''
+      const viewer = new window.skinview3d.SkinViewer(option);
-            }
+      viewer.globalLight.intensity = 0.5;
-            if (src.length < 1) {
+      viewer.cameraLight.intensity = 0.5;
-                // 没有获取到链接地址或者不存在img
+      skin.appendChild(canvas);
-                temp = s.querySelector('a')
+      const animation = {
-                if (temp) {
+        idle: new window.skinview3d.IdleAnimation(),
-                    src = temp.href || ''
+        walk: new window.skinview3d.WalkingAnimation()
-                }
+      };
-            }
+      const action = (() => {
-            if (src.indexOf('https://game.bilibili.com/linkfilter/?url=') == 0
+        let curr = 0;
-                || src.indexOf('http://game.bilibili.com/linkfilter/?url=') == 0) {
+        const actions = [
-                src = src.replace(/https?\:\/\/game\.bilibili\.com\/linkfilter\/\?url\=/, '')
+          (v) => {
-                let allow = false
+            v.animation = animation.walk;
-                for (let al of allowList) {
+            v.animation.speed = 0.5;
-                    if (src.indexOf(al) == 0) {
+          },
-                        allow = true
+          (v) => {
-                        break
+            v.animation = animation.walk;
-                    }
+            v.animation.speed = 1;
-                }
+          },
-                if (!allow) { continue }
+          (v) => {
-                src = 'https://saltproxy.saltlovely.workers.dev/' + src
+            v.animation = animation.idle;
-            }
+            v.animation.speed = 1;
-            if (src.length < 1) { continue } // 没救了
+          }
-            // console.log(src)
+        ];
-            // 添加皮肤
+        return (v) => {
-             s.innerHTML = '' // 清空
+          actions[curr++](v);
-            let canvas = document.createElement('canvas')
+          if (curr >= actions.length)
-            s.appendChild(canvas)
+             curr = 0;
-            let sv = new skinview3d.SkinViewer({
+        };
-                canvas: canvas,
+      })();
-                width: 250,
+      let pos = { x: 0, y: 0 };
-                height: 350,
+      skin.addEventListener("mousedown", (ev) => {
-                skin: src
+        const { x, y } = ev;
-            })
+        pos = { x, y };
-            sv.renderer.setClearColor(0xf6f9fe) // 背景色
+        ev.preventDefault();
-            let walk = sv.animations.add(skinview3d.WalkingAnimation)
+      });
-            walk.speed = 0.4
+      skin.addEventListener("mouseup", (ev) => {
-        }
+        const { x, y } = ev;
-     })
+        if (Math.abs(pos.x - x) > 2 || Math.abs(pos.y - y) > 2)
-})()
+          return;
+        if (ev.button === 0)
+          action(viewer);
+        else if (ev.button === 2)
+          viewer.resetCameraPose();
+        ev.preventDefault();
+      });
+      action(viewer);
+      skin.addEventListener("dblclick", () => {
+        viewer.resetCameraPose();
+      });
+     });
+  });
+})();
 </script></includeonly>