live2d-widget/waifu-tips.js

288 lines
11 KiB
JavaScript
Raw Normal View History

2019-11-12 09:27:00 +00:00
/*
2019-12-29 15:04:20 +00:00
* Live2D Widget
* https://github.com/stevenjoezhang/live2d-widget
2019-11-12 09:27:00 +00:00
*/
2020-02-09 13:01:56 +00:00
function loadWidget(config) {
2020-02-09 13:55:19 +00:00
let { waifuPath, apiPath, cdnPath } = config;
2020-02-10 05:52:03 +00:00
let useCDN = false, modelList;
2020-02-09 13:55:19 +00:00
if (typeof cdnPath === "string") {
useCDN = true;
if (!cdnPath.endsWith("/")) cdnPath += "/";
}
if (!apiPath.endsWith("/")) apiPath += "/";
2019-11-12 09:27:00 +00:00
localStorage.removeItem("waifu-display");
sessionStorage.removeItem("waifu-text");
2019-12-29 06:59:20 +00:00
document.body.insertAdjacentHTML("beforeend", `<div id="waifu">
2019-11-12 09:27:00 +00:00
<div id="waifu-tips"></div>
2020-04-08 09:41:28 +00:00
<canvas id="live2d" width="800" height="800"></canvas>
2019-11-12 09:27:00 +00:00
<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>`);
2019-12-29 16:20:41 +00:00
// https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element
setTimeout(() => {
document.getElementById("waifu").style.bottom = 0;
}, 0);
2019-11-12 09:27:00 +00:00
2020-02-28 14:02:35 +00:00
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);
2020-02-09 13:55:19 +00:00
(function registerEventListener() {
2019-12-03 12:18:26 +00:00
document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto);
document.querySelector("#waifu-tool .fa-paper-plane").addEventListener("click", () => {
2019-11-12 09:27:00 +00:00
if (window.Asteroids) {
if (!window.ASTEROIDSPLAYERS) window.ASTEROIDSPLAYERS = [];
window.ASTEROIDSPLAYERS.push(new Asteroids());
} else {
2020-02-28 14:02:35 +00:00
let script = document.createElement("script");
2019-12-22 02:15:16 +00:00
script.src = "https://cdn.jsdelivr.net/gh/GalaxyMimi/CDN/asteroids.js";
document.head.appendChild(script);
2019-11-12 09:27:00 +00:00
}
});
2019-12-03 12:18:26 +00:00
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", () => {
2019-11-12 09:27:00 +00:00
showMessage("照好了嘛,是不是很可爱呢?", 6000, 9);
Live2D.captureName = "photo.png";
Live2D.captureFrame = true;
});
2019-12-03 12:18:26 +00:00
document.querySelector("#waifu-tool .fa-info-circle").addEventListener("click", () => {
2019-11-12 09:27:00 +00:00
open("https://github.com/stevenjoezhang/live2d-widget");
});
2019-12-03 12:18:26 +00:00
document.querySelector("#waifu-tool .fa-times").addEventListener("click", () => {
2019-11-30 17:34:53 +00:00
localStorage.setItem("waifu-display", Date.now());
2019-11-12 09:27:00 +00:00
showMessage("愿你有一天能与重要的人重逢。", 2000, 11);
2019-12-29 16:20:41 +00:00
document.getElementById("waifu").style.bottom = "-500px";
2019-12-29 11:40:35 +00:00
setTimeout(() => {
2019-12-29 16:20:41 +00:00
document.getElementById("waifu").style.display = "none";
2019-12-29 12:39:45 +00:00
document.getElementById("waifu-toggle").classList.add("waifu-toggle-active");
2019-12-29 11:40:35 +00:00
}, 3000);
2019-11-12 09:27:00 +00:00
});
2020-02-28 14:02:35 +00:00
let devtools = () => {};
console.log("%c", devtools);
devtools.toString = () => {
2019-11-12 09:27:00 +00:00
showMessage("哈哈,你打开了控制台,是想要看看我的小秘密吗?", 6000, 9);
};
2019-12-03 12:18:26 +00:00
window.addEventListener("copy", () => {
2019-11-12 09:27:00 +00:00
showMessage("你都复制了些什么呀,转载要记得加上出处哦!", 6000, 9);
});
2019-12-03 12:18:26 +00:00
window.addEventListener("visibilitychange", () => {
2019-11-12 09:27:00 +00:00
if (!document.hidden) showMessage("哇,你终于回来了~", 6000, 9);
});
2020-02-09 13:55:19 +00:00
})();
2019-11-12 09:27:00 +00:00
2020-02-09 13:55:19 +00:00
(function welcomeMessage() {
2020-02-28 14:02:35 +00:00
let text;
2019-12-29 07:13:38 +00:00
if (location.pathname === "/") { // 如果是主页
2020-02-28 14:02:35 +00:00
let now = new Date().getHours();
2019-11-12 09:27:00 +00:00
if (now > 5 && now <= 7) text = "早上好!一日之计在于晨,美好的一天就要开始了。";
else if (now > 7 && now <= 11) text = "上午好!工作顺利嘛,不要久坐,多起来走动走动哦!";
2019-12-29 06:59:20 +00:00
else if (now > 11 && now <= 13) text = "中午了,工作了一个上午,现在是午餐时间!";
else if (now > 13 && now <= 17) text = "午后很容易犯困呢,今天的运动目标完成了吗?";
2019-11-12 09:27:00 +00:00
else if (now > 17 && now <= 19) text = "傍晚了!窗外夕阳的景色很美丽呢,最美不过夕阳红~";
else if (now > 19 && now <= 21) text = "晚上好,今天过得怎么样?";
else if (now > 21 && now <= 23) text = ["已经这么晚了呀,早点休息吧,晚安~", "深夜时要爱护眼睛呀!"];
else text = "你是夜猫子呀?这么晚还不睡觉,明天起的来嘛?";
} else if (document.referrer !== "") {
2020-02-28 14:02:35 +00:00
let referrer = new URL(document.referrer),
2019-12-29 06:59:20 +00:00
domain = referrer.hostname.split(".")[1];
2020-02-10 14:19:28 +00:00
if (location.hostname === referrer.hostname) text = `欢迎阅读<span>「${document.title.split(" - ")[0]}」</span>`;
else if (domain === "baidu") text = `Hello来自 百度搜索 的朋友<br>你是搜索 <span>${referrer.search.split("&wd=")[1].split("&")[0]}</span> 找到的我吗?`;
else if (domain === "so") text = `Hello来自 360搜索 的朋友<br>你是搜索 <span>${referrer.search.split("&q=")[1].split("&")[0]}</span> 找到的我吗?`;
else if (domain === "google") text = `Hello来自 谷歌搜索 的朋友<br>欢迎阅读<span>「${document.title.split(" - ")[0]}」</span>`;
2019-12-26 03:38:44 +00:00
else text = `Hello来自 <span>${referrer.hostname}</span> 的朋友`;
2019-11-12 09:27:00 +00:00
} else {
2019-12-26 03:38:44 +00:00
text = `欢迎阅读<span>「${document.title.split(" - ")[0]}」</span>`;
2019-11-12 09:27:00 +00:00
}
showMessage(text, 7000, 8);
2020-02-09 13:55:19 +00:00
})();
2019-11-12 09:27:00 +00:00
function showHitokoto() {
// 增加 hitokoto.cn 的 API
2019-12-29 15:39:46 +00:00
fetch("https://v1.hitokoto.cn")
2019-12-04 10:30:44 +00:00
.then(response => response.json())
.then(result => {
2020-02-28 14:02:35 +00:00
let text = `这句一言来自 <span>「${result.from}」</span>,是 <span>${result.creator}</span> 在 hitokoto.cn 投稿的。`;
2019-12-04 10:30:44 +00:00
showMessage(result.hitokoto, 6000, 9);
setTimeout(() => {
showMessage(text, 4000, 9);
}, 6000);
});
2019-11-12 09:27:00 +00:00
}
function showMessage(text, timeout, priority) {
2020-02-28 14:02:35 +00:00
if (!text || (sessionStorage.getItem("waifu-text") && sessionStorage.getItem("waifu-text") > priority)) return;
if (messageTimer) {
clearTimeout(messageTimer);
messageTimer = null;
2019-11-12 09:27:00 +00:00
}
2020-02-28 14:02:35 +00:00
text = randomSelection(text);
sessionStorage.setItem("waifu-text", priority);
let 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);
2019-11-12 09:27:00 +00:00
}
2020-02-09 13:55:19 +00:00
(function initModel() {
2020-02-28 14:02:35 +00:00
let modelId = localStorage.getItem("modelId"),
2019-11-12 09:27:00 +00:00
modelTexturesId = localStorage.getItem("modelTexturesId");
2020-02-10 14:19:28 +00:00
if (modelId === null) {
// 首次访问加载 指定模型 的 指定材质
2020-02-28 14:02:35 +00:00
modelId = 1; // 模型 ID
modelTexturesId = 53; // 材质 ID
2019-11-12 09:27:00 +00:00
}
loadModel(modelId, modelTexturesId);
2019-12-04 10:30:44 +00:00
fetch(waifuPath)
.then(response => response.json())
.then(result => {
2020-04-10 05:25:11 +00:00
window.addEventListener("mouseover", event => {
for (let tips of result.mouseover) {
if (!event.target.matches(tips.selector)) continue;
2020-02-28 14:02:35 +00:00
let text = randomSelection(tips.text);
2019-12-04 15:56:02 +00:00
text = text.replace("{text}", event.target.innerText);
2019-12-04 10:30:44 +00:00
showMessage(text, 4000, 8);
2020-04-10 05:25:11 +00:00
return;
}
2019-11-12 09:27:00 +00:00
});
2020-04-10 05:25:11 +00:00
window.addEventListener("click", event => {
for (let tips of result.click) {
if (!event.target.matches(tips.selector)) continue;
2020-02-28 14:02:35 +00:00
let text = randomSelection(tips.text);
2019-12-04 15:56:02 +00:00
text = text.replace("{text}", event.target.innerText);
2019-12-04 10:30:44 +00:00
showMessage(text, 4000, 8);
2020-04-10 05:25:11 +00:00
return;
}
2019-12-04 10:30:44 +00:00
});
result.seasons.forEach(tips => {
2020-02-28 14:02:35 +00:00
let now = new Date(),
2019-12-04 10:30:44 +00:00
after = tips.date.split("-")[0],
before = tips.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])) {
2020-02-28 14:02:35 +00:00
let text = randomSelection(tips.text);
2019-12-04 10:30:44 +00:00
text = text.replace("{year}", now.getFullYear());
//showMessage(text, 7000, true);
messageArray.push(text);
}
2019-11-12 09:27:00 +00:00
});
});
2020-02-09 13:55:19 +00:00
})();
2019-11-12 09:27:00 +00:00
2020-02-10 05:52:03 +00:00
async function loadModelList() {
let response = await fetch(`${cdnPath}model_list.json`);
let result = await response.json();
modelList = result;
}
async function loadModel(modelId, modelTexturesId, message) {
2019-11-12 09:27:00 +00:00
localStorage.setItem("modelId", modelId);
localStorage.setItem("modelTexturesId", modelTexturesId);
2020-02-10 05:52:03 +00:00
showMessage(message, 4000, 10);
if (useCDN) {
if (!modelList) await loadModelList();
let 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} 加载完成`);
}
2019-11-12 09:27:00 +00:00
}
2020-02-10 05:52:03 +00:00
async function loadRandModel() {
2020-02-28 14:02:35 +00:00
let modelId = localStorage.getItem("modelId"),
2019-11-12 09:27:00 +00:00
modelTexturesId = localStorage.getItem("modelTexturesId");
2020-02-10 05:52:03 +00:00
if (useCDN) {
if (!modelList) await loadModelList();
let 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 => {
2020-02-10 14:19:28 +00:00
if (result.textures.id === 1 && (modelTexturesId === 1 || modelTexturesId === 0)) showMessage("我还没有其他衣服呢!", 4000, 10);
2020-02-10 05:52:03 +00:00
else loadModel(modelId, result.textures.id, "我的新衣服好看嘛?");
});
}
2019-11-12 09:27:00 +00:00
}
2020-02-10 05:52:03 +00:00
async function loadOtherModel() {
2020-02-28 14:02:35 +00:00
let modelId = localStorage.getItem("modelId");
2020-02-10 05:52:03 +00:00
if (useCDN) {
if (!modelList) await loadModelList();
let 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);
});
}
2019-11-12 09:27:00 +00:00
}
}
2020-02-09 13:55:19 +00:00
function initWidget(config, apiPath = "/") {
2020-02-09 13:01:56 +00:00
if (typeof config === "string") {
config = {
waifuPath: config,
apiPath
};
}
2019-12-29 12:12:58 +00:00
document.body.insertAdjacentHTML("beforeend", `<div id="waifu-toggle">
2019-11-12 09:27:00 +00:00
<span>看板娘</span>
</div>`);
2020-02-28 14:02:35 +00:00
let toggle = document.getElementById("waifu-toggle");
2019-12-29 12:39:45 +00:00
toggle.addEventListener("click", () => {
toggle.classList.remove("waifu-toggle-active");
if (toggle.getAttribute("first-time")) {
2020-02-09 13:01:56 +00:00
loadWidget(config);
2019-12-29 12:39:45 +00:00
toggle.removeAttribute("first-time");
2019-11-12 09:27:00 +00:00
} else {
localStorage.removeItem("waifu-display");
2019-12-29 16:20:41 +00:00
document.getElementById("waifu").style.display = "";
setTimeout(() => {
document.getElementById("waifu").style.bottom = 0;
}, 0);
2019-11-12 09:27:00 +00:00
}
});
2019-11-30 17:34:53 +00:00
if (localStorage.getItem("waifu-display") && Date.now() - localStorage.getItem("waifu-display") <= 86400000) {
2019-12-29 12:39:45 +00:00
toggle.setAttribute("first-time", true);
2019-12-29 12:12:58 +00:00
setTimeout(() => {
2019-12-29 12:39:45 +00:00
toggle.classList.add("waifu-toggle-active");
2019-12-29 12:12:58 +00:00
}, 0);
2019-11-12 09:27:00 +00:00
} else {
2020-02-09 13:01:56 +00:00
loadWidget(config);
2019-11-12 09:27:00 +00:00
}
}