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.
This commit is contained in:
Daniel Scalzi 2018-04-26 18:41:26 -04:00
parent 4b708f59fe
commit 5fe43ac8e9
No known key found for this signature in database
GPG Key ID: 5CA2F145B63535F9
9 changed files with 760 additions and 713 deletions

View File

@ -1180,6 +1180,12 @@ p {
* Landing View (Bottom Styles) | Left Content * 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. */ /* Span which displays the player count of the selected server. */
#player_count { #player_count {
color: #949494; color: #949494;
@ -1249,6 +1255,21 @@ p {
text-shadow: 0px 0px 0px #bebcbb; text-shadow: 0px 0px 0px #bebcbb;
font-size: 20px; font-size: 20px;
padding: 0px; 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. */ /* Launch details main container, hidden until launch processing begins. */
@ -1336,6 +1357,7 @@ p {
/* Overlay container, placed over the main div. */ /* Overlay container, placed over the main div. */
#overlayContainer { #overlayContainer {
position: absolute; position: absolute;
z-index: 500;
top: 22px; top: 22px;
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -72,6 +72,15 @@ function setDownloadPercentage(value, max, percent = ((value/max)*100)){
setLaunchPercentage(value, max, percent) 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 // Bind launch button
document.getElementById('launch_button').addEventListener('click', function(e){ document.getElementById('launch_button').addEventListener('click', function(e){
console.log('Launching game..') console.log('Launching game..')
@ -95,7 +104,13 @@ document.getElementById('launch_button').addEventListener('click', function(e){
}) })
// Bind selected server // 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) => { server_selection_button.addEventListener('click', (e) => {
e.target.blur() e.target.blur()
toggleOverlay(true, 'serverSelectContent') toggleOverlay(true, 'serverSelectContent')
@ -157,9 +172,9 @@ const refreshMojangStatuses = async function(){
document.getElementById('mojang_status_icon').style.color = Mojang.statusToHex(status) 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') console.log('Refreshing Server Status')
const serv = AssetGuard.resolveSelectedServer(ConfigManager.getGameDirectory()) const serv = AssetGuard.getServerById(ConfigManager.getGameDirectory(), ConfigManager.getSelectedServer())
let pLabel = 'SERVER' let pLabel = 'SERVER'
let pVal = 'OFFLINE' let pVal = 'OFFLINE'
@ -176,16 +191,25 @@ const refreshServerStatus = async function(){
console.warn('Unable to refresh server status, assuming offline.') console.warn('Unable to refresh server status, assuming offline.')
console.debug(err) console.debug(err)
} }
if(fade){
$('#server_status_wrapper').fadeOut(250, () => {
document.getElementById('landingPlayerLabel').innerHTML = pLabel document.getElementById('landingPlayerLabel').innerHTML = pLabel
document.getElementById('player_count').innerHTML = pVal document.getElementById('player_count').innerHTML = pVal
$('#server_status_wrapper').fadeIn(500)
})
} else {
document.getElementById('landingPlayerLabel').innerHTML = pLabel
document.getElementById('player_count').innerHTML = pVal
}
} }
refreshMojangStatuses() refreshMojangStatuses()
refreshServerStatus() refreshServerStatus()
// Set refresh rate to once every 5 minutes. // Set refresh rate to once every 5 minutes.
let mojangStatusListener = setInterval(refreshMojangStatuses, 300000) let mojangStatusListener = setInterval(() => refreshMojangStatuses(true), 300000)
let serverStatusListener = setInterval(refreshServerStatus, 300000) let serverStatusListener = setInterval(() => refreshServerStatus(true), 300000)
/* System (Java) Scan */ /* System (Java) Scan */

View File

@ -14,6 +14,7 @@ const loginPassword = document.getElementById('loginPassword')
const checkmarkContainer = document.getElementById('checkmarkContainer') const checkmarkContainer = document.getElementById('checkmarkContainer')
const loginRememberOption = document.getElementById('loginRememberOption') const loginRememberOption = document.getElementById('loginRememberOption')
const loginButton = document.getElementById('loginButton') const loginButton = document.getElementById('loginButton')
const loginForm = document.getElementById('loginForm')
// Control variables. // Control variables.
let lu = false, lp = false let lu = false, lp = false
@ -214,6 +215,9 @@ function resolveError(err){
} }
} }
// Disable default form behavior.
loginForm.onsubmit = () => { return false }
// Bind login button behavior. // Bind login button behavior.
loginButton.addEventListener('click', () => { loginButton.addEventListener('click', () => {
// Disable form. // Disable form.

View File

@ -91,7 +91,48 @@ function setDismissHandler(handler){
/* Server Select View */ /* 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. // Bind server select cancel button.
document.getElementById('serverSelectCancel').addEventListener('click', () => { document.getElementById('serverSelectCancel').addEventListener('click', () => {
toggleOverlay(false) 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()

View File

@ -102,8 +102,10 @@
<div id="left"> <div id="left">
<div class="bot_wrapper"> <div class="bot_wrapper">
<div id="content"> <div id="content">
<span class="bot_label" id="landingPlayerLabel">PLAYERS</span> <div id="server_status_wrapper">
<span id="player_count">18/100</span> <span class="bot_label" id="landingPlayerLabel">SERVER</span>
<span id="player_count">OFFLINE</span>
</div>
<div class="bot_divider"></div> <div class="bot_divider"></div>
<span class="bot_label">MOJANG STATUS</span> <span class="bot_label">MOJANG STATUS</span>
<span id="mojang_status_icon">&#8226;</span> <span id="mojang_status_icon">&#8226;</span>

View File

@ -1,6 +1,6 @@
<div id="loginContainer" style="display: none;"> <div id="loginContainer" style="display: none;">
<div id="loginContent"> <div id="loginContent">
<form id="loginForm" onsubmit="void(0); return false;"> <form id="loginForm">
<img id="loginImageSeal" src="assets/images/WesterosSealCircle.png"/> <img id="loginImageSeal" src="assets/images/WesterosSealCircle.png"/>
<span class="loginSpan" id="loginSubheader">MEMBER LOGIN</span> <span class="loginSpan" id="loginSubheader">MEMBER LOGIN</span>
<div class="loginFieldContainer"> <div class="loginFieldContainer">

View File

@ -3,7 +3,7 @@
<span id="serverSelectHeader">Available Servers</span> <span id="serverSelectHeader">Available Servers</span>
<div id="serverSelectList"> <div id="serverSelectList">
<div id="serverSelectListScrollable"> <div id="serverSelectListScrollable">
<button class="serverListing" selected> <button class="serverListing" servid="WesterosCraft-1.11.2" selected>
<img class="serverListingImg" src="./assets/images/WesterosSealSquare.png"/> <img class="serverListingImg" src="./assets/images/WesterosSealSquare.png"/>
<div class="serverListingDetails"> <div class="serverListingDetails">
<span class="serverListingName">WesterosCraft Production Server</span> <span class="serverListingName">WesterosCraft Production Server</span>
@ -24,7 +24,7 @@
</div> </div>
</div> </div>
</button> </button>
<button class="serverListing"> <button class="serverListing" servid="WesterosCraft-Test">
<img class="serverListingImg" src="./assets/images/testserver.png"/> <img class="serverListingImg" src="./assets/images/testserver.png"/>
<div class="serverListingDetails"> <div class="serverListingDetails">
<span class="serverListingName">WesterosCraft Test Server</span> <span class="serverListingName">WesterosCraft Test Server</span>
@ -35,7 +35,7 @@
</div> </div>
</div> </div>
</button> </button>
<button class="serverListing"> <button class="serverListing" servid="WesterosCraft-Test-1.12.2">
<img class="serverListingImg" src="./assets/images/testserver.png"/> <img class="serverListingImg" src="./assets/images/testserver.png"/>
<div class="serverListingDetails"> <div class="serverListingDetails">
<span class="serverListingName">WesterosCraft 1.12.2 Test Server</span> <span class="serverListingName">WesterosCraft 1.12.2 Test Server</span>
@ -46,7 +46,7 @@
</div> </div>
</div> </div>
</button> </button>
<button class="serverListing"> <button class="serverListing" servid="EssosCraft">
<img class="serverListingImg" src="./assets/images/testserver.png"/> <img class="serverListingImg" src="./assets/images/testserver.png"/>
<div class="serverListingDetails"> <div class="serverListingDetails">
<span class="serverListingName">EssosCraft Test Server</span> <span class="serverListingName">EssosCraft Test Server</span>

1328
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -28,10 +28,10 @@
}, },
"homepage": "http://www.westeroscraft.com/", "homepage": "http://www.westeroscraft.com/",
"dependencies": { "dependencies": {
"adm-zip": "^0.4.7", "adm-zip": "^0.4.9",
"async": "^2.6.0", "async": "^2.6.0",
"discord-rpc": "^3.0.0-beta.10", "discord-rpc": "^3.0.0-beta.10",
"ejs": "^2.5.7", "ejs": "^2.5.9",
"ejs-electron": "^2.0.1", "ejs-electron": "^2.0.1",
"jquery": "^3.3.1", "jquery": "^3.3.1",
"mkdirp": "^0.5.1", "mkdirp": "^0.5.1",
@ -42,8 +42,8 @@
"winreg": "^1.2.4" "winreg": "^1.2.4"
}, },
"devDependencies": { "devDependencies": {
"electron": "^1.8.4", "electron": "^1.8.5",
"electron-builder": "^20.8.1" "electron-builder": "^20.10.0"
}, },
"build": { "build": {
"appId": "westeroscraftlauncher", "appId": "westeroscraftlauncher",