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

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) => {

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', {

renderer/index.html

@@ -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>
+        <h2>List Of Nexus Mods</h2>
-        <div class="search-container">
+        <form class="horizontal-div" id="search-form">
-            <input type="text" placeholder="Search For Mods...">
+            <input class="input" id="search-input" type="text" placeholder="Search For Mods...">
-            <button class="search-button">🔍</button>
+            <button class="default-button" onclick="searchNexusMods()">Search</button>
-        </div>
+        </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>

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() {
+    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) {
@@ -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) {
+async function welcomeNavigate() {
-    alert(`Launching the game in ${mode} mode.`);
+    pageDiv.replaceChildren()
-    await electronAPI.launchGame(mode);
+    switch (actualPage) {
-    setBepinexVersion()
+        case 0:
-}
+            pageDiv.appendChild(welcomeTemplate.content.cloneNode(true))
+            buttonDiv.replaceChildren()
+            buttonDiv.appendChild(oneButtonTemplate.content.cloneNode(true))
+            break;
 
-async function autoDetectGamePath() {
+        case 1:
-    await files.autoDetectGamePath()
+            pageDiv.appendChild(silksongPathTemplate.content.cloneNode(true))
-    if (document.getElementById("silksong-path-input")) {
+            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()
+////////////////////// BEPINEX ///////////////////////
-}
-
-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()
-}
 
 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()
+    }
+}

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);

renderer/welcome.html

@@ -12,11 +12,8 @@
 
         <div class="welcome-div" id="main-div">
             <br>
-            <div id="page">
+            <div id="page"></div>
-            </div>
+            <div class="button-div" id="button-div"></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>

renderer/welcome.js

@@ -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()
-}