From b6d3e08eaf244559abde7f3d644b7a148dd9b254 Mon Sep 17 00:00:00 2001
From: Haoyu Xu <i@halyul.dev>
Date: Wed, 8 Jan 2025 22:32:01 +0800
Subject: [PATCH] fix: misc fixes

---
 showcase/src/components/aklive2d.js   | 21 +++++++-------
 showcase/src/components/background.js |  6 ++--
 showcase/src/components/fallback.css  |  8 +++++
 showcase/src/components/fallback.js   | 42 +++++++++++++++------------
 showcase/src/components/player.js     |  4 +++
 showcase/src/components/voice.js      | 11 ++++---
 showcase/src/index.js                 |  5 +---
 7 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/showcase/src/components/aklive2d.js b/showcase/src/components/aklive2d.js
index 20b4693..e1fd86c 100644
--- a/showcase/src/components/aklive2d.js
+++ b/showcase/src/components/aklive2d.js
@@ -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()
diff --git a/showcase/src/components/background.js b/showcase/src/components/background.js
index 45524ee..53b5dca 100644
--- a/showcase/src/components/background.js
+++ b/showcase/src/components/background.js
@@ -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")
   }
 
diff --git a/showcase/src/components/fallback.css b/showcase/src/components/fallback.css
index 70b82db..5284102 100644
--- a/showcase/src/components/fallback.css
+++ b/showcase/src/components/fallback.css
@@ -1,3 +1,11 @@
+#fallback-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+  }
+
 #fallback {
     margin: auto;
     background-position: center;
diff --git a/showcase/src/components/fallback.js b/showcase/src/components/fallback.js
index b65a1a6..40a34e9 100644
--- a/showcase/src/components/fallback.js
+++ b/showcase/src/components/fallback.js
@@ -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();
+  }
 }
\ No newline at end of file
diff --git a/showcase/src/components/player.js b/showcase/src/components/player.js
index e6e3b63..627437c 100644
--- a/showcase/src/components/player.js
+++ b/showcase/src/components/player.js
@@ -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}%`,
diff --git a/showcase/src/components/voice.js b/showcase/src/components/voice.js
index 647808b..fc26e84 100644
--- a/showcase/src/components/voice.js
+++ b/showcase/src/components/voice.js
@@ -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]
diff --git a/showcase/src/index.js b/showcase/src/index.js
index 42540b1..b9b3890 100644
--- a/showcase/src/index.js
+++ b/showcase/src/index.js
@@ -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()