feat: migrate to turbo (#22)
* feat: migrate top turbo * ci: ci test * fix: fix codeql issues * feat: ci test * chore: lint * chore: misc changes * feat: rename vite helpers * feat: use fetch to handle assets * feat: update directory * feat: fetch charword table * feat: migrate download game data and detect missing voice files * feat: symlink relative path * feat: finish wrangler upload * feat: migrate wrangler download * feat: finish * chore: auto update * ci: update ci * ci: update ci --------- Co-authored-by: Halyul <Halyul@users.noreply.github.com>
This commit is contained in:
Haoyu Xu
257
apps/showcase/src/components/aklive2d.js
Normal file
257
apps/showcase/src/components/aklive2d.js
Normal file
@@ -0,0 +1,257 @@
|
||||
import Voice from '@/components/voice'
|
||||
import Fallback from '@/components/fallback'
|
||||
import Music from '@/components/music'
|
||||
import Player from '@/components/player'
|
||||
import Background from '@/components/background'
|
||||
import Logo from '@/components/logo'
|
||||
import Insight from '@/components/insight'
|
||||
import Events from '@/components/events'
|
||||
import {
|
||||
isWebGLSupported,
|
||||
insertHTMLChild,
|
||||
addEventListeners,
|
||||
updateElementPosition,
|
||||
} from '@/components/helper'
|
||||
import '@/components/aklive2d.css'
|
||||
|
||||
export default class AKLive2D {
|
||||
#el = document.createElement('div')
|
||||
#appEl
|
||||
#queries = new URLSearchParams(window.location.search)
|
||||
#voice
|
||||
#music
|
||||
#player
|
||||
#background
|
||||
#logo
|
||||
#configQ = []
|
||||
#isInited = false
|
||||
#isSelfInited = false
|
||||
#isAllInited = false
|
||||
#insight = new Insight()
|
||||
|
||||
constructor(appEl) {
|
||||
console.log(
|
||||
'All resources are extracted from Arknights. Github: https://gura.ch/aklive2d-gh'
|
||||
)
|
||||
|
||||
window.addEventListener('contextmenu', (e) => e.preventDefault())
|
||||
document.addEventListener('gesturestart', (e) => e.preventDefault())
|
||||
|
||||
this.#appEl = appEl
|
||||
this.#logo = new Logo(this.#appEl)
|
||||
this.#background = new Background(this.#appEl)
|
||||
this.#voice = new Voice(this.#appEl)
|
||||
this.#music = new Music(this.#appEl)
|
||||
if (isWebGLSupported()) {
|
||||
this.#player = new Player(this.#appEl)
|
||||
} else {
|
||||
new Fallback(this.#appEl)
|
||||
}
|
||||
addEventListeners([
|
||||
{
|
||||
event: Events.Player.Ready.name,
|
||||
handler: () => this.#selfInited(),
|
||||
},
|
||||
{
|
||||
event: Events.RegisterConfig.name,
|
||||
handler: (e) => this.#registerConfig(e),
|
||||
},
|
||||
])
|
||||
|
||||
Promise.all(
|
||||
[
|
||||
this.#logo,
|
||||
this.#background,
|
||||
this.#voice,
|
||||
this.#music,
|
||||
this.#player,
|
||||
].map(async (e) => e && (await e.init()))
|
||||
).then(() => this.#allInited())
|
||||
}
|
||||
|
||||
#registerConfig(e) {
|
||||
if (!this.#isInited) {
|
||||
this.#configQ.push(e.detail)
|
||||
} else {
|
||||
this.#applyConfig(e.detail)
|
||||
}
|
||||
}
|
||||
|
||||
#applyConfig(config = null) {
|
||||
if (config) {
|
||||
let targetObj
|
||||
const target = config.target
|
||||
switch (target) {
|
||||
case 'player':
|
||||
targetObj = this.#player
|
||||
break
|
||||
case 'background':
|
||||
targetObj = this.#background
|
||||
break
|
||||
case 'logo':
|
||||
targetObj = this.#logo
|
||||
break
|
||||
case 'music':
|
||||
targetObj = this.#music
|
||||
break
|
||||
case 'voice':
|
||||
targetObj = this.#voice
|
||||
break
|
||||
default:
|
||||
return
|
||||
}
|
||||
targetObj.applyConfig(config.key, config.value)
|
||||
} else {
|
||||
this.#configQ.map((e) => this.#applyConfig(e))
|
||||
}
|
||||
return
|
||||
}
|
||||
|
||||
get voice() {
|
||||
return this.#voice
|
||||
}
|
||||
|
||||
get music() {
|
||||
return this.#music
|
||||
}
|
||||
|
||||
get player() {
|
||||
return this.#player
|
||||
}
|
||||
|
||||
get background() {
|
||||
return this.#background
|
||||
}
|
||||
|
||||
get logo() {
|
||||
return this.#logo
|
||||
}
|
||||
|
||||
get events() {
|
||||
return Events
|
||||
}
|
||||
|
||||
get config() {
|
||||
return {
|
||||
player: this.#player.config,
|
||||
background: this.#background.config,
|
||||
logo: this.#logo.config,
|
||||
music: this.#music.config,
|
||||
voice: this.#voice.config,
|
||||
}
|
||||
}
|
||||
|
||||
get configStr() {
|
||||
return JSON.stringify(this.config, null)
|
||||
}
|
||||
|
||||
open() {
|
||||
this.#el.hidden = false
|
||||
}
|
||||
|
||||
close() {
|
||||
this.#el.hidden = true
|
||||
}
|
||||
|
||||
reset() {
|
||||
this.#player.reset()
|
||||
this.#background.reset()
|
||||
this.#logo.reset()
|
||||
this.#voice.reset()
|
||||
this.#music.reset()
|
||||
}
|
||||
|
||||
#allInited() {
|
||||
this.#isAllInited = true
|
||||
if (this.#isSelfInited) {
|
||||
this.#success()
|
||||
}
|
||||
}
|
||||
|
||||
#selfInited() {
|
||||
this.#isSelfInited = true
|
||||
if (this.#isAllInited) {
|
||||
this.#success()
|
||||
}
|
||||
}
|
||||
|
||||
#success() {
|
||||
this.#isInited = true
|
||||
this.#el.id = 'settings-box'
|
||||
this.#el.hidden = true
|
||||
this.#el.innerHTML = `
|
||||
<div>
|
||||
${this.#logo.HTML}
|
||||
${this.#background.HTML}
|
||||
${this.#player.HTML}
|
||||
${this.#music.HTML}
|
||||
${this.#voice.HTML}
|
||||
<div>
|
||||
<button type="button" id="settings-reset">Reset</button>
|
||||
<button type="button" id="settings-close">Close</button>
|
||||
<button type="button" id="settings-to-directory">Back to Directory</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
insertHTMLChild(this.#appEl, this.#el)
|
||||
addEventListeners([
|
||||
{
|
||||
id: 'settings-reset',
|
||||
event: 'click',
|
||||
handler: () => this.reset(),
|
||||
},
|
||||
{
|
||||
id: 'settings-close',
|
||||
event: 'click',
|
||||
handler: () => this.close(),
|
||||
},
|
||||
{
|
||||
id: 'settings-to-directory',
|
||||
event: 'click',
|
||||
handler: () => {
|
||||
window.location.href = '/'
|
||||
},
|
||||
},
|
||||
...this.#logo.listeners,
|
||||
...this.#background.listeners,
|
||||
...this.#player.listeners,
|
||||
...this.#voice.listeners,
|
||||
...this.#music.listeners,
|
||||
...this.#insight.listeners,
|
||||
])
|
||||
|
||||
this.#music.link(this.#background)
|
||||
this.#background.link(this.#music)
|
||||
this.#voice.link(this.#player)
|
||||
this.#player.success()
|
||||
this.#voice.success()
|
||||
this.#music.success()
|
||||
this.#insight.success()
|
||||
|
||||
this.#applyConfig()
|
||||
|
||||
if (
|
||||
this.#queries.has('aklive2d') ||
|
||||
import.meta.env.MODE === 'development'
|
||||
) {
|
||||
this.open()
|
||||
}
|
||||
this.#registerBackCompatibilityFns()
|
||||
}
|
||||
|
||||
#registerBackCompatibilityFns() {
|
||||
const _this = this
|
||||
window.voice = _this.#voice
|
||||
window.music = _this.#music
|
||||
window.settings = {
|
||||
elementPosition: updateElementPosition,
|
||||
open: _this.open,
|
||||
close: _this.close,
|
||||
reset: _this.reset,
|
||||
..._this.#player.backCompatibilityFns,
|
||||
..._this.#logo.backCompatibilityFns,
|
||||
..._this.#music.backCompatibilityFns,
|
||||
..._this.#background.backCompatibilityFns,
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user