GabiZar/Silk-Fly-Launcher
1
0
Fork 0
mirror of https://github.com/Gabi-Zar/Silk-Fly-Launcher.git synced 2026-04-17 05:26:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add welcome page and clean a bit

Browse Source
This commit is contained in:
GabiZar
2026-02-09 21:56:34 +01:00
parent f68fd0ac3a
commit 585e50f123
8 changed files with 276 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
renderer/index.html
View File

@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="fr">
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Silk Fly Launcher</title>
@@ -55,6 +55,7 @@
<h1 id="title">Home</h1>
<div class="view" id="view">
</div>
</main>
</div>
<!-- Template -->

32
renderer/renderer.js
View File

@@ -11,16 +11,6 @@ const versionText = HomeTemplate.content.getElementById("version-text");
navigate("home")
let savePath
files.userSavePath().then(path => {
savePath = `${path}\\config.json`
files.fileExists(savePath).then(result => {
if(!result) {
autoDetectGamePath()
}
});
});
async function navigate(page) {
view.replaceChildren()
switch (page) {
@@ -138,27 +128,16 @@ async function launch(mode) {
}
async function autoDetectGamePath() {
const defaultsSilksongPaths = [
":/Program Files (x86)/Steam/steamapps/common/Hollow Knight Silksong",
":/SteamLibrary/steamapps/common/Hollow Knight Silksong"
]
for (const path of defaultsSilksongPaths) {
for (let i = 'A'.charCodeAt(0); i <= 'Z'.charCodeAt(0); i++) {
const fullPath = `${String.fromCharCode(i)}${path}`
if (await files.fileExists(fullPath)) {
await files.saveSilksongPath(fullPath)
if (document.getElementById("silksong-path-input")) {
document.getElementById("silksong-path-input").value = await files.loadSilksongPath()
}
return
}
}
await files.autoDetectGamePath()
if (document.getElementById("silksong-path-input")) {
document.getElementById("silksong-path-input").value = await files.loadSilksongPath()
}
}
async function deleteData() {
await files.delete(savePath)
await files.delete()
document.getElementById("silksong-path-input").value = await files.loadSilksongPath()
document.getElementById("nexus-api-input").value = await files.loadNexusAPI()
}
async function exportData() {
@@ -168,6 +147,7 @@ async function exportData() {
async function importData() {
await files.import()
document.getElementById("silksong-path-input").value = await files.loadSilksongPath()
document.getElementById("nexus-api-input").value = await files.loadNexusAPI()
}
async function installBepinex() {

18
renderer/style.css
View File

@@ -104,6 +104,8 @@ body {
font-size: 28px;
margin-bottom: 20px;
color: #ffffff;
display: flex;
justify-content: center;
}
.content h2 {
@@ -199,6 +201,13 @@ body {
border-color: rgba(255, 25, 0, 0.8);
}
.bigger-button {
width: 240px;
height: 80px;
border-radius: 8px;
font-size: 32px;
}
.search-container {
position: absolute;
left: 50%;
@@ -304,4 +313,13 @@ body {
width: 32px;
height: 32px;
object-fit: cover;
}
.link {
color: #ffffff;
transition: all 0.2s ease;
}
.link:hover {
color: #ff6b6b;
}

25
renderer/welcome.css Normal file
View File

@@ -0,0 +1,25 @@
.welcome-div {
display: flex;
flex-direction: column;
height: 100%;
flex: 1;
padding: 0 60px;
}
.title {
display: flex;
flex: 1;
font-size: 60px;
margin-bottom: 60px;
color: #ffffff;
justify-content: center;
}
.button-div {
display: flex;
flex: 2;
align-items: center;
justify-content: space-between;
margin-top: 8px;
gap: 40px;
}

70
renderer/welcome.html Normal file
View File

@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Welcome to Silk Fly Launcher</title>
<link rel="stylesheet" href="welcome.css" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="app">
<video autoplay muted loop id="menu_wallpaper" class="background_video">
<source src="assets/background.mp4" type="video/mp4">
</video>
<div class="welcome-div" id="main-div">
<br>
<div id="page">
</div>
<div class="button-div" id="button-div">
</div>
</div>
</div>
<template id="welcome-template">
<h1 class="title">Welcome to Silk Fly Launcher</h1>
</template>
<template id="one-button-template">
<button class="default-button bigger-button" onclick="importData()">Import Data</button>
<button class="default-button bigger-button" onclick="next()">Next →</button>
</template>
<template id="two-button-template">
<button class="default-button bigger-button" onclick="back()">← Back</button>
<button class="default-button bigger-button" onclick="next()">Next →</button>
</template>
<template id="path-template">
<h1 class="title">Enter Hollow Knight: Silksong path</h1>
<p>Please verify the path to your game and edit it if the auto detection didn't work</p>
<div class="horizontal-div">
<label for="silksong-path-label">Enter Silksong path: </label>
<input type="text" class="input" id="silksong-path-input" name="silksong-path-input">
<button class="default-button" onclick="autoDetectGamePath()">Auto Detect</button>
</div>
</template>
<template id="nexus-template">
<h1 class="title">Enter your nexus API key</h1>
<p>Please enter your nexus API key. To get your API key go to <a href="https://www.nexusmods.com/settings/api-keys" class="link" id="external-link">https://www.nexusmods.com/settings/api-keys</a> and click on new personnal API key</p>
<div class="horizontal-div">
<label for="nexus-api-label">Enter your nexus api: </label>
<input type="text" class="input" id="nexus-api-input" name="nexus-api-input">
<img class="nexus-check-image" id="nexus-check-image" src="assets/cross.svg">
<button class="default-button" onclick="verifyNexusAPI()">Verify</button>
</div>
</template>
<template id="style-template">
<h1 class="title">Chose the theme of the app</h1>
</template>
<template id="tutorial-template">
<h1 class="title">Tutorial to download mod from nexus</h1>
</template>
<script src="welcome.js"></script>
</body>
</html>

112
renderer/welcome.js Normal file
View File

@@ -0,0 +1,112 @@
let actualPage = 0
const pageDiv = document.getElementById("page");
const buttonDiv = document.getElementById("button-div");
const oneButtonTemplate = document.getElementById("one-button-template");
const twoButtonTemplate = document.getElementById("two-button-template");
const welcomeTemplate = document.getElementById("welcome-template");
const silksongPathTemplate = document.getElementById("path-template");
const nexusTemplate = document.getElementById("nexus-template");
const styleTemplate = document.getElementById("style-template");
const tutorialTemplate = document.getElementById("tutorial-template");
navigate()
async function navigate() {
pageDiv.replaceChildren()
switch (actualPage) {
case 0:
pageDiv.appendChild(welcomeTemplate.content.cloneNode(true))
buttonDiv.replaceChildren()
buttonDiv.appendChild(oneButtonTemplate.content.cloneNode(true))
break;
case 1:
pageDiv.appendChild(silksongPathTemplate.content.cloneNode(true))
buttonDiv.replaceChildren()
buttonDiv.appendChild(twoButtonTemplate.content.cloneNode(true))
const silksongPathInput = document.getElementById("silksong-path-input")
if (await files.loadSilksongPath() == "") {
autoDetectGamePath()
}
else {
document.getElementById("silksong-path-input").value = await files.loadSilksongPath()
}
silksongPathInput.addEventListener('input', async function(event) {
let silksongPath = silksongPathInput.value
await files.saveSilksongPath(silksongPath)
});
break;
case 2:
pageDiv.appendChild(nexusTemplate.content.cloneNode(true))
const nexusLink = document.getElementById("external-link")
nexusLink.addEventListener('click', function(event) {
event.preventDefault()
const url = nexusLink.href
electronAPI.openExternalLink(url)
})
const nexusAPIInput = document.getElementById("nexus-api-input")
nexusAPIInput.value = await files.loadNexusAPI()
nexusAPIInput.addEventListener('input', async function(event) {
let nexusAPI = nexusAPIInput.value
await files.saveNexusAPI(nexusAPI)
});
break;
case 3:
pageDiv.appendChild(styleTemplate.content.cloneNode(true))
break;
case 4:
pageDiv.appendChild(tutorialTemplate.content.cloneNode(true))
break;
case 5:
electronAPI.loadMainPage()
break;
}
}
function next() {
actualPage++
navigate()
}
function back() {
actualPage--
navigate()
}
async function autoDetectGamePath() {
await files.autoDetectGamePath()
document.getElementById("silksong-path-input").value = await files.loadSilksongPath()
}
async function verifyNexusAPI() {
response = await nexus.verifyAPI()
const nexusCheckImage = document.getElementById("nexus-check-image")
if (nexusCheckImage == undefined) {
return
}
if (response) {
nexusCheckImage.src = "assets/check.svg"
}
else {
nexusCheckImage.src = "assets/cross.svg"
}
}
async function importData() {
const res = await files.import()
if (res) {
electronAPI.loadMainPage()
}
}