SekiDesu01/hytale-f2p
1
0
Fork 0
mirror of https://git.sanhost.net/sanasol/hytale-f2p synced 2026-02-26 09:21:48 -03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request 'added search bar in "my mods"' (#3) from amiay/hytale-f2p:develop into develop

Browse Source 
Reviewed-on: https://git.sanhost.net/sanasol/hytale-f2p/pulls/3
This commit is contained in:
amiay
2026-02-24 16:31:54 +00:00
parent 2f5820e850 db3b2fc966
commit 5170f453ea
2 changed files with 49 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
GUI/index.html
View File

@@ -663,7 +663,11 @@
<i class="fas fa-times"></i>
</button>
</div>
<div class="mods-modal-body">
<div class="mods-modal-body" style="padding-top: 0;">
<div class="mods-search-container" style="margin: 1.5rem; margin-bottom: 1rem;">
<i class="fas fa-search"></i>
<input type="text" id="myModsSearch" placeholder="Search installed mods..." class="mods-search" />
</div>
<div id="installedModsList" class="installed-mods-list">
</div>
</div>

48
GUI/js/mods.js
View File

@@ -49,6 +49,18 @@ function setupModsEventListeners() {
closeModalBtn.addEventListener('click', closeMyModsModal);
}
const myModsSearchInput = document.getElementById('myModsSearch');
if (myModsSearchInput) {
let myModsSearchTimeout;
myModsSearchInput.addEventListener('input', (e) => {
const query = e.target.value.toLowerCase().trim();
clearTimeout(myModsSearchTimeout);
myModsSearchTimeout = setTimeout(() => {
filterInstalledMods(query);
}, 300);
});
}
const modal = document.getElementById('myModsModal');
if (modal) {
modal.addEventListener('click', (e) => {
@@ -98,6 +110,10 @@ function openMyModsModal() {
const modal = document.getElementById('myModsModal');
if (modal) {
modal.classList.add('active');
const searchInput = document.getElementById('myModsSearch');
if (searchInput) {
searchInput.value = '';
}
loadInstalledMods();
}
}
@@ -106,6 +122,10 @@ function closeMyModsModal() {
const modal = document.getElementById('myModsModal');
if (modal) {
modal.classList.remove('active');
const searchInput = document.getElementById('myModsSearch');
if (searchInput) {
searchInput.value = '';
}
}
}
@@ -127,19 +147,39 @@ async function loadInstalledMods() {
}
}
function filterInstalledMods(query) {
if (!query || query === '') {
displayInstalledMods(installedMods);
return;
}
const filtered = installedMods.filter(mod => {
const nameMatch = mod.name?.toLowerCase().includes(query);
const fileNameMatch = mod.fileName?.toLowerCase().includes(query);
const descriptionMatch = mod.description?.toLowerCase().includes(query);
const authorMatch = mod.author?.toLowerCase().includes(query);
return nameMatch || fileNameMatch || descriptionMatch || authorMatch;
});
displayInstalledMods(filtered);
}
function displayInstalledMods(mods) {
const modsContainer = document.getElementById('installedModsList');
if (!modsContainer) return;
if (mods.length === 0) {
const searchInput = document.getElementById('myModsSearch');
const isSearching = searchInput && searchInput.value.trim() !== '';
modsContainer.innerHTML = `
<div class=\"empty-installed-mods\">
<i class=\"fas fa-box-open\"></i>
<h4 data-i18n="mods.noModsInstalled">No Mods Installed</h4>
<p data-i18n="mods.noModsInstalledDesc">Add mods from CurseForge or import local files</p>
<i class=\"fas fa-${isSearching ? 'search' : 'box-open'}\"></i>
<h4 data-i18n="${isSearching ? 'mods.noModsFound' : 'mods.noModsInstalled'}">${isSearching ? 'No Mods Found' : 'No Mods Installed'}</h4>
<p data-i18n="${isSearching ? 'mods.noModsFoundDesc' : 'mods.noModsInstalledDesc'}">${isSearching ? 'Try a different search term' : 'Add mods from CurseForge or import local files'}</p>
</div>
`;
if (window.i18n) {
if (window.i18n && !isSearching) {
const container = modsContainer.querySelector('.empty-installed-mods');
container.querySelector('h4').textContent = window.i18n.t('mods.noModsInstalled');
container.querySelector('p').textContent = window.i18n.t('mods.noModsInstalledDesc');