chore: 基线 — 已发布壁纸现状原样入库（未做任何改动）

dist/ 为 Wallpaper Engine 网页壁纸「【崩坏：星穹铁道】昔涟」(workshopid 3604974793, version 2)，
含两套预设 xilian / kv37，总计 105.1MB。本次提交不做任何修改，仅作为后续优化的对拍基线。

dist/scripts/audio-controller.js

@@ -0,0 +1,64 @@
+export default class AudioController {
+  constructor(audioId, options = {}) {
+    this.audio = document.getElementById(audioId);
+    this.audio.src = options.source;
+    this.audio.volume = options.volume;
+    this.audio.loop = true;
+    this.isPlaying = false;
+    this.isChangingSource = false;
+    this.previousSource = null;
+  }
+  play() {
+    if (this.isPlaying) {
+      return;
+    }
+    if (this.isChangingSource) {
+      return;
+    }
+    if (this.audio) {
+      setTimeout(() => {
+        this.isPlaying = true;
+        this.audio.play().catch((error) => {
+          this.isPlaying = false;
+          this.changeSource(this.previousSource);
+        });
+      }, 200);
+    }
+  }
+  pause() {
+    this.audio.pause();
+    this.isPlaying = false;
+  }
+  changeSource(newSource) {
+    if (this.isChangingSource) {
+      return;
+    }
+    if (this.audio) {
+      this.isChangingSource = true;
+      this.pause();
+      this.previousSource = this.audio.src;
+      this.audio.src = newSource;
+      this.isChangingSource = false;
+      this.play();
+    }
+  }
+  changeVolume(newVolume) {
+    const clampedVolume = Math.max(0, Math.min(1, newVolume));
+    this.audio.volume = clampedVolume;
+    this.changeStateByVolume();
+  }
+  changeStateByVolume() {
+    const currentVolume = this.audio.volume;
+    if (currentVolume > 0 && !this.isPlaying) {
+      this.play();
+    } else if (currentVolume <= 0 && this.isPlaying) {
+      this.pause();
+    }
+  }
+  changeOptions(newOptions) {
+    const newSource = newOptions.source;
+    const newVolume = newOptions.volume;
+    this.changeSource(newSource);
+    this.changeVolume(newVolume);
+  }
+}

dist/scripts/background-controller.js

@@ -0,0 +1,14 @@
+export default class BackgroundController {
+  constructor(backgroundImage) {
+    this.backgroundImage = backgroundImage;
+  }
+  setImage(backgroundImage = this.backgroundImage) {
+    this.backgroundImage = backgroundImage;
+    document.getElementsByTagName(
+      "body"
+    )[0].style.backgroundImage = `url(${backgroundImage})`;
+  }
+  changeImage(newBackgroundImage) {
+    this.setImage(newBackgroundImage);
+  }
+}

dist/scripts/index.js

@@ -0,0 +1,87 @@
+import PresetStore from "./preset-store.js";
+
+import PresetController from "./preset-controller.js";
+import BackgroundController from "./background-controller.js";
+import SpineController from "./spine-controller.js";
+import AudioController from "./audio-controller.js";
+
+let presetController = new PresetController(PresetStore);
+
+let { backgroundImage, spineConfig, audioOptions } =
+  presetController.set("xilian");
+
+let backgroundController = new BackgroundController(backgroundImage);
+let spineController = new SpineController("spine-container", spineConfig);
+let audioController = new AudioController("background-music", audioOptions);
+
+let currentAudioSource = "";
+let currentAudioVolume = 0;
+
+window.addEventListener("load", function () {
+  backgroundController.setImage();
+  spineController.create();
+  audioController.play();
+});
+
+window.addEventListener("resize", () => {
+  spineController.adjustCanvas();
+});
+
+window.wallpaperRegisterListener = {
+  applyGeneralProperties: function (properties) {
+    if (properties.fps) {
+      // wallpaperSettings.fps = properties.fps;
+    }
+  },
+  applyUserProperties: function (properties) {
+    if (properties.preset) {
+      const preset = properties.preset.value;
+      let { backgroundImage, spineConfig, audioOptions } =
+        presetController.set(preset);
+      backgroundController.changeImage(backgroundImage);
+      spineController.changeConfig(spineConfig);
+      audioController.changeOptions(audioOptions);
+    }
+    if (properties.audio_file) {
+      const audio_file = properties.audio_file.value;
+      currentAudioSource = audio_file;
+      audioController.changeSource(audio_file);
+    }
+    if (properties.audio_volume) {
+      const audio_volume = properties.audio_volume.value;
+      currentAudioVolume = audio_volume;
+      audioController.changeVolume(audio_volume);
+    }
+  },
+};
+
+window.wallpaperPropertyListener = {
+  applyGeneralProperties: function (properties) {
+    if (properties.fps) {
+      // wallpaperSettings.fps = properties.fps;
+    }
+  },
+  applyUserProperties: function (properties) {
+    if (properties.preset) {
+      const preset = properties.preset.value;
+      let { backgroundImage, spineConfig, audioOptions } = presetController.set(
+        preset,
+        currentAudioSource,
+        currentAudioVolume
+      );
+      backgroundController.changeImage(backgroundImage);
+      spineController.changeConfig(spineConfig);
+      audioController.changeOptions(audioOptions);
+    }
+    if (properties.audio_file) {
+      const audio_file = properties.audio_file.value;
+      currentAudioSource = audio_file;
+      audioController.changeSource(audio_file);
+    }
+    if (properties.audio_volume) {
+      const audio_volume = properties.audio_volume.value;
+      currentAudioVolume = audio_volume;
+      audioController.changeVolume(audio_volume);
+    }
+  },
+};

