From 5fe43ac8e9606f5546e0a0a5e80527e4cfd1445d Mon Sep 17 00:00:00 2001 From: Daniel Scalzi Date: Thu, 26 Apr 2018 18:41:26 -0400 Subject: [PATCH] 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. --- app/assets/css/launcher.css | 22 + app/assets/js/scripts/landing.js | 38 +- app/assets/js/scripts/login.js | 4 + app/assets/js/scripts/overlay.js | 43 +- app/landing.ejs | 6 +- app/login.ejs | 2 +- app/overlay.ejs | 8 +- package-lock.json | 1342 +++++++++++++++--------------- package.json | 8 +- 9 files changed, 760 insertions(+), 713 deletions(-) diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index 38c25e5..b4d36a6 100644 --- 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; diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js index 16e9bf3..a968d42 100644 --- 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 */ diff --git a/app/assets/js/scripts/login.js b/app/assets/js/scripts/login.js index 0b1d5fd..2465ed9 100644 --- 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. diff --git a/app/assets/js/scripts/overlay.js b/app/assets/js/scripts/overlay.js index b9e453e..0b3e0cf 100644 --- 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 0){ + ConfigManager.setSelectedServer(listings[0].getAttribute('servid')) + updateSelectedServer() + toggleOverlay(false) + } +}) + // Bind server select cancel button. document.getElementById('serverSelectCancel').addEventListener('click', () => { toggleOverlay(false) -}) \ No newline at end of file +}) + +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
- PLAYERS - 18/100 +
+ SERVER + OFFLINE +
MOJANG STATUS • diff --git a/app/login.ejs b/app/login.ejs index f90f491..68e7097 100644 --- a/app/login.ejs +++ b/app/login.ejs @@ -1,6 +1,6 @@