From f18b5a6116fa0972817291a9cce5b0b6f4d5b726 Mon Sep 17 00:00:00 2001 From: Haoyu Xu Date: Thu, 19 Jan 2023 14:18:01 -0500 Subject: [PATCH] feat(background): add other in-game backgrouds (2/2) --- .env | 9 +- Version | 2 +- index.html | 2 +- libs/background.js | 4 + libs/env_generator.js | 7 +- libs/exec.js | 2 +- libs/project_json.js | 155 +++++++++++++++++++++++++++++++---- runner.js | 16 +++- src/components/settings.js | 36 ++++++-- src/libs/wallpaper_engine.js | 5 ++ 10 files changed, 199 insertions(+), 39 deletions(-) diff --git a/.env b/.env index 0182e2a..099ac52 100644 --- a/.env +++ b/.env @@ -1,11 +1,12 @@ -VITE_TITLE="Arknights: Chongyue - 明日方舟：重岳" -VITE_FILENAME=dyn_illust_char_2024_chyue +VITE_TITLE="Arknights: It Does Wash the Strings / Ling - 明日方舟：濯缨 · 令" +VITE_FILENAME=dyn_illust_char_2023_ling_nian%239 VITE_LOGO_FILENAME=logo_sui -VITE_FALLBACK_FILENAME=char_2024_chyue_2 +VITE_FALLBACK_FILENAME=char_2023_ling_nian%239 VITE_VIEWPORT_LEFT=0 VITE_VIEWPORT_RIGHT=0 VITE_VIEWPORT_TOP=0 VITE_VIEWPORT_BOTTOM=0 VITE_INVERT_FILTER=true VITE_IMAGE_WIDTH=2048 -VITE_IMAGE_HEIGHT=2048 \ No newline at end of file +VITE_IMAGE_HEIGHT=2048 +VITE_BACKGROUND_FILES=["background/operator_bg.png","background/bg_anniversary_1.png","background/bg_iberia_1.png","background/bg_kazimierz_1.png","background/bg_main_victoria_1.png","background/bg_rhodes_day.png","background/bg_rhodes_night.png","background/bg_rogue_1.png","background/bg_siesta_1.png","background/bg_ursus_1.png","background/bg_yan_1.png"] \ No newline at end of file diff --git a/Version b/Version index 4a36342..fd2a018 100644 --- a/Version +++ b/Version @@ -1 +1 @@ -3.0.0 +3.1.0 diff --git a/index.html b/index.html index b206797..3915c9c 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@ aklive2d - +
diff --git a/libs/background.js b/libs/background.js index 2f4b98b..799913c 100644 --- a/libs/background.js +++ b/libs/background.js @@ -51,6 +51,10 @@ export default class Background { .toFile(path.join(this.#backgroundFolder, `${filenamePrefix}${fileExt}`)); } + get files() { + return this.#files.map(f => f.replace('_left', '')) + } + getFilesToCopy(publicAssetsDir) { return this.#files.map((f) => { return { diff --git a/libs/env_generator.js b/libs/env_generator.js index fe010f9..73a09e9 100644 --- a/libs/env_generator.js +++ b/libs/env_generator.js @@ -1,10 +1,10 @@ -import path from 'path' - export default class EnvGenerator { #config + #assets - constructor(config, operatorName) { + constructor(config, operatorName, assets) { this.#config = config.operators[operatorName] + this.#assets = assets } async generate() { @@ -25,6 +25,7 @@ export default class EnvGenerator { `VITE_INVERT_FILTER=${this.#config.invert_filter}`, `VITE_IMAGE_WIDTH=2048`, `VITE_IMAGE_HEIGHT=2048`, + `VITE_BACKGROUND_FILES=${JSON.stringify(this.#assets.backgrounds)}`, ].join('\n')) }) } diff --git a/libs/exec.js b/libs/exec.js index 54e087c..19dec14 100644 --- a/libs/exec.js +++ b/libs/exec.js @@ -4,7 +4,7 @@ import { createServer, build } from 'vite' export function buildAll(config) { for (const [key, _] of Object.entries(config.operators)) { if (key.startsWith('_')) break; - console.log(execSync(`node runner.js --build ${key}`).toString()); + console.log(execSync(`node runner.js build ${key}`).toString()); } } diff --git a/libs/project_json.js b/libs/project_json.js index 5efb601..d631dc6 100644 --- a/libs/project_json.js +++ b/libs/project_json.js @@ -8,12 +8,14 @@ export default class ProjectJson { #operatorName #operatorSourceFolder #operatorShareFolder + #assets - constructor(config, operatorName, __dirname, operatorShareFolder) { + constructor(config, operatorName, __dirname, operatorShareFolder, assets) { this.#config = config this.#operatorName = operatorName this.#operatorSourceFolder = path.join(__dirname, this.#config.folder.operator) this.#operatorShareFolder = operatorShareFolder + this.#assets = assets } async load() { @@ -47,25 +49,144 @@ export default class ProjectJson { ...this.#json.general, properties: { ...this.#json.general.properties, - paddingbottom: { - ...this.#json.general.properties.paddingbottom, - value: this.#config.operators[this.#operatorName].viewport_bottom - }, - paddingleft: { - ...this.#json.general.properties.paddingleft, - value: this.#config.operators[this.#operatorName].viewport_left - }, - paddingright: { - ...this.#json.general.properties.paddingright, - value: this.#config.operators[this.#operatorName].viewport_right - }, - paddingtop: { - ...this.#json.general.properties.paddingtop, - value: this.#config.operators[this.#operatorName].viewport_top - }, + ...this.#properties } }, } } + get #properties() { + const 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: this.#assets.backgrounds.map((b) => { + return { + "label": b, + "value": b + } + }) + } + }, { + 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: 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", + 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", + 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", + type: "slider", + value: this.#config.operators[this.#operatorName].viewport_bottom, + condition: "position.value == true", + fraction: false, + max: 100, + min: -100, + } + } + ] + const output = {} + for (let i = 0; i < properties.length; i++) { + output[properties[i].key] = { + index: i, + order: 100 + i, + ...properties[i].value + } + } + return output + } } \ No newline at end of file diff --git a/runner.js b/runner.js index 511fbd7..1e01241 100644 --- a/runner.js +++ b/runner.js @@ -65,7 +65,13 @@ async function main() { rmdir(OPERATOR_RELEASE_FOLDER) - const projectJson = new ProjectJson(config, OPERATOR_NAME, __dirname, OPERATOR_SHARE_FOLDER) + const backgrounds = ['operator_bg.png', ...background.files].map((f) => { + return `${config.folder.background}/${f}` + }) + + const projectJson = new ProjectJson(config, OPERATOR_NAME, __dirname, OPERATOR_SHARE_FOLDER, { + backgrounds + }) projectJson.load().then((content) => { write(JSON.stringify(content, null, 2), path.join(OPERATOR_RELEASE_FOLDER, 'project.json')) }) @@ -75,7 +81,9 @@ async function main() { write(JSON.stringify(content.assetsJson, null), path.join(OPERATOR_SOURCE_FOLDER, OPERATOR_NAME, `${config.operators[OPERATOR_NAME].filename}.json`)) }) - const envGenerator = new EnvGenerator(config, OPERATOR_NAME, __dirname) + const envGenerator = new EnvGenerator(config, OPERATOR_NAME, { + backgrounds + }) envGenerator.generate().then((content) => { write(content, path.join(__dirname, '.env')) }) @@ -89,8 +97,8 @@ async function main() { }, { filename: 'operator_bg.png', - source: path.join(OPERATOR_SOURCE_FOLDER, config.folder.background), - target: path.join(SHOWCASE_PUBLIC_FOLDER) + source: path.join(OPERATOR_SHARE_FOLDER, config.folder.background), + target: path.join(SHOWCASE_PUBLIC_ASSSETS_FOLDER, config.folder.background) }, { filename: `${config.operators[OPERATOR_NAME].logo}.png`, diff --git a/src/components/settings.js b/src/components/settings.js index 43fbcbb..2f13c8f 100644 --- a/src/components/settings.js +++ b/src/components/settings.js @@ -60,7 +60,6 @@ export default class Settings { setFPS(value) { this.#fps = value - console.log(typeof value) this.spinePlayer.setFps(value) } @@ -126,6 +125,14 @@ export default class Settings { document.body.style.backgroundImage = v } + setDefaultBackground(e) { + const backgroundURL = `url("${import.meta.env.BASE_URL}assets/${e}")` + if (document.getElementById("custom_background_clear").disabled && !document.body.style.backgroundImage.startsWith("url(\"file:")) { + this.setBackgoundImage(backgroundURL) + } + this.#defaultBackgroundImage = backgroundURL + } + setBackground(e) { this.#readFile( e, @@ -133,13 +140,14 @@ export default class Settings { const content = readerEvent.target.result; this.setBackgoundImage(`url("${content}")`) }, - () => document.getElementById("background_image_clear").disabled = false + () => document.getElementById("custom_background_clear").disabled = false ) } resetBackground() { this.setBackgoundImage(this.#defaultBackgroundImage) - document.getElementById("background_image_clear").disabled = true + document.getElementById("custom_background").value = "" + document.getElementById("custom_background_clear").disabled = true } positionPadding(key, value) { @@ -254,9 +262,19 @@ export default class Settings {
- - - +
+ + +
+
+ + + +
@@ -346,8 +364,10 @@ export default class Settings { _this.setLogoOpacity(e.currentTarget.value); }) - document.getElementById("background_image").addEventListener("change", e => _this.setBackground(e)) - document.getElementById("background_image_clear").addEventListener("click", e => _this.resetBackground()) + document.getElementById('default_background_select').addEventListener("change", e => _this.setDefaultBackground(e.currentTarget.value)) + + document.getElementById("custom_background").addEventListener("change", e => _this.setBackground(e)) + document.getElementById("custom_background_clear").addEventListener("click", e => _this.resetBackground()) document.getElementById("position").addEventListener("click", e => { _this.#showRelated(e.currentTarget, "position_realted"); diff --git a/src/libs/wallpaper_engine.js b/src/libs/wallpaper_engine.js index e0db929..1794b76 100644 --- a/src/libs/wallpaper_engine.js +++ b/src/libs/wallpaper_engine.js @@ -25,6 +25,11 @@ window.wallpaperPropertyListener = { window.settings.resetLogoImage() } } + if (properties.defaultbackground) { + if (properties.defaultbackground.value) { + window.settings.setDefaultBackground(properties.defaultbackground.value) + } + } if (properties.background) { if (properties.background.value) { window.settings.setBackgoundImage(`url('file:///${properties.background.value}`)