caojiezi2003/live2d-widget
1
0
Fork 0
mirror of https://github.com/caojiezi2003/live2d-widget.git synced 2024-09-20 05:12:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Make tools optional

Browse Source
This commit is contained in:
Mimi 2022-10-20 11:40:13 +08:00
parent cfafafaa51
commit d3a2a8ba48
2 changed files with 68 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
autoload.js
View File

@ -34,7 +34,8 @@ if (screen.width >= 768) {
initWidget({ initWidget({
waifuPath: live2d_path + "waifu-tips.json", waifuPath: live2d_path + "waifu-tips.json",
//apiPath: "https://live2d.fghrsh.net/api/", //apiPath: "https://live2d.fghrsh.net/api/",
cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/" cdnPath: "https://fastly.jsdelivr.net/gh/fghrsh/live2d_api/",
tools: ["hitokoto", "asteroids", "switch-model", "switch-texture", "photo", "info", "quit"]
}); });
}); });
} }

106
waifu-tips.js
View File

@ -4,7 +4,7 @@
*/ */
function loadWidget(config) { function loadWidget(config) {
let { waifuPath, apiPath, cdnPath } = config; let { apiPath, cdnPath } = config;
let useCDN = false, modelList; let useCDN = false, modelList;
if (typeof cdnPath === "string") { if (typeof cdnPath === "string") {
useCDN = true; useCDN = true;
@ -20,15 +20,7 @@ function loadWidget(config) {
document.body.insertAdjacentHTML("beforeend", `<div id="waifu"> document.body.insertAdjacentHTML("beforeend", `<div id="waifu">
<div id="waifu-tips"></div> <div id="waifu-tips"></div>
<canvas id="live2d" width="800" height="800"></canvas> <canvas id="live2d" width="800" height="800"></canvas>
<div id="waifu-tool"> <div id="waifu-tool"></div>
<span class="fa fa-lg fa-comment"></span>
<span class="fa fa-lg fa-paper-plane"></span>
<span class="fa fa-lg fa-user-circle"></span>
<span class="fa fa-lg fa-street-view"></span>
<span class="fa fa-lg fa-camera-retro"></span>
<span class="fa fa-lg fa-info-circle"></span>
<span class="fa fa-lg fa-times"></span>
</div>
</div>`); </div>`);
// https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element // https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element
setTimeout(() => { setTimeout(() => {
@ -58,36 +50,70 @@ function loadWidget(config) {
}, 1000); }, 1000);
(function registerEventListener() { (function registerEventListener() {
document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto); const tools = {
document.querySelector("#waifu-tool .fa-paper-plane").addEventListener("click", () => { "hitokoto": {
if (window.Asteroids) { icon: "fa-comment",
if (!window.ASTEROIDSPLAYERS) window.ASTEROIDSPLAYERS = []; callback: showHitokoto
window.ASTEROIDSPLAYERS.push(new Asteroids()); },
} else { "asteroids": {
const script = document.createElement("script"); icon: "fa-paper-plane",
script.src = "https://fastly.jsdelivr.net/gh/stevenjoezhang/asteroids/asteroids.js"; callback: () => {
document.head.appendChild(script); 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-times",
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);
}
} }
}); }
document.querySelector("#waifu-tool .fa-user-circle").addEventListener("click", loadOtherModel); if (!Array.isArray(config.tools)) {
document.querySelector("#waifu-tool .fa-street-view").addEventListener("click", loadRandModel); config.tools = Object.keys(tools);
document.querySelector("#waifu-tool .fa-camera-retro").addEventListener("click", () => { }
showMessage("照好了嘛，是不是很可爱呢？", 6000, 9); for (let tool of config.tools) {
Live2D.captureName = "photo.png"; if (tools[tool]) {
Live2D.captureFrame = true; const { icon, callback } = tools[tool];
}); document.getElementById("waifu-tool").insertAdjacentHTML("beforeend", `<span id="waifu-tool-${tool}" class="fa fa-lg ${icon}"></span>`);
document.querySelector("#waifu-tool .fa-info-circle").addEventListener("click", () => { document.getElementById(`waifu-tool-${tool}`).addEventListener("click", callback);
open("https://github.com/stevenjoezhang/live2d-widget"); }
}); }
document.querySelector("#waifu-tool .fa-times").addEventListener("click", () => {
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);
});
const devtools = () => {}; const devtools = () => {};
console.log("%c", devtools); console.log("%c", devtools);
devtools.toString = () => { devtools.toString = () => {
@ -166,7 +192,7 @@ function loadWidget(config) {
modelTexturesId = 53; // 材质 ID modelTexturesId = 53; // 材质 ID
} }
loadModel(modelId, modelTexturesId); loadModel(modelId, modelTexturesId);
fetch(waifuPath) fetch(config.waifuPath)
.then(response => response.json()) .then(response => response.json())
.then(result => { .then(result => {
window.addEventListener("mouseover", event => { window.addEventListener("mouseover", event => {