Added basic functionality to server selection UI.

Basic selection and updating of the selected server has been added. There are a few subtle mechanics which need to be added still, such as keybind shortcuts (enter to submit, etc). In addition, functionality still needs to be added to generate the list of servers from the manifest file. Fixed a minor issue with the login view. Updated play button styles. Updated dependencies.
2018-04-26 18:41:26 -04:00 · 2018-04-26 18:41:26 -04:00 · 5fe43ac8e9
parent 4b708f59fe
commit 5fe43ac8e9
9 changed files with 760 additions and 713 deletions
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@ -1180,6 +1180,12 @@ p {
 * Landing View (Bottom Styles) | Left Content
 * * */

+/* Maintains maximum width on the status bar. */
+#server_status_wrapper {
+    display: inline-flex;
+    width: 75px;
+}
+
 /* Span which displays the player count of the selected server. */
 #player_count {
    color: #949494;
@ -1249,6 +1255,21 @@ p {
    text-shadow: 0px 0px 0px #bebcbb;
    font-size: 20px;
    padding: 0px;
+    transition: 0.25s ease;
+    outline: none;
+}
+#launch_button:hover,
+#launch_button:focus {
+    text-shadow: 0px 0px 20px #fff, 0px 0px 20px #fff;
+}
+#launch_button:active {
+    color: #c7c7c7;
+    text-shadow: 0px 0px 20px #c7c7c7, 0px 0px 20px #c7c7c7;
+}
+#launch_button:disabled {
+    color: #c7c7c7;
+    cursor: default;
+    pointer-events: none;
 }

 /* Launch details main container, hidden until launch processing begins. */
