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
* * */
/* 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;

View File

@ -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 */

View File

@ -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.

View File

@ -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()

View File

@ -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>

View File

@ -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">

View File

@ -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>

1342
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/",
"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",