mirror of
https://github.com/caojiezi2003/live2d-widget.git
synced 2024-11-22 15:19:44 +00:00
Make tools optional
This commit is contained in:
Mimi
parent
cfafafaa51
commit
d3a2a8ba48
@ -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
106
waifu-tips.js
@ -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 => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user