Skip to content

在工具栏添加让看看板娘左右调整位置的按钮 #64

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 19 commits into
base: master
Choose a base branch
from
Open

在工具栏添加让看看板娘左右调整位置的按钮 #64

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
21ea9c2
Delete autoload.js
PFiS1737 Feb 14, 2021
0dccac4
Delete waifu-tips.js
PFiS1737 Feb 14, 2021
d5acd51
Delete waifu.css
PFiS1737 Feb 14, 2021
df35f18
Add files via upload
PFiS1737 Feb 14, 2021
dcfe4b7
Update waifu-tips.js
PFiS1737 Feb 14, 2021
f35dae1
Update autoload.js
PFiS1737 Feb 14, 2021
d462110
Update autoload.js
PFiS1737 Feb 14, 2021
c15b26a
Update waifu_right.css
PFiS1737 Feb 14, 2021
5fb99fc
Update waifu_left.css
PFiS1737 Feb 14, 2021
531a640
Update waifu-tips.json
PFiS1737 Feb 14, 2021
c051256
Update autoload.js
PFiS1737 Feb 14, 2021
cf203aa
Update waifu-tips.js
PFiS1737 Feb 14, 2021
aecffb2
Update waifu-tips.js
PFiS1737 Feb 14, 2021
4d89c96
Update waifu-tips.js
PFiS1737 Feb 14, 2021
04f3a44
Update waifu-tips.js
PFiS1737 Feb 14, 2021
8576718
Update waifu-tips.js
PFiS1737 Feb 15, 2021
14a128f
Update waifu_right.css
PFiS1737 Feb 15, 2021
0fb9b25
Update waifu_left.css
PFiS1737 Feb 15, 2021
64e8a24
Create autoload.js
PFiS1737 Jul 2, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 5 additions & 4 deletions autoload.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
// 注意：live2d_path 参数应使用绝对路径
const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";
//const live2d_path = "/live2d-widget/";
const live2d_path = "https://cdn.jsdelivr.net/gh/PFiS1737/live2d-widget@latest/";

