From a7df0b089783190687555684d58128081c8afe0c Mon Sep 17 00:00:00 2001 From: GabiZar Date: Fri, 13 Feb 2026 15:29:27 +0100 Subject: [PATCH] Clean the renderer.js and the search bar now match the theme --- main.js | 14 ++- preload.js | 6 +- renderer/index.html | 32 +++++-- renderer/renderer.js | 199 ++++++++++++++++++++++++++++++++++++------ renderer/style.css | 35 -------- renderer/welcome.html | 11 +-- renderer/welcome.js | 151 -------------------------------- 7 files changed, 216 insertions(+), 232 deletions(-) delete mode 100644 renderer/welcome.js diff --git a/main.js b/main.js index 46f9270..17f32c7 100644 --- a/main.js +++ b/main.js @@ -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) => { diff --git a/preload.js b/preload.js index 86667da..2daede6 100644 --- a/preload.js +++ b/preload.js @@ -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', { diff --git a/renderer/index.html b/renderer/index.html index 62effc7..6c8d38c 100644 --- a/renderer/index.html +++ b/renderer/index.html @@ -59,20 +59,24 @@ @@ -145,6 +149,18 @@ +
+

Debugging

+
+

Versions:

+ +

+
diff --git a/renderer/renderer.js b/renderer/renderer.js index 21c63e7..9867fd1 100644 --- a/renderer/renderer.js +++ b/renderer/renderer.js @@ -1,3 +1,4 @@ +////////////////// CONST FOR INDEX /////////////////// const title = document.getElementById("title"); const view = document.getElementById("view"); @@ -7,31 +8,59 @@ 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() { - changeTheme(await files.loadTheme()) - navigate("home") + 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() switch (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) { @@ -118,6 +160,10 @@ async function navigate(page) { let nexusAPI = nexusAPIInput.value files.saveNexusAPI(nexusAPI) }); + + for(const element of versionsList.children) { + element.innerText = versionsDictionnary[element.id] + } view.appendChild(settingsTemplateCopy) setBepinexVersion() @@ -127,38 +173,108 @@ 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; + + 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; + } } -async function autoDetectGamePath() { - await files.autoDetectGamePath() - if (document.getElementById("silksong-path-input")) { - document.getElementById("silksong-path-input").value = await files.loadSilksongPath() +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() { changeTheme("Silksong") toggleThemesMenu() 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) { @@ -254,4 +386,19 @@ function changeTheme(theme) { backgroundVideo.src = `assets/background/${theme}.mp4` 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() + } } \ No newline at end of file diff --git a/renderer/style.css b/renderer/style.css index a615bde..16ac1b9 100644 --- a/renderer/style.css +++ b/renderer/style.css @@ -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); diff --git a/renderer/welcome.html b/renderer/welcome.html index e31f174..70c95b3 100644 --- a/renderer/welcome.html +++ b/renderer/welcome.html @@ -12,11 +12,8 @@

-
-
- -
-
+
+
@@ -25,7 +22,7 @@ @@ -78,6 +75,6 @@

Tutorial to download mod from nexus

- + \ No newline at end of file diff --git a/renderer/welcome.js b/renderer/welcome.js deleted file mode 100644 index 4cf3731..0000000 --- a/renderer/welcome.js +++ /dev/null @@ -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() -} \ No newline at end of file