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

@@ -331,7 +331,7 @@ p {
 }
 #welcomeButton:active {
     color: #c7c7c7;
-    text-shadow:  0px 0px 20px #c7c7c7;
+    text-shadow: 0px 0px 20px #c7c7c7;
 }
 #welcomeSVG {
     -webkit-transform: translate3d(0, 0, 0);
@@ -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

@@ -2,23 +2,24 @@
  * Script for landing.ejs
  */
 // Requirements
-const cp                    = require('child_process')
+const cp                      = require('child_process')
-const {URL}                 = require('url')
+const {URL}                   = require('url')
 
 // Internal Requirements
-const {AssetGuard}          = require(path.join(__dirname, 'assets', 'js', 'assetguard.js'))
+const {AssetGuard}            = require(path.join(__dirname, 'assets', 'js', 'assetguard.js'))
-const AuthManager           = require(path.join(__dirname, 'assets', 'js', 'authmanager.js'))
+const AuthManager             = require(path.join(__dirname, 'assets', 'js', 'authmanager.js'))
-const DiscordWrapper        = require(path.join(__dirname, 'assets', 'js', 'discordwrapper.js'))
+const DiscordWrapper          = require(path.join(__dirname, 'assets', 'js', 'discordwrapper.js'))
-const Mojang                = require(path.join(__dirname, 'assets', 'js', 'mojang.js'))
+const Mojang                  = require(path.join(__dirname, 'assets', 'js', 'mojang.js'))
-const ProcessBuilder        = require(path.join(__dirname, 'assets', 'js', 'processbuilder.js'))
+const ProcessBuilder          = require(path.join(__dirname, 'assets', 'js', 'processbuilder.js'))
-const ServerStatus          = require(path.join(__dirname, 'assets', 'js', 'serverstatus.js'))
+const ServerStatus            = require(path.join(__dirname, 'assets', 'js', 'serverstatus.js'))
 
 // Launch Elements
-const launch_content        = document.getElementById('launch_content')
+const launch_content          = document.getElementById('launch_content')
-const launch_details        = document.getElementById('launch_details')
+const launch_details          = document.getElementById('launch_details')
-const launch_progress       = document.getElementById('launch_progress')
+const launch_progress         = document.getElementById('launch_progress')
-const launch_progress_label = document.getElementById('launch_progress_label')
+const launch_progress_label   = document.getElementById('launch_progress_label')
-const launch_details_text   = document.getElementById('launch_details_text')
+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 */
 
 /**
@@ -89,4 +87,11 @@ function setDismissHandler(handler){
     } else {
         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">