diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index eeb0d9aa..1c7d4c9d 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -1368,103 +1368,7 @@ input:checked + .toggleSwitchSlider:before { * Settings View (Mods Tab) * * */ -#settingsReqModsContent, -#settingsOptModsContent, -#settingsDropinModsContent { - font-size: 12px; - background: rgba(0, 0, 0, 0.25); - border-radius: 3px; - color: white; -} - -#settingsModsContainer { - width: 75%; -} - -.settingsModsHeader { - padding-bottom: 10px; - border-bottom: 1px solid rgba(255, 255, 255, 0.5); - margin-bottom: 10px; -} - -#settingsReqModsContainer, -#settingsOptModsContainer, -#settingsDropinModsContainer { - padding-bottom: 25px; -} - -.settingsMod, -.settingsDropinMod { - padding: 10px; -} - -.settingsSubMod { - padding: 10px 0px 10px 15px; - margin-left: 20px; - border-left: 1px solid rgba(255, 255, 255, 0.5); -} - -.settingsModStatus { - width: 7px; - height: 7px; - border-radius: 50%; - background-color: #c32625; - margin-right: 15px; - transition: 0.25s ease; -} - -.settingsModContent { - display: flex; - align-items: center; - justify-content: space-between; - transition: opacity 0.25s ease; -} - -.settingsModMainWrapper { - display: flex; - align-items: center; -} - -.settingsModVersion { - color: grey; - font-size: 10px; -} - -.settingsModDetails { - display: flex; - flex-direction: column; -} - -.toggleSwitch[reqmod] { - filter: grayscale(49%) brightness(60%); - pointer-events: none; -} - -.settingsBaseMod[enabled] > .settingsModContent > .settingsModMainWrapper > .settingsModStatus { - background-color: rgb(165, 195, 37); -} - -.settingsBaseMod:not([enabled]) > .settingsSubModContainer .settingsModContent { - opacity: 0.5; -} - -.settingsSubModContainer > .settingsSubMod:first-child { - border-top-left-radius: 10px; -} - -.settingsSubModContainer > .settingsSubMod:last-child { - border-bottom-left-radius: 10px; -} - -settingsSubModContainer > .settingsSubMod:only-child { - border-top-left-radius: 10px; - border-bottom-left-radius: 10px; -} - -.settingsSubModContainer { - margin-top: 10px; -} - +/* Selected server content container */ #settingsSelServContainer { background: rgba(0, 0, 0, 0.25); width: 75%; @@ -1474,6 +1378,7 @@ settingsSubModContainer > .settingsSubMod:only-child { margin: 15px 0px; } +/* Div which will be populated with the selected server's information. */ #settingsSelServContent { display: flex; align-items: center; @@ -1481,12 +1386,14 @@ settingsSubModContainer > .settingsSubMod:only-child { padding: 5px 0px; } +/* Wrapper container for the switch server button. */ #settingsSwitchServerContainer { display: flex; align-items: center; padding: 15px; } +/* Button to switch server configurations on the mods tab. */ #settingsSwitchServerButton { opacity: 0; border: 1px solid rgb(255, 255, 255); @@ -1514,6 +1421,140 @@ settingsSubModContainer > .settingsSubMod:only-child { opacity: 1; } +/* Main content container for the mod elements. */ +#settingsModsContainer { + width: 75%; +} + +/* Mod sub-container header text. */ +.settingsModsHeader { + padding-bottom: 10px; + border-bottom: 1px solid rgba(255, 255, 255, 0.5); + margin-bottom: 10px; +} + +/* Mod elements sub-containers. */ +#settingsReqModsContainer, +#settingsOptModsContainer, +#settingsDropinModsContainer { + padding-bottom: 25px; +} + +/* Main content containers for mod elements. */ +#settingsReqModsContent, +#settingsOptModsContent, +#settingsDropinModsContent { + font-size: 12px; + background: rgba(0, 0, 0, 0.25); + border-radius: 3px; + color: white; +} + +/* Mod elements. */ +.settingsMod, +.settingsDropinMod { + padding: 10px; +} +.settingsSubMod { + padding: 10px 0px 10px 15px; + margin-left: 20px; + border-left: 1px solid rgba(255, 255, 255, 0.5); +} + +/* Main content container for mod element information. */ +.settingsModContent { + display: flex; + align-items: center; + justify-content: space-between; + transition: opacity 0.25s ease; +} + +/* Wrapper container for the left side of a mod element. */ +.settingsModMainWrapper { + display: flex; + align-items: center; +} + +/* Mod enabled/disabled status. */ +.settingsModStatus { + width: 7px; + height: 7px; + border-radius: 50%; + background-color: #c32625; + margin-right: 15px; + transition: 0.25s ease; +} + +/* Mod details container. */ +.settingsModDetails { + display: flex; + flex-direction: column; +} + +/* The version of the mod. */ +.settingsModVersion { + color: grey; + font-size: 10px; +} + +/* Disabled toggleswitch for required mods. */ +.toggleSwitch[reqmod] { + filter: grayscale(49%) brightness(60%); + pointer-events: none; +} + +/* Set the status color of an enabled mod. */ +.settingsBaseMod[enabled] > .settingsModContent > .settingsModMainWrapper > .settingsModStatus { + background-color: rgb(165, 195, 37); +} + +/* Add opacity to submods of a disabled mod. */ +.settingsBaseMod:not([enabled]) > .settingsSubModContainer .settingsModContent { + opacity: 0.5; +} + +/* Curve the left border for submods. */ +.settingsSubModContainer > .settingsSubMod:first-child { + border-top-left-radius: 10px; +} +.settingsSubModContainer > .settingsSubMod:last-child { + border-bottom-left-radius: 10px; +} +.settingsSubModContainer > .settingsSubMod:only-child { + border-top-left-radius: 10px; + border-bottom-left-radius: 10px; +} + +/* Wrapper container for all submods. */ +.settingsSubModContainer { + margin-top: 10px; +} + +/* Button to open the mods folder for drop-in mods. */ +#settingsDropinFileSystemButton { + background: rgba(0, 0, 0, 0.25); + border: 1px solid rgba(126, 126, 126, 0.57); + border-radius: 3px; + height: 50px; + width: 100%; + text-align: left; + padding: 0px 50px; + cursor: pointer; + outline: none; + transition: 0.25s ease; + margin-bottom: 10px; +} +#settingsDropinFileSystemButton:hover, +#settingsDropinFileSystemButton:focus { + background: rgba(54, 54, 54, 0.25); + text-shadow: 0px 0px 20px white; +} +/* Refresh instructions on the file system button. */ +#settingsDropinRefreshNote { + font-size: 10px; +} + +/* Button to remove drop-in mods. */ .settingsDropinRemoveButton { background: none; border: none; @@ -1535,29 +1576,6 @@ settingsSubModContainer > .settingsSubMod:only-child { text-shadow: 0px 0px 20px #9b1f1f, 0px 0px 20px #9b1f1f, 0px 0px 20px #9b1f1f; } -#settingsDropinFileSystemButton { - background: rgba(0, 0, 0, 0.25); - border: 1px solid rgba(126, 126, 126, 0.57); - border-radius: 3px; - height: 50px; - width: 100%; - text-align: left; - padding: 0px 50px; - cursor: pointer; - outline: none; - transition: 0.25s ease; - margin-bottom: 10px; -} -#settingsDropinFileSystemButton:hover, -#settingsDropinFileSystemButton:focus { - background: rgba(54, 54, 54, 0.25); - text-shadow: 0px 0px 20px white; -} - -#settingsDropinRefreshNote { - font-size: 10px; -} - /* * * * Settings View (Java Tab) * * */ diff --git a/app/assets/js/dropinmodutil.js b/app/assets/js/dropinmodutil.js index d2ab1f2c..fa742039 100644 --- a/app/assets/js/dropinmodutil.js +++ b/app/assets/js/dropinmodutil.js @@ -27,7 +27,7 @@ exports.scanForDropinMods = function(modsDir, version) { if(fs.existsSync(versionDir)){ verCandidates = fs.readdirSync(versionDir) } - for(file of modCandidates){ + for(let file of modCandidates){ const match = MOD_REGEX.exec(file) if(match != null){ modsDiscovered.push({ @@ -38,7 +38,7 @@ exports.scanForDropinMods = function(modsDir, version) { }) } } - for(file of verCandidates){ + for(let file of verCandidates){ const match = MOD_REGEX.exec(file) if(match != null){ modsDiscovered.push({ @@ -62,15 +62,6 @@ exports.scanForDropinMods = function(modsDir, version) { * @returns {boolean} True if the mod was deleted, otherwise false. */ exports.deleteDropinMod = function(modsDir, fullName){ - /*return new Promise((resolve, reject) => { - fs.unlink(path.join(modsDir, fullName), (err) => { - if(err){ - reject(err) - } else { - resolve() - } - }) - })*/ const res = shell.moveItemToTrash(path.join(modsDir, fullName)) if(!res){ shell.beep() @@ -104,6 +95,12 @@ exports.toggleDropinMod = function(modsDir, fullName, enable){ }) } +/** + * Check if a drop-in mod is enabled. + * + * @param {string} fullName The fullName of the discovered mod to toggle. + * @returns {boolean} True if the mod is enabled, otherwise false. + */ exports.isDropinModEnabled = function(fullName){ return !fullName.endsWith(DISABLED_EXT) } \ No newline at end of file diff --git a/app/assets/js/scripts/overlay.js b/app/assets/js/scripts/overlay.js index 87028720..6e8151ea 100644 --- a/app/assets/js/scripts/overlay.js +++ b/app/assets/js/scripts/overlay.js @@ -10,7 +10,7 @@ * @returns {boolean} Whether or not the overlay is visible. */ function isOverlayVisible(){ - return document.getElementById('main').hasAttribute('overlay'); + return document.getElementById('main').hasAttribute('overlay') } /** diff --git a/app/assets/js/scripts/settings.js b/app/assets/js/scripts/settings.js index 7c4ed91a..ac5d8d9b 100644 --- a/app/assets/js/scripts/settings.js +++ b/app/assets/js/scripts/settings.js @@ -428,6 +428,9 @@ document.getElementById('settingsGameHeight').addEventListener('keydown', (e) => const settingsModsContainer = document.getElementById('settingsModsContainer') +/** + * Resolve and update the mods on the UI. + */ function resolveModsForUI(){ const serv = ConfigManager.getSelectedServer() @@ -438,9 +441,15 @@ function resolveModsForUI(){ document.getElementById('settingsReqModsContent').innerHTML = modStr.reqMods document.getElementById('settingsOptModsContent').innerHTML = modStr.optMods - } +/** + * Recursively build the mod UI elements. + * + * @param {Object[]} mdls An array of modules to parse. + * @param {boolean} submodules Whether or not we are parsing submodules. + * @param {Object} servConf The server configuration object for this module level. + */ function parseModulesForUI(mdls, submodules, servConf){ let reqMods = '' @@ -496,9 +505,7 @@ function parseModulesForUI(mdls, submodules, servConf){ ` } - } - } return { @@ -560,35 +567,15 @@ function _saveModConfiguration(modConf){ return modConf } -function loadSelectedServerOnModsTab(){ - const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer()) - - document.getElementById('settingsSelServContent').innerHTML = ` - -
- ${serv.getName()} - ${serv.getDescription()} -
-
${serv.getMinecraftVersion()}
-
${serv.getVersion()}
- ${serv.isMainServer() ? `
- - - - - - - - Main Server -
` : ''} -
-
- ` -} +// Drop-in mod elements. let CACHE_SETTINGS_MODS_DIR let CACHE_DROPIN_MODS +/** + * Resolve any located drop-in mods for this server and + * populate the results onto the UI. + */ function resolveDropinModsForUI(){ const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer()) CACHE_SETTINGS_MODS_DIR = path.join(ConfigManager.getInstanceDirectory(), serv.getID(), 'mods') @@ -619,6 +606,9 @@ function resolveDropinModsForUI(){ document.getElementById('settingsDropinModsContent').innerHTML = dropinMods } +/** + * Bind the remove button for each loaded drop-in mod. + */ function bindDropinModsRemoveButton(){ const sEls = settingsModsContainer.querySelectorAll('[remmod]') Array.from(sEls).map((v, index, arr) => { @@ -640,6 +630,10 @@ function bindDropinModsRemoveButton(){ }) } +/** + * Bind functionality to the file system button for the selected + * server configuration. + */ function bindDropinModFileSystemButton(){ const fsBtn = document.getElementById('settingsDropinFileSystemButton') fsBtn.onclick = () => { @@ -647,6 +641,10 @@ function bindDropinModFileSystemButton(){ } } +/** + * Save drop-in mod states. Enabling and disabling is just a matter + * of adding/removing the .disabled extension. + */ function saveDropinModConfiguration(){ for(dropin of CACHE_DROPIN_MODS){ const dropinUI = document.getElementById(dropin.fullName) @@ -669,11 +667,8 @@ function saveDropinModConfiguration(){ } } -document.getElementById('settingsSwitchServerButton').addEventListener('click', (e) => { - e.target.blur() - toggleServerSelection(true) -}) - +// Refresh the drop-in mods when F5 is pressed. +// Only active on the mods tab. document.addEventListener('keydown', (e) => { if(getCurrentView() === VIEWS.settings && selectedSettingsTab === 'settingsTabMods'){ if(e.key === 'F5'){ @@ -685,6 +680,47 @@ document.addEventListener('keydown', (e) => { } }) +// Server status bar functions. + +/** + * Load the currently selected server information onto the mods tab. + */ +function loadSelectedServerOnModsTab(){ + const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer()) + + document.getElementById('settingsSelServContent').innerHTML = ` + +
+ ${serv.getName()} + ${serv.getDescription()} +
+
${serv.getMinecraftVersion()}
+
${serv.getVersion()}
+ ${serv.isMainServer() ? `
+ + + + + + + + Main Server +
` : ''} +
+
+ ` +} + +// Bind functionality to the server switch button. +document.getElementById('settingsSwitchServerButton').addEventListener('click', (e) => { + e.target.blur() + toggleServerSelection(true) +}) + +/** + * Function to refresh the mods tab whenever the selected + * server is changed. + */ function animateModsTabRefresh(){ $('#settingsTabMods').fadeOut(500, () => { saveModConfiguration()