@ -1336,6 +1357,7 @@ p {
 /* Overlay container, placed over the main div. */
 #overlayContainer {
    position: absolute;
+    z-index: 500;
    top: 22px;
    display: flex;
    align-items: center;
--- a/app/assets/js/scripts/landing.js
+++ b/app/assets/js/scripts/landing.js
@ -72,6 +72,15 @@ function setDownloadPercentage(value, max, percent = ((value/max)*100)){
    setLaunchPercentage(value, max, percent)
 }

+/**
+ * Enable or disable the launch button.
+ * 
+ * @param {boolean} val True to enable, false to disable.
+ */
+function setLaunchEnabled(val){
+    document.getElementById('launch_button').disabled = !val
+}
+
 // Bind launch button
 document.getElementById('launch_button').addEventListener('click', function(e){
    console.log('Launching game..')
@ -95,7 +104,13 @@ document.getElementById('launch_button').addEventListener('click', function(e){
 })

 // Bind selected server
-server_selection_button.innerHTML = '\u2022 ' + AssetGuard.getServerById(ConfigManager.getGameDirectory(), ConfigManager.getSelectedServer()).name
+function updateSelectedServer(serverName){
+    if(serverName == null){
+        serverName = 'No Server Selected'
+    }
+    server_selection_button.innerHTML = '\u2022 ' + serverName
+}
+updateSelectedServer(AssetGuard.getServerById(ConfigManager.getGameDirectory(), ConfigManager.getSelectedServer()).name)
 server_selection_button.addEventListener('click', (e) => {
    e.target.blur()
    toggleOverlay(true, 'serverSelectContent')
@ -157,9 +172,9 @@ const refreshMojangStatuses = async function(){
    document.getElementById('mojang_status_icon').style.color = Mojang.statusToHex(status)
 }

-const refreshServerStatus = async function(){
+const refreshServerStatus = async function(fade = false){
    console.log('Refreshing Server Status')
-    const serv = AssetGuard.resolveSelectedServer(ConfigManager.getGameDirectory())
+    const serv = AssetGuard.getServerById(ConfigManager.getGameDirectory(), ConfigManager.getSelectedServer())

    let pLabel = 'SERVER'
    let pVal = 'OFFLINE'
@ -176,16 +191,25 @@ const refreshServerStatus = async function(){
        console.warn('Unable to refresh server status, assuming offline.')
        console.debug(err)
    }
-    document.getElementById('landingPlayerLabel').innerHTML = pLabel
-    document.getElementById('player_count').innerHTML = pVal
+    if(fade){
+        $('#server_status_wrapper').fadeOut(250, () => {
+            document.getElementById('landingPlayerLabel').innerHTML = pLabel
+            document.getElementById('player_count').innerHTML = pVal
+            $('#server_status_wrapper').fadeIn(500)
+        })
+    } else {
+        document.getElementById('landingPlayerLabel').innerHTML = pLabel
+        document.getElementById('player_count').innerHTML = pVal
+    }
+    
 }

 refreshMojangStatuses()
 refreshServerStatus()

 // Set refresh rate to once every 5 minutes.
-let mojangStatusListener = setInterval(refreshMojangStatuses, 300000)
-let serverStatusListener = setInterval(refreshServerStatus, 300000)
+let mojangStatusListener = setInterval(() => refreshMojangStatuses(true), 300000)
+let serverStatusListener = setInterval(() => refreshServerStatus(true), 300000)

 /* System (Java) Scan */

--- a/app/assets/js/scripts/login.js
+++ b/app/assets/js/scripts/login.js
@ -14,6 +14,7 @@ const loginPassword         = document.getElementById('loginPassword')
 const checkmarkContainer    = document.getElementById('checkmarkContainer')
 const loginRememberOption   = document.getElementById('loginRememberOption')
 const loginButton           = document.getElementById('loginButton')
+const loginForm             = document.getElementById('loginForm')

 // Control variables.
 let lu = false, lp = false
@ -214,6 +215,9 @@ function resolveError(err){
    }
 }

+// Disable default form behavior.
+loginForm.onsubmit = () => { return false }
+
 // Bind login button behavior.
 loginButton.addEventListener('click', () => {
    // Disable form.
--- a/app/assets/js/scripts/overlay.js
+++ b/app/assets/js/scripts/overlay.js
@ -91,7 +91,48 @@ function setDismissHandler(handler){

 /* Server Select View */

+document.getElementById('serverSelectConfirm').addEventListener('click', () => {
+    const listings = document.getElementsByClassName('serverListing')
+    for(let i=0; i<listings.length; i++){
+        if(listings[i].hasAttribute('selected')){
+            const serv = AssetGuard.getServerById(ConfigManager.getGameDirectory(), listings[i].getAttribute('servid'))
+            ConfigManager.setSelectedServer(serv != null ? serv.id : null)
+            updateSelectedServer(serv != null ? serv.name : null)
+            setLaunchEnabled(serv != null)
+            refreshServerStatus(true)
+            toggleOverlay(false)
+            return
+        }
+    }
+    // None are selected? Not possible right? Meh, handle it.
+    if(listings.length > 0){
+        ConfigManager.setSelectedServer(listings[0].getAttribute('servid'))
+        updateSelectedServer()
+        toggleOverlay(false)
+    }
+})
+
 // Bind server select cancel button.
 document.getElementById('serverSelectCancel').addEventListener('click', () => {
    toggleOverlay(false)
-})
+})
+
+function setServerListingHandlers(){
+    const listings = Array.from(document.getElementsByClassName('serverListing'))
+    listings.map((val) => {
+        val.onclick = e => {
+            if(val.hasAttribute('selected')){
+                return
+            }
+            const cListings = document.getElementsByClassName('serverListing')
+            for(let i=0; i<cListings.length; i++){
+                if(cListings[i].hasAttribute('selected')){
+                    cListings[i].removeAttribute('selected')
+                }
+            }
+            val.setAttribute('selected', '')
+            document.activeElement.blur()
+        }
+    })
+}
+setServerListingHandlers()
--- a/app/landing.ejs
+++ b/app/landing.ejs
@ -102,8 +102,10 @@
        <div id="left">
            <div class="bot_wrapper">
                <div id="content">
-                    <span class="bot_label" id="landingPlayerLabel">PLAYERS</span>
-                    <span id="player_count">18/100</span>
+                    <div id="server_status_wrapper">
+                        <span class="bot_label" id="landingPlayerLabel">SERVER</span>
+                        <span id="player_count">OFFLINE</span>
+                    </div>
                    <div class="bot_divider"></div>
                    <span class="bot_label">MOJANG STATUS</span>
                    <span id="mojang_status_icon">&#8226;</span>
--- a/app/login.ejs
+++ b/app/login.ejs
@ -1,6 +1,6 @@
 <div id="loginContainer" style="display: none;">
    <div id="loginContent">
-        <form id="loginForm" onsubmit="void(0); return false;">
+        <form id="loginForm">
            <img id="loginImageSeal" src="assets/images/WesterosSealCircle.png"/>
            <span class="loginSpan" id="loginSubheader">MEMBER LOGIN</span>
            <div class="loginFieldContainer">
--- a/app/overlay.ejs
+++ b/app/overlay.ejs
@ -3,7 +3,7 @@
        <span id="serverSelectHeader">Available Servers</span>
        <div id="serverSelectList">
            <div id="serverSelectListScrollable">
-                <button class="serverListing" selected>
+                <button class="serverListing" servid="WesterosCraft-1.11.2" selected>
                    <img class="serverListingImg" src="./assets/images/WesterosSealSquare.png"/>
                    <div class="serverListingDetails">
                        <span class="serverListingName">WesterosCraft Production Server</span>
@ -24,7 +24,7 @@
                        </div>
                    </div>
                </button>
-                <button class="serverListing">
+                <button class="serverListing" servid="WesterosCraft-Test">
                    <img class="serverListingImg" src="./assets/images/testserver.png"/>
                    <div class="serverListingDetails">
                        <span class="serverListingName">WesterosCraft Test Server</span>
@ -35,7 +35,7 @@
                        </div>
                    </div>
                </button>
-                <button class="serverListing">
+                <button class="serverListing" servid="WesterosCraft-Test-1.12.2">
                    <img class="serverListingImg" src="./assets/images/testserver.png"/>
                    <div class="serverListingDetails">
                        <span class="serverListingName">WesterosCraft 1.12.2 Test Server</span>
@ -46,7 +46,7 @@
                        </div>
                    </div>
                </button>
-                <button class="serverListing">
+                <button class="serverListing" servid="EssosCraft">
                    <img class="serverListingImg" src="./assets/images/testserver.png"/>
                    <div class="serverListingDetails">
                        <span class="serverListingName">EssosCraft Test Server</span>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -28,10 +28,10 @@
  },
  "homepage": "http://www.westeroscraft.com/",
  "dependencies": {
-    "adm-zip": "^0.4.7",
+    "adm-zip": "^0.4.9",
    "async": "^2.6.0",
    "discord-rpc": "^3.0.0-beta.10",
-    "ejs": "^2.5.7",
+    "ejs": "^2.5.9",
    "ejs-electron": "^2.0.1",
    "jquery": "^3.3.1",
    "mkdirp": "^0.5.1",
@ -42,8 +42,8 @@
    "winreg": "^1.2.4"
  },
  "devDependencies": {
-    "electron": "^1.8.4",
-    "electron-builder": "^20.8.1"
+    "electron": "^1.8.5",
+    "electron-builder": "^20.10.0"
  },
  "build": {
    "appId": "westeroscraftlauncher",