Further organization of the browser scripts.
Moved server selection styles to launcher.css, as they are nearly finished. Moved overlay convenience functions to overlay.js. Moved launch area (landing.ejs) convenience functions to landing.js. Various cleanups and documentation also added.
This commit is contained in:
Daniel Scalzi
parent
92d8a5e254
commit
2f66d44824
@ -3,7 +3,7 @@
|
|||||||
<meta charset="utf-8" http-equiv="Content-Security-Policy" content="script-src 'self'"/>
|
<meta charset="utf-8" http-equiv="Content-Security-Policy" content="script-src 'self'"/>
|
||||||
<title>Westeroscraft Launcher</title>
|
<title>Westeroscraft Launcher</title>
|
||||||
<script src="./assets/js/scripts/uicore.js"></script>
|
<script src="./assets/js/scripts/uicore.js"></script>
|
||||||
<script src="./assets/js/scripts/actionbinder.js"></script>
|
<script src="./assets/js/scripts/uibinder.js"></script>
|
||||||
<link type="text/css" rel="stylesheet" href="./assets/css/launcher.css">
|
<link type="text/css" rel="stylesheet" href="./assets/css/launcher.css">
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
|||||||
@ -1294,6 +1294,11 @@ p {
|
|||||||
* *
|
* *
|
||||||
******************************************************************************/
|
******************************************************************************/
|
||||||
|
|
||||||
|
/* * *
|
||||||
|
* Overlay View (Main Content)
|
||||||
|
* * */
|
||||||
|
|
||||||
|
/* Overlay container, placed over the main div. */
|
||||||
#overlayContainer {
|
#overlayContainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 22px;
|
top: 22px;
|
||||||
@ -1305,6 +1310,7 @@ p {
|
|||||||
background: rgba(0, 0, 0, 0.50);
|
background: rgba(0, 0, 0, 0.50);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Main overlay content. */
|
||||||
#overlayContent {
|
#overlayContent {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -1319,6 +1325,7 @@ p {
|
|||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Main overlay content anchor styles. */
|
||||||
#overlayContent a {
|
#overlayContent a {
|
||||||
color: rgba(202, 202, 202, 0.75);
|
color: rgba(202, 202, 202, 0.75);
|
||||||
transition: 0.25s ease;
|
transition: 0.25s ease;
|
||||||
@ -1330,18 +1337,18 @@ p {
|
|||||||
color: rgba(165, 165, 165, 0.75);
|
color: rgba(165, 165, 165, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Add spacing between overlay content elements. */
|
||||||
#overlayContent > *:first-child {
|
#overlayContent > *:first-child {
|
||||||
margin-top: 0px !important;
|
margin-top: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#overlayContent > *:last-child {
|
#overlayContent > *:last-child {
|
||||||
margin-bottom: 0px !important;
|
margin-bottom: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
#overlayContent > * {
|
#overlayContent > * {
|
||||||
margin: 8px 0px;
|
margin: 8px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Overlay title styles. */
|
||||||
#overlayTitle {
|
#overlayTitle {
|
||||||
font-family: 'Avenir Medium';
|
font-family: 'Avenir Medium';
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
@ -1350,6 +1357,7 @@ p {
|
|||||||
letter-spacing: 1px;
|
letter-spacing: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Overlay description styles. */
|
||||||
#overlayDesc {
|
#overlayDesc {
|
||||||
font-family: 'Avenir Book';
|
font-family: 'Avenir Book';
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
@ -1357,12 +1365,14 @@ p {
|
|||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Div which contains action buttons. */
|
||||||
#overlayActionContainer {
|
#overlayActionContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Overlay acknowledge button styles. */
|
||||||
#overlayAcknowledge {
|
#overlayAcknowledge {
|
||||||
background: none;
|
background: none;
|
||||||
border: 1px solid #ffffff;
|
border: 1px solid #ffffff;
|
||||||
@ -1384,6 +1394,7 @@ p {
|
|||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Overlay dismiss option styles. */
|
||||||
#overlayDismiss {
|
#overlayDismiss {
|
||||||
font-family: 'Avenir Book';
|
font-family: 'Avenir Book';
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -1397,3 +1408,242 @@ p {
|
|||||||
#overlayDismiss:active {
|
#overlayDismiss:active {
|
||||||
color: rgba(165, 165, 165, 0.75);
|
color: rgba(165, 165, 165, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* * *
|
||||||
|
* Overlay View (Server Selection Content)
|
||||||
|
* * */
|
||||||
|
|
||||||
|
/* Server selection content container. */
|
||||||
|
#serverSelectContent {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
height: 75%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Server selection header. */
|
||||||
|
#serverSelectHeader {
|
||||||
|
font-family: 'Avenir Medium';
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Wrapper div for the list of available servers. */
|
||||||
|
#serverSelectList {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
max-height: 65%;
|
||||||
|
min-height: 40%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Scrollable div which lists the available servers. */
|
||||||
|
#serverSelectListScrollable {
|
||||||
|
padding: 0px 5px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
#serverSelectListScrollable::-webkit-scrollbar {
|
||||||
|
width: 2px;
|
||||||
|
}
|
||||||
|
#serverSelectListScrollable::-webkit-scrollbar-track {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#serverSelectListScrollable::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 10px;
|
||||||
|
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content container for a server listing. */
|
||||||
|
.serverListing {
|
||||||
|
border: none;
|
||||||
|
padding: 0px;
|
||||||
|
width: 375px;
|
||||||
|
min-height: 60px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
align-items: center;
|
||||||
|
opacity: 0.6;
|
||||||
|
transition: 0.25s ease;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
background: rgba(131, 131, 131, 0.25);
|
||||||
|
}
|
||||||
|
.serverListing[selected] {
|
||||||
|
cursor: default;
|
||||||
|
opacity: 1.0;
|
||||||
|
}
|
||||||
|
.serverListing:hover,
|
||||||
|
.serverListing:focus {
|
||||||
|
outline: none;
|
||||||
|
opacity: 1.0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Add spacing between server listings. */
|
||||||
|
#serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child) {
|
||||||
|
margin: 5px 0px;
|
||||||
|
}
|
||||||
|
#serverSelectListScrollable > .serverListing:first-child {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
#serverSelectListScrollable > .serverListing:last-child {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Server listing image. */
|
||||||
|
.serverListingImg {
|
||||||
|
margin: 0px 10px 0px 5px;
|
||||||
|
border: 1px solid #fff;
|
||||||
|
height: 50px;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content container for the server listing's details. */
|
||||||
|
.serverListingDetails {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The name of the server listing. */
|
||||||
|
.serverListingName {
|
||||||
|
font-family: 'Avenir Book';
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Description for the server listing. */
|
||||||
|
.serverListingDescription {
|
||||||
|
font-family: 'Avenir Book';
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 10px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content container for the server listing's information. */
|
||||||
|
.serverListingInfo {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The minecraft version of the server listing. */
|
||||||
|
.serverListingVersion {
|
||||||
|
font-size: 10px;
|
||||||
|
color: #fff;
|
||||||
|
font-family: 'Avenir Book';
|
||||||
|
text-align: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
line-height: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border-radius: 2px;
|
||||||
|
background: rgba(31, 140, 11, 0.8);
|
||||||
|
padding: 0px 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* The revision version of the server's manifest. */
|
||||||
|
.serverListingRevision {
|
||||||
|
font-family: 'Avenir Book';
|
||||||
|
color: #969696;
|
||||||
|
font-size: 10px;
|
||||||
|
line-height: 12px;
|
||||||
|
padding: 0px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Star which indicates the default (main) server. */
|
||||||
|
.serverListingStarWrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
height: 12px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
/* Tooltip which displays when hovering over the star. */
|
||||||
|
.serverListingStarTooltip {
|
||||||
|
visibility: hidden;
|
||||||
|
opacity: 0;
|
||||||
|
width: 65px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.40);
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 4px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
left: 130%;
|
||||||
|
font-family: 'Avenir Book';
|
||||||
|
font-size: 10px;
|
||||||
|
transition: visibility 0s linear 0.25s, opacity 0.25s ease;
|
||||||
|
}
|
||||||
|
.serverListingStarTooltip::after {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 100%; /* To the left of the tooltip */
|
||||||
|
margin-top: -5px;
|
||||||
|
border-width: 5px;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: transparent rgba(0, 0, 0, 0.40) transparent transparent;
|
||||||
|
}
|
||||||
|
#serverListingStarWrapper:hover .serverListingStarTooltip {
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
transition-delay:0s;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Content container which contains the server select actions. */
|
||||||
|
#serverSelectActions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Server selection confirm button styles. */
|
||||||
|
#serverSelectConfirm {
|
||||||
|
background: none;
|
||||||
|
border: 1px solid #ffffff;
|
||||||
|
color: white;
|
||||||
|
font-family: 'Avenir Medium';
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 2px;
|
||||||
|
padding: 0px 8.1px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: 0.25s ease;
|
||||||
|
min-height: 20.67px;
|
||||||
|
}
|
||||||
|
#serverSelectConfirm:hover,
|
||||||
|
#serverSelectConfirm:focus {
|
||||||
|
box-shadow: 0px 0px 10px 0px #fff;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
#serverSelectConfirm:active {
|
||||||
|
border-color: rgba(255, 255, 255, 0.75);
|
||||||
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Server selection cancel button styles. */
|
||||||
|
#serverSelectCancel {
|
||||||
|
font-family: 'Avenir Book';
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 10px;
|
||||||
|
text-decoration: none;
|
||||||
|
padding-top: 2.5px;
|
||||||
|
color: rgba(202, 202, 202, 0.75);
|
||||||
|
transition: 0.25s ease;
|
||||||
|
}
|
||||||
|
#serverSelectCancel:hover {
|
||||||
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
}
|
||||||
|
#serverSelectCancel:active {
|
||||||
|
color: rgba(165, 165, 165, 0.75);
|
||||||
|
}
|
||||||
@ -1,3 +1,6 @@
|
|||||||
|
/**
|
||||||
|
* Script for landing.ejs
|
||||||
|
*/
|
||||||
// Requirements
|
// Requirements
|
||||||
const cp = require('child_process')
|
const cp = require('child_process')
|
||||||
const {URL} = require('url')
|
const {URL} = require('url')
|
||||||
@ -17,6 +20,57 @@ const launch_progress = document.getElementById('launch_progress')
|
|||||||
const launch_progress_label = document.getElementById('launch_progress_label')
|
const launch_progress_label = document.getElementById('launch_progress_label')
|
||||||
const launch_details_text = document.getElementById('launch_details_text')
|
const launch_details_text = document.getElementById('launch_details_text')
|
||||||
|
|
||||||
|
/* Launch Progress Wrapper Functions */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show/hide the loading area.
|
||||||
|
*
|
||||||
|
* @param {boolean} loading True if the loading area should be shown, otherwise false.
|
||||||
|
*/
|
||||||
|
function toggleLaunchArea(loading){
|
||||||
|
if(loading){
|
||||||
|
launch_details.style.display = 'flex'
|
||||||
|
launch_content.style.display = 'none'
|
||||||
|
} else {
|
||||||
|
launch_details.style.display = 'none'
|
||||||
|
launch_content.style.display = 'inline-flex'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the details text of the loading area.
|
||||||
|
*
|
||||||
|
* @param {string} details The new text for the loading details.
|
||||||
|
*/
|
||||||
|
function setLaunchDetails(details){
|
||||||
|
launch_details_text.innerHTML = details
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the value of the loading progress bar and display that value.
|
||||||
|
*
|
||||||
|
* @param {number} value The progress value.
|
||||||
|
* @param {number} max The total size.
|
||||||
|
* @param {number|string} percent Optional. The percentage to display on the progress label.
|
||||||
|
*/
|
||||||
|
function setLaunchPercentage(value, max, percent = ((value/max)*100)){
|
||||||
|
launch_progress.setAttribute('max', max)
|
||||||
|
launch_progress.setAttribute('value', value)
|
||||||
|
launch_progress_label.innerHTML = percent + '%'
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the value of the OS progress bar and display that on the UI.
|
||||||
|
*
|
||||||
|
* @param {number} value The progress value.
|
||||||
|
* @param {number} max The total download size.
|
||||||
|
* @param {number|string} percent Optional. The percentage to display on the progress label.
|
||||||
|
*/
|
||||||
|
function setDownloadPercentage(value, max, percent = ((value/max)*100)){
|
||||||
|
remote.getCurrentWindow().setProgressBar(value/max)
|
||||||
|
setLaunchPercentage(value, max, percent)
|
||||||
|
}
|
||||||
|
|
||||||
// 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..')
|
||||||
|
|||||||
@ -1,8 +1,10 @@
|
|||||||
//const validEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
|
/**
|
||||||
|
* Script for login.ejs
|
||||||
|
*/
|
||||||
// Validation Regexes.
|
// Validation Regexes.
|
||||||
const validUsername = /^[a-zA-Z0-9_]{1,16}$/
|
const validUsername = /^[a-zA-Z0-9_]{1,16}$/
|
||||||
const basicEmail = /^\S+@\S+\.\S+$/
|
const basicEmail = /^\S+@\S+\.\S+$/
|
||||||
|
//const validEmail = /^(([^<>()\[\]\.,;:\s@\"]+(\.[^<>()\[\]\.,;:\s@\"]+)*)|(\".+\"))@(([^<>()[\]\.,;:\s@\"]+\.)+[^<>()[\]\.,;:\s@\"]{2,})$/i
|
||||||
|
|
||||||
// Login Elements
|
// Login Elements
|
||||||
const loginEmailError = document.getElementById('loginEmailError')
|
const loginEmailError = document.getElementById('loginEmailError')
|
||||||
|
|||||||
@ -1,22 +1,6 @@
|
|||||||
// Requirements
|
/**
|
||||||
const path = require('path')
|
* Script for overlay.ejs
|
||||||
const ConfigManager = require(path.join(__dirname, 'assets', 'js', 'configmanager.js'))
|
*/
|
||||||
|
|
||||||
// Synchronous Listener
|
|
||||||
document.addEventListener('readystatechange', function(){
|
|
||||||
|
|
||||||
if (document.readyState === 'complete'){
|
|
||||||
if(ConfigManager.isFirstLaunch()){
|
|
||||||
$('#welcomeContainer').fadeIn(500)
|
|
||||||
} else {
|
|
||||||
$('#landingContainer').fadeIn(500)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/*if (document.readyState === 'interactive'){
|
|
||||||
|
|
||||||
}*/
|
|
||||||
}, false)
|
|
||||||
|
|
||||||
/* Overlay Wrapper Functions */
|
/* Overlay Wrapper Functions */
|
||||||
|
|
||||||
@ -104,55 +88,3 @@ function setDismissHandler(handler){
|
|||||||
document.getElementById('overlayDismiss').onclick = handler
|
document.getElementById('overlayDismiss').onclick = handler
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Launch Progress Wrapper Functions */
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Show/hide the loading area.
|
|
||||||
*
|
|
||||||
* @param {boolean} loading True if the loading area should be shown, otherwise false.
|
|
||||||
*/
|
|
||||||
function toggleLaunchArea(loading){
|
|
||||||
if(loading){
|
|
||||||
launch_details.style.display = 'flex'
|
|
||||||
launch_content.style.display = 'none'
|
|
||||||
} else {
|
|
||||||
launch_details.style.display = 'none'
|
|
||||||
launch_content.style.display = 'inline-flex'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set the details text of the loading area.
|
|
||||||
*
|
|
||||||
* @param {string} details The new text for the loading details.
|
|
||||||
*/
|
|
||||||
function setLaunchDetails(details){
|
|
||||||
launch_details_text.innerHTML = details
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set the value of the loading progress bar and display that value.
|
|
||||||
*
|
|
||||||
* @param {number} value The progress value.
|
|
||||||
* @param {number} max The total size.
|
|
||||||
* @param {number|string} percent Optional. The percentage to display on the progress label.
|
|
||||||
*/
|
|
||||||
function setLaunchPercentage(value, max, percent = ((value/max)*100)){
|
|
||||||
launch_progress.setAttribute('max', max)
|
|
||||||
launch_progress.setAttribute('value', value)
|
|
||||||
launch_progress_label.innerHTML = percent + '%'
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Set the value of the OS progress bar and display that on the UI.
|
|
||||||
*
|
|
||||||
* @param {number} value The progress value.
|
|
||||||
* @param {number} max The total download size.
|
|
||||||
* @param {number|string} percent Optional. The percentage to display on the progress label.
|
|
||||||
*/
|
|
||||||
function setDownloadPercentage(value, max, percent = ((value/max)*100)){
|
|
||||||
remote.getCurrentWindow().setProgressBar(value/max)
|
|
||||||
setLaunchPercentage(value, max, percent)
|
|
||||||
}
|
|
||||||
|
|
||||||
23
app/assets/js/scripts/uibinder.js
Normal file
23
app/assets/js/scripts/uibinder.js
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
/**
|
||||||
|
* Initialize UI functions which depend on internal modules.
|
||||||
|
* Loaded after core UI functions are initialized in uicore.js.
|
||||||
|
*/
|
||||||
|
// Requirements
|
||||||
|
const path = require('path')
|
||||||
|
const ConfigManager = require(path.join(__dirname, 'assets', 'js', 'configmanager.js'))
|
||||||
|
|
||||||
|
// Synchronous Listener
|
||||||
|
document.addEventListener('readystatechange', function(){
|
||||||
|
|
||||||
|
if (document.readyState === 'complete'){
|
||||||
|
if(ConfigManager.isFirstLaunch()){
|
||||||
|
$('#welcomeContainer').fadeIn(500)
|
||||||
|
} else {
|
||||||
|
$('#landingContainer').fadeIn(500)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*if (document.readyState === 'interactive'){
|
||||||
|
|
||||||
|
}*/
|
||||||
|
}, false)
|
||||||
@ -1,7 +1,7 @@
|
|||||||
// DOM cache.
|
/**
|
||||||
const welcomeButton = document.getElementById('welcomeButton')
|
* Script for welcome.ejs
|
||||||
|
*/
|
||||||
welcomeButton.addEventListener('click', e => {
|
document.getElementById('welcomeButton').addEventListener('click', e => {
|
||||||
$('#welcomeContainer').fadeOut(500, () => {
|
$('#welcomeContainer').fadeOut(500, () => {
|
||||||
$('#loginContainer').fadeIn(500)
|
$('#loginContainer').fadeIn(500)
|
||||||
})
|
})
|
||||||
|
|||||||
223
app/overlay.ejs
223
app/overlay.ejs
@ -1,223 +1,3 @@
|
|||||||
<style text="text/css">
|
|
||||||
#serverSelectContent {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
height: 75%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#serverSelectHeader {
|
|
||||||
font-family: 'Avenir Medium';
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#serverSelectList {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
max-height: 65%;
|
|
||||||
min-height: 40%;
|
|
||||||
}
|
|
||||||
#serverSelectListScrollable {
|
|
||||||
padding: 0px 5px;
|
|
||||||
overflow-y: scroll;
|
|
||||||
}
|
|
||||||
#serverSelectListScrollable::-webkit-scrollbar {
|
|
||||||
width: 2px;
|
|
||||||
}
|
|
||||||
#serverSelectListScrollable::-webkit-scrollbar-track {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#serverSelectListScrollable::-webkit-scrollbar-thumb {
|
|
||||||
border-radius: 10px;
|
|
||||||
box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.50);
|
|
||||||
}
|
|
||||||
|
|
||||||
.serverListing {
|
|
||||||
border: none;
|
|
||||||
padding: 0px;
|
|
||||||
width: 375px;
|
|
||||||
min-height: 60px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
align-items: center;
|
|
||||||
opacity: 0.6;
|
|
||||||
transition: 0.25s ease;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
background: rgba(131, 131, 131, 0.25);
|
|
||||||
}
|
|
||||||
.serverListing[selected] {
|
|
||||||
cursor: default;
|
|
||||||
opacity: 1.0;
|
|
||||||
}
|
|
||||||
.serverListing:hover,
|
|
||||||
.serverListing:focus {
|
|
||||||
outline: none;
|
|
||||||
opacity: 1.0;
|
|
||||||
}
|
|
||||||
#serverSelectListScrollable > .serverListing:not(:first-child):not(:last-child) {
|
|
||||||
margin: 5px 0px;
|
|
||||||
}
|
|
||||||
#serverSelectListScrollable > .serverListing:first-child {
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
#serverSelectListScrollable > .serverListing:last-child {
|
|
||||||
margin-top: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serverListingImg {
|
|
||||||
margin: 0px 10px 0px 5px;
|
|
||||||
border: 1px solid #fff;
|
|
||||||
height: 50px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serverListingDetails {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serverListingName {
|
|
||||||
font-family: 'Avenir Book';
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serverListingDescription {
|
|
||||||
font-family: 'Avenir Book';
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
#serverSelectActions {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#serverSelectConfirm {
|
|
||||||
background: none;
|
|
||||||
border: 1px solid #ffffff;
|
|
||||||
color: white;
|
|
||||||
font-family: 'Avenir Medium';
|
|
||||||
font-weight: bold;
|
|
||||||
border-radius: 2px;
|
|
||||||
padding: 0px 8.1px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: 0.25s ease;
|
|
||||||
min-height: 20.67px;
|
|
||||||
}
|
|
||||||
#serverSelectConfirm:hover,
|
|
||||||
#serverSelectConfirm:focus {
|
|
||||||
box-shadow: 0px 0px 10px 0px #fff;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
#serverSelectConfirm:active {
|
|
||||||
border-color: rgba(255, 255, 255, 0.75);
|
|
||||||
color: rgba(255, 255, 255, 0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
#serverSelectCancel {
|
|
||||||
font-family: 'Avenir Book';
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 10px;
|
|
||||||
text-decoration: none;
|
|
||||||
padding-top: 2.5px;
|
|
||||||
color: rgba(202, 202, 202, 0.75);
|
|
||||||
transition: 0.25s ease;
|
|
||||||
}
|
|
||||||
#serverSelectCancel:hover {
|
|
||||||
color: rgba(255, 255, 255, 0.75);
|
|
||||||
}
|
|
||||||
#serverSelectCancel:active {
|
|
||||||
color: rgba(165, 165, 165, 0.75);
|
|
||||||
}
|
|
||||||
|
|
||||||
.serverListingInfo {
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serverListingVersion {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #fff;
|
|
||||||
font-family: 'Avenir Book';
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 12px;
|
|
||||||
height: 12px;
|
|
||||||
border-radius: 2px;
|
|
||||||
background: rgba(31, 140, 11, 0.8);
|
|
||||||
padding: 0px 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serverListingRevision {
|
|
||||||
font-family: 'Avenir Book';
|
|
||||||
color: #969696;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 12px;
|
|
||||||
padding: 0px 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#serverListingStarWrapper {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
cursor: pointer;
|
|
||||||
height: 12px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serverListingStarTooltip {
|
|
||||||
visibility: hidden;
|
|
||||||
opacity: 0;
|
|
||||||
width: 65px;
|
|
||||||
background-color: rgba(0, 0, 0, 0.40);
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 4px;
|
|
||||||
position: absolute;
|
|
||||||
z-index: 1;
|
|
||||||
left: 130%;
|
|
||||||
font-family: 'Avenir Book';
|
|
||||||
font-size: 10px;
|
|
||||||
transition: visibility 0s linear 0.25s, opacity 0.25s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.serverListingStarTooltip::after {
|
|
||||||
content: " ";
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
right: 100%; /* To the left of the tooltip */
|
|
||||||
margin-top: -5px;
|
|
||||||
border-width: 5px;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: transparent rgba(0, 0, 0, 0.40) transparent transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
#serverListingStarWrapper:hover .serverListingStarTooltip {
|
|
||||||
visibility: visible;
|
|
||||||
opacity: 1;
|
|
||||||
transition-delay:0s;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<div id="overlayContainer" style="display: none;">
|
<div id="overlayContainer" style="display: none;">
|
||||||
<div id="serverSelectContent">
|
<div id="serverSelectContent">
|
||||||
<span id="serverSelectHeader">Available Servers</span>
|
<span id="serverSelectHeader">Available Servers</span>
|
||||||
@ -231,7 +11,7 @@
|
|||||||
<div class="serverListingInfo">
|
<div class="serverListingInfo">
|
||||||
<div class="serverListingVersion">1.11.2</div>
|
<div class="serverListingVersion">1.11.2</div>
|
||||||
<div class="serverListingRevision">3.4.17</div>
|
<div class="serverListingRevision">3.4.17</div>
|
||||||
<div id="serverListingStarWrapper">
|
<div class="serverListingStarWrapper">
|
||||||
<svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
|
<svg id="Layer_1" viewBox="0 0 107.45 104.74" width="20px" height="20px">
|
||||||
<defs>
|
<defs>
|
||||||
<style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
|
<style>.cls-1{fill:#fff;}.cls-2{fill:none;stroke:#fff;stroke-miterlimit:10;}</style>
|
||||||
@ -292,4 +72,5 @@
|
|||||||
<a href="javascript:void(0);" id="overlayDismiss" style="display: none;">Dismiss</a>
|
<a href="javascript:void(0);" id="overlayDismiss" style="display: none;">Dismiss</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<script src="./assets/js/scripts/overlay.js"></script>
|
||||||
</div>
|
</div>
|
||||||
Loading…
Reference in New Issue
Block a user