amass/live2d-widget
1
0
Fork 0
mirror of https://github.com/stevenjoezhang/live2d-widget.git synced 2024-11-21 20:24:19 +08: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({
waifuPath: live2d_path + "waifu-tips.json",
//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) {
let { waifuPath, apiPath, cdnPath } = config;
let { apiPath, cdnPath } = config;
let useCDN = false, modelList;
if (typeof cdnPath === "string") {
useCDN = true;
@ -20,15 +20,7 @@ function loadWidget(config) {
document.body.insertAdjacentHTML("beforeend", `<div id="waifu">
<div id="waifu-tips"></div>
<canvas id="live2d" width="800" height="800"></canvas>
<div id="waifu-tool">
<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 id="waifu-tool"></div>
</div>`);
// https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element
setTimeout(() => {
@ -58,36 +50,70 @@ function loadWidget(config) {
}, 1000);
(function registerEventListener() {
document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto);
document.querySelector("#waifu-tool .fa-paper-plane").addEventListener("click", () => {
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);
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-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);
document.querySelector("#waifu-tool .fa-street-view").addEventListener("click", loadRandModel);
document.querySelector("#waifu-tool .fa-camera-retro").addEventListener("click", () => {
showMessage("照好了嘛，是不是很可爱呢？", 6000, 9);
Live2D.captureName = "photo.png";
Live2D.captureFrame = true;
});
document.querySelector("#waifu-tool .fa-info-circle").addEventListener("click", () => {
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);
});
}
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}" class="fa fa-lg ${icon}"></span>`);
document.getElementById(`waifu-tool-${tool}`).addEventListener("click", callback);
}
}
const devtools = () => {};
console.log("%c", devtools);
devtools.toString = () => {
@ -166,7 +192,7 @@ function loadWidget(config) {
modelTexturesId = 53; // 材质 ID
}
loadModel(modelId, modelTexturesId);
fetch(waifuPath)
fetch(config.waifuPath)
.then(response => response.json())
.then(result => {
window.addEventListener("mouseover", event => {