dist/scripts/preset-controller.js

@@ -0,0 +1,35 @@
+export default class PresetController {
+  constructor(presetStore) {
+    this.presetStore = presetStore;
+    this.previousPreset = "";
+    this.currentPreset = "";
+  }
+  getName() {
+    return Object.keys(this.presetStore);
+  }
+  set(newPreset, currentAudioSource, currentAudioVolume) {
+    let newPresetData = JSON.parse(JSON.stringify(this.presetStore[newPreset]));
+    if (this.previousPreset) {
+      if (
+        currentAudioSource &&
+        this.presetStore[this.previousPreset].audioOptions.source !==
+          currentAudioSource
+      ) {
+        newPresetData.audioOptions.source = currentAudioSource;
+      }
+      if (
+        currentAudioVolume ||
+        (currentAudioVolume === 0 &&
+          this.presetStore[this.previousPreset].audioOptions.volume !==
+            currentAudioVolume)
+      ) {
+        newPresetData.audioOptions.volume = currentAudioVolume;
+      }
+    }
+    if (this.currentPreset) {
+      this.previousPreset = this.currentPreset;
+    }
+    this.currentPreset = newPreset;
+    return newPresetData;
+  }
+}

dist/scripts/preset-store.js

@@ -0,0 +1,40 @@
+const PresetStore = {
+  kv37: {
+    backgroundImage: "./assets/images/kv37_xilian.png",
+    spineConfig: {
+      jsonUrl: "./assets/effects/kv37.json",
+      atlasUrl: "./assets/images/kv37.atlas",
+      animation: "animation",
+      viewport: {
+        x: -1215,
+        y: -410,
+        width: 2048,
+        height: 1024,
+      },
+    },
+    audioOptions: {
+      source: "./assets/audios/pv37.mp3",
+      volume: 0.5,
+    },
+  },
+  xilian: {
+    backgroundImage: "./assets/images/ava.jpg",
+    spineConfig: {
+      jsonUrl: "./assets/effects/xilian.json",
+      atlasUrl: "./assets/images/xilian.atlas",
+      animation: "idle",
+      viewport: {
+        padLeft: "-25%",
+        padRight: "-28%",
+        padTop: "-30%",
+        padBottom: "-23%",
+      },
+    },
+    audioOptions: {
+      source: "./assets/audios/「再度和你」.flac",
+      volume: 0.5,
+    },
+  },
+};
+
+export default PresetStore;

dist/scripts/spine-controller.js

@@ -0,0 +1,60 @@
+export default class SpineController {
+  constructor(containerId, config = {}) {
+    this.containerId = containerId;
+    this.config = {
+      alpha: true,
+      premultipliedAlpha: false,
+      showControls: false,
+      showLoading: false,
+      ...config,
+    };
+
+    this.previousConfig = {};
+
+    this.container = document.getElementById(containerId);
+    this.player = undefined;
+  }
+
+  create() {
+    if (!this.player) {
+      const containerId = this.containerId;
+      const config = this.config;
+      this.player = new spine.SpinePlayer(containerId, config);
+    }
+  }
+
+  dispose() {
+    if (this.player) {
+      const container = this.container;
+      this.player.dispose();
+      container.innerHTML = "";
+      this.player = undefined;
+    }
+  }
+
+  adjustCanvas() {
+    if (this.player) {
+      const container = this.container;
+      const canvas = container.querySelector("canvas");
+      if (canvas) {
+        const rect = container.getBoundingClientRect();
+        canvas.style.width = "100%";
+        canvas.style.height = "100%";
+        canvas.width = rect.width;
+        canvas.height = rect.height;
+      }
+    }
+  }
+
+  changeConfig(newConfig = {}) {
+    if (this.player) {
+      this.previousConfig = this.config;
+      this.config = {
+        ...this.config,
+        ...newConfig,
+      };
+      this.dispose();
+      this.create();
+    }
+  }
+}