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 sorting for Nexus Mods search results and installed mods.

Browse Source 
Update list menu to highlight the selected item.
This commit is contained in:
GabiZar
2026-02-21 13:28:29 +01:00
parent 492227f6cb
commit 729d51044d
8 changed files with 346 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

140
main.js
View File

@@ -13,6 +13,7 @@ const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const gotTheLock = app.requestSingleInstanceLock();
const isDev = !app.isPackaged;
const VERSION = "1.0.0";
const store = new Store();
const bepinexStore = new Store({ cwd: "bepinex-version" });
@@ -27,8 +28,8 @@ const Nexus = NexusModule.default;
let nexusAPI = store.get("nexus-api");
let nexus = undefined;
createNexus();
let cachedModList = undefined;
let query = "";
let installedCachedModList = undefined;
let onlineCachedModList = undefined;
let bepinexFolderPath = `${silksongPath}/BepInEx`;
let bepinexBackupPath = `${silksongPath}/BepInEx-Backup`;
@@ -188,29 +189,10 @@ async function saveModInfo(modId, suppr = false) {
return;
}
const modInfo = await nexus.getModInfo(modId);
installedModsStore.set(`${modId}.mod_id`, modInfo.mod_id);
installedModsStore.set(`${modId}.name`, modInfo.name);
installedModsStore.set(`${modId}.summary`, modInfo.summary);
installedModsStore.set(`${modId}.picture_url`, modInfo.picture_url);
installedModsStore.set(`${modId}.version`, modInfo.version);
installedModsStore.set(`${modId}.updated_time`, modInfo.updated_time);
installedModsStore.set(`${modId}.author`, modInfo.author);
const modInfo = onlineCachedModList.find((mod) => mod.modId == modId);
installedModsStore.set(String(modId), modInfo);
}
ipcMain.handle("load-installed-mods-info", () => {
let modsInfo = [];
for (const [key, modInfo] of Object.entries(installedModsStore.store)) {
modsInfo.push(modInfo);
}
modsInfo.sort((a, b) => a.name.localeCompare(b.name));
modsInfo = modsInfo.filter((mod) => mod.name.toLowerCase().includes(query.toLowerCase())).sort((a, b) => a.name.localeCompare(b.name));
return modsInfo;
});
//////////////////////////////////////////////////////
/////////////////// DATA HANDLING ////////////////////
@@ -286,7 +268,7 @@ async function installBepinex() {
const res = await fetch(GITHUB_URL, {
headers: {
"User-Agent": "SilkFlyLauncher/1.0.0",
"User-Agent": `SilkFlyLauncher/${VERSION}`,
Accept: "application/vnd.github+json",
},
});
@@ -377,7 +359,7 @@ async function createNexus() {
}
try {
nexus = await Nexus.create(nexusAPI, "silk-fly-launcher", "1.0.0", "hollowknightsilksong");
nexus = await Nexus.create(nexusAPI, "silk-fly-launcher", VERSION, "hollowknightsilksong");
} catch (error) {
console.log(error);
nexus = undefined;
@@ -397,16 +379,18 @@ async function verifyNexusAPI() {
}
}
ipcMain.handle("get-mods", async () => {
if (!cachedModList) {
if (!(await verifyNexusAPI())) {
mainWindow.webContents.send("showToast", "Unable to fetch mods.", "error");
return;
ipcMain.handle("get-mods", async (event, type) => {
if (type == "mods-installed") {
if (!installedCachedModList) {
await searchInstalledMods("");
}
cachedModList = await nexus.getLatestAdded();
return installedCachedModList;
} else if (type == "mods-online") {
if (!onlineCachedModList) {
await searchNexusMods("");
}
return onlineCachedModList;
}
return cachedModList;
});
ipcMain.handle("open-download", async (event, link) => {
@@ -462,13 +446,14 @@ async function startDownload(modId, fileId, key, expires) {
saveModInfo(modId);
mainWindow.webContents.send("showToast", "Mod downloaded successfully.");
installedCachedModList = undefined;
}
async function checkInstalledMods() {
for (const [key, modInfo] of Object.entries(installedModsStore.store)) {
if (!(await fileExists(`${modSavePath}/${modInfo.mod_id}`))) {
if (!(await fileExists(`${modSavePath}/${modInfo.modId}`))) {
saveModInfo(key, true);
await fs.rm(`${bepinexFolderPath}/plugins/${modInfo.mod_id}`, { recursive: true });
await fs.rm(`${bepinexFolderPath}/plugins/${modInfo.modId}`, { recursive: true });
}
}
}
@@ -482,21 +467,36 @@ ipcMain.handle("uninstall-mod", async (event, modId) => {
await fs.rm(modPath, { recursive: true });
}
for (let i = 0; i < installedCachedModList.length; i++) {
if (installedCachedModList[i].modId == modId) {
installedCachedModList.splice(i, 1);
}
}
saveModInfo(modId, true);
});
ipcMain.handle("search-nexus-mods", async (event, keywords) => {
const count = 10;
ipcMain.handle("search-nexus-mods", async (event, keywords, offset, count, sortFilter, sortOrder) => {
await searchNexusMods(keywords, offset, count, sortFilter, sortOrder);
});
async function searchNexusMods(keywords, offset = 0, count = 10, sortFilter = "downloads", sortOrder = "DESC") {
if (keywords.length == 1) {
mainWindow.webContents.send("showToast", "Your query must contain at least 2 characters.", "warning");
return;
}
const endpoint = "https://api.nexusmods.com/v2/graphql";
const client = new GraphQLClient(endpoint, {
headers: {
"User-Agent": `SilkFlyLauncher/${VERSION}`,
"Content-Type": "application/json",
},
});
const query = gql`
query Mods($filter: ModsFilter, $offset: Int, $count: Int) {
mods(filter: $filter, offset: $offset, count: $count) {
query Mods($filter: ModsFilter, $offset: Int, $count: Int, $sort: [ModsSort!]) {
mods(filter: $filter, offset: $offset, count: $count, sort: $sort) {
nodes {
author
endorsements
@@ -505,39 +505,67 @@ ipcMain.handle("search-nexus-mods", async (event, keywords) => {
pictureUrl
summary
updatedAt
createdAt
version
downloads
fileSize
}
totalCount
}
}
`;
const variables = {
let variables = {
filter: {
op: "AND",
gameDomainName: [{ value: "hollowknightsilksong" }],
name: [{ value: keywords, op: "WILDCARD" }],
},
offset: 0,
offset: offset,
count: count,
sort: [{ [sortFilter]: { direction: sortOrder } }],
};
if (!keywords) {
delete variables.filter.name;
}
const data = await client.request(query, variables);
for (let i = 0; i < data.mods.nodes.length; i++) {
data.mods.nodes[i].mod_id = data.mods.nodes[i].modId;
delete data.mods.nodes[i].modId;
data.mods.nodes[i].picture_url = data.mods.nodes[i].pictureUrl;
delete data.mods.nodes[i].pictureUrl;
data.mods.nodes[i].endorsement_count = data.mods.nodes[i].endorsements;
delete data.mods.nodes[i].endorsements;
data.mods.nodes[i].updated_time = data.mods.nodes[i].updatedAt;
delete data.mods.nodes[i].updatedAt;
onlineCachedModList = data.mods.nodes;
for (let i = 0; i < onlineCachedModList.length; i++) {
if (onlineCachedModList[i].modId == 26) {
onlineCachedModList.splice(i, 1);
}
}
cachedModList = data.mods.nodes;
return data.mods.totalCount;
}
ipcMain.handle("search-installed-mods", async (event, keywords, offset, count, sortFilter, sortOrder) => {
await searchInstalledMods(keywords, offset, count, sortFilter, sortOrder);
});
ipcMain.handle("search-installed-mods", async (event, keywords) => {
query = keywords;
});
async function searchInstalledMods(keywords, offset = 0, count = 10, sortFilter = "name", sortOrder = "ASC") {
let modsInfo = [];
for (const [key, modInfo] of Object.entries(installedModsStore.store)) {
modsInfo.push(modInfo);
}
const modsInfoFiltered = modsInfo.filter((mod) => mod.name.toLowerCase().includes(keywords.toLowerCase()));
const sortFactor = sortOrder == "ASC" ? 1 : -1;
let modsInfoSorted;
if (sortFilter == "name" || sortFilter == "createdAt" || sortFilter == "updatedAt") {
modsInfoSorted = modsInfoFiltered.sort((a, b) => sortFactor * a[sortFilter].localeCompare(b[sortFilter]));
} else if (sortFilter == "downloads" || sortFilter == "endorsements" || sortFilter == "size") {
if (sortFilter == "size") {
sortFilter = "fileSize";
}
modsInfoSorted = modsInfoFiltered.sort((a, b) => sortFactor * (a[sortFilter] - b[sortFilter]));
}
installedCachedModList = modsInfoSorted;
}
//////////////////////////////////////////////////////
//////////////////// UNCATEGORIZE ////////////////////
@@ -618,3 +646,7 @@ async function downloadAndUnzip(url, path) {
await extract(tempPath, { dir: path });
await fs.unlink(tempPath);
}
ipcMain.handle("get-version", () => {
return VERSION;
});

11
preload.js
View File

@@ -1,9 +1,7 @@
const { contextBridge, ipcRenderer } = require("electron");
const VERSION = "1.0.0";
contextBridge.exposeInMainWorld("versions", {
silkFlyLauncher: () => VERSION,
silkFlyLauncher: () => ipcRenderer.invoke("get-version"),
node: () => process.versions.node,
chromium: () => process.versions.chrome,
electron: () => process.versions.electron,
@@ -23,7 +21,6 @@ contextBridge.exposeInMainWorld("files", {
loadNexusAPI: () => ipcRenderer.invoke("load-nexus-api"),
saveTheme: (theme, lacePinState) => ipcRenderer.invoke("save-theme", theme, lacePinState),
loadTheme: () => ipcRenderer.invoke("load-theme"),
loadInstalledModsInfo: () => ipcRenderer.invoke("load-installed-mods-info"),
});
contextBridge.exposeInMainWorld("electronAPI", {
@@ -48,9 +45,9 @@ contextBridge.exposeInMainWorld("bepinex", {
contextBridge.exposeInMainWorld("nexus", {
verifyAPI: () => ipcRenderer.invoke("verify-nexus-api"),
getMods: () => ipcRenderer.invoke("get-mods"),
getMods: (type) => ipcRenderer.invoke("get-mods", type),
download: (link) => ipcRenderer.invoke("open-download", link),
uninstall: (modId) => ipcRenderer.invoke("uninstall-mod", modId),
search: (keywords) => ipcRenderer.invoke("search-nexus-mods", keywords),
searchInstalled: (keywords) => ipcRenderer.invoke("search-installed-mods", keywords),
search: (keywords, offset, count, sortFilter, sortOrder) => ipcRenderer.invoke("search-nexus-mods", keywords, offset, count, sortFilter, sortOrder),
searchInstalled: (keywords, offset, count, sortFilter, sortOrder) => ipcRenderer.invoke("search-installed-mods", keywords, offset, count, sortFilter, sortOrder),
});

11
renderer/assets/icons/sort-order-1.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg
role="img"
focusable="false"
aria-hidden="true"
viewBox="0 0 14 14"
xmlns="http://www.w3.org/2000/svg">
<path
d="M 5.75,4.5454543 C 5.75,4.6562497 5.71289,4.7521362 5.6386718,4.8331133 5.5644534,4.9140684 5.4765624,4.9545458 5.375,4.9545458 H 4.625 V 11.5 h -1.5 V 4.9545458 h -0.75 c -0.1015625,0 -0.1894532,-0.040477 -0.2636719,-0.1214325 C 2.0371098,4.7521364 2,4.6562497 2,4.5454543 2,4.434659 2.03711,4.3387842 2.1113281,4.2578297 l 1.5,-1.6363638 C 3.6855468,2.5404886 3.7734374,2.5 3.8749999,2.5 c 0.1015625,0 0.1894532,0.04049 0.2636719,0.1214659 l 1.5,1.6363638 C 5.7128911,4.3387838 5.75,4.434659 5.75,4.5454543 Z" />
<path
d="M 13,10.272727 C 13,10.125 12.95052,9.9971516 12.851562,9.8891821 12.752602,9.7812421 12.635417,9.7272721 12.5,9.7272721 h -1 V 1 h -2 v 8.7272721 h -1 c -0.1354167,0 -0.2526042,0.053969 -0.3515625,0.16191 C 8.0494797,9.9971513 8,10.125 8,10.272727 c 0,0.147728 0.04948,0.275561 0.1484375,0.3835 l 2.0000005,2.181819 C 10.247396,12.946015 10.364583,13 10.5,13 c 0.135417,0 0.252604,-0.05399 0.351562,-0.161954 l 2,-2.181819 C 12.950521,10.548288 13,10.420455 13,10.272727 Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

11
renderer/assets/icons/sort-order-2.svg Normal file
View File

@@ -0,0 +1,11 @@
<svg
role="img"
focusable="false"
aria-hidden="true"
viewBox="0 0 14 14"
xmlns="http://www.w3.org/2000/svg">
<path
d="M 6,3.7272726 C 6,3.8749998 5.9505205,4.0028484 5.8515624,4.1108179 5.7526046,4.2187579 5.6354166,4.2727279 5.5,4.2727279 H 4.4999999 V 13 H 2.5 V 4.2727279 h -1 c -0.1354167,0 -0.2526042,-0.053969 -0.3515625,-0.16191 C 1.0494797,4.0028487 1,3.8749998 1,3.7272726 1,3.5795455 1.0494795,3.4517124 1.1484375,3.3437731 l 2,-2.1818186 C 3.2473957,1.0539848 3.3645832,1 3.4999998,1 3.6354166,1 3.7526041,1.053986 3.8515624,1.1619545 l 2,2.1818186 C 5.9505213,3.4517119 6,3.5795455 6,3.7272726 Z" />
<path
d="M 12.5,9.4545452 C 12.5,9.34375 12.46289,9.2478637 12.388671,9.1668866 12.314452,9.0859316 12.226563,9.0454541 12.125,9.0454541 h -0.75 V 2.5 h -1.5 v 6.5454541 h -0.75 c -0.1015625,0 -0.1894531,0.040477 -0.2636719,0.1214325 C 8.7871098,9.2478635 8.75,9.34375 8.75,9.4545452 c 0,0.1107961 0.03711,0.2066708 0.1113281,0.287625 L 10.361329,11.378535 C 10.435547,11.459511 10.523437,11.5 10.625,11.5 c 0.101563,0 0.189453,-0.04049 0.263671,-0.121465 l 1.5,-1.6363647 C 12.462891,9.661216 12.5,9.5653413 12.5,9.4545452 Z" />
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

75
renderer/index.html
View File

@@ -91,19 +91,47 @@
<template id="installed-mods-template">
<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="horizontal-div">
<form class="horizontal-div search-form" 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="list-div">
<div class="default-button smaller-button" id="sort-button" onclick="toggleSortMenu()">Sort</div>
<div class="list-menu longer-button list-menu-inverted" id="sort-menu">
<li id="name" onclick="changeSort('name')">by name</li>
<li id="downloads" onclick="changeSort('downloads')">by downloads count</li>
<li id="endorsements" onclick="changeSort('endorsements')">by endorsements count</li>
<li id="createdAt" onclick="changeSort('createdAt')">by date of creation</li>
<li id="updatedAt" onclick="changeSort('updatedAt')">by date of updating</li>
<li id="size" onclick="changeSort('size')">by size</li>
</div>
</div>
<button class="default-button square-button" onclick="inverseSort()"><img class="icons invert-color" id="sort-order-image" src="assets/icons/sort-order-1.svg" /></button>
</div>
<div class="mods-container" id="mods-container"></div>
</template>
<template id="online-mods-template">
<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="horizontal-div">
<form class="horizontal-div search-form" 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="list-div">
<div class="default-button smaller-button" id="sort-button" onclick="toggleSortMenu()">Sort</div>
<div class="list-menu longer-button list-menu-inverted" id="sort-menu">
<li id="name" onclick="changeSort('name')">by name</li>
<li id="downloads" onclick="changeSort('downloads')">by downloads count</li>
<li id="endorsements" onclick="changeSort('endorsements')">by endorsements count</li>
<li id="createdAt" onclick="changeSort('createdAt')">by date of creation</li>
<li id="updatedAt" onclick="changeSort('updatedAt')">by date of updating</li>
<li id="size" onclick="changeSort('size')">by size</li>
</div>
</div>
<button class="default-button square-button" onclick="inverseSort()"><img class="icons invert-color" id="sort-order-image" src="assets/icons/sort-order-1.svg" /></button>
</div>
<div class="mods-container" id="mods-container"></div>
</template>
@@ -113,10 +141,12 @@
<div class="horizontal-div">
<h3 id="mod-title">Unknown Title</h3>
<p id="mod-author">Unknown author</p>
<p id="mod-endorsements-number">? likes</p>
<p id="mod-downloads-number">? download</p>
</div>
<p id="mod-description">No description provided</p>
<p id="mod-description" class="long-text">No description provided</p>
<p class="transparent-text" id="mod-version">V1.0.0 last update on 01/01/2026</p>
<br />
<div class="horizontal-div">
<a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="uninstall-mod-button">Uninstall</a>
<a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="external-link">Website</a>
@@ -134,10 +164,11 @@
<h3 id="mod-title">Unknown Title</h3>
<p id="mod-author">Unknown author</p>
<p id="mod-endorsements-number">? likes</p>
<p id="mod-downloads-number">? download</p>
</div>
<p id="mod-description">No description provided</p>
<p id="mod-description" class="long-text">No description provided</p>
<p class="transparent-text" id="mod-version">V1.0.0 last update on 01/01/2026</p>
<br />
<div class="horizontal-div">
<a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="download-mod-button">Download</a>
<a href="www.nexusmods.com/hollowknightsilksong/mods" class="default-button" id="external-link">Website</a>
@@ -155,18 +186,19 @@
<input type="text" class="input" id="silksong-path-input" name="silksong-path-input" />
<button class="default-button" onclick="autoDetectGamePath()">Auto Detect</button>
</div>
<br />
<div class="horizontal-div">
<label>Themes: </label>
<div class="themes-div">
<div class="list-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</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 class="list-menu longer-button" id="themes-menu">
<li id="Silksong" onclick="changeTheme('Silksong')">Silksong</li>
<li id="Citadel of song" onclick="changeTheme('Citadel of song')">Citadel of song</li>
<li id="Cradle" onclick="changeTheme('Cradle')">Cradle</li>
<li id="Abyss" onclick="changeTheme('Abyss')">Abyss</li>
<li id="Greyroot" onclick="changeTheme('Greyroot')">Greyroot</li>
<li id="Surface" onclick="changeTheme('Surface')">Surface</li>
<li id="Steel" onclick="changeTheme('Steel')">Steel</li>
</div>
</div>
<label class="lace-pin-checkbox-container">
@@ -178,6 +210,7 @@
<br />
<h2>BepInEx</h2>
<p class="transparent-text" id="bepinex-version-text"></p>
<br />
<div class="horizontal-div">
<button class="default-button" onclick="installBepinex()">Install</button>
<button class="important-button" onclick="uninstallBepinex()">Uninstall</button>

162
renderer/renderer.js
View File

@@ -11,6 +11,12 @@ const modTemplate = document.getElementById("mod-template");
let oldPage;
let actualTheme = [];
let searchValueNexus = "";
let searchValueInstalled = "";
let onlineSortFilter = "downloads";
let installedSortFilter = "name";
let onlineSortOrder = "DESC";
let installedSortOrder = "ASC";
//////////////////////////////////////////////////////
///////////////// CONST FOR WELCOME //////////////////
@@ -40,6 +46,7 @@ async function on_startup() {
changeTheme(theme[0], theme[1]);
navigate("home");
} else if ((await electronAPI.getPage()) == "welcome.html") {
changeTheme("Silksong");
welcomeNavigate();
}
}
@@ -69,14 +76,18 @@ async function navigate(page) {
const installedModsTemplateCopy = installedModsTemplate.content.cloneNode(true);
const installedModsContainer = installedModsTemplateCopy.getElementById("mods-container");
const searchFormInstalled = installedModsTemplateCopy.getElementById("search-form");
const searchInputInstalled = installedModsTemplateCopy.getElementById("search-input");
searchFormInstalled.addEventListener("submit", async function (event) {
event.preventDefault();
});
searchInputInstalled.value = searchValueInstalled;
view.appendChild(installedModsTemplateCopy);
toggleSelectedListButton("sort-menu", installedSortFilter);
setSortOrderButton();
const modsInfo = await files.loadInstalledModsInfo();
const modsInfo = await nexus.getMods(page);
if (modsInfo == []) {
break;
}
@@ -91,20 +102,36 @@ async function navigate(page) {
const modAuthorText = installedModTemplateCopy.getElementById("mod-author");
modAuthorText.innerText = `by ${modInfo.author}`;
}
if (modInfo.endorsements) {
const modEndorsementsNumber = installedModTemplateCopy.getElementById("mod-endorsements-number");
if (modInfo.endorsements > 1) {
modEndorsementsNumber.innerText = `${modInfo.endorsements} likes`;
} else {
modEndorsementsNumber.innerText = `${modInfo.endorsements} like`;
}
}
if (modInfo.downloads) {
const modDownloadsNumber = installedModTemplateCopy.getElementById("mod-downloads-number");
if (modInfo.downloads > 1) {
modDownloadsNumber.innerText = `${modInfo.downloads} downloads`;
} else {
modDownloadsNumber.innerText = `${modInfo.downloads} download`;
}
}
if (modInfo.summary) {
const modDescriptionText = installedModTemplateCopy.getElementById("mod-description");
modDescriptionText.innerText = modInfo.summary;
}
if (modInfo.picture_url) {
if (modInfo.pictureUrl) {
const modPicture = installedModTemplateCopy.getElementById("mod-icon");
modPicture.src = modInfo.picture_url;
modPicture.src = modInfo.pictureUrl;
}
if (modInfo.version && modInfo.updated_time) {
if (modInfo.version && modInfo.updatedAt) {
const modVersionText = installedModTemplateCopy.getElementById("mod-version");
modVersionText.innerText = `V${modInfo.version} last updated on ${modInfo.updated_time.slice(0, 10)}`;
modVersionText.innerText = `V${modInfo.version} last updated on ${modInfo.updatedAt.slice(0, 10)}`;
}
const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${modInfo.mod_id}`;
const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${modInfo.modId}`;
const modLinkButton = installedModTemplateCopy.getElementById("external-link");
modLinkButton.href = modUrl;
@@ -117,7 +144,7 @@ async function navigate(page) {
modDownloadButton = installedModTemplateCopy.getElementById("uninstall-mod-button");
modDownloadButton.addEventListener("click", async function (event) {
event.preventDefault();
await nexus.uninstall(modInfo.mod_id);
await nexus.uninstall(modInfo.modId);
navigate("refresh");
});
@@ -132,14 +159,18 @@ async function navigate(page) {
const onlineModsTemplateCopy = onlineModsTemplate.content.cloneNode(true);
const ModsContainer = onlineModsTemplateCopy.getElementById("mods-container");
const searchFormNexus = onlineModsTemplateCopy.getElementById("search-form");
const searchInputNexus = onlineModsTemplateCopy.getElementById("search-input");
searchFormNexus.addEventListener("submit", async function (event) {
event.preventDefault();
});
searchInputNexus.value = searchValueNexus;
view.appendChild(onlineModsTemplateCopy);
toggleSelectedListButton("sort-menu", onlineSortFilter);
setSortOrderButton();
mods = await nexus.getMods();
mods = await nexus.getMods(page);
if (mods == undefined) {
break;
}
@@ -156,28 +187,36 @@ async function navigate(page) {
const modAuthorText = modTemplateCopy.getElementById("mod-author");
modAuthorText.innerText = `by ${mod.author}`;
}
if (mod.endorsement_count) {
if (mod.endorsements) {
const modEndorsementsNumber = modTemplateCopy.getElementById("mod-endorsements-number");
if (mod.endorsement_count > 1) {
modEndorsementsNumber.innerText = `${mod.endorsement_count} likes`;
if (mod.endorsements > 1) {
modEndorsementsNumber.innerText = `${mod.endorsements} likes`;
} else {
modEndorsementsNumber.innerText = `${mod.endorsement_count} like`;
modEndorsementsNumber.innerText = `${mod.endorsements} like`;
}
}
if (mod.downloads) {
const modDownloadsNumber = modTemplateCopy.getElementById("mod-downloads-number");
if (mod.downloads > 1) {
modDownloadsNumber.innerText = `${mod.downloads} downloads`;
} else {
modDownloadsNumber.innerText = `${mod.downloads} download`;
}
}
if (mod.summary) {
const modDescriptionText = modTemplateCopy.getElementById("mod-description");
modDescriptionText.innerText = mod.summary;
}
if (mod.picture_url) {
if (mod.pictureUrl) {
const modPicture = modTemplateCopy.getElementById("mod-icon");
modPicture.src = mod.picture_url;
modPicture.src = mod.pictureUrl;
}
if (mod.version && mod.updated_time) {
if (mod.version && mod.updatedAt) {
const modVersionText = modTemplateCopy.getElementById("mod-version");
modVersionText.innerText = `V${mod.version} last updated on ${mod.updated_time.slice(0, 10)}`;
modVersionText.innerText = `V${mod.version} last updated on ${mod.updatedAt.slice(0, 10)}`;
}
const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${mod.mod_id}`;
const modUrl = `https://www.nexusmods.com/hollowknightsilksong/mods/${mod.modId}`;
const modLinkButton = modTemplateCopy.getElementById("external-link");
modLinkButton.href = modUrl;
@@ -205,7 +244,7 @@ async function navigate(page) {
const nexusAPIInput = settingsTemplateCopy.getElementById("nexus-api-input");
const versionsList = settingsTemplateCopy.getElementById("versions-list");
const versionsDictionnary = {
"Silk-Fly-Launcher": `Silk Fly Launcher: v${versions.silkFlyLauncher()}`,
"Silk-Fly-Launcher": `Silk Fly Launcher: v${await versions.silkFlyLauncher()}`,
Electron: `Electron: v${versions.electron()}`,
Node: `Node.js: v${versions.node()}`,
Chromium: `Chromium: v${versions.chromium()}`,
@@ -246,6 +285,7 @@ async function navigate(page) {
view.appendChild(settingsTemplateCopy);
setBepinexVersion();
setThemeButton();
toggleSelectedListButton("themes-menu", actualTheme[0]);
verifyNexusAPI();
break;
}
@@ -297,6 +337,7 @@ async function welcomeNavigate() {
case 3:
pageDiv.appendChild(styleTemplate.content.cloneNode(true));
toggleSelectedListButton("themes-menu", actualTheme[0]);
break;
case 4:
@@ -397,8 +438,9 @@ async function setBepinexVersion() {
async function searchInstalledMods() {
const searchInput = document.getElementById("search-input");
await nexus.searchInstalled(searchInput.value);
navigate("refresh");
searchValueInstalled = searchInput.value;
await nexus.searchInstalled(searchValueInstalled, undefined, undefined, installedSortFilter, installedSortOrder);
await navigate("refresh");
}
//////////////////////////////////////////////////////
@@ -420,9 +462,12 @@ async function verifyNexusAPI() {
}
async function searchNexusMods() {
const searchInput = document.getElementById("search-input");
await nexus.search(searchInput.value);
navigate("refresh");
let searchInput = document.getElementById("search-input");
searchValueNexus = searchInput.value;
await nexus.search(searchValueNexus, undefined, undefined, onlineSortFilter, onlineSortOrder);
await navigate("refresh");
searchInput = document.getElementById("search-input");
searchInput.value = searchValueNexus;
}
//////////////////////////////////////////////////////
@@ -445,6 +490,7 @@ async function setThemeButton() {
function changeTheme(theme, state) {
toggleThemesMenu();
toggleSelectedListButton("themes-menu", theme);
const lacePinCheckbox = document.getElementById("lace-pin");
if (lacePinCheckbox) {
@@ -520,3 +566,73 @@ function showToast(message, type = "info", duration = 3000) {
}
electronAPI.onShowToast(showToast);
function toggleSortMenu() {
const sortMenu = document.getElementById("sort-menu");
if (sortMenu) {
sortMenu.classList.toggle("show");
}
}
function changeSort(sortFilterParameter) {
toggleSortMenu();
toggleSelectedListButton("sort-menu", sortFilterParameter);
if (oldPage == "mods-installed") {
installedSortFilter = sortFilterParameter;
searchInstalledMods();
} else if (oldPage == "mods-online") {
onlineSortFilter = sortFilterParameter;
searchNexusMods();
}
}
function inverseSort() {
if (oldPage == "mods-installed") {
if (installedSortOrder == "ASC") {
installedSortOrder = "DESC";
} else {
installedSortOrder = "ASC";
}
searchInstalledMods();
} else if (oldPage == "mods-online") {
if (onlineSortOrder == "ASC") {
onlineSortOrder = "DESC";
} else {
onlineSortOrder = "ASC";
}
searchNexusMods();
}
}
function toggleSelectedListButton(ListMenuId, buttonId) {
const themesMenu = document.getElementById(ListMenuId);
if (themesMenu) {
Array.from(themesMenu.children).forEach((child) => {
child.classList.remove("selected");
});
}
const themesButton = document.getElementById(buttonId);
if (themesButton) {
themesButton.classList.toggle("selected");
}
}
function setSortOrderButton() {
let sortOrder;
if (oldPage == "mods-installed") {
sortOrder = installedSortOrder;
} else if (oldPage == "mods-online") {
sortOrder = onlineSortOrder;
}
const sortOrderButton = document.getElementById("sort-order-image");
if (sortOrderButton) {
if (sortOrder == "ASC") {
sortOrderButton.src = "assets/icons/sort-order-2.svg";
} else {
sortOrderButton.src = "assets/icons/sort-order-1.svg";
}
}
}

37
renderer/style.css
View File

@@ -152,7 +152,6 @@ body {
display: flex;
align-items: center;
gap: 20px;
margin-top: 8px;
}
.separated-div {
@@ -234,6 +233,14 @@ body {
width: 240px;
}
.smaller-button {
width: 60px;
}
.square-button {
width: 40px;
}
.mods-container {
height: 70%;
transform: translateY(50px);
@@ -302,32 +309,41 @@ body {
color: var(--secondary-color);
}
.themes-div {
.list-div {
position: relative;
}
.themes-menu {
.list-menu {
display: none;
position: absolute;
background: var(--darker-transparent-black);
border: 1px solid var(--secondary-color);
border-radius: 4px;
z-index: 10;
}
.themes-menu.show {
.list-menu-inverted {
transform: translateX(-75%);
}
.list-menu.show {
display: block;
}
.themes-menu li {
.list-menu li {
padding: 6px;
display: flex;
justify-content: center;
}
.themes-menu li:hover {
.list-menu li:hover {
background: var(--background-color);
}
.list-menu li.selected {
background: var(--primary-color);
}
.lace-pin-checkbox-container {
display: flex;
align-items: center;
@@ -419,3 +435,12 @@ body {
.toast.warning {
color: #ff9800;
}
.search-form {
display: flex;
flex: 1;
}
.long-text {
overflow-wrap: anywhere;
}

20
renderer/welcome.html
View File

@@ -55,7 +55,7 @@
<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" />
<img class="nexus-check-image" id="nexus-check-image" src="assets/icons/cross.svg" />
<button class="default-button" onclick="verifyNexusAPI()">Verify</button>
</div>
</template>
@@ -64,16 +64,16 @@
<h1 class="title">Chose the theme of the app</h1>
<div class="horizontal-div welcome-div">
<label>Themes: </label>
<div class="themes-div">
<div class="list-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</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 class="list-menu longer-button" id="themes-menu">
<li id="Silksong" onclick="changeTheme('Silksong')">Silksong</li>
<li id="Citadel of song" onclick="changeTheme('Citadel of song')">Citadel of song</li>
<li id="Cradle" onclick="changeTheme('Cradle')">Cradle</li>
<li id="Abyss" onclick="changeTheme('Abyss')">Abyss</li>
<li id="Greyroot" onclick="changeTheme('Greyroot')">Greyroot</li>
<li id="Surface" onclick="changeTheme('Surface')">Surface</li>
<li id="Steel" onclick="changeTheme('Steel')">Steel</li>
</div>
</div>
</div>