General cleanup for mods tab code.

app/assets/css/launcher.css

@@ -1368,51 +1368,100 @@ input:checked + .toggleSwitchSlider:before {
 * Settings View (Mods Tab)
 * * */
 
-#settingsReqModsContent,
-#settingsOptModsContent,
-#settingsDropinModsContent {
-    font-size: 12px;
+/* Selected server content container */
+#settingsSelServContainer {
     background: rgba(0, 0, 0, 0.25);
+    width: 75%;
     border-radius: 3px;
-    color: white;
+    display: flex;
+    justify-content: space-between;
+    margin: 15px 0px;
+}
+
+/* Div which will be populated with the selected server's information. */
+#settingsSelServContent {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    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);
+    color: rgb(255, 255, 255);
+    background: none;
+    font-size: 12px;
+    border-radius: 3px;
+    font-family: 'Avenir Medium';
+    transition: 0.25s ease;
+    cursor: pointer;
+    outline: none;
+}
+#settingsSwitchServerButton:hover,
+#settingsSwitchServerButton:focus {
+    box-shadow: 0px 0px 20px rgb(255, 255, 255);
+    background: rgba(255, 255, 255, 0.25);
+}
+#settingsSwitchServerButton:active {
+    box-shadow: 0px 0px 20px rgb(187, 187, 187);
+    background: rgba(187, 187, 187, 0.25);
+    border: 1px solid rgb(187, 187, 187);
+    color: rgb(187, 187, 187);
+}
+#settingsSelServContainer:hover #settingsSwitchServerButton {
+    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);
 }
 
-.settingsModStatus {
-    width: 7px;
-    height: 7px;
-    border-radius: 50%;
-    background-color: #c32625;
-    margin-right: 15px;
-    transition: 0.25s ease;
-}
-
+/* Main content container for mod element information. */
 .settingsModContent {
     display: flex;
     align-items: center;
@@ -1420,100 +1469,92 @@ input:checked + .toggleSwitchSlider:before {
     transition: opacity 0.25s ease;
 }
 
+/* Wrapper container for the left side of a mod element. */
 .settingsModMainWrapper {
     display: flex;
     align-items: center;
 }
 
-.settingsModVersion {
-    color: grey;
-    font-size: 10px;
+/* 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 {
+.settingsSubModContainer > .settingsSubMod:only-child {
     border-top-left-radius: 10px;
     border-bottom-left-radius: 10px;
 }
 
+/* Wrapper container for all submods. */
 .settingsSubModContainer {
     margin-top: 10px;
 }
 
-#settingsSelServContainer {
+/* Button to open the mods folder for drop-in mods. */
+#settingsDropinFileSystemButton {
     background: rgba(0, 0, 0, 0.25);
-    width: 75%;
-    border-radius: 3px;
-    display: flex;
-    justify-content: space-between;
-    margin: 15px 0px;
-}
-
-#settingsSelServContent {
-    display: flex;
-    align-items: center;
-    justify-content: flex-start;
-    padding: 5px 0px;
-}
-
-#settingsSwitchServerContainer {
-    display: flex;
-    align-items: center;
-    padding: 15px;
-}
-
-#settingsSwitchServerButton {
-    opacity: 0;
-    border: 1px solid rgb(255, 255, 255);
-    color: rgb(255, 255, 255);
-    background: none;
-    font-size: 12px;
+    border: 1px solid rgba(126, 126, 126, 0.57);
     border-radius: 3px;
-    font-family: 'Avenir Medium';
-    transition: 0.25s ease;
+    height: 50px;
+    width: 100%;
+    text-align: left;
+    padding: 0px 50px;
     cursor: pointer;
     outline: none;
+    transition: 0.25s ease;
+    margin-bottom: 10px;
 }
-#settingsSwitchServerButton:hover,
-#settingsSwitchServerButton:focus {
-    box-shadow: 0px 0px 20px rgb(255, 255, 255);
-    background: rgba(255, 255, 255, 0.25);
-}
-#settingsSwitchServerButton:active {
-    box-shadow: 0px 0px 20px rgb(187, 187, 187);
-    background: rgba(187, 187, 187, 0.25);
-    border: 1px solid rgb(187, 187, 187);
-    color: rgb(187, 187, 187);
+#settingsDropinFileSystemButton:hover,
+#settingsDropinFileSystemButton:focus {
+    background: rgba(54, 54, 54, 0.25);
+    text-shadow: 0px 0px 20px white;
 }
-#settingsSelServContainer:hover #settingsSwitchServerButton {
-    opacity: 1;
+/* 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)
 * * */

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)
 }

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')
 }
 
 /**

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){
                 </div>`
 
             }
-
         }
-
     }
 
     return {
@@ -560,35 +567,15 @@ function _saveModConfiguration(modConf){
     return modConf
 }
 
-function loadSelectedServerOnModsTab(){
-    const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer())
-
-    document.getElementById('settingsSelServContent').innerHTML = `
-        <img class="serverListingImg" src="${serv.getIcon()}"/>
-        <div class="serverListingDetails">
-            <span class="serverListingName">${serv.getName()}</span>
-            <span class="serverListingDescription">${serv.getDescription()}</span>
-            <div class="serverListingInfo">
-                <div class="serverListingVersion">${serv.getMinecraftVersion()}</div>
-                <div class="serverListingRevision">${serv.getVersion()}</div>
-                ${serv.isMainServer() ? `<div class="serverListingStarWrapper">
-                    <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
-                        <defs>
-                            <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
-                        </defs>
-                        <path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
-                        <circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
-                    </svg>
-                    <span class="serverListingStarTooltip">Main Server</span>
-                </div>` : ''}
-            </div>
-        </div>
-    `
-}
+// 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 = `
+        <img class="serverListingImg" src="${serv.getIcon()}"/>
+        <div class="serverListingDetails">
+            <span class="serverListingName">${serv.getName()}</span>
+            <span class="serverListingDescription">${serv.getDescription()}</span>
+            <div class="serverListingInfo">
+                <div class="serverListingVersion">${serv.getMinecraftVersion()}</div>
+                <div class="serverListingRevision">${serv.getVersion()}</div>
+                ${serv.isMainServer() ? `<div class="serverListingStarWrapper">
+                    <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
+                        <defs>
+                            <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
+                        </defs>
+                        <path class="cls-1" d="M100.93,65.54C89,62,68.18,55.65,63.54,52.13c2.7-5.23,18.8-19.2,28-27.55C81.36,31.74,63.74,43.87,58.09,45.3c-2.41-5.37-3.61-26.52-4.37-39-.77,12.46-2,33.64-4.36,39-5.7-1.46-23.3-13.57-33.49-20.72,9.26,8.37,25.39,22.36,28,27.55C39.21,55.68,18.47,62,6.52,65.55c12.32-2,33.63-6.06,39.34-4.9-.16,5.87-8.41,26.16-13.11,37.69,6.1-10.89,16.52-30.16,21-33.9,4.5,3.79,14.93,23.09,21,34C70,86.84,61.73,66.48,61.59,60.65,67.36,59.49,88.64,63.52,100.93,65.54Z"/>
+                        <circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
+                    </svg>
+                    <span class="serverListingStarTooltip">Main Server</span>
+                </div>` : ''}
+            </div>
+        </div>
+    `
+}
+
+// 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()