diff --git a/main.js b/main.js
index ff917e7..45bec86 100644
--- a/main.js
+++ b/main.js
@@ -33,7 +33,9 @@ let sevenZipPath = path7za;
const Nexus = NexusModule.default;
let nexus;
let installedCachedModList;
+let installedTotalModsCount;
let onlineCachedModList;
+let onlineTotalModsCount;
const bepinexFiles = [".doorstop_version", "changelog.txt", "doorstop_config.ini", "winhttp.dll"];
let bepinexVersion;
@@ -438,12 +440,12 @@ ipcMain.handle("get-mods", async (event, type) => {
if (!installedCachedModList) {
await searchInstalledMods("");
}
- return installedCachedModList;
+ return { modsInfo: installedCachedModList, installedTotalCount: installedTotalModsCount };
} else if (type == "mods-online") {
if (!onlineCachedModList) {
await searchNexusMods("");
}
- return onlineCachedModList;
+ return { mods: onlineCachedModList, onlineTotalCount: onlineTotalModsCount };
}
});
@@ -603,7 +605,7 @@ async function searchNexusMods(keywords, offset = 0, count = 10, sortFilter = "d
}
}
- return data.mods.totalCount;
+ onlineTotalModsCount = data.mods.totalCount;
}
ipcMain.handle("search-installed-mods", async (event, keywords, offset, count, sortFilter, sortOrder) => {
@@ -629,7 +631,8 @@ async function searchInstalledMods(keywords, offset = 0, count = 10, sortFilter
modsInfoSorted = modsInfoFiltered.sort((a, b) => sortFactor * (a[sortFilter] - b[sortFilter]));
}
- installedCachedModList = modsInfoSorted;
+ installedTotalModsCount = modsInfoSorted.length;
+ installedCachedModList = modsInfoSorted.slice(offset, offset + count);
}
//////////////////////////////////////////////////////
diff --git a/renderer/index.html b/renderer/index.html
index afcbf2b..33d9128 100644
--- a/renderer/index.html
+++ b/renderer/index.html
@@ -110,6 +110,16 @@
+
+
+
+
+
+
+
+
+
+
@@ -133,6 +143,16 @@
+
+
+
+
+
+
+
+
+
+
diff --git a/renderer/renderer.js b/renderer/renderer.js
index d24650e..93bf632 100644
--- a/renderer/renderer.js
+++ b/renderer/renderer.js
@@ -11,12 +11,21 @@ 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";
+let onlineOffset = 0;
+let installedOffset = 0;
+let lastOnlineOffset = 0;
+let lastInstalledOffset = 0;
+let onlineModsCount = 10;
+let installedModsCount = 10;
+let onlineModsTotalCount;
+let installedModsTotalCount;
//////////////////////////////////////////////////////
///////////////// CONST FOR WELCOME //////////////////
@@ -87,7 +96,8 @@ async function navigate(page) {
toggleSelectedListButton("sort-menu", installedSortFilter);
setSortOrderButton();
- const modsInfo = await nexus.getMods(page);
+ const { modsInfo, installedTotalCount } = await nexus.getMods(page);
+ installedModsTotalCount = installedTotalCount;
if (modsInfo == []) {
break;
}
@@ -170,7 +180,8 @@ async function navigate(page) {
toggleSelectedListButton("sort-menu", onlineSortFilter);
setSortOrderButton();
- mods = await nexus.getMods(page);
+ const { mods, onlineTotalCount } = await nexus.getMods(page);
+ onlineModsTotalCount = onlineTotalCount;
if (mods == undefined) {
break;
}
@@ -435,7 +446,7 @@ async function setBepinexVersion() {
async function searchInstalledMods() {
const searchInput = document.getElementById("search-input");
searchValueInstalled = searchInput.value;
- await nexus.searchInstalled(searchValueInstalled, undefined, undefined, installedSortFilter, installedSortOrder);
+ await nexus.searchInstalled(searchValueInstalled, installedOffset, installedModsCount, installedSortFilter, installedSortOrder);
await navigate("refresh");
}
@@ -460,7 +471,7 @@ async function verifyNexusAPI() {
async function searchNexusMods() {
let searchInput = document.getElementById("search-input");
searchValueNexus = searchInput.value;
- await nexus.search(searchValueNexus, undefined, undefined, onlineSortFilter, onlineSortOrder);
+ await nexus.search(searchValueNexus, onlineOffset, onlineModsCount, onlineSortFilter, onlineSortOrder);
await navigate("refresh");
searchInput = document.getElementById("search-input");
searchInput.value = searchValueNexus;
@@ -493,7 +504,7 @@ async function resetNexusAPI() {
}
//////////////////////////////////////////////////////
-/////////////////////// THEMES ///////////////////////
+//////////////// THEMES / SORT / LIST ////////////////
function toggleThemesMenu() {
const themesMenu = document.getElementById("themes-menu");
@@ -557,38 +568,6 @@ function changeTheme(theme, state) {
backgroundVideo.src = backgroundVideoPath;
}
-//////////////////////////////////////////////////////
-//////////////////// 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();
- }
-}
-
-function showToast(message, type = "info", duration = 3000) {
- const toastDiv = document.getElementById("toast-div");
- const toast = document.createElement("p");
-
- toast.classList.add("toast", type);
- toast.innerText = message;
- toastDiv.appendChild(toast);
- toast.classList.add("show");
-
- setTimeout(() => {
- toast.classList.remove("show");
- toast.addEventListener("transitionend", () => toast.remove());
- }, duration);
-}
-
-electronAPI.onShowToast(showToast);
-
function toggleSortMenu() {
const sortMenu = document.getElementById("sort-menu");
if (sortMenu) {
@@ -596,6 +575,24 @@ function toggleSortMenu() {
}
}
+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";
+ }
+ }
+}
+
function changeSort(sortFilterParameter) {
toggleSortMenu();
toggleSelectedListButton("sort-menu", sortFilterParameter);
@@ -641,20 +638,70 @@ function toggleSelectedListButton(ListMenuId, buttonId) {
}
}
-function setSortOrderButton() {
- let sortOrder;
- if (oldPage == "mods-installed") {
- sortOrder = installedSortOrder;
- } else if (oldPage == "mods-online") {
- sortOrder = onlineSortOrder;
- }
+//////////////////////////////////////////////////////
+//////////////////// UNCATEGORIZE ////////////////////
- const sortOrderButton = document.getElementById("sort-order-image");
- if (sortOrderButton) {
- if (sortOrder == "ASC") {
- sortOrderButton.src = "assets/icons/sort-order-2.svg";
+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();
+ }
+}
+
+function showToast(message, type = "info", duration = 3000) {
+ const toastDiv = document.getElementById("toast-div");
+ const toast = document.createElement("p");
+
+ toast.classList.add("toast", type);
+ toast.innerText = message;
+ toastDiv.appendChild(toast);
+ toast.classList.add("show");
+
+ setTimeout(() => {
+ toast.classList.remove("show");
+ toast.addEventListener("transitionend", () => toast.remove());
+ }, duration);
+}
+
+electronAPI.onShowToast(showToast);
+
+function changeModsPage(offsetChange) {
+ if (oldPage == "mods-installed") {
+ if (offsetChange == "min") {
+ installedOffset = 0;
+ } else if (offsetChange == "max") {
+ installedOffset = installedModsTotalCount;
} else {
- sortOrderButton.src = "assets/icons/sort-order-1.svg";
+ installedOffset += installedModsCount * offsetChange;
+ installedOffset = clamp(installedOffset, 0, installedModsTotalCount);
+ }
+ installedOffset = Math.floor(installedOffset / 10) * 10;
+ if (lastInstalledOffset != installedOffset) {
+ lastInstalledOffset = installedOffset;
+ searchInstalledMods();
+ }
+ } else if (oldPage == "mods-online") {
+ if (offsetChange == "min") {
+ onlineOffset = 0;
+ } else if (offsetChange == "max") {
+ onlineOffset = onlineModsTotalCount;
+ } else {
+ onlineOffset += onlineModsCount * offsetChange;
+ onlineOffset = clamp(onlineOffset, 0, onlineModsTotalCount);
+ }
+ onlineOffset = Math.floor(onlineOffset / 10) * 10;
+ if (lastOnlineOffset != onlineOffset) {
+ lastOnlineOffset = onlineOffset;
+ searchNexusMods();
}
}
}
+
+function clamp(number, min, max) {
+ return Math.max(min, Math.min(number, max));
+}
diff --git a/renderer/style.css b/renderer/style.css
index 6a99a9f..40ae3c2 100644
--- a/renderer/style.css
+++ b/renderer/style.css
@@ -138,6 +138,8 @@ body {
}
.view {
+ display: flex;
+ flex-direction: column;
background: var(--darker-transparent-black);
border-radius: 12px;
padding: 40px;
@@ -242,10 +244,11 @@ body {
}
.mods-container {
- height: 70%;
- transform: translateY(50px);
- padding: 20px;
+ flex: 1;
overflow: auto;
+ margin-top: 20px;
+ margin-bottom: 20px;
+ padding-right: 10px;
}
.mod-container {