feat(showcase): add settings to set the position of the operator logo

config/_project_json.yaml

@@ -1,37 +1,76 @@
 description: !match "~{split('config', 'title' ,' - ')[0]} Live 2D\n~{split('config', 'title' ,' - ')[1]} Live 2D\nThe model is extracted from game with Spine support.\n模型来自游戏内提取，支持Spine\nPlease set your FPS target in Wallpaper Engine > Settings > Performance > FPS\n请在 Wallpaper Engine > 设置 > 性能 > FPS 下设置FPS\n\nLive preview on: https://arknights.halyul.dev/~{var('config', 'link')}\nGithub: https://github.com/Halyul/aklive2d"
 localization:
   en-us:
+    ui_notice_title: <hr><h4>📝 Notes</h4><hr>
+    ui_notice_set_fps: <span><b>Set FPS target in Settings</b></span>
+    ui_notice_github: "Github: https://github.com/Halyul/aklive2d"
+    ui_notice_other_operators: "Previews: https://arknights.halyul.dev/"
+    ui_notice_version: !match "~{version('<span>Version: ', '</span>')}"
+    ui_background_title: <hr><h4>🖼️ Background</h4><hr>
     ui_custom_background: Custom Background
     ui_default_background: Default Background
+    ui_logo_title: <hr><h4>😐 Logo</h4><hr>
     ui_logo_image: Logo Image
-    ui_logo_notice: Notice
     ui_logo_opacity: Logo Opacity
     ui_logo_ratio: Logo Ratio
     ui_operator_logo: Operator Logo
-    ui_position: "USE WITH CAUTION: Position"
+    ui_translate_x: X Axis Position
+    ui_translate_y: Y Axis Position
+    ui_position_title: <hr><h4>⚠️ Posistion</h4><hr>
     ui_position_padding_bottom: Padding Bottom
     ui_position_padding_left: Padding Left
     ui_position_padding_right: Padding Right
     ui_position_padding_top: Padding Top
+    ui_voice_title: <hr><h4>🔈Voice</h4><hr>
+    ui_voice_lang: Voice Language
+    ui_subtitle_title: <hr><h4>📑 Subtitle</h4><hr>
+    ui_subtitle_lang: Subtitle Language
+    ui_voice_actor_title: <hr><h4>🗣️ Voice Actor</h4><hr>
   zh-chs:
+    ui_notice_title: <hr><h4>📝 通知</h4><hr>
+    ui_notice_set_fps: <span><b>在设置中设定FPS目标</b></span>
+    ui_notice_github: "Github: https://github.com/Halyul/aklive2d"
+    ui_notice_other_operators: "预览: https://arknights.halyul.dev/"
+    ui_notice_version: !match "~{version('<span>版本: ', '</span>')}"
+    ui_background_title: <hr><h4>🖼️ 背景</h4><hr>
     ui_custom_background: 背景图片
     ui_default_background: 默认背景
+    ui_logo_title: <hr><h4>😐 图标</h4><hr>
     ui_logo_image: 图标图片
-    ui_logo_notice: 通知
     ui_logo_opacity: 图标透明度
     ui_logo_ratio: 图标比例
     ui_operator_logo: 干员图标
-    ui_position: "注意使用: 位置"
+    ui_translate_x: X 轴位置
+    ui_translate_y: Y 轴位置
+    ui_position_title: <hr><h4>⚠️ 位置</h4><hr>
     ui_position_padding_bottom: 底部距离
     ui_position_padding_left: 左部距离
     ui_position_padding_right: 右部距离
     ui_position_padding_top: 上部距离
+    ui_voice_title: <hr><h4>🔈语音</h4><hr>
+    ui_voice_lang: 语音语言
+    ui_subtitle_title: <hr><h4>📑 字幕</h4><hr>
+    ui_subtitle_lang: 字幕语言
+    ui_voice_actor_title: <hr><h4>🗣️ 声优</h4><hr>
 properties:
-  - key: notice
+  - key: notice_title
     value: 
-     text: ui_logo_notice
+     text: ui_notice_title
-     type: textinput
+  - key: notice_set_fps
-     value: Set FPS target in Settings
+    value: 
+     text: ui_notice_set_fps
+  - key: notice_github
+    value: 
+     text: ui_notice_github
+  - key: notice_other_operators
+    value: 
+     text: ui_notice_other_operators
+  - key: notice_version
+    value: 
+     text: ui_notice_version
+  - key: logo_title
+    value:
+      text: ui_logo_title
   - key: logo
     value: 
      text: ui_operator_logo
@@ -63,6 +102,27 @@ properties:
      fraction: false
      max: 100
      min: 0
+  - key: logox
+    value: 
+     text: ui_translate_x
+     type: slider
+     value: 0
+     condition: logo.value == true
+     fraction: false
+     max: 100
+     min: 0
+  - key: logoy
+    value: 
+     text: ui_translate_y
+     type: slider
+     value: 0
+     condition: logo.value == true
+     fraction: false
+     max: 100
+     min: 0
+  - key: background_title
+    value: 
+     text: ui_background_title
   - key: defaultbackground
     value: 
      text: ui_default_background
@@ -79,7 +139,7 @@ properties:
      value: ""
   - key: position
     value: 
-     text: ui_position
+     text: ui_position_title
      type: bool
      value: false
   - key: paddingleft

libs/content_processor.js

@@ -1,3 +1,6 @@
+import path from 'path'
+import { readSync } from "./file.js"
+
 export default class Matcher {
   #start
   #end
@@ -48,6 +51,10 @@ class Evalable {
     return this.#step(location, varName)
   }
 
+  version(prefix, suffix) {
+    return `${prefix}${readSync(path.join(__dirname, 'Version'))}${suffix}`
+  }
+
   #step(location, varName) {
     let content = this.#config
     varName.split("->").forEach((item) => {

libs/project_json.js

@@ -62,7 +62,6 @@ export default class ProjectJson {
         ...this.#json.general,
         localization: this.#template.localization,
         properties: {
-          ...this.#json.general.properties,
           ...this.#properties
         }
       },

src/components/settings.js

@@ -16,6 +16,8 @@ export default class Settings {
   #defaultPadRight = getPercentage(`${import.meta.env.VITE_VIEWPORT_RIGHT}%`)
   #defaultPadTop = getPercentage(`${import.meta.env.VITE_VIEWPORT_TOP}%`)
   #defaultPadBottom = getPercentage(`${import.meta.env.VITE_VIEWPORT_BOTTOM}%`)
+  #defaultLogoX = 0
+  #defaultLogoY = 0
   #defaultViewport = {
     debugRender: false,
     padLeft: `${this.#defaultPadLeft}%`,
@@ -33,6 +35,8 @@ export default class Settings {
   #padRight = this.#defaultPadRight
   #padTop = this.#defaultPadTop
   #padBottom = this.#defaultPadBottom
+  #logoX = this.#defaultLogoX
+  #logoY = this.#defaultLogoY
 
   constructor(el, logoEl) {
     this.#el = el
@@ -70,6 +74,7 @@ export default class Settings {
   #resize(_this, value) {
     _this = _this || this
     _this.#logoEl.width = window.innerWidth / 2 * (value || _this.#ratio) / 100
+    _this.elementPosition(this.#logoEl, this.#logoX, this.#logoY)
   }
 
   #setLogoInvertFilter(flag) {
@@ -199,6 +204,44 @@ export default class Settings {
     document.getElementById("position_padding_bottom_input").value = this.#defaultPadBottom
   }
 
+  elementPosition(el, x, y) {
+    const elWidth = getComputedStyle(el).width
+    const elHeight = getComputedStyle(el).height
+    const windowWidth = window.innerWidth
+    const windowHeight = window.innerHeight
+    const xRange = windowWidth - parseInt(elWidth)
+    const yRange = windowHeight - parseInt(elHeight)
+    const xpx = x * xRange / 100
+    const ypx = y * yRange / 100
+    el.style.transform = `translate(${xpx}px, ${ypx}px)`
+  }
+
+  logoPadding(key, value) {
+    switch (key) {
+      case "x":
+        this.#logoX = value
+        break;
+      case "y":
+        this.#logoY = value
+        break;
+      default:
+        this.#logoX = value.x
+        this.#logoY = value.y
+        break;
+    }
+    this.elementPosition(this.#logoEl, this.#logoX, this.#logoY)
+  }
+
+  logoReset() {
+    this.#logoX = this.#defaultLogoX
+    this.#logoY = this.#defaultLogoY
+    this.elementPosition(this.#logoEl, this.#logoX, this.#logoY)
+    document.getElementById("logo_padding_x_slider").value = this.#defaultLogoX
+    document.getElementById("logo_padding_x_input").value = this.#defaultLogoX
+    document.getElementById("logo_padding_y_slider").value = this.#defaultLogoY
+    document.getElementById("logo_padding_y_input").value = this.#defaultLogoY
+  }
+
   open() {
     this.#el.hidden = false;
   }
@@ -216,6 +259,7 @@ export default class Settings {
     document.getElementById("logo_opacity_slider").value = this.#defaultOpacity
     document.getElementById("logo_opacity_input").value = this.#defaultOpacity
     this.resetLogoImage()
+    this.logoReset()
     this.resetBackground()
     this.setLogoDisplay(this.#defaulthideLogo)
     this.setFPS(this.#defaultFps)
@@ -251,7 +295,17 @@ export default class Settings {
               <input type="range" min="0" max="100" data-css-class="logo" step="1" id="logo_opacity_slider" value="${this.#opacity}" />
               <input type="number" id="logo_opacity_input" name="logo_opacity" value="${this.#opacity}" />
             </div>
+            <div>
+              <label for="logo_padding_x">Logo X Position</label>
+                <input type="range" min="0" max="100" id="logo_padding_x_slider" value="${this.#logoX}" />
+                <input type="number" id="logo_padding_x_input" name="logo_padding_x" value="${this.#logoX}" />
             </div>
+            <div>
+              <label for="logo_padding_y">Logo Y Position</label>
+              <input type="range" min="0" max="100" id="logo_padding_y_slider" value="${this.#logoY}" />
+              <input type="number" id="logo_padding_y_input" name="logo_padding_y" value="${this.#logoY}" />
+            </div>
+          </div>
         </div>
         <div>
           <div>
@@ -292,7 +346,7 @@ export default class Settings {
               <input type="range" min="-100" max="100" id="position_padding_bottom_slider" value="${this.#padBottom}" />
               <input type="number" id="position_padding_bottom_input" name="position_padding_bottom" value="${this.#padBottom}" />
             </div>
-            </div>
+          </div>
         </div>
         <div>
           <button type="button" id="settings_play" disabled>Play</button>
@@ -356,6 +410,24 @@ export default class Settings {
       _this.setLogoOpacity(e.currentTarget.value);
     })
 
+    document.getElementById("logo_padding_x_slider").addEventListener("input", e => {
+      _this.#sync(e.currentTarget, "logo_padding_x_input");
+      _this.logoPadding("x", e.currentTarget.value);
+    })
+    document.getElementById("logo_padding_x_input").addEventListener("change", e => {
+      _this.#sync(e.currentTarget, "logo_padding_x_slider");
+      _this.logoPadding("x", e.currentTarget.value);
+    })
+
+    document.getElementById("logo_padding_y_slider").addEventListener("input", e => {
+      _this.#sync(e.currentTarget, "logo_padding_y_input");
+      _this.logoPadding("y", e.currentTarget.value);
+    })
+    document.getElementById("logo_padding_y_input").addEventListener("change", e => {
+      _this.#sync(e.currentTarget, "logo_padding_y_slider");
+      _this.logoPadding("y", e.currentTarget.value);
+    })
+
     document.getElementById('default_background_select').addEventListener("change", e => _this.setDefaultBackground(e.currentTarget.value))
 
     document.getElementById("custom_background").addEventListener("change", e => _this.setBackground(e))

src/components/voice.js

@@ -0,0 +1,6 @@
+import charword_table from '!/charword_table.json'
+import '@/components/voice.css'
+
+export default function Voice() {
+   
+}

src/libs/wallpaper_engine.js

@@ -25,6 +25,12 @@ window.wallpaperPropertyListener = {
                 window.settings.resetLogoImage()
             }
         }
+        if (properties.logox) {
+            window.settings.logoPadding("x", properties.logox.value)
+        }
+        if (properties.logoy) {
+            window.settings.logoPadding("y", properties.logoy.value)
+        }
         if (properties.defaultbackground) {
             if (properties.defaultbackground.value) {
                 window.settings.setDefaultBackground(properties.defaultbackground.value)