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

Clean the renderer.js and the search bar now match the theme

Browse Source
This commit is contained in:
GabiZar
2026-02-13 15:29:27 +01:00
parent acfc97a078
commit a7df0b0897
7 changed files with 216 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
main.js
View File

@@ -29,6 +29,7 @@ let bepinexVersion
let bepinexBackupVersion
let mainWindow
let htmlFile
async function createWindow() {
mainWindow = new BrowserWindow({
@@ -40,13 +41,13 @@ async function createWindow() {
})
if(await fileExists(dataPath)) {
htmlFile = "renderer/index.html"
htmlFile = "index.html"
}
else {
htmlFile = "renderer/welcome.html"
htmlFile = "welcome.html"
}
mainWindow.loadFile(htmlFile)
mainWindow.loadFile(`renderer/${htmlFile}`)
}
app.whenReady().then(() => {
@@ -386,7 +387,12 @@ ipcMain.handle('auto-detect-game-path', async () => {
})
ipcMain.handle('load-main-page', () => {
mainWindow.loadFile("renderer/index.html")
htmlFile = "index.html"
mainWindow.loadFile(`renderer/${htmlFile}`)
})
ipcMain.handle('get-page', () => {
return htmlFile
})
ipcMain.handle('open-link', async (event, link) => {

6
preload.js
View File

@@ -1,6 +1,9 @@
const { contextBridge, ipcRenderer } = require('electron')
const VERSION = "1.0.0"
contextBridge.exposeInMainWorld('versions', {
silkFlyLauncher: () => VERSION,
node: () => process.versions.node,
chrome: () => process.versions.chrome,
electron: () => process.versions.electron
@@ -25,7 +28,8 @@ contextBridge.exposeInMainWorld('files', {
contextBridge.exposeInMainWorld('electronAPI', {
openExternalLink: (url) => ipcRenderer.invoke('open-link', url),
launchGame: (mode) => ipcRenderer.invoke('launch-game', mode),
loadMainPage: () => ipcRenderer.invoke('load-main-page')
loadMainPage: () => ipcRenderer.invoke('load-main-page'),
getPage: () => ipcRenderer.invoke('get-page')
});
contextBridge.exposeInMainWorld('bepinex', {

32
renderer/index.html
View File

@@ -59,20 +59,24 @@
<!-- Template -->
<template id="home-template">
<h2>Silk Fly Launcher</h2>
<h3> Debugging data</h3>
<p id="version-text"></p>
</template>
<template id="installed-mods-template">
<p>List of installed mods.</p>
<h2>List Of Installed Mods</h2>
<form class="horizontal-div" id="search-form">
<input class="input" id="search-input" type="text" placeholder="Search For Mods...">
<button class="default-button" onclick="searchInstalledMods()">Search</button>
</form>
<div class="mods-container" id="mods-container">
</div>
</template>
<template id="online-mods-template">
<h2>List Of Mods</h2>
<div class="search-container">
<input type="text" placeholder="Search For Mods...">
<button class="search-button">🔍</button>
</div>
<h2>List Of Nexus Mods</h2>
<form class="horizontal-div" id="search-form">
<input class="input" id="search-input" type="text" placeholder="Search For Mods...">
<button class="default-button" onclick="searchNexusMods()">Search</button>
</form>
<div class="mods-container" id="mods-container">
</div>
</template>
@@ -145,6 +149,18 @@
<button class="default-button" onclick="exportData()">Export Data</button>
<button class="important-button" onclick="deleteData()">Delete All Data</button>
</div>
<br>
<h2>Debugging</h2>
<div class="horizontal-div">
<h3>Versions: </h3>
<ul id="versions-list">
<li id="Silk-Fly-Launcher"></li>
<li id="Electron"></li>
<li id="Node"></li>
<li id="Chrome"></li>
</ul>
<p id="version-text"></p>
</div>
</template>
<script src="renderer.js"></script>

195
renderer/renderer.js
View File

@@ -1,3 +1,4 @@
////////////////// CONST FOR INDEX ///////////////////
const title = document.getElementById("title");
const view = document.getElementById("view");
@@ -7,14 +8,40 @@ const onlineModsTemplate = document.getElementById("online-mods-template");
const settingsTemplate = document.getElementById("settings-template");
const modTemplate = document.getElementById("mod-template");
const versionText = HomeTemplate.content.getElementById("version-text");
//////////////////////////////////////////////////////
///////////////// CONST FOR WELCOME //////////////////
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");
//////////////////////////////////////////////////////
////////////////////// STARTUP ///////////////////////
on_startup()
async function on_startup() {
if (await electronAPI.getPage() == "index.html") {
changeTheme(await files.loadTheme())
navigate("home")
}
else if (await electronAPI.getPage() == "welcome.html") {
welcomeNavigate()
}
}
//////////////////////////////////////////////////////
///////////////////// NAVIGATE ///////////////////////
async function navigate(page) {
view.replaceChildren()
@@ -22,16 +49,18 @@ async function navigate(page) {
case "home":
title.innerText = "Home";
const HomeTemplateCopy = HomeTemplate.content.cloneNode(true)
const versionText = HomeTemplateCopy.getElementById("version-text")
versionText.innerText =
`Chrome version: (v${versions.chrome()}), ` +
`Node.js version: (v${versions.node()}), Electron version: (v${versions.electron()})`
view.appendChild(HomeTemplateCopy)
break;
case "mods-installed":
title.innerText = "Installed Mods";
const installedModsTemplateCopy = installedModsTemplate.content.cloneNode(true)
const searchFormInstalled = installedModsTemplateCopy.getElementById("search-form")
searchFormInstalled.addEventListener('submit', async function(event) {
event.preventDefault()
})
view.appendChild(installedModsTemplateCopy)
break;
@@ -39,6 +68,12 @@ async function navigate(page) {
title.innerText = "Online Mods";
const onlineModsTemplateCopy = onlineModsTemplate.content.cloneNode(true)
const ModsContainer = onlineModsTemplateCopy.getElementById("mods-container")
const searchFormNexus = onlineModsTemplateCopy.getElementById("search-form")
searchFormNexus.addEventListener('submit', async function(event) {
event.preventDefault()
})
view.appendChild(onlineModsTemplateCopy)
mods = await nexus.getLatestMods()
@@ -106,6 +141,13 @@ async function navigate(page) {
const settingsTemplateCopy = settingsTemplate.content.cloneNode(true)
const silksongPathInput = settingsTemplateCopy.getElementById("silksong-path-input")
const nexusAPIInput = settingsTemplateCopy.getElementById("nexus-api-input")
const versionsList = settingsTemplateCopy.getElementById("versions-list")
const versionsDictionnary = {
"Silk-Fly-Launcher": `Silk Fly Launcher: v${versions.silkFlyLauncher()}`,
"Electron": `Electron: v${versions.electron()}`,
"Node": `Node.js: v${versions.node()}`,
"Chrome": `Chrome: v${versions.chrome()}`,
}
silksongPathInput.value = await files.loadSilksongPath()
silksongPathInput.addEventListener('input', async function(event) {
@@ -119,6 +161,10 @@ async function navigate(page) {
files.saveNexusAPI(nexusAPI)
});
for(const element of versionsList.children) {
element.innerText = versionsDictionnary[element.id]
}
view.appendChild(settingsTemplateCopy)
setBepinexVersion()
setThemeButton()
@@ -127,17 +173,95 @@ async function navigate(page) {
}
}
async function launch(mode) {
alert(`Launching the game in ${mode} mode.`);
await electronAPI.launchGame(mode);
setBepinexVersion()
}
async function welcomeNavigate() {
pageDiv.replaceChildren()
switch (actualPage) {
case 0:
pageDiv.appendChild(welcomeTemplate.content.cloneNode(true))
buttonDiv.replaceChildren()
buttonDiv.appendChild(oneButtonTemplate.content.cloneNode(true))
break;
async function autoDetectGamePath() {
await files.autoDetectGamePath()
if (document.getElementById("silksong-path-input")) {
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++
welcomeNavigate()
}
function back() {
actualPage--
welcomeNavigate()
}
//////////////////////////////////////////////////////
/////////////////// DATA HANDLING ////////////////////
async function initialImportData() {
if (await files.import()) {
electronAPI.loadMainPage()
}
}
async function importData() {
await files.import()
document.getElementById("silksong-path-input").value = await files.loadSilksongPath()
document.getElementById("nexus-api-input").value = await files.loadNexusAPI()
setBepinexVersion()
changeTheme(await files.loadTheme())
toggleThemesMenu()
}
async function exportData() {
await files.export()
}
async function deleteData() {
@@ -146,19 +270,11 @@ async function deleteData() {
await files.delete()
document.getElementById("silksong-path-input").value = await files.loadSilksongPath()
document.getElementById("nexus-api-input").value = await files.loadNexusAPI()
setBepinexVersion()
}
async function exportData() {
await files.export()
}
async function importData() {
await files.import()
document.getElementById("silksong-path-input").value = await files.loadSilksongPath()
document.getElementById("nexus-api-input").value = await files.loadNexusAPI()
changeTheme(await files.loadTheme())
toggleThemesMenu()
}
//////////////////////////////////////////////////////
////////////////////// BEPINEX ///////////////////////
async function installBepinex() {
await bepinex.install()
@@ -201,6 +317,14 @@ async function setBepinexVersion() {
}
}
async function searchInstalledMods() {
const searchInput = document.getElementById("search-input")
console.log(searchInput.value)
}
//////////////////////////////////////////////////////
/////////////////////// NEXUS ////////////////////////
async function verifyNexusAPI() {
response = await nexus.verifyAPI()
@@ -217,6 +341,14 @@ async function verifyNexusAPI() {
}
}
async function searchNexusMods() {
const searchInput = document.getElementById("search-input")
console.log(searchInput.value)
}
//////////////////////////////////////////////////////
/////////////////////// THEMES ///////////////////////
function toggleThemesMenu() {
const themesMenu = document.getElementById("themes-menu")
if (themesMenu) {
@@ -255,3 +387,18 @@ function changeTheme(theme) {
toggleThemesMenu()
}
//////////////////////////////////////////////////////
//////////////////// UNCATEGORIZE ////////////////////
async function launch(mode) {
await electronAPI.launchGame(mode);
setBepinexVersion()
}
async function autoDetectGamePath() {
await files.autoDetectGamePath()
if (document.getElementById("silksong-path-input")) {
document.getElementById("silksong-path-input").value = await files.loadSilksongPath()
}
}

35
renderer/style.css
View File

@@ -214,41 +214,6 @@ body {
width: 240px;
}
.search-container {
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.search-container input {
width: 700px;
height: 30px;
padding: 10px 15px;
border: none;
border-radius: 50px;
background-color: rgba(255, 255, 255, 0.15);
color: var(--text-color);
outline: none;
transition: background 0.3s, width 0.3s;
}
.search-container input:focus {
background-color: rgba(255, 255, 255, 0.25);
width: 800px;
}
.search-button {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-color);
font-size: 18px;
cursor: pointer;
}
.mods-container {
height: 80%;
transform: translateY(50px);

11
renderer/welcome.html
View File

@@ -12,11 +12,8 @@
<div class="welcome-div" id="main-div">
<br>
<div id="page">
</div>
<div class="button-div" id="button-div">
</div>
<div id="page"></div>
<div class="button-div" id="button-div"></div>
</div>
</div>
@@ -25,7 +22,7 @@
</template>
<template id="one-button-template">
<button class="default-button bigger-button" onclick="importData()">Import Data</button>
<button class="default-button bigger-button" onclick="initialImportData()">Import Data</button>
<button class="default-button bigger-button" onclick="next()">Next →</button>
</template>
@@ -78,6 +75,6 @@
<h1 class="title">Tutorial to download mod from nexus</h1>
</template>
<script src="welcome.js"></script>
<script src="renderer.js"></script>
</body>
</html>

151
renderer/welcome.js
View File

@@ -1,151 +0,0 @@
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()
}
}
function toggleThemesMenu() {
const themesMenu = document.getElementById("themes-menu")
if (themesMenu) {
themesMenu.classList.toggle("show")
}
}
async function setThemeButton() {
const themesButton = document.getElementById("themes-button")
if (themesButton) {
themesButton.textContent = await files.loadTheme()
}
}
function changeTheme(theme) {
files.saveTheme(theme)
setThemeButton()
const themesColors = {
"var": ["--primary-color", "--secondary-color", "--background-color"],
"Silksong": ["rgba(255, 25, 0, 0.3)", "#ff6b6b", "rgba(255, 72, 0, 0.2)"],
"Citadel of song": ["rgba(160, 116, 89, 0.3)", "#d3ba91", "rgba(123, 102, 93, 0.2)"],
"Cradle": ["rgba(123, 136, 255, 0.3)", "#7c9fea", "rgba(61, 88, 150, 0.2)"],
"Abyss": ["rgba(255, 255, 255, 0.3)", "#ececec", "rgba(255, 255, 255, 0.2)"],
"Greyroot": ["rgba(181, 255, 180, 0.3)", "#c1ffcd", "rgba(90, 165, 130, 0.2)"],
"Surface": ["rgba(75, 120, 255, 0.3)", "#87c3ff", "rgba(42, 107, 203, 0.2)"],
"Steel": ["rgba(164, 164, 164, 0.3)", "#c5b9b9", "rgba(255, 255, 255, 0.2)"]
}
for(let i = 0; i < 3; i++) {
document.documentElement.style.setProperty(themesColors.var[i], themesColors[theme][i])
}
const backgroundVideo = document.getElementById("background-video")
backgroundVideo.src = `assets/background/${theme}.mp4`
toggleThemesMenu()
}