From 6e55442b25b654bee0583b21bdfc3da6620a5732 Mon Sep 17 00:00:00 2001
From: Daniel Scalzi <d_scalzi@yahoo.com>
Date: Thu, 26 Apr 2018 02:39:47 -0400
Subject: [PATCH] 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      | 20 ++++++++++++++++++-
 app/assets/js/scripts/landing.js | 34 ++++++++++++++++++--------------
 app/assets/js/scripts/overlay.js | 11 ++++++++---
 app/landing.ejs                  |  3 +--
 4 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index c91cc78..dda286b 100644
--- a/app/assets/css/launcher.css
+++ b/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;
diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js
index 1bf4bab..fe3f60e 100644
--- a/app/assets/js/scripts/landing.js
+++ b/app/assets/js/scripts/landing.js
@@ -2,23 +2,24 @@
  * Script for landing.ejs
  */
 // Requirements
-const cp                    = require('child_process')
-const {URL}                 = require('url')
+const cp                      = require('child_process')
+const {URL}                   = require('url')
 
 // Internal Requirements
-const {AssetGuard}          = require(path.join(__dirname, 'assets', 'js', 'assetguard.js'))
-const AuthManager           = require(path.join(__dirname, 'assets', 'js', 'authmanager.js'))
-const DiscordWrapper        = require(path.join(__dirname, 'assets', 'js', 'discordwrapper.js'))
-const Mojang                = require(path.join(__dirname, 'assets', 'js', 'mojang.js'))
-const ProcessBuilder        = require(path.join(__dirname, 'assets', 'js', 'processbuilder.js'))
-const ServerStatus          = require(path.join(__dirname, 'assets', 'js', 'serverstatus.js'))
+const {AssetGuard}            = require(path.join(__dirname, 'assets', 'js', 'assetguard.js'))
+const AuthManager             = require(path.join(__dirname, 'assets', 'js', 'authmanager.js'))
+const DiscordWrapper          = require(path.join(__dirname, 'assets', 'js', 'discordwrapper.js'))
+const Mojang                  = require(path.join(__dirname, 'assets', 'js', 'mojang.js'))
+const ProcessBuilder          = require(path.join(__dirname, 'assets', 'js', 'processbuilder.js'))
+const ServerStatus            = require(path.join(__dirname, 'assets', 'js', 'serverstatus.js'))
 
 // Launch Elements
-const launch_content        = document.getElementById('launch_content')
-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 launch_content          = document.getElementById('launch_content')
+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(){
diff --git a/app/assets/js/scripts/overlay.js b/app/assets/js/scripts/overlay.js
index 0a03af5..b9e453e 100644
--- a/app/assets/js/scripts/overlay.js
+++ b/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
     }
-}
\ No newline at end of file
+}
+
+/* Server Select View */
+
+// Bind server select cancel button.
+document.getElementById('serverSelectCancel').addEventListener('click', () => {
+    toggleOverlay(false)
+})
\ No newline at end of file
diff --git a/app/landing.ejs b/app/landing.ejs
index 40be735..91bb06f 100644
--- a/app/landing.ejs
+++ b/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 -->
-                    <span class="bot_label" id="server_selection"style="line-height: 24px;">&#8226; No Server Selected</span>
+                    <button id="server_selection_button" class="bot_label">&#8226; No Server Selected</button>
                 </div>
                 <div id="launch_details">
                     <div id="launch_details_left">