Server selection view can now be opened from the landing view.

The temporary span which displayed the selected server has been changed to a button. Clicking this button will open the server selection view. The server selection view is still pending full implementation.

app/assets/css/launcher.css

@@ -1267,6 +1267,24 @@ p {
     justify-content: center;
 }
 
+#server_selection_button {
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    line-height: 24px;
+    padding: 0px;
+    transition: 0.25s ease;
+}
+#server_selection_button:hover,
+#server_selection_button:focus {
+    text-shadow: 0px 0px 20px #fff, 0px 0px 20px #fff, 0px 0px 20px #fff;
+}
+#server_selection_button:active {
+    color: #c7c7c7;
+    text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7;
+}
+
 /* Progress bar styles. */
 #launch_progress[value] {
     height: 3px;

app/assets/js/scripts/landing.js

@@ -19,6 +19,7 @@ const launch_details        = document.getElementById('launch_details')
 const launch_progress         = document.getElementById('launch_progress')
 const launch_progress_label   = document.getElementById('launch_progress_label')
 const launch_details_text     = document.getElementById('launch_details_text')
+const server_selection_button = document.getElementById('server_selection_button')
 
 /* Launch Progress Wrapper Functions */
 
@@ -93,9 +94,12 @@ document.getElementById('launch_button').addEventListener('click', function(e){
     }
 })
 
-// TODO convert this to dropdown menu.
 // Bind selected server
-document.getElementById('server_selection').innerHTML = '\u2022 ' + AssetGuard.getServerById(ConfigManager.getGameDirectory(), ConfigManager.getSelectedServer()).name
+server_selection_button.innerHTML = '\u2022 ' + AssetGuard.getServerById(ConfigManager.getGameDirectory(), ConfigManager.getSelectedServer()).name
+server_selection_button.addEventListener('click', (e) => {
+    e.target.blur()
+    toggleOverlay(true, 'serverSelectContent')
+})
 
 // Update Mojang Status Color
 const refreshMojangStatuses = async function(){

app/assets/js/scripts/overlay.js

@@ -2,8 +2,6 @@
  * Script for overlay.ejs
  */
 
-//document.getElementById('overlayDismiss').href = 'javascript:void(0);'
-
 /* Overlay Wrapper Functions */
 
 /**
@@ -90,3 +88,10 @@ function setDismissHandler(handler){
         document.getElementById('overlayDismiss').onclick = handler
     }
 }
+
+/* Server Select View */
+
+// Bind server select cancel button.
+document.getElementById('serverSelectCancel').addEventListener('click', () => {
+    toggleOverlay(false)
+})

app/landing.ejs

@@ -125,8 +125,7 @@
                 <div id="launch_content">
                     <button id="launch_button">PLAY</button>
                     <div class="bot_divider"></div>
-                    <!-- Span until we implement the real selection -->
+                    <button id="server_selection_button" class="bot_label">&#8226; No Server Selected</button>
-                    <span class="bot_label" id="server_selection"style="line-height: 24px;">&#8226; No Server Selected</span>
                 </div>
                 <div id="launch_details">
                     <div id="launch_details_left">