chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: misc fixes

Browse Source
This commit is contained in:
Haoyu Xu
2025-01-08 22:32:01 +08:00
parent 5780c04979
commit b6d3e08eaf
7 changed files with 56 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
showcase/src/components/aklive2d.js
View File

@@ -16,7 +16,6 @@ import '@/components/aklive2d.css'
export default class AKLive2D {
#el = document.createElement("div")
#appEl
#widgetEl
#queries = new URLSearchParams(window.location.search)
#voice = new Voice()
#music = new Music()
@@ -25,7 +24,7 @@ export default class AKLive2D {
#logo = new Logo()
#insight = new Insight()
constructor(appEl, widgetEl) {
constructor(appEl) {
document.title = import.meta.env.VITE_TITLE
console.log("All resources are extracted from Arknights. Github: https://gura.ch/aklive2d-gh")
@@ -33,24 +32,23 @@ export default class AKLive2D {
document.addEventListener("gesturestart", e => e.preventDefault());
this.#appEl = appEl
this.#widgetEl = widgetEl
}
init() {
if (isWebGLSupported) {
this.#logo.init(this.#appEl);
this.#background.init(this.#appEl, this.#widgetEl);
this.#voice.init(this.#appEl, this.#widgetEl);
this.#music.init(this.#appEl);
this.#player.init(this.#widgetEl, this);
this.#logo.init(this.#appEl);
this.#background.init(this.#appEl);
this.#voice.init(this.#appEl);
this.#music.init(this.#appEl);
if (isWebGLSupported()) {
this.#player.init(this.#appEl);
} else {
(new Fallback()).init(this.#widgetEl)
(new Fallback()).init(this.#appEl)
}
this.#el.id = "settings-box"
this.#el.hidden = true
this.#el.innerHTML = `
<div>
${this.#logo.HTML}
${this.#logo.HTML}
${this.#background.HTML}
${this.#player.HTML}
${this.#voice.HTML}
@@ -103,6 +101,7 @@ export default class AKLive2D {
success() {
this.#music.link(this.#background)
this.#background.link(this.#music)
this.#voice.link(this.#player)
this.#voice.success()
this.#music.success()
this.#insight.success()

6
showcase/src/components/background.js
View File

@@ -1,9 +1,9 @@
import {
insertHTMLNodeBefore,
readFile,
updateHTMLOptions,
showRelatedHTML,
syncHTMLValue,
insertHTMLChild,
} from "@/components/helper";
import "@/components/background.css"
@@ -20,14 +20,14 @@ export default class Background {
}
#musicObj
init(el, widgetEl) {
init(el) {
this.#parentEl = el
this.#el.id = "background-box"
this.image = this.#default.location + this.#default.image
this.#el.innerHTML = `
<video autoplay loop disablepictureinpicture id="video-src" />
`
insertHTMLNodeBefore(this.#parentEl, widgetEl, this.#el)
insertHTMLChild(this.#parentEl, this.#el)
this.#videoEl = document.getElementById("video-src")
}

8
showcase/src/components/fallback.css
View File

@@ -1,3 +1,11 @@
#fallback-box {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
#fallback {
margin: auto;
background-position: center;

42
showcase/src/components/fallback.js
View File

@@ -2,25 +2,29 @@ import { insertHTMLChild } from "@/components/helper";
import '@/components/fallback.css'
export default class Fallback {
#el = document.createElement("div")
#el = document.createElement("div")
init(parentEl) {
alert('WebGL is unavailable. Fallback image will be used.');
const calculateScale = (width, height) => {
return { x: window.innerWidth / width, y: window.innerHeight / height };
}
const fallback = () => {
const scale = calculateScale(import.meta.env.VITE_IMAGE_WIDTH, import.meta.env.VITE_IMAGE_HEIGHT);
this.#el.style.width = import.meta.env.VITE_IMAGE_WIDTH * (scale.x > scale.y ? scale.y : scale.x) + "px";
this.#el.style.height = import.meta.env.VITE_IMAGE_HEIGHT * (scale.x > scale.y ? scale.y : scale.x) + "px";
}
fallback();
window.addEventListener('resize', fallback, true);
this.#el.innerHTML = `
<div id="fallback"
style="background-image: url(./assets/${import.meta.env.VITE_FALLBACK_FILENAME}.png)"
/>
`
insertHTMLChild(parentEl, this.#el)
init(parentEl) {
alert('WebGL is unavailable. Fallback image will be used.');
const calculateScale = (width, height) => {
return { x: window.innerWidth / width, y: window.innerHeight / height };
}
const fallback = () => {
const el = document.getElementById("fallback-container")
const scale = calculateScale(import.meta.env.VITE_IMAGE_WIDTH, import.meta.env.VITE_IMAGE_HEIGHT);
el.style.width = "100%";
el.style.height = import.meta.env.VITE_IMAGE_HEIGHT * (scale.x > scale.y ? scale.y : scale.x) + "px";
}
window.addEventListener('resize', fallback, true);
this.#el.id = "fallback-box"
this.#el.innerHTML = `
<div id="fallback-container">
<div id="fallback"
style="background-image: url(./assets/${import.meta.env.VITE_FALLBACK_FILENAME}.png)"
/>
</div>
`
insertHTMLChild(parentEl, this.#el)
fallback();
}
}

4
showcase/src/components/player.js
View File

@@ -161,6 +161,10 @@ export default class Player {
updateHTMLOptions(this.#spine.skeleton.data.animations.map(e => e.name), "animation-selection")
}
get node() {
return this.#el
}
#loadViewport() {
this.#spine.updateViewport({
padLeft: `${this.#config.padding.left}%`,

11
showcase/src/components/voice.js
View File

@@ -13,7 +13,6 @@ import '@/components/voice.css'
export default class Voice {
#el = document.createElement("div")
#parentEl
#widgetEl
#default = {
region: charword_table.config.default_region,
duration: {
@@ -58,6 +57,7 @@ export default class Voice {
},
duration: {...this.#default.duration}
}
#playerObj
constructor() {
this.#default.language.voice = this.#voice.languages[0]
@@ -259,9 +259,8 @@ export default class Voice {
return this.duration.next
}
init(el, widgetEl) {
init(el) {
this.#parentEl = el
this.#widgetEl = widgetEl
this.#el.id = "voice-box"
this.#el.hidden = true
this.#el.innerHTML = `
@@ -294,7 +293,7 @@ export default class Voice {
this.#audio.el.addEventListener('ended', audioEndedFunc)
this.#playEntryVoice()
this.#initNextVoiceTimer()
this.#widgetEl.addEventListener('click', () => {
this.#playerObj.node.addEventListener('click', () => {
this.#audio.lastClickToNext = true
this.#nextVoice()
})
@@ -305,6 +304,10 @@ export default class Voice {
})
}
link(playerObj) {
this.#playerObj = playerObj
}
#getVoiceLocations() {
const folders = JSON.parse(import.meta.env.VITE_VOICE_FOLDERS)
const customVoiceName = this.#voice.languages.filter(i => !folders.sub.map(e => e.lang).includes(i))[0]

5
showcase/src/index.js
View File

@@ -2,8 +2,5 @@ import '@/index.css'
import '@/libs/wallpaper_engine'
import AKLive2D from '@/components/aklive2d'
document.getElementById('app').innerHTML = `
<div id="widget-wrapper" />
`
window.aklive2d = new AKLive2D(document.getElementById('app'), document.getElementById('widget-wrapper'))
window.aklive2d = new AKLive2D(document.getElementById('app'))
window.aklive2d.init()