Add every background video and a checkbox to toggle the lace pin visibility

main.js

@@ -130,14 +130,15 @@ ipcMain.handle('load-nexus-api', () => {
 });
 
 
-ipcMain.handle('save-theme', (event, theme) => {
-    store.set('theme', theme);
+ipcMain.handle('save-theme', (event, theme, lacePinState) => {
+    store.set('theme.theme', theme);
+    store.set('theme.lacePinState', lacePinState);
 });
 
 ipcMain.handle('load-theme', () => {
-    theme = store.get('theme');
-    if (theme == undefined)  {
-        return "Silksong";
+    theme = [store.get('theme.theme'), store.get('theme.lacePinState')];
+    if (theme[0] == undefined)  {
+        return ["Silksong", false];
     }
     return theme;
 });

preload.js

@@ -21,7 +21,7 @@ contextBridge.exposeInMainWorld('files', {
     loadBepinexBackupVersion: () => ipcRenderer.invoke('load-bepinex-backup-version'),
     saveNexusAPI: (api) => ipcRenderer.invoke('save-nexus-api', api),
     loadNexusAPI: () => ipcRenderer.invoke('load-nexus-api'),
-    saveTheme: (theme) => ipcRenderer.invoke('save-theme', theme),
+    saveTheme: (theme, lacePinState) => ipcRenderer.invoke('save-theme', theme, lacePinState),
     loadTheme: () => ipcRenderer.invoke('load-theme')
 });
 

renderer/index.html

@@ -126,24 +126,29 @@
     <template id="settings-template">
         <h2>General settings</h2>
         <div class="horizontal-div">
-            <label for="silksong-path-label">Enter Silksong path: </label>
+            <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>
         <div class="horizontal-div">
-            <label for="silksong-path-label">Themes: </label>
+            <label>Themes: </label>
             <div class="themes-div">
                 <div class="default-button longer-button" id="themes-button" onclick="toggleThemesMenu()">Silksong</div>
                 <div class="themes-menu longer-button" id="themes-menu">
                     <li onclick="changeTheme('Silksong')">Silksong</li>
-                    <li onclick="changeTheme('Citadel of song')">Citadel of song (WIP)</li>
-                    <li onclick="changeTheme('Cradle')">Cradle (WIP)</li>
-                    <li onclick="changeTheme('Abyss')">Abyss (WIP)</li>
-                    <li onclick="changeTheme('Greyroot')">Greyroot (WIP)</li>
-                    <li onclick="changeTheme('Surface')">Surface (WIP)</li>
-                    <li onclick="changeTheme('Steel')">Steel (WIP)</li>
+                    <li onclick="changeTheme('Citadel of song')">Citadel of song</li>
+                    <li onclick="changeTheme('Cradle')">Cradle</li>
+                    <li onclick="changeTheme('Abyss')">Abyss</li>
+                    <li onclick="changeTheme('Greyroot')">Greyroot</li>
+                    <li onclick="changeTheme('Surface')">Surface</li>
+                    <li onclick="changeTheme('Steel')">Steel</li>
                 </div>
             </div>
+            <label class="lace-pin-checkbox-container">
+                <input type="checkbox" name="lace-pin" id="lace-pin" value="lace-pin-activate">
+                <span class="checkmark"></span>
+                Lace Pin
+            </label>
         </div>
         <br>
         <h2>BepInEx</h2>

renderer/renderer.js

@@ -8,7 +8,8 @@ const onlineModsTemplate = document.getElementById("online-mods-template");
 const settingsTemplate = document.getElementById("settings-template");
 const modTemplate = document.getElementById("mod-template");
 
-let old_page
+let oldPage
+let actualTheme = []
 
 //////////////////////////////////////////////////////
 ///////////////// CONST FOR WELCOME //////////////////
@@ -34,7 +35,8 @@ on_startup()
 
 async function on_startup() {
     if (await electronAPI.getPage() == "index.html") {
-        changeTheme(await files.loadTheme())
+        const theme = await files.loadTheme()
+        changeTheme(theme[0], theme[1])
         navigate("home")
     }
     else if (await electronAPI.getPage() == "welcome.html") {
@@ -46,10 +48,10 @@ async function on_startup() {
 ///////////////////// NAVIGATE ///////////////////////
 
 async function navigate(page) {
-    if (old_page == page) {
+    if (oldPage == page) {
         return
     }
-    old_page = page
+    oldPage = page
 
     view.replaceChildren()
     switch (page) {
@@ -155,6 +157,7 @@ async function navigate(page) {
                 "Node": `Node.js: v${versions.node()}`,
                 "Chromium": `Chromium: v${versions.chromium()}`,
             }
+            const lacePinCheckbox = settingsTemplateCopy.getElementById('lace-pin');
 
             silksongPathInput.value = await files.loadSilksongPath()
             silksongPathInput.addEventListener('input', async function(event) {
@@ -172,6 +175,22 @@ async function navigate(page) {
                 element.innerText = versionsDictionnary[element.id]
             }
 
+            const theme = await files.loadTheme()
+            lacePinCheckbox.checked = theme[1]
+
+            lacePinCheckbox.addEventListener('change', async function() {
+                if (this.checked) {
+                    const theme = await files.loadTheme();
+                    changeTheme(theme[0], true);
+                    toggleThemesMenu()
+                }
+                else {
+                    const theme = await files.loadTheme();
+                    changeTheme(theme[0], false);
+                    toggleThemesMenu()
+                }
+            });
+
             view.appendChild(settingsTemplateCopy)
             setBepinexVersion()
             setThemeButton()
@@ -263,7 +282,10 @@ async function importData() {
     document.getElementById("silksong-path-input").value = await files.loadSilksongPath()
     document.getElementById("nexus-api-input").value = await files.loadNexusAPI()
     setBepinexVersion()
-    changeTheme(await files.loadTheme())
+    const lacePinCheckbox = document.getElementById('lace-pin')
+    const theme = await files.loadTheme()
+    lacePinCheckbox.checked = theme[1]
+    changeTheme(theme[0])
     toggleThemesMenu()
 }
 
@@ -272,6 +294,8 @@ async function exportData() {
 }
 
 async function deleteData() {
+    const lacePinCheckbox = document.getElementById('lace-pin')
+    lacePinCheckbox.checked = false
     changeTheme("Silksong")
     toggleThemesMenu()
     await files.delete()
@@ -366,12 +390,31 @@ function toggleThemesMenu() {
 async function setThemeButton() {
     const themesButton = document.getElementById("themes-button")
     if (themesButton) {
-        themesButton.textContent = await files.loadTheme()
+        const theme = await files.loadTheme()
+        themesButton.textContent = theme[0]
     }
 }
 
-function changeTheme(theme) {
-    files.saveTheme(theme)
+function changeTheme(theme, state) {
+    toggleThemesMenu()
+
+    const lacePinCheckbox = document.getElementById('lace-pin');
+    if (lacePinCheckbox) {
+        lacePinState = lacePinCheckbox.checked;
+    }
+    else if (state) {
+        lacePinState = state
+    }
+    else {
+        lacePinState = false
+    }
+
+    if (actualTheme[0] == theme && actualTheme[1] == lacePinState) {
+        return
+    }
+    actualTheme = [theme, lacePinState]
+
+    files.saveTheme(theme, lacePinState)
 
     setThemeButton()
 
@@ -390,9 +433,12 @@ function changeTheme(theme) {
     }
 
     const backgroundVideo = document.getElementById("background-video")
-    backgroundVideo.src = `assets/background/${theme}.mp4`
-
-    toggleThemesMenu()
+    let backgroundVideoPath = `assets/background/${theme}.mp4`
+    if (lacePinState) {
+        backgroundVideoPath = `assets/background/${theme} Lace Pin.mp4`
+    }
+    
+    backgroundVideo.src = backgroundVideoPath
 }
 
 //////////////////////////////////////////////////////

renderer/style.css

@@ -316,4 +316,59 @@ body {
 
 .themes-menu li:hover {
     background: var(--background-color);
+}
+
+.lace-pin-checkbox-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    padding-left: 36px;
+    color: var(--text-color);
+    user-select: none;
+}
+
+.lace-pin-checkbox-container input {
+    opacity: 0;
+    height: 0;
+    width: 0;
+}
+
+.lace-pin-checkbox-container .checkmark {
+    position: absolute;
+    left: 0;
+    height: 30px;
+    width: 30px;
+    background: var(--transparent-black);
+    border: 1px solid var(--secondary-color);
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.lace-pin-checkbox-container:hover .checkmark {
+    background: var(--darker-transparent-black);
+    border-color: var(--primary-color);
+}
+
+.lace-pin-checkbox-container input:checked ~ .checkmark {
+    background: var(--primary-color);
+    border-color: var(--primary-color);
+}
+
+.lace-pin-checkbox-container .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+}
+
+.lace-pin-checkbox-container input:checked ~ .checkmark:after {
+    display: block;
+}
+
+.lace-pin-checkbox-container .checkmark:after {
+    left: 8px;
+    width: 10px;
+    height: 20px;
+    border: solid var(--text-color);
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
 }

renderer/welcome.html

@@ -39,7 +39,7 @@
         <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>
+            <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>
@@ -59,17 +59,17 @@
     <template id="style-template">
         <h1 class="title">Chose the theme of the app</h1>
         <div class="horizontal-div welcome-div">
-            <label for="silksong-path-label">Themes: </label>
+            <label>Themes: </label>
             <div class="themes-div">
                 <div class="default-button longer-button" id="themes-button" onclick="toggleThemesMenu()">Silksong</div>
                 <div class="themes-menu longer-button" id="themes-menu">
                     <li onclick="changeTheme('Silksong')">Silksong</li>
-                    <li onclick="changeTheme('Citadel of song')">Citadel of song (WIP)</li>
-                    <li onclick="changeTheme('Cradle')">Cradle (WIP)</li>
-                    <li onclick="changeTheme('Abyss')">Abyss (WIP)</li>
-                    <li onclick="changeTheme('Greyroot')">Greyroot (WIP)</li>
-                    <li onclick="changeTheme('Surface')">Surface (WIP)</li>
-                    <li onclick="changeTheme('Steel')">Steel (WIP)</li>
+                    <li onclick="changeTheme('Citadel of song')">Citadel of song</li>
+                    <li onclick="changeTheme('Cradle')">Cradle</li>
+                    <li onclick="changeTheme('Abyss')">Abyss</li>
+                    <li onclick="changeTheme('Greyroot')">Greyroot</li>
+                    <li onclick="changeTheme('Surface')">Surface</li>
+                    <li onclick="changeTheme('Steel')">Steel</li>
                 </div>
             </div>
         </div>