Inline SVG icon

2024-11-21 20:24:19 +08:00 · 2022-10-20 17:28:52 +08:00 · 2022-10-20 17:28:52 +08:00 · abb832a9ea
commit abb832a9ea
parent f7177a24b7
5 changed files with 406 additions and 7 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,2 @@
+package-lock.json
+node_modules/
--- a/package.json
+++ b/package.json
@ -0,0 +1,30 @@
+{
+  "name": "live2d-widget",
+  "version": "0.9.0",
+  "description": "Live2D widget for web pages",
+  "main": "autoload.js",
+  "type": "module",
+  "scripts": {
+    "build": "rollup -c rollup.config.js -f iife | terser > waifu-tips.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stevenjoezhang/live2d-widget.git"
+  },
+  "keywords": [
+    "Live2d"
+  ],
+  "author": "stevenjoezhang <stevenjoezhang@gmail.com>",
+  "license": "GPL-3.0-or-later",
+  "bugs": {
+    "url": "https://github.com/stevenjoezhang/live2d-widget/issues"
+  },
+  "homepage": "https://github.com/stevenjoezhang/live2d-widget#readme",
+  "devDependencies": {
+    "@fortawesome/fontawesome-free": "^6.2.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/pluginutils": "^5.0.1",
+    "rollup": "^3.2.3",
+    "terser": "^5.15.1"
+  }
+}
--- a/rollup.config.js
+++ b/rollup.config.js
@ -0,0 +1,30 @@
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import { createFilter } from "@rollup/pluginutils";
+
+function string(opts = {}) {
+    if (!opts.include) {
+        throw Error("include option should be specified");
+    }
+
+    const filter = createFilter(opts.include, opts.exclude);
+
+    return {
+        name: "string",
+
+        transform(code, id) {
+            if (filter(id)) {
+                return {
+                    code: `export default ${JSON.stringify(code)};`,
+                    map: { mappings: "" }
+                };
+            }
+        }
+    };
+}
+
+export default {
+    input: 'src/waifu-tips.js',
+    plugins: [nodeResolve(), string({
+        include: "**/*.svg",
+    })]
+};
--- a/src/waifu-tips.js
+++ b/src/waifu-tips.js
@ -0,0 +1,333 @@
+/*
+ * Live2D Widget
+ * https://github.com/stevenjoezhang/live2d-widget
+ */
+
+import fa_comment from "@fortawesome/fontawesome-free/svgs/solid/comment.svg";
+import fa_paper_plane from "@fortawesome/fontawesome-free/svgs/solid/paper-plane.svg";
+import fa_user_circle from "@fortawesome/fontawesome-free/svgs/solid/circle-user.svg";
+import fa_street_view from "@fortawesome/fontawesome-free/svgs/solid/street-view.svg";
+import fa_camera_retro from "@fortawesome/fontawesome-free/svgs/solid/camera-retro.svg";
+import fa_info_circle from "@fortawesome/fontawesome-free/svgs/solid/circle-info.svg";
+import fa_xmark from "@fortawesome/fontawesome-free/svgs/solid/xmark.svg";
+
+function loadWidget(config) {
+	let { apiPath, cdnPath } = config;
+	let useCDN = false, modelList;
+	if (typeof cdnPath === "string") {
+		useCDN = true;
+		if (!cdnPath.endsWith("/")) cdnPath += "/";
+	} else if (typeof apiPath === "string") {
+		if (!apiPath.endsWith("/")) apiPath += "/";
+	} else {
+		console.error("Invalid initWidget argument!");
+		return;
+	}
+	localStorage.removeItem("waifu-display");
+	sessionStorage.removeItem("waifu-text");
+	document.body.insertAdjacentHTML("beforeend", `<div id="waifu">
+			<div id="waifu-tips"></div>
+			<canvas id="live2d" width="800" height="800"></canvas>
+			<div id="waifu-tool"></div>
+		</div>`);
+	// https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element
+	setTimeout(() => {
+		document.getElementById("waifu").style.bottom = 0;
+	}, 0);
+
+	function randomSelection(obj) {
+		return Array.isArray(obj) ? obj[Math.floor(Math.random() * obj.length)] : obj;
+	}
+	// 检测用户活动状态，并在空闲时显示消息
+	let userAction = false,
+		userActionTimer,
+		messageTimer,
+		messageArray = ["好久不见，日子过得好快呢……", "大坏蛋！你都多久没理人家了呀，嘤嘤嘤～", "嗨～快来逗我玩吧！", "拿小拳拳锤你胸口！", "记得把小家加入 Adblock 白名单哦！"];
+	window.addEventListener("mousemove", () => userAction = true);
+	window.addEventListener("keydown", () => userAction = true);
+	setInterval(() => {
+		if (userAction) {
+			userAction = false;
+			clearInterval(userActionTimer);
+			userActionTimer = null;
+		} else if (!userActionTimer) {
+			userActionTimer = setInterval(() => {
+				showMessage(randomSelection(messageArray), 6000, 9);
+			}, 20000);
+		}
+	}, 1000);
+
+	(function registerEventListener() {
+		const tools = {
+			"hitokoto": {
+				icon: fa_comment,
+				callback: showHitokoto
+			},
+			"asteroids": {
+				icon: fa_paper_plane,
+				callback: () => {
+					if (window.Asteroids) {
+						if (!window.ASTEROIDSPLAYERS) window.ASTEROIDSPLAYERS = [];
+						window.ASTEROIDSPLAYERS.push(new Asteroids());
+					} else {
+						const script = document.createElement("script");
+						script.src = "https://fastly.jsdelivr.net/gh/stevenjoezhang/asteroids/asteroids.js";
+						document.head.appendChild(script);
+					}
+				}
+			},
+			"switch-model": {
+				icon: fa_user_circle,
+				callback: loadOtherModel
+			},
+			"switch-texture": {
+				icon: fa_street_view,
+				callback: loadRandModel
+			},
+			"photo": {
+				icon: fa_camera_retro,
+				callback: () => {
+					showMessage("照好了嘛，是不是很可爱呢？", 6000, 9);
+					Live2D.captureName = "photo.png";
+					Live2D.captureFrame = true;
+				}
+			},
+			"info": {
+				icon: fa_info_circle,
+				callback: () => {
+					open("https://github.com/stevenjoezhang/live2d-widget");
+				}
+			},
+			"quit": {
+				icon: fa_xmark,
+				callback: () => {
+					localStorage.setItem("waifu-display", Date.now());
+					showMessage("愿你有一天能与重要的人重逢。", 2000, 11);
+					document.getElementById("waifu").style.bottom = "-500px";
+					setTimeout(() => {
+						document.getElementById("waifu").style.display = "none";
+						document.getElementById("waifu-toggle").classList.add("waifu-toggle-active");
+					}, 3000);
+				}
+			}
+		};
+		if (!Array.isArray(config.tools)) {
+			config.tools = Object.keys(tools);
+		}
+		for (let tool of config.tools) {
+			if (tools[tool]) {
+				const { icon, callback } = tools[tool];
+				document.getElementById("waifu-tool").insertAdjacentHTML("beforeend", `<span id="waifu-tool-${tool}">${icon}</span>`);
+				document.getElementById(`waifu-tool-${tool}`).addEventListener("click", callback);
+			}
+		}
+
+		const devtools = () => {};
+		console.log("%c", devtools);
+		devtools.toString = () => {
+			showMessage("哈哈，你打开了控制台，是想要看看我的小秘密吗？", 6000, 9);
+		};
+		window.addEventListener("copy", () => {
+			showMessage("你都复制了些什么呀，转载要记得加上出处哦！", 6000, 9);
+		});
+		window.addEventListener("visibilitychange", () => {
+			if (!document.hidden) showMessage("哇，你终于回来了～", 6000, 9);
+		});
+	})();
+
+	function welcomeMessage() {
+		const message = `欢迎阅读<span>「${document.title.split(" - ")[0]}」</span>`;
+		let text;
+		if (location.pathname === "/") { // 如果是主页
+			const now = new Date().getHours();
+			if (now > 5 && now <= 7) text = "早上好！一日之计在于晨，美好的一天就要开始了。";
+			else if (now > 7 && now <= 11) text = "上午好！工作顺利嘛，不要久坐，多起来走动走动哦！";
+			else if (now > 11 && now <= 13) text = "中午了，工作了一个上午，现在是午餐时间！";
+			else if (now > 13 && now <= 17) text = "午后很容易犯困呢，今天的运动目标完成了吗？";
+			else if (now > 17 && now <= 19) text = "傍晚了！窗外夕阳的景色很美丽呢，最美不过夕阳红～";
+			else if (now > 19 && now <= 21) text = "晚上好，今天过得怎么样？";
+			else if (now > 21 && now <= 23) text = ["已经这么晚了呀，早点休息吧，晚安～", "深夜时要爱护眼睛呀！"];
+			else text = "你是夜猫子呀？这么晚还不睡觉，明天起的来嘛？";
+			return text;
+		} else if (document.referrer !== "") {
+			const referrer = new URL(document.referrer),
+				domain = referrer.hostname.split(".")[1];
+			const domains = {
+				"baidu": "百度",
+				"so": "360搜索",
+				"google": "谷歌搜索"
+			};
+			if (location.hostname === referrer.hostname) return message;
+
+			if (domain in domains) text = domains[domain];
+			else text = referrer.hostname;
+			return `Hello！来自 <span>${text}</span> 的朋友<br>${message}`;;
+		} else {
+			return message;
+		}
+	};
+	showMessage(welcomeMessage(), 7000, 8);
+
+	function showHitokoto() {
+		// 增加 hitokoto.cn 的 API
+		fetch("https://v1.hitokoto.cn")
+			.then(response => response.json())
+			.then(result => {
+				const text = `这句一言来自 <span>「${result.from}」</span>，是 <span>${result.creator}</span> 在 hitokoto.cn 投稿的。`;
+				showMessage(result.hitokoto, 6000, 9);
+				setTimeout(() => {
+					showMessage(text, 4000, 9);
+				}, 6000);
+			});
+	}
+
+	function showMessage(text, timeout, priority) {
+		if (!text || (sessionStorage.getItem("waifu-text") && sessionStorage.getItem("waifu-text") > priority)) return;
+		if (messageTimer) {
+			clearTimeout(messageTimer);
+			messageTimer = null;
+		}
+		text = randomSelection(text);
+		sessionStorage.setItem("waifu-text", priority);
+		const tips = document.getElementById("waifu-tips");
+		tips.innerHTML = text;
+		tips.classList.add("waifu-tips-active");
+		messageTimer = setTimeout(() => {
+			sessionStorage.removeItem("waifu-text");
+			tips.classList.remove("waifu-tips-active");
+		}, timeout);
+	}
+
+	(function initModel() {
+		let modelId = localStorage.getItem("modelId"),
+			modelTexturesId = localStorage.getItem("modelTexturesId");
+		if (modelId === null) {
+			// 首次访问加载 指定模型 的 指定材质
+			modelId = 1; // 模型 ID
+			modelTexturesId = 53; // 材质 ID
+		}
+		loadModel(modelId, modelTexturesId);
+		fetch(config.waifuPath)
+			.then(response => response.json())
+			.then(result => {
+				window.addEventListener("mouseover", event => {
+					for (let { selector, text } of result.mouseover) {
+						if (!event.target.matches(selector)) continue;
+						text = randomSelection(text);
+						text = text.replace("{text}", event.target.innerText);
+						showMessage(text, 4000, 8);
+						return;
+					}
+				});
+				window.addEventListener("click", event => {
+					for (let { selector, text } of result.click) {
+						if (!event.target.matches(selector)) continue;
+						text = randomSelection(text);
+						text = text.replace("{text}", event.target.innerText);
+						showMessage(text, 4000, 8);
+						return;
+					}
+				});
+				result.seasons.forEach(({ date, text }) => {
+					const now = new Date(),
+						after = date.split("-")[0],
+						before = date.split("-")[1] || after;
+					if ((after.split("/")[0] <= now.getMonth() + 1 && now.getMonth() + 1 <= before.split("/")[0]) && (after.split("/")[1] <= now.getDate() && now.getDate() <= before.split("/")[1])) {
+						text = randomSelection(text);
+						text = text.replace("{year}", now.getFullYear());
+						//showMessage(text, 7000, true);
+						messageArray.push(text);
+					}
+				});
+			});
+	})();
+
+	async function loadModelList() {
+		const response = await fetch(`${cdnPath}model_list.json`);
+		modelList = await response.json();
+	}
+
+	async function loadModel(modelId, modelTexturesId, message) {
+		localStorage.setItem("modelId", modelId);
+		localStorage.setItem("modelTexturesId", modelTexturesId);
+		showMessage(message, 4000, 10);
+		if (useCDN) {
+			if (!modelList) await loadModelList();
+			const target = randomSelection(modelList.models[modelId]);
+			loadlive2d("live2d", `${cdnPath}model/${target}/index.json`);
+		} else {
+			loadlive2d("live2d", `${apiPath}get/?id=${modelId}-${modelTexturesId}`);
+			console.log(`Live2D 模型 ${modelId}-${modelTexturesId} 加载完成`);
+		}
+	}
+
+	async function loadRandModel() {
+		const modelId = localStorage.getItem("modelId"),
+			modelTexturesId = localStorage.getItem("modelTexturesId");
+		if (useCDN) {
+			if (!modelList) await loadModelList();
+			const target = randomSelection(modelList.models[modelId]);
+			loadlive2d("live2d", `${cdnPath}model/${target}/index.json`);
+			showMessage("我的新衣服好看嘛？", 4000, 10);
+		} else {
+			// 可选 "rand"(随机), "switch"(顺序)
+			fetch(`${apiPath}rand_textures/?id=${modelId}-${modelTexturesId}`)
+				.then(response => response.json())
+				.then(result => {
+					if (result.textures.id === 1 && (modelTexturesId === 1 || modelTexturesId === 0)) showMessage("我还没有其他衣服呢！", 4000, 10);
+					else loadModel(modelId, result.textures.id, "我的新衣服好看嘛？");
+				});
+		}
+	}
+
+	async function loadOtherModel() {
+		let modelId = localStorage.getItem("modelId");
+		if (useCDN) {
+			if (!modelList) await loadModelList();
+			const index = (++modelId >= modelList.models.length) ? 0 : modelId;
+			loadModel(index, 0, modelList.messages[index]);
+		} else {
+			fetch(`${apiPath}switch/?id=${modelId}`)
+				.then(response => response.json())
+				.then(result => {
+					loadModel(result.model.id, 0, result.model.message);
+				});
+		}
+	}
+}
+
+function initWidget(config, apiPath) {
+	if (typeof config === "string") {
+		config = {
+			waifuPath: config,
+			apiPath
+		};
+	}
+	document.body.insertAdjacentHTML("beforeend", `<div id="waifu-toggle">
+			<span>看板娘</span>
+		</div>`);
+	const toggle = document.getElementById("waifu-toggle");
+	toggle.addEventListener("click", () => {
+		toggle.classList.remove("waifu-toggle-active");
+		if (toggle.getAttribute("first-time")) {
+			loadWidget(config);
+			toggle.removeAttribute("first-time");
+		} else {
+			localStorage.removeItem("waifu-display");
+			document.getElementById("waifu").style.display = "";
+			setTimeout(() => {
+				document.getElementById("waifu").style.bottom = 0;
+			}, 0);
+		}
+	});
+	if (localStorage.getItem("waifu-display") && Date.now() - localStorage.getItem("waifu-display") <= 86400000) {
+		toggle.setAttribute("first-time", true);
+		setTimeout(() => {
+			toggle.classList.add("waifu-toggle-active");
+		}, 0);
+	} else {
+		loadWidget(config);
+	}
+}
+
+window.initWidget = initWidget;
--- a/waifu.css
+++ b/waifu.css
@ -62,7 +62,7 @@
 	transition: opacity .2s;
 }

-#waifu-tips .fa-lg {
+#waifu-tips svg {
 	color: #0099cc;
 }

@ -90,17 +90,21 @@
 	opacity: 1;
 }

-#waifu-tool .fa-lg {
-	color: #7b8c9d;
-	cursor: pointer;
+#waifu-tool span {
 	display: block;
 	height: 30px;
 	text-align: center;
-	transition: color .3s;
 }

-#waifu-tool .fa-lg:hover {
-	color: #0684bd; /* #34495e */
+#waifu-tool svg {
+	fill: #7b8c9d;
+	cursor: pointer;
+	height: 25px;
+	transition: fill .3s;
+}
+
+#waifu-tool svg:hover {
+	fill: #0684bd; /* #34495e */
 }

@keyframes shake {