Add server selection button to Java settings tab in preparation for by-instance java settings.

app/assets/css/launcher.css

@@ -1228,6 +1228,59 @@ body, button {
     font-size: 12px;
 }
 
+/* Selected server content container */
+.settingsSelServContainer {
+    background: rgba(0, 0, 0, 0.25);
+    width: 75%;
+    border-radius: 3px;
+    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;
+}
+
 /* Remove spin button from number inputs. */
 #settingsContainer input[type=number]::-webkit-inner-spin-button {
     -webkit-appearance: none;
@@ -1638,59 +1691,6 @@ input:checked + .toggleSwitchSlider:before {
 * Settings View (Mods Tab)
 * * */
 
-/* Selected server content container */
-#settingsSelServContainer {
-    background: rgba(0, 0, 0, 0.25);
-    width: 75%;
-    border-radius: 3px;
-    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%;

app/assets/js/scripts/landing.js

@@ -146,7 +146,7 @@ function updateSelectedServer(serv){
     ConfigManager.save()
     server_selection_button.innerHTML = '\u2022 ' + (serv != null ? serv.getName() : 'No Server Selected')
     if(getCurrentView() === VIEWS.settings){
-        animateModsTabRefresh()
+        animateSettingsTabRefresh()
     }
     setLaunchEnabled(serv != null)
 }

app/assets/js/scripts/settings.js

@@ -1056,33 +1056,37 @@ function bindShaderpackButton() {
 function loadSelectedServerOnModsTab(){
     const serv = DistroManager.getDistribution().getServer(ConfigManager.getSelectedServer())
 
-    document.getElementById('settingsSelServContent').innerHTML = `
+    for(const el of document.getElementsByClassName('settingsSelServContent')) {
-        <img class="serverListingImg" src="${serv.getIcon()}"/>
+        el.innerHTML = `
-        <div class="serverListingDetails">
+            <img class="serverListingImg" src="${serv.getIcon()}"/>
-            <span class="serverListingName">${serv.getName()}</span>
+            <div class="serverListingDetails">
-            <span class="serverListingDescription">${serv.getDescription()}</span>
+                <span class="serverListingName">${serv.getName()}</span>
-            <div class="serverListingInfo">
+                <span class="serverListingDescription">${serv.getDescription()}</span>
-                <div class="serverListingVersion">${serv.getMinecraftVersion()}</div>
+                <div class="serverListingInfo">
-                <div class="serverListingRevision">${serv.getVersion()}</div>
+                    <div class="serverListingVersion">${serv.getMinecraftVersion()}</div>
-                ${serv.isMainServer() ? `<div class="serverListingStarWrapper">
+                    <div class="serverListingRevision">${serv.getVersion()}</div>
-                    <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
+                    ${serv.isMainServer() ? `<div class="serverListingStarWrapper">
-                        <defs>
+                        <svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
-                            <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
+                            <defs>
-                        </defs>
+                                <style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
-                        <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"/>
+                            </defs>
-                        <circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
+                            <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"/>
-                    </svg>
+                            <circle class="cls-2" cx="53.73" cy="53.9" r="38"/>
-                    <span class="serverListingStarTooltip">Main Server</span>
+                        </svg>
-                </div>` : ''}
+                        <span class="serverListingStarTooltip">Main Server</span>
+                    </div>` : ''}
+                </div>
             </div>
-        </div>
+        `
-    `
+    }
 }
 
 // Bind functionality to the server switch button.
-document.getElementById('settingsSwitchServerButton').addEventListener('click', (e) => {
+Array.from(document.getElementsByClassName('settingsSwitchServerButton')).forEach(el => {
-    e.target.blur()
+    el.addEventListener('click', (e) => {
-    toggleServerSelection(true)
+        e.target.blur()
+        toggleServerSelection(true)
+    })
 })
 
 /**
@@ -1095,13 +1099,13 @@ function saveAllModConfigurations(){
 }
 
 /**
- * Function to refresh the mods tab whenever the selected
+ * Function to refresh the current tab whenever the selected
  * server is changed.
  */
-function animateModsTabRefresh(){
+function animateSettingsTabRefresh(){
-    $('#settingsTabMods').fadeOut(500, () => {
+    $(`#${selectedSettingsTab}`).fadeOut(500, () => {
-        prepareModsTab()
+        prepareSettings()
-        $('#settingsTabMods').fadeIn(500)
+        $(`#${selectedSettingsTab}`).fadeIn(500)
     })
 }
 

app/settings.ejs

@@ -122,13 +122,13 @@
                 <span class="settingsTabHeaderText">Mod Settings</span>
                 <span class="settingsTabHeaderDesc">Enable or disable mods.</span>
             </div>
-            <div id="settingsSelServContainer">
+            <div class="settingsSelServContainer">
-                <div id="settingsSelServContent">
+                <div class="settingsSelServContent">
 
                 </div>
-                <div id="settingsSwitchServerContainer">
+                <div class="settingsSwitchServerContainer">
-                    <div id="settingsSwitchServerContent">
+                    <div class="settingsSwitchServerContent">
-                        <button id="settingsSwitchServerButton">Switch</button>
+                        <button class="settingsSwitchServerButton">Switch</button>
                     </div>
                 </div>
             </div>
@@ -172,6 +172,16 @@
                 <span class="settingsTabHeaderText">Java Settings</span>
                 <span class="settingsTabHeaderDesc">Manage the Java configuration (advanced).</span>
             </div>
+            <div class="settingsSelServContainer">
+                <div class="settingsSelServContent">
+
+                </div>
+                <div class="settingsSwitchServerContainer">
+                    <div class="settingsSwitchServerContent">
+                        <button class="settingsSwitchServerButton">Switch</button>
+                    </div>
+                </div>
+            </div>
             <div id="settingsMemoryContainer">
                 <div id="settingsMemoryTitle">Memory</div>
                 <div id="settingsMemoryContent">