Separate files

This commit is contained in:
Mimi 2022-10-20 20:38:40 +08:00
parent a1eb4ca01c
commit edbf98e4d7
4 changed files with 101 additions and 78 deletions

22
src/message.js Normal file
View File

@ -0,0 +1,22 @@
import randomSelection from "./utils.js";
let messageTimer;
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);
}
export default showMessage;

65
src/model.js Normal file
View File

@ -0,0 +1,65 @@
import showMessage from "./message.js";
import randomSelection from "./utils.js";
class Model {
constructor(useCDN, apiPath, cdnPath) {
this.useCDN = useCDN;
this.apiPath = apiPath;
this.cdnPath = cdnPath;
}
async loadModelList() {
const response = await fetch(`${this.cdnPath}model_list.json`);
this.modelList = await response.json();
}
async loadModel(modelId, modelTexturesId, message) {
localStorage.setItem("modelId", modelId);
localStorage.setItem("modelTexturesId", modelTexturesId);
showMessage(message, 4000, 10);
if (this.useCDN) {
if (!this.modelList) await this.loadModelList();
const target = randomSelection(this.modelList.models[modelId]);
loadlive2d("live2d", `${this.cdnPath}model/${target}/index.json`);
} else {
loadlive2d("live2d", `${this.apiPath}get/?id=${modelId}-${modelTexturesId}`);
console.log(`Live2D 模型 ${modelId}-${modelTexturesId} 加载完成`);
}
}
async loadRandModel() {
const modelId = localStorage.getItem("modelId"),
modelTexturesId = localStorage.getItem("modelTexturesId");
if (this.useCDN) {
if (!this.modelList) await this.loadModelList();
const target = randomSelection(this.modelList.models[modelId]);
loadlive2d("live2d", `${this.cdnPath}model/${target}/index.json`);
showMessage("我的新衣服好看嘛?", 4000, 10);
} else {
// 可选 "rand"(随机), "switch"(顺序)
fetch(`${this.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 this.loadModel(modelId, result.textures.id, "我的新衣服好看嘛?");
});
}
}
async loadOtherModel() {
let modelId = localStorage.getItem("modelId");
if (this.useCDN) {
if (!this.modelList) await this.loadModelList();
const index = (++modelId >= this.modelList.models.length) ? 0 : modelId;
this.loadModel(index, 0, this.modelList.messages[index]);
} else {
fetch(`${this.apiPath}switch/?id=${modelId}`)
.then(response => response.json())
.then(result => {
this.loadModel(result.model.id, 0, result.model.message);
});
}
}
}
export default Model;

5
src/utils.js Normal file
View File

@ -0,0 +1,5 @@
function randomSelection(obj) {
return Array.isArray(obj) ? obj[Math.floor(Math.random() * obj.length)] : obj;
}
export default randomSelection;

View File

@ -11,9 +11,13 @@ import fa_camera_retro from "@fortawesome/fontawesome-free/svgs/solid/camera-ret
import fa_info_circle from "@fortawesome/fontawesome-free/svgs/solid/circle-info.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"; import fa_xmark from "@fortawesome/fontawesome-free/svgs/solid/xmark.svg";
import Model from "./model.js";
import showMessage from "./message.js";
import randomSelection from "./utils.js";
function loadWidget(config) { function loadWidget(config) {
let { apiPath, cdnPath } = config; let { apiPath, cdnPath } = config;
let useCDN = false, modelList; let useCDN = false;
if (typeof cdnPath === "string") { if (typeof cdnPath === "string") {
useCDN = true; useCDN = true;
if (!cdnPath.endsWith("/")) cdnPath += "/"; if (!cdnPath.endsWith("/")) cdnPath += "/";
@ -23,6 +27,7 @@ function loadWidget(config) {
console.error("Invalid initWidget argument!"); console.error("Invalid initWidget argument!");
return; return;
} }
const model = new Model(useCDN, apiPath, cdnPath);
localStorage.removeItem("waifu-display"); localStorage.removeItem("waifu-display");
sessionStorage.removeItem("waifu-text"); sessionStorage.removeItem("waifu-text");
document.body.insertAdjacentHTML("beforeend", `<div id="waifu"> document.body.insertAdjacentHTML("beforeend", `<div id="waifu">
@ -35,13 +40,9 @@ function loadWidget(config) {
document.getElementById("waifu").style.bottom = 0; document.getElementById("waifu").style.bottom = 0;
}, 0); }, 0);
function randomSelection(obj) {
return Array.isArray(obj) ? obj[Math.floor(Math.random() * obj.length)] : obj;
}
// 检测用户活动状态,并在空闲时显示消息 // 检测用户活动状态,并在空闲时显示消息
let userAction = false, let userAction = false,
userActionTimer, userActionTimer,
messageTimer,
messageArray = ["好久不见,日子过得好快呢……", "大坏蛋!你都多久没理人家了呀,嘤嘤嘤~", "嗨~快来逗我玩吧!", "拿小拳拳锤你胸口!", "记得把小家加入 Adblock 白名单哦!"]; messageArray = ["好久不见,日子过得好快呢……", "大坏蛋!你都多久没理人家了呀,嘤嘤嘤~", "嗨~快来逗我玩吧!", "拿小拳拳锤你胸口!", "记得把小家加入 Adblock 白名单哦!"];
window.addEventListener("mousemove", () => userAction = true); window.addEventListener("mousemove", () => userAction = true);
window.addEventListener("keydown", () => userAction = true); window.addEventListener("keydown", () => userAction = true);
@ -78,11 +79,11 @@ function loadWidget(config) {
}, },
"switch-model": { "switch-model": {
icon: fa_user_circle, icon: fa_user_circle,
callback: loadOtherModel callback: () => model.loadOtherModel()
}, },
"switch-texture": { "switch-texture": {
icon: fa_street_view, icon: fa_street_view,
callback: loadRandModel callback: () => model.loadRandModel()
}, },
"photo": { "photo": {
icon: fa_camera_retro, icon: fa_camera_retro,
@ -181,23 +182,6 @@ function loadWidget(config) {
}); });
} }
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() { (function initModel() {
let modelId = localStorage.getItem("modelId"), let modelId = localStorage.getItem("modelId"),
modelTexturesId = localStorage.getItem("modelTexturesId"); modelTexturesId = localStorage.getItem("modelTexturesId");
@ -206,7 +190,7 @@ function loadWidget(config) {
modelId = 1; // 模型 ID modelId = 1; // 模型 ID
modelTexturesId = 53; // 材质 ID modelTexturesId = 53; // 材质 ID
} }
loadModel(modelId, modelTexturesId); model.loadModel(modelId, modelTexturesId);
fetch(config.waifuPath) fetch(config.waifuPath)
.then(response => response.json()) .then(response => response.json())
.then(result => { .then(result => {
@ -241,59 +225,6 @@ function loadWidget(config) {
}); });
}); });
})(); })();
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) { function initWidget(config, apiPath) {