// 封装异步加载资源的方法
function loadExternalResource(url, type) {
Expand All @@ -11,6 +10,7 @@ function loadExternalResource(url, type) {
tag = document.createElement("link");
tag.rel = "stylesheet";
tag.href = url;
tag.id = "live2d_css";
}
else if (type === "js") {
tag = document.createElement("script");
Expand All @@ -26,14 +26,15 @@ function loadExternalResource(url, type) {

// 加载 waifu.css live2d.min.js waifu-tips.js
if (screen.width >= 768) {
// "768"为最低显示宽度，单位为像素
Promise.all([
loadExternalResource(live2d_path + "waifu.css", "css"),
loadExternalResource(live2d_path + "waifu_left.css", "css"),
loadExternalResource(live2d_path + "live2d.min.js", "js"),
loadExternalResource(live2d_path + "waifu-tips.js", "js")
]).then(() => {
initWidget({
waifuPath: live2d_path + "waifu-tips.json",
//apiPath: "https://live2d.fghrsh.net/api/",
// apiPath: "https://live2d.fghrsh.net/api/",
cdnPath: "https://cdn.jsdelivr.net/gh/fghrsh/live2d_api/"
});
});
Expand Down
72 changes: 54 additions & 18 deletions waifu-tips.js
100755 → 100644
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ function loadWidget(config) {
<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>
<span class="fa fa-lg fa-chevron-right" id="live2d-go-right"></span>
<span class="fa fa-lg fa-chevron-left" id="live2d-go-left"></span>
</div>
</div>`);
// https://stackoverflow.com/questions/24148403/trigger-css-transition-on-appended-element
Expand Down Expand Up @@ -57,9 +59,18 @@ function loadWidget(config) {
}
}, 1000);

(function registerEventListener() {
document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto);
document.querySelector("#waifu-tool .fa-paper-plane").addEventListener("click", () => {
(function () { // 根据位置加载
if (localStorage.getItem("Live2DPlace") === "left") {
document.getElementById("live2d-go-left").style.display = "none";
} else if (localStorage.getItem("Live2DPlace") === "right") {
document.getElementById("live2d-go-right").style.display = "none";
document.getElementById("live2d_css").href = live2d_path + "waifu_right.css";
}
})();

(function registerEventListener() { // 工具栏菜单效果
document.querySelector("#waifu-tool .fa-comment").addEventListener("click", showHitokoto); // 一言API对话
document.querySelector("#waifu-tool .fa-paper-plane").addEventListener("click", () => { // 飞机大战（雾）
if (window.Asteroids) {
if (!window.ASTEROIDSPLAYERS) window.ASTEROIDSPLAYERS = [];
window.ASTEROIDSPLAYERS.push(new Asteroids());
Expand All @@ -69,17 +80,17 @@ function loadWidget(config) {
document.head.appendChild(script);
}
});
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", () => {
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.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-info-circle").addEventListener("click", () => { // 关于页转跳
open("https://github.com/stevenjoezhang/live2d-widget"); //关于页链接
});
document.querySelector("#waifu-tool .fa-times").addEventListener("click", () => {
document.querySelector("#waifu-tool .fa-times").addEventListener("click", () => { // 关闭看板娘
localStorage.setItem("waifu-display", Date.now());
showMessage("愿你有一天能与重要的人重逢。", 2000, 11);
document.getElementById("waifu").style.bottom = "-500px";
Expand All @@ -88,7 +99,33 @@ function loadWidget(config) {
document.getElementById("waifu-toggle").classList.add("waifu-toggle-active");
}, 3000);
});
const devtools = () => {};
document.querySelector("#waifu-tool .fa-chevron-right").addEventListener("click", () => { // 切换看板娘位置（左 => 右）
localStorage.setItem("Live2DPlace", "right");
showMessage("耶，可以去右边了呢～。", 2000, 11);
document.getElementById("waifu").style.bottom = "-500px";
document.getElementById("waifu-toggle").style.display = "none";
setTimeout(() => {
document.getElementById("live2d_css").href = live2d_path + "waifu_right.css";
document.getElementById("waifu").style.bottom = "0px";
document.getElementById("live2d-go-right").style.display = "none";
document.getElementById("live2d-go-left").style.display = "block";
}, 3000);
setTimeout('document.getElementById("waifu-toggle").style.display = "inline"',6000);
});
document.querySelector("#waifu-tool .fa-chevron-left").addEventListener("click", () => { // 切换看板娘位置（左 <= 右）
localStorage.setItem("Live2DPlace", "left");
showMessage("耶，可以去左边了呢～。", 2000, 11);
document.getElementById("waifu").style.bottom = "-500px";
document.getElementById("waifu-toggle").style.display = "none";
setTimeout(() => {
document.getElementById("live2d_css").href = live2d_path + "waifu_left.css";
document.getElementById("waifu").style.bottom = "0px";
document.getElementById("live2d-go-left").style.display = "none";
document.getElementById("live2d-go-right").style.display = "block";
}, 3000);
setTimeout('document.getElementById("waifu-toggle").style.display = "inline"',6000);
});
const devtools = () => { };
console.log("%c", devtools);
devtools.toString = () => {
showMessage("哈哈，你打开了控制台，是想要看看我的小秘密吗？", 6000, 9);
Expand Down Expand Up @@ -127,8 +164,7 @@ function loadWidget(config) {
showMessage(text, 7000, 8);
})();

function showHitokoto() {
// 增加 hitokoto.cn 的 API
function showHitokoto() { // 增加 hitokoto.cn 的 API
fetch("https://v1.hitokoto.cn")
.then(response => response.json())
.then(result => {
Expand Down Expand Up @@ -161,9 +197,9 @@ function loadWidget(config) {
let modelId = localStorage.getItem("modelId"),
modelTexturesId = localStorage.getItem("modelTexturesId");
if (modelId === null) {
// 首次访问加载 指定模型 的 指定材质
modelId = 1; // 模型 ID
modelTexturesId = 53; // 材质 ID
// 首次访问时加载 指定模型 的 指定材质
modelId = 2; // 模型 ID
modelTexturesId = 39; // 材质 ID
}
loadModel(modelId, modelTexturesId);
fetch(waifuPath)
Expand Down Expand Up @@ -229,8 +265,8 @@ function loadWidget(config) {
loadlive2d("live2d", `${cdnPath}model/${target}/index.json`);
showMessage("我的新衣服好看嘛？", 4000, 10);
} else {
// 可选 "rand"(随机), "switch"(顺序)
fetch(`${apiPath}rand_textures/?id=${modelId}-${modelTexturesId}`)
// 材质加载方式, 可选 "rand"(随机), "switch"(顺序)
fetch(`${apiPath}switch_textures/?id=${modelId}-${modelTexturesId}`)
.then(response => response.json())
.then(result => {
if (result.textures.id === 1 && (modelTexturesId === 1 || modelTexturesId === 0)) showMessage("我还没有其他衣服呢！", 4000, 10);
Expand Down
6 changes: 6 additions & 0 deletions waifu-tips.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,12 @@
}, {
"selector": "#waifu-tool .fa-times",
"text": ["到了要说再见的时候了吗？", "呜呜 QAQ 后会有期……", "不要抛弃我呀……", "我们，还能再见面吗……", "哼，你会后悔的！"]
}, {
"selector": "#waifu-tool .fa-chevron-left",
"text": ["可以去左边吗？", "要搬家吗？"]
}, {
"selector": "#waifu-tool .fa-chevron-right",
"text": ["可以去左右吗？", "要搬家吗？"]
}, {
"selector": ".menu-item-home a",
"text": ["点击前往首页，想回到上一页可以使用浏览器的后退功能哦。", "点它就可以回到首页啦！", "回首页看看吧。"]
Expand Down
5 changes: 3 additions & 2 deletions waifu.css → waifu_left.css
100755 → 100644
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@
transition: margin-left 1s;
width: 60px;
writing-mode: vertical-rl;
z-index: 1000;
}

#waifu-toggle.waifu-toggle-active {
Expand All @@ -30,7 +31,7 @@
position: fixed;
transform: translateY(3px);
transition: transform .3s ease-in-out, bottom 3s ease-in-out;
z-index: 1;
z-index: 1000;
}

#waifu:hover {
Expand Down Expand Up @@ -82,7 +83,7 @@
opacity: 0;
position: absolute;
right: -10px;
top: 70px;
top: 55px;
transition: opacity 1s;
}

Expand Down
Loading