diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css index dbe41b19..2020fefb 100644 --- a/app/assets/css/launcher.css +++ b/app/assets/css/launcher.css @@ -395,6 +395,7 @@ p { height: 100%; width: 100%; transition: filter 0.25s ease; + background: rgba(0, 0, 0, 0.50); } /* Login content wrapper. */ @@ -1790,11 +1791,12 @@ p { } /* * * -* Overlay View (Server Selection Content) +* Overlay View (Server + Account Selection Content) * * */ /* Server selection content container. */ -#serverSelectContent { +#serverSelectContent, +#accountSelectContent { display: flex; flex-direction: column; justify-content: center; @@ -1803,7 +1805,8 @@ p { } /* Server selection header. */ -#serverSelectHeader { +#serverSelectHeader, +#accountSelectHeader { font-family: 'Avenir Medium'; font-size: 20px; font-weight: bold; @@ -1812,7 +1815,8 @@ p { } /* Wrapper div for the list of available servers. */ -#serverSelectList { +#serverSelectList, +#accountSelectList { display: flex; flex-direction: column; align-items: center; @@ -1822,17 +1826,21 @@ p { } /* Scrollable div which lists the available servers. */ -#serverSelectListScrollable { +#serverSelectListScrollable, +#accountSelectListScrollable { padding: 0px 5px; overflow-y: scroll; } -#serverSelectListScrollable::-webkit-scrollbar { +#serverSelectListScrollable::-webkit-scrollbar, +#accountSelectListScrollable::-webkit-scrollbar { width: 2px; } -#serverSelectListScrollable::-webkit-scrollbar-track { +#serverSelectListScrollable::-webkit-scrollbar-track, +#accountSelectListScrollable::-webkit-scrollbar-track { display: none; } -#serverSelectListScrollable::-webkit-scrollbar-thumb { +#serverSelectListScrollable::-webkit-scrollbar-thumb, +#accountSelectListScrollable::-webkit-scrollbar-thumb { border-radius: 10px; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50); } @@ -1862,14 +1870,49 @@ p { opacity: 1.0; } +.accountListing { + color: white; + border: 1px solid rgba(170, 170, 170, 0.5); + border-radius: 4px; + padding: 5px 45px; + width: 250px; + display: flex; + justify-content: flex-start; + align-items: center; + opacity: 0.6; + transition: 0.25s ease; + cursor: pointer; + position: relative; + background: rgba(255, 255, 255, 0.25); +} +.accountListing[selected] { + cursor: default; + opacity: 1.0; +} +.accountListing:hover, +.accountListing:focus { + outline: none; + opacity: 1.0; +} + +.accountListingName { + display: flex; + height: 100%; + width: 100%; + padding-left: 10px; +} + /* Add spacing between server listings. */ -#serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child) { +#serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child), +#accountSelectListScrollable > .accountListing:not(:first-child):not(:last-child) { margin: 5px 0px; } -#serverSelectListScrollable > .serverListing:first-child { +#serverSelectListScrollable > .serverListing:first-child, +#accountSelectListScrollable > .accountListing:first-child { margin-bottom: 5px; } -#serverSelectListScrollable > .serverListing:last-child { +#serverSelectListScrollable > .serverListing:last-child, +#accountSelectListScrollable > .accountListing:last-child { margin-top: 5px; } @@ -1980,7 +2023,8 @@ p { } /* Content container which contains the server select actions. */ -#serverSelectActions { +#serverSelectActions, +#accountSelectActions { display: flex; flex-direction: column; justify-content: center; @@ -1989,7 +2033,8 @@ p { } /* Server selection confirm button styles. */ -#serverSelectConfirm { +#serverSelectConfirm, +#accountSelectConfirm { background: none; border: 1px solid #ffffff; color: white; @@ -2002,17 +2047,21 @@ p { min-height: 20.67px; } #serverSelectConfirm:hover, -#serverSelectConfirm:focus { +#serverSelectConfirm:focus, +#accountSelectConfirm:hover, +#accountSelectConfirm:focus { box-shadow: 0px 0px 10px 0px #fff; outline: none; } -#serverSelectConfirm:active { +#serverSelectConfirm:active, +#accountSelectConfirm:active { border-color: rgba(255, 255, 255, 0.75); color: rgba(255, 255, 255, 0.75); } /* Server selection cancel button styles. */ -#serverSelectCancel { +#serverSelectCancel, +#accountSelectCancel { font-family: 'Avenir Book'; font-weight: bold; font-size: 10px; @@ -2026,10 +2075,13 @@ p { cursor: pointer; } #serverSelectCancel:hover, -#serverSelectCancel:focus { +#serverSelectCancel:focus, +#accountSelectCancel:hover, +#accountSelectCancel:focus { color: rgba(255, 255, 255, 0.75); } -#serverSelectCancel:active { +#serverSelectCancel:active, +#accountSelectCancel:active { color: rgba(165, 165, 165, 0.75); } diff --git a/app/assets/js/configmanager.js b/app/assets/js/configmanager.js index 7895b478..9b987374 100644 --- a/app/assets/js/configmanager.js +++ b/app/assets/js/configmanager.js @@ -238,6 +238,22 @@ exports.getSelectedAccount = function(){ return config.authenticationDatabase[config.selectedAccount] } +/** + * Set the selected authenticated account. + * + * @param {string} uuid The UUID of the account which is to be set + * as the selected account. + * + * @returns {Object} The selected authenticated account. + */ +exports.setSelectedAccount = function(uuid){ + const authAcc = config.authenticationDatabase[uuid] + if(authAcc != null) { + config.selectedAccount = uuid + } + return authAcc +} + // User Configurable Settings // Java Settings diff --git a/app/assets/js/scripts/landing.js b/app/assets/js/scripts/landing.js index 62620f7c..974c536f 100644 --- a/app/assets/js/scripts/landing.js +++ b/app/assets/js/scripts/landing.js @@ -6,7 +6,6 @@ const cp = require('child_process') const {URL} = require('url') // Internal Requirements -const AuthManager = require('./assets/js/authmanager.js') const DiscordWrapper = require('./assets/js/discordwrapper.js') const Mojang = require('./assets/js/mojang.js') const ProcessBuilder = require('./assets/js/processbuilder.js') diff --git a/app/assets/js/scripts/login.js b/app/assets/js/scripts/login.js index ed47ef31..cde96089 100644 --- a/app/assets/js/scripts/login.js +++ b/app/assets/js/scripts/login.js @@ -233,8 +233,12 @@ loginButton.addEventListener('click', () => { $('.checkmark').toggle() //console.log(value) setTimeout(() => { - $('#loginContainer').fadeOut(500, () => { - $('#landingContainer').fadeIn(500) + switchView(VIEWS.login, VIEWS.landing, 500, 500, () => { + loginUsername.value = '' + loginPassword.value = '' + loginLoading(false) + loginButton.innerHTML = loginButton.innerHTML.replace('SUCCESS', 'LOGIN') + formDisabled(false) }) }, 1000) }).catch((err) => { diff --git a/app/assets/js/scripts/overlay.js b/app/assets/js/scripts/overlay.js index 90aa2156..74b2025c 100644 --- a/app/assets/js/scripts/overlay.js +++ b/app/assets/js/scripts/overlay.js @@ -109,11 +109,16 @@ document.addEventListener('keydown', (e) => { } else if(e.key === 'Enter'){ document.getElementById('serverSelectConfirm').click() } + } else if(document.getElementById('accountSelectContent').style.display !== 'none'){ + console.debug('ServSelLi Keydown Called:', document.getElementById('accountSelectContent').style.display) + if(e.key === 'Escape'){ + document.getElementById('accountSelectCancel').click() + } else if(e.key === 'Enter'){ + document.getElementById('accountSelectConfirm').click() + } } }) -document.getElementById('serverSelectActions').onsubmit = () => { return false } - document.getElementById('serverSelectConfirm').addEventListener('click', () => { const listings = document.getElementsByClassName('serverListing') for(let i=0; i { // None are selected? Not possible right? Meh, handle it. if(listings.length > 0){ ConfigManager.setSelectedServer(listings[0].getAttribute('servid')) + ConfigManager.save() updateSelectedServer() toggleOverlay(false) } }) +document.getElementById('accountSelectConfirm').addEventListener('click', () => { + const listings = document.getElementsByClassName('accountListing') + for(let i=0; i 0){ + const authAcc = ConfigManager.setSelectedAccount(listings[0].getAttribute('uuid')) + ConfigManager.save() + updateSelectedAccount(authAcc) + toggleOverlay(false) + validateSelectedAccount() + } +}) + // Bind server select cancel button. document.getElementById('serverSelectCancel').addEventListener('click', () => { toggleOverlay(false) }) +document.getElementById('accountSelectCancel').addEventListener('click', () => { + $('#accountSelectContent').fadeOut(250, () => { + $('#overlayContent').fadeIn(250) + }) +}) + function setServerListingHandlers(){ const listings = Array.from(document.getElementsByClassName('serverListing')) listings.map((val) => { @@ -160,6 +194,25 @@ function setServerListingHandlers(){ }) } +function setAccountListingHandlers(){ + const listings = Array.from(document.getElementsByClassName('accountListing')) + listings.map((val) => { + val.onclick = e => { + if(val.hasAttribute('selected')){ + return + } + const cListings = document.getElementsByClassName('accountListing') + for(let i=0; iaccountsObj[v]); + const selectedUUID = ConfigManager.getSelectedAccount().uuid + let htmlString = `` + for(let i=0; i + +
${accounts[i].displayName}
+ ` + } + document.getElementById('accountSelectListScrollable').innerHTML = htmlString + +} + function prepareServerSelectionList(){ populateServerListings() setServerListingHandlers() +} + +function prepareAccountSelectionList(){ + populateAccountListings() + setAccountListingHandlers() } \ No newline at end of file diff --git a/app/assets/js/scripts/uibinder.js b/app/assets/js/scripts/uibinder.js index bb883d8c..1b74c72e 100644 --- a/app/assets/js/scripts/uibinder.js +++ b/app/assets/js/scripts/uibinder.js @@ -4,12 +4,54 @@ */ // Requirements const path = require('path') +const AuthManager = require('./assets/js/authmanager.js') const {AssetGuard} = require('./assets/js/assetguard.js') const ConfigManager = require('./assets/js/configmanager.js') let rscShouldLoad = false let fatalStartupError = false +// Mapping of each view to their container IDs. +const VIEWS = { + landing: 'landingContainer', + login: 'loginContainer', + welcome: 'welcomeContainer' +} + +// The currently shown view container. +let currentView = VIEWS.landing + +/** + * Switch launcher views. + * + * @param {string} current The ID of the current view container. + * @param {*} next The ID of the next view container. + * @param {*} currentFadeTime Optional. The fade out time for the current view. + * @param {*} nextFadeTime Optional. The fade in time for the next view. + * @param {*} onCurrentFade Optional. Callback function to execute when the current + * view fades out. + * @param {*} onNextFade Optional. Callback function to execute when the next view + * fades in. + */ +function switchView(current, next, currentFadeTime = 500, nextFadeTime = 500, onCurrentFade = () => {}, onNextFade = () => {}){ + currentView = current + $(`#${current}`).fadeOut(currentFadeTime, () => { + onCurrentFade() + $(`#${next}`).fadeIn(nextFadeTime, () => { + onNextFade() + }) + }) +} + +/** + * Get the currently shown view container. + * + * @returns {string} The currently shown view container. + */ +function getCurrentView(){ + return currentView +} + function showMainUI(){ updateSelectedServer(AssetGuard.getServerById(ConfigManager.getSelectedServer()).name) refreshServerStatus() @@ -18,6 +60,8 @@ function showMainUI(){ document.body.style.backgroundImage = `url('assets/images/backgrounds/${document.body.getAttribute('bkid')}.jpg')` $('#main').show() + //validateSelectedAccount() + if(ConfigManager.isFirstLaunch()){ $('#welcomeContainer').fadeIn(1000) } else { @@ -25,7 +69,7 @@ function showMainUI(){ } setTimeout(() => { - $('#loadingContainer').fadeOut(750, () => { + $('#loadingContainer').fadeOut(500, () => { $('#loadSpinnerImage').removeClass('rotating') }) }, 500) @@ -70,6 +114,59 @@ function refreshDistributionIndex(remote, onSuccess, onError){ } } +async function validateSelectedAccount(){ + const selectedAcc = ConfigManager.getSelectedAccount() + if(selectedAcc != null){ + const val = await AuthManager.validateSelected() + if(!val){ + const accLen = Object.keys(ConfigManager.getAuthAccounts()).length + setOverlayContent( + 'Failed to Refresh Login', + `We were unable to refresh the login for ${selectedAcc.displayName}. Please ${accLen > 1 ? 'select another account or ' : ''} login again.`, + 'Login', + 'Select Another Account' + ) + setOverlayHandler(() => { + document.getElementById('loginUsername').value = selectedAcc.username + validateEmail(selectedAcc.username) + switchView(getCurrentView(), VIEWS.login) + toggleOverlay(false) + }) + setDismissHandler(() => { + if(accLen > 2){ + prepareAccountSelectionList() + $('#overlayContent').fadeOut(250, () => { + $('#accountSelectContent').fadeIn(250) + }) + } else { + const accountsObj = ConfigManager.getAuthAccounts() + const accounts = Array.from(Object.keys(accountsObj), v=>accountsObj[v]); + const selectedUUID = ConfigManager.getSelectedAccount().uuid + for(let i=0; i 1) + } else { + return true + } + } else { + return true + } +} + +function setSelectedAccount(uuid){ + const authAcc = ConfigManager.setSelectedAccount(uuid) + ConfigManager.save() + updateSelectedAccount(authAcc) + //validateSelectedAccount() +} + // Synchronous Listener document.addEventListener('readystatechange', function(){ diff --git a/app/assets/js/scripts/welcome.js b/app/assets/js/scripts/welcome.js index 5b5bad49..e6ff6297 100644 --- a/app/assets/js/scripts/welcome.js +++ b/app/assets/js/scripts/welcome.js @@ -2,7 +2,5 @@ * Script for welcome.ejs */ document.getElementById('welcomeButton').addEventListener('click', e => { - $('#welcomeContainer').fadeOut(500, () => { - $('#loginContainer').fadeIn(500) - }) + switchView(VIEWS.welcome, VIEWS.login) }) \ No newline at end of file diff --git a/app/login.ejs b/app/login.ejs index 68e70979..eed44786 100644 --- a/app/login.ejs +++ b/app/login.ejs @@ -2,7 +2,7 @@
- MEMBER LOGIN + MINECRAFT LOGIN
@@ -10,7 +10,7 @@ * Invalid Value - +
diff --git a/app/overlay.ejs b/app/overlay.ejs index 0340afdd..bfbe486d 100644 --- a/app/overlay.ejs +++ b/app/overlay.ejs @@ -13,6 +13,28 @@
+
Lorem Ipsum:
Finis Illud
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.. diff --git a/package-lock.json b/package-lock.json index 3a5bde66..1b603934 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "westeroscraftlauncher", - "version": "0.0.1-dev", + "version": "0.0.1-alpha.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index d66b3a03..1d6e4f05 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "westeroscraftlauncher", - "version": "0.0.1-dev", + "version": "0.0.1-alpha.1", "description": "Custom modded launcher for Westeroscraft", "productName": "WesterosCraft Launcher", "main": "index.js",