improve config panel and file saving/export/delete

This commit is contained in:
2026-01-16 23:50:27 +01:00
parent b69a0c1b2d
commit 0b5ee51ebd
5 changed files with 74 additions and 11 deletions

View File

@@ -82,10 +82,17 @@
<template id="settings-template">
<h2>General settings</h2>
<div class="silksong-path-div">
<div class="horizontal-div">
<label for="silksong-path-label">Enter Silksong path: </label>
<input type="text" class="silksong-path-input" id="silksong-path-input" name="silksong-path-input">
<button class="default-button" onclick="autoDetectGamePath()">Auto Dectect</button>
<button class="default-button" onclick="autoDetectGamePath()">Auto Detect</button>
</div>
<br>
<h2>Import/Export</h2>
<div class="horizontal-div">
<button class="default-button" onclick="importData()">Import Data</button>
<button class="default-button" onclick="exportData()">Export Data</button>
<button class="important-button" onclick="deleteData()">Delete All Data</button>
</div>
</template>

View File

@@ -10,9 +10,10 @@ const versionText = HomeTemplate.content.getElementById("version-text")
navigate("home")
let savePath
files.userSavePath().then(path => {
path = `${path}\\config.json`
files.fileExists(path).then(result => {
savePath = `${path}\\config.json`
files.fileExists(savePath).then(result => {
if(!result) {
autoDetectGamePath()
}
@@ -69,4 +70,12 @@ async function autoDetectGamePath() {
document.getElementById("silksong-path-input").value = await save.loadSilksongPath()
}
}
}
async function deleteData() {
await files.delete(savePath)
}
async function exportData() {
await files.export()
}

View File

@@ -135,7 +135,7 @@ input[type="range"] {
width: 100%;
}
.silksong-path-div {
.horizontal-div {
display: flex;
align-items: center;
gap: 20px;
@@ -166,19 +166,43 @@ input[type="range"] {
}
.default-button {
width: 40px;
width: 120px;
height: 40px;
padding: 2px;
background: rgba(0, 0, 0, 0.4);
border: 1px solid #ff6b6b;
border-radius: 4px;
color: #eee;
cursor: pointer;
text-align: left;
font-size: 10px;
font-size: 16px;
transition: all 0.2s ease;
display: flex;
justify-content: center;
align-items: center;
}
.default-button:hover {
background: rgba(255, 72, 0, 0.2);
border-color: rgba(255, 25, 0, 0.3);
}
.important-button {
width: 120px;
height: 40px;
padding: 2px;
background: rgba(100, 0, 0, 0.4);
border: 1px solid rgba(200, 25, 0);
border-radius: 4px;
color: #eee;
cursor: pointer;
font-size: 16px;
transition: all 0.2s ease;
display: flex;
justify-content: center;
align-items: center;
}
.important-button:hover {
background: rgba(255, 0, 0, 0.4);
border-color: rgba(255, 25, 0, 0.8);
}