@mar7th/firework 1.0.0

package/src/ui/ControlPanel.js

@@ -0,0 +1,205 @@
+import { controlsSchema } from "../config/defaults.js";
+
+export class ControlPanel {
+  constructor(container, config, eventBus, backgroundManager, toast) {
+    this.container = container;
+    this.config = config;
+    this.eventBus = eventBus;
+    this.backgroundManager = backgroundManager;
+    this.toast = toast;
+    this.inputs = new Map();
+  }
+
+  render() {
+    this.container.innerHTML = "";
+
+    for (const section of controlsSchema) {
+      const details = document.createElement("details");
+      details.className = "control-section";
+      details.open = true;
+
+      const summary = document.createElement("summary");
+      summary.textContent = section.title;
+      details.append(summary);
+
+      const body = document.createElement("div");
+      body.className = "section-body";
+
+      for (const control of section.controls) {
+        body.append(this.createControl(control));
+      }
+
+      details.append(body);
+      this.container.append(details);
+    }
+  }
+
+  updateValues(config) {
+    this.config = config;
+    for (const [key, inputSet] of this.inputs) {
+      if (!(key in config)) continue;
+      for (const input of inputSet) {
+        if (input.type === "checkbox") input.checked = Boolean(config[key]);
+        else if (input.getAttribute?.("aria-pressed") !== null) {
+          input.setAttribute("aria-pressed", String(Boolean(config[key])));
+        }
+        else input.value = config[key];
+      }
+    }
+  }
+
+  createControl(control) {
+    const row = document.createElement("div");
+    row.className = "control-row";
+    const label = document.createElement("label");
+    label.textContent = control.label;
+    label.htmlFor = `control-${control.key}`;
+    row.append(label);
+
+    if (control.type === "range") {
+      row.append(this.createRange(control));
+    } else if (control.type === "boolean") {
+      row.append(this.createSwitch(control));
+    } else if (control.type === "select") {
+      row.append(this.createSelect(control));
+    } else if (control.type === "color") {
+      row.append(this.createColor(control));
+    } else if (control.type === "file") {
+      row.append(this.createFile(control));
+    }
+
+    if (control.hint) {
+      const hint = document.createElement("p");
+      hint.className = "control-hint";
+      hint.textContent = control.hint;
+      row.append(hint);
+    }
+
+    return row;
+  }
+
+  createRange(control) {
+    const wrap = document.createElement("div");
+    wrap.className = "range-control";
+    const range = document.createElement("input");
+    range.id = `control-${control.key}`;
+    range.type = "range";
+    range.min = control.min;
+    range.max = control.max;
+    range.step = control.step;
+    range.value = this.config[control.key];
+
+    const number = document.createElement("input");
+    number.type = "number";
+    number.min = control.min;
+    number.max = control.max;
+    number.step = control.step;
+    number.value = this.config[control.key];
+
+    const update = (raw) => {
+      const value = Number(raw);
+      if (!Number.isFinite(value)) return;
+      const clamped = Math.min(control.max, Math.max(control.min, value));
+      range.value = clamped;
+      number.value = clamped;
+      this.setValue(control.key, clamped);
+    };
+
+    range.addEventListener("input", () => update(range.value));
+    number.addEventListener("input", () => update(number.value));
+    this.register(control.key, range, number);
+    wrap.append(range, number);
+    return wrap;
+  }
+
+  createSwitch(control) {
+    const button = document.createElement("button");
+    button.id = `control-${control.key}`;
+    button.className = "switch-control";
+    button.type = "button";
+    button.setAttribute("aria-label", control.label);
+    button.setAttribute("aria-pressed", String(Boolean(this.config[control.key])));
+    button.addEventListener("click", () => {
+      const value = button.getAttribute("aria-pressed") !== "true";
+      button.setAttribute("aria-pressed", String(value));
+      this.setValue(control.key, value);
+    });
+    this.register(control.key, button);
+    return button;
+  }
+
+  createSelect(control) {
+    const select = document.createElement("select");
+    select.id = `control-${control.key}`;
+    for (const [value, label] of control.options) {
+      const option = document.createElement("option");
+      option.value = value;
+      option.textContent = label;
+      select.append(option);
+    }
+    select.value = this.config[control.key];
+    select.addEventListener("change", () => this.setValue(control.key, select.value));
+    this.register(control.key, select);
+    return select;
+  }
+
+  createColor(control) {
+    const wrap = document.createElement("div");
+    wrap.className = "swatch-grid";
+    const color = document.createElement("input");
+    color.id = `control-${control.key}`;
+    color.type = "color";
+    color.value = this.config[control.key];
+
+    const text = document.createElement("input");
+    text.type = "text";
+    text.value = this.config[control.key];
+    text.maxLength = 7;
+
+    const update = (value) => {
+      if (!/^#[0-9a-f]{6}$/i.test(value)) return;
+      color.value = value;
+      text.value = value;
+      this.setValue(control.key, value);
+    };
+
+    color.addEventListener("input", () => update(color.value));
+    text.addEventListener("change", () => update(text.value));
+    this.register(control.key, color, text);
+    wrap.append(color, text);
+    return wrap;
+  }
+
+  createFile(control) {
+    const label = document.createElement("label");
+    label.className = "file-button";
+    label.textContent = "选择图片";
+    const input = document.createElement("input");
+    input.id = `control-${control.key}`;
+    input.type = "file";
+    input.accept = "image/png,image/jpeg,image/webp";
+    input.addEventListener("change", () => {
+      const file = input.files?.[0];
+      this.backgroundManager.setImage(
+        file,
+        () => {
+          this.setValue("backgroundType", "image");
+          this.toast("背景图片已应用");
+        },
+        this.toast
+      );
+      input.value = "";
+    });
+    label.append(input);
+    return label;
+  }
+
+  register(key, ...inputs) {
+    this.inputs.set(key, inputs);
+  }
+
+  setValue(key, value) {
+    this.config[key] = value;
+    this.eventBus.emit("config:change", { key, value, config: this.config });
+  }
+}

package/src/ui/PerformancePanel.js

@@ -0,0 +1,23 @@
+export class PerformancePanel {
+  constructor(element) {
+    this.element = element;
+    this.frames = 0;
+    this.elapsed = 0;
+    this.fps = 0;
+    this.lowFpsTime = 0;
+  }
+
+  update(deltaMs) {
+    this.frames += 1;
+    this.elapsed += deltaMs;
+    if (this.elapsed >= 500) {
+      this.fps = Math.round((this.frames * 1000) / this.elapsed);
+      this.element.textContent = `FPS ${this.fps}`;
+      this.lowFpsTime = this.fps < 45 ? this.lowFpsTime + this.elapsed : 0;
+      this.frames = 0;
+      this.elapsed = 0;
+      return this.lowFpsTime > 2200;
+    }
+    return false;
+  }
+}

package/src/ui/PresetManager.js

@@ -0,0 +1,128 @@
+import { builtInPresets, defaultConfig, sanitizeConfig } from "../config/defaults.js";
+
+const STORAGE_KEY = "spark-fireworks-presets";
+
+export class PresetManager {
+  constructor(select, getConfig, applyConfig, toast) {
+    this.select = select;
+    this.getConfig = getConfig;
+    this.applyConfig = applyConfig;
+    this.toast = toast;
+    this.localPresets = this.loadLocal();
+  }
+
+  renderOptions() {
+    this.select.innerHTML = "";
+    this.appendOption("", "选择预设");
+    this.appendOption("default", "默认配置");
+
+    for (const [id, preset] of Object.entries(builtInPresets)) {
+      this.appendOption(`builtin:${id}`, preset.name);
+    }
+
+    for (const [id, preset] of Object.entries(this.localPresets)) {
+      this.appendOption(`local:${id}`, `本地：${preset.name}`);
+    }
+  }
+
+  bind() {
+    this.select.addEventListener("change", () => {
+      const value = this.select.value;
+      if (!value) return;
+      if (value === "default") {
+        this.applyConfig({ ...defaultConfig }, value);
+        this.toast("已加载默认配置");
+      } else if (value.startsWith("builtin:")) {
+        const id = value.replace("builtin:", "");
+        this.applyConfig({ ...defaultConfig, ...builtInPresets[id].config }, value);
+        this.toast(`已加载${builtInPresets[id].name}`);
+      } else if (value.startsWith("local:")) {
+        const id = value.replace("local:", "");
+        this.applyConfig({ ...defaultConfig, ...this.localPresets[id].config }, value);
+        this.toast(`已加载${this.localPresets[id].name}`);
+      }
+      this.select.value = "";
+    });
+  }
+
+  saveCurrent() {
+    const name = window.prompt("预设名称", `我的烟花 ${new Date().toLocaleTimeString("zh-CN", { hour12: false })}`);
+    if (!name) return;
+    const id = crypto.randomUUID?.() ?? String(Date.now());
+    this.localPresets[id] = {
+      name: name.slice(0, 28),
+      config: sanitizeConfig(this.getConfig())
+    };
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(this.localPresets));
+    this.renderOptions();
+    this.toast("预设已保存到本地");
+  }
+
+  exportConfig() {
+    const blob = new Blob([JSON.stringify(sanitizeConfig(this.getConfig()), null, 2)], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = `spark-fireworks-${Date.now()}.json`;
+    link.click();
+    URL.revokeObjectURL(url);
+    this.toast("配置已导出");
+  }
+
+  async importConfig(file) {
+    if (!file) return;
+    try {
+      const text = await file.text();
+      const parsed = JSON.parse(text);
+      this.applyConfig(sanitizeConfig(parsed));
+      this.toast("配置已导入");
+    } catch {
+      this.toast("导入失败：JSON 格式无效");
+    }
+  }
+
+  shareConfig() {
+    const json = JSON.stringify(sanitizeConfig(this.getConfig()));
+    const encoded = btoa(unescape(encodeURIComponent(json)));
+    const url = `${location.origin}${location.pathname}#config=${encoded}`;
+    navigator.clipboard
+      ?.writeText(url)
+      .then(() => this.toast("分享链接已复制"))
+      .catch(() => {
+        location.hash = `config=${encoded}`;
+        this.toast("分享链接已写入地址栏");
+      });
+  }
+
+  loadFromHash() {
+    const match = location.hash.match(/config=([^&]+)/);
+    if (!match) return false;
+    try {
+      const json = decodeURIComponent(escape(atob(match[1])));
+      this.applyConfig(sanitizeConfig(JSON.parse(json)));
+      this.toast("已从分享链接加载配置");
+      return true;
+    } catch {
+      this.toast("分享链接配置无效");
+      return false;
+    }
+  }
+
+  appendOption(value, label) {
+    const option = document.createElement("option");
+    option.value = value;
+    option.textContent = label;
+    this.select.append(option);
+  }
+
+  loadLocal() {
+    try {
+      const parsed = JSON.parse(localStorage.getItem(STORAGE_KEY) || "{}");
+      return parsed && typeof parsed === "object" ? parsed : {};
+    } catch {
+      return {};
+    }
+  }
+}

package/src/utils/color.js

@@ -0,0 +1,54 @@
+import { clamp, lerp, randomInt } from "./math.js";
+
+export function hexToRgb(hex) {
+  const normalized = hex.replace("#", "");
+  const int = Number.parseInt(normalized, 16);
+  return {
+    r: (int >> 16) & 255,
+    g: (int >> 8) & 255,
+    b: int & 255
+  };
+}
+
+export function rgbToCss({ r, g, b }, alpha = 1) {
+  return `rgba(${Math.round(r)}, ${Math.round(g)}, ${Math.round(b)}, ${clamp(alpha, 0, 1)})`;
+}
+
+export function mixColor(start, end, t) {
+  const a = typeof start === "string" ? hexToRgb(start) : start;
+  const b = typeof end === "string" ? hexToRgb(end) : end;
+  return {
+    r: lerp(a.r, b.r, t),
+    g: lerp(a.g, b.g, t),
+    b: lerp(a.b, b.b, t)
+  };
+}
+
+export function randomVividColor() {
+  const hue = randomInt(0, 360);
+  return hslToHex(hue, randomInt(72, 96), randomInt(54, 68));
+}
+
+export function hslToHex(h, s, l) {
+  s /= 100;
+  l /= 100;
+  const c = (1 - Math.abs(2 * l - 1)) * s;
+  const x = c * (1 - Math.abs(((h / 60) % 2) - 1));
+  const m = l - c / 2;
+  let r = 0;
+  let g = 0;
+  let b = 0;
+
+  if (h < 60) [r, g, b] = [c, x, 0];
+  else if (h < 120) [r, g, b] = [x, c, 0];
+  else if (h < 180) [r, g, b] = [0, c, x];
+  else if (h < 240) [r, g, b] = [0, x, c];
+  else if (h < 300) [r, g, b] = [x, 0, c];
+  else [r, g, b] = [c, 0, x];
+
+  return `#${toHex((r + m) * 255)}${toHex((g + m) * 255)}${toHex((b + m) * 255)}`;
+}
+
+function toHex(value) {
+  return Math.round(value).toString(16).padStart(2, "0");
+}

package/src/utils/eventBus.js

@@ -0,0 +1,21 @@
+export class EventBus {
+  listeners = new Map();
+
+  on(event, callback) {
+    if (!this.listeners.has(event)) {
+      this.listeners.set(event, new Set());
+    }
+    this.listeners.get(event).add(callback);
+    return () => this.off(event, callback);
+  }
+
+  off(event, callback) {
+    this.listeners.get(event)?.delete(callback);
+  }
+
+  emit(event, payload) {
+    this.listeners.get(event)?.forEach((callback) => callback(payload));
+  }
+}
+
+export const eventBus = new EventBus();

package/src/utils/math.js

@@ -0,0 +1,29 @@
+export function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function lerp(a, b, t) {
+  return a + (b - a) * t;
+}
+
+export function random(min, max) {
+  return Math.random() * (max - min) + min;
+}
+
+export function randomInt(min, max) {
+  return Math.floor(random(min, max + 1));
+}
+
+export function pick(array) {
+  return array[Math.floor(Math.random() * array.length)];
+}
+
+export function normalize(x, y) {
+  const length = Math.hypot(x, y) || 1;
+  return { x: x / length, y: y / length };
+}
+
+export function mapRange(value, inMin, inMax, outMin, outMax) {
+  const t = (value - inMin) / (inMax - inMin || 1);
+  return lerp(outMin, outMax, t);
+}

package/vite.config.js

@@ -0,0 +1,17 @@
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    rollupOptions: {
+      input: {
+        index: resolve(__dirname, "index.html"),
+        notFound: resolve(__dirname, "404.html"),
+        demo: resolve(__dirname, "demo.html"),
+        guide: resolve(__dirname, "guide.html"),
+        advancedGuide: resolve(__dirname, "advanced-guide.html"),
+        apiDownload: resolve(__dirname, "api-download.html")
+      }
+    }
+  }
+});

package/vite.lib.config.js

@@ -0,0 +1,19 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  build: {
+    lib: {
+      entry: "src/app.js",
+      name: "SparkFireworks",
+      fileName: "spark-fireworks",
+      formats: ["es", "umd"]
+    },
+    outDir: "dist-lib",
+    emptyOutDir: true,
+    rollupOptions: {
+      output: {
+        exports: "named"
+      }
+    }
+  }
+});