chizui/aklive2d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(background): add other in-game backgrouds (2/2)

Browse Source
This commit is contained in:
Haoyu Xu
2023-01-19 14:18:01 -05:00
parent 5669f78009
commit f18b5a6116
10 changed files with 199 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/settings.js
View File

@@ -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 {
</div>
</div>
<div>
<label for="background_image">Background Image (Store Locally)</label>
<input type="file" id="background_image"/>
<button type="button" disabled id="background_image_clear" disabled>Clear</button>
<div>
<label for="default_background_select">Choose a default background:</label>
<select name="default_backgrounds" id="default_background_select">
${JSON.parse(import.meta.env.VITE_BACKGROUND_FILES).map((b) => {
return `<option value="${b}">${b}</option>`
})}
</select>
</div>
<div>
<label for="custom_background"> Custom Background (Store Locally)</label>
<input type="file" id="custom_background"/>
<button type="button" disabled id="custom_background_clear" disabled>Clear</button>
</div>
</div>
<div>
<label for="position">Position</label>
@@ -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");