feat(project.json): use yaml template instead of json

config/_project_json.yaml

@@ -0,0 +1,120 @@
+description: "${func:split('title' ,' - ')[0]} Live 2D\n${func:split('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:link}\nGithub: https://github.com/Halyul/aklive2d"
+localization:
+  en-us:
+    ui_custom_background: Custom Background
+    ui_default_background: Default Background
+    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_position_padding_bottom: Padding Bottom
+    ui_position_padding_left: Padding Left
+    ui_position_padding_right: Padding Right
+    ui_position_padding_top: Padding Top
+  zh-chs:
+    ui_custom_background: 背景图片
+    ui_default_background: 默认背景
+    ui_logo_image: 图标图片
+    ui_logo_notice: 通知
+    ui_logo_opacity: 图标透明度
+    ui_logo_ratio: 图标比例
+    ui_operator_logo: 干员图标
+    ui_position: "注意使用: 位置"
+    ui_position_padding_bottom: 底部距离
+    ui_position_padding_left: 左部距离
+    ui_position_padding_right: 右部距离
+    ui_position_padding_top: 上部距离
+properties:
+  - key: notice
+    value: 
+     text: ui_logo_notice
+     type: textinput
+     value: Set FPS target in Settings
+  - key: logo
+    value: 
+     text: ui_operator_logo
+     type: bool
+     value: true
+  - key: logoimage
+    value: 
+     text: ui_logo_image
+     type: file
+     value: ""
+     condition: logo.value == true
+  - key: logoratio
+    value: 
+     text: ui_logo_ratio
+     type: "slider"
+     value: 61.8
+     condition: logo.value == true
+     fraction: true
+     max: 100
+     min: 0
+     precision: 2
+     step: 0.1
+  - key: logoopacity
+    value: 
+     text: ui_logo_opacity
+     type: slider
+     value: 30
+     condition: logo.value == true
+     fraction: false
+     max: 100
+     min: 0
+  - key: defaultbackground
+    value: 
+     text: ui_default_background
+     type: combo
+     value: this.#assets.backgrounds[0]
+     fraction: false
+     max: 100
+     min: 0
+     options:
+  - key: background
+    value: 
+     text: ui_custom_background
+     type: file
+     value: ""
+  - key: position
+    value: 
+     text: ui_position
+     type: bool
+     value: false
+  - key: paddingleft
+    value: 
+     text: ui_position_padding_left
+     type: slider
+     value: 
+     condition: position.value == true
+     fraction: false
+     max: 100
+     min: -100
+  - key: paddingright
+    value: 
+     text: ui_position_padding_right
+     type: slider
+     value: 
+     condition: position.value == true
+     fraction: false
+     max: 100
+     min: -100
+  - key: paddingtop
+    value: 
+     text: ui_position_padding_top
+     type: slider
+     value: 
+     condition: position.value == true
+     fraction: false
+     max: 100
+     min: -100
+  - key: paddingbottom
+    value: 
+     text: ui_position_padding_bottom
+     type: slider
+     value: 
+     condition: position.value == true
+     fraction: false
+     max: 100
+     min: -100

libs/project_json.js

@@ -1,6 +1,7 @@
 import path from 'path'
 import Matcher from './content_processor.js'
-import { read, exists } from './file.js'
+import { read as readFile, exists } from './file.js'
+import { read as readYAML } from './yaml.js'
 
 export default class ProjectJson {
   #json
@@ -9,6 +10,8 @@ export default class ProjectJson {
   #operatorSourceFolder
   #operatorShareFolder
   #assets
+  #rootDir
+  #template
 
   constructor(config, operatorName, __dirname, operatorShareFolder, assets) {
     this.#config = config
@@ -16,11 +19,13 @@ export default class ProjectJson {
     this.#operatorSourceFolder = path.join(__dirname, this.#config.folder.operator)
     this.#operatorShareFolder = operatorShareFolder
     this.#assets = assets
+    this.#rootDir = __dirname
+    this.#template = this.#processYAML(readYAML(path.join(this.#rootDir, 'config', '_project_json.yaml')))
   }
     
   async load() {
     // load json from file
-    this.#json = JSON.parse(await read(this.#getPath()))
+    this.#json = JSON.parse(await readFile(this.#getPath()))
     this.#process()
     return this.#json
   }
@@ -36,17 +41,13 @@ export default class ProjectJson {
   }
 
   #process() {
-    const matcher = new Matcher(this.#json.description, '${', '}', this.#config.operators[this.#operatorName])
-    if (matcher.match() !== null) {
-      this.#json.description = matcher.process()
-    }
-    // TODO: move the template generation to here
     this.#json = {
       ...this.#json,
-      description: this.#json.description,
+      description: this.#template.description,
       title: this.#config.operators[this.#operatorName].title,
       general: {
         ...this.#json.general,
+        localization: this.#template.localization,
         properties: {
           ...this.#json.general.properties,
           ...this.#properties
@@ -55,63 +56,16 @@ export default class ProjectJson {
     }
   }
 
-  get #properties() {
+  #processYAML(template) {
-    const properties = [
+    const matcher = new Matcher(template.description, '${', '}', this.#config.operators[this.#operatorName])
+    if (matcher.match() !== null) {
+      template.description = matcher.process()
+    }
+    const replacePropertyPairs = [
       {
-        key: "notice",
-        value: {
-          text: "ui_logo_notice",
-          type: "textinput",
-          "value": "Set FPS target in Settings"
-        }
-      }, {
-        key: "logo",
-        value: {
-          text: "ui_operator_logo",
-          type: "bool",
-          value: true
-        }
-      }, {
-        key: "logoimage",
-        value: {
-          text: "ui_logo_image",
-          type: "file",
-          value: "",
-          condition: "logo.value == true",
-        }
-      }, {
-        key: "logoratio",
-        value: {
-          text: "ui_logo_ratio",
-          type: "slider",
-          value: 61.8,
-          condition: "logo.value == true",
-          fraction: true,
-          max: 100,
-          min: 0,
-          precision: 2,
-          step: 0.1,
-        }
-      }, {
-        key: "logoopacity",
-        value: {
-          text: "ui_logo_opacity",
-          type: "slider",
-          value: 30,
-          condition: "logo.value == true",
-          fraction: false,
-          max: 100,
-          min: 0,
-        }
-      }, {
         key: "defaultbackground",
         value: {
-          text: "ui_default_background",
-          type: "combo",
           value: this.#assets.backgrounds[0],
-          fraction: false,
-          max: 100,
-          min: 0,
           options: this.#assets.backgrounds.map((b) => {
             return {
               "label": b,
@@ -119,66 +73,44 @@ export default class ProjectJson {
             }
           })
         }
-      }, {
+      },
-        key: "background",
+      {
-        value: {
-          text: "ui_custom_background",
-          type: "file",
-          value: "",
-        }
-      }, {
-        key: "position",
-        value: {
-          text: "ui_position",
-          type: "bool",
-          value: false,
-        }
-      }, {
         key: "paddingleft",
         value: {
-          text: "ui_position_padding_left",
+          value: this.#config.operators[this.#operatorName].viewport_left
-          type: "slider",
+        },
-          value: this.#config.operators[this.#operatorName].viewport_left,
+      },
-          condition: "position.value == true",
+      {
-          fraction: false,
-          max: 100,
-          min: -100,
-        }
-      }, {
         key: "paddingright",
         value: {
-          text: "ui_position_padding_right",
+          value: this.#config.operators[this.#operatorName].viewport_right
-          type: "slider",
+        },
-          value: this.#config.operators[this.#operatorName].viewport_right,
+      },
-          condition: "position.value == true",
+      {
-          fraction: false,
-          max: 100,
-          min: -100,
-        }
-      }, {
         key: "paddingtop",
         value: {
-          text: "ui_position_padding_top",
+          value: this.#config.operators[this.#operatorName].viewport_top
-          type: "slider",
+        },
-          value: this.#config.operators[this.#operatorName].viewport_top,
+      },
-          condition: "position.value == true",
+      {
-          fraction: false,
-          max: 100,
-          min: -100,
-        }
-      }, {
         key: "paddingbottom",
         value: {
-          text: "ui_position_padding_bottom",
+          value: this.#config.operators[this.#operatorName].viewport_bottom
-          type: "slider",
+        },
-          value: this.#config.operators[this.#operatorName].viewport_bottom,
+      },
-          condition: "position.value == true",
-          fraction: false,
-          max: 100,
-          min: -100,
-        }
-      }
     ]
+    replacePropertyPairs.forEach((pair) => {
+      const property = template.properties.find((p) => p.key === pair.key)
+      property.value = {
+        ...property.value,
+        ...pair.value
+      }
+    })
+    return template
+  }
+
+  get #properties() {
+    const properties = this.#template.properties
     const output = {}
     for (let i = 0; i < properties.length; i++) {
       output[properties[i].key] = {