Working on binding each view together.
Separate views are stored in an ejs file. When the app starts, each file will be loaded, with the DOM elements hidden. Based on the state of the application, a specific view will be fadded in. Switching between views will use this principle. Moved contents of index.ejs to landing.ejs to make it compatible with the new format. As a result, index.ejs is deprecated and will be removed once it is no longer needed for reference.
This commit is contained in:
Daniel Scalzi
parent
7fb33c6813
commit
ec9e95c130
@ -11,6 +11,7 @@
|
||||
background-size: cover;
|
||||
}
|
||||
#main {
|
||||
height: calc(100% - 22px);
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 100%);
|
||||
}
|
||||
</style>
|
||||
@ -18,7 +19,9 @@
|
||||
<body>
|
||||
<% include frame.ejs %>
|
||||
<div id="main">
|
||||
<% include welcome.ejs %>
|
||||
<% include login.ejs %>
|
||||
<% include landing.ejs %>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@ -290,7 +290,7 @@ p {
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: 0.25s ease;
|
||||
transition: filter 0.25s ease;
|
||||
}
|
||||
|
||||
/* Login content wrapper. */
|
||||
@ -859,62 +859,62 @@ p {
|
||||
******************************************************************************/
|
||||
|
||||
/* Main content container. */
|
||||
#main {
|
||||
height: calc(100% - 22px);
|
||||
#landingContainer {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Upper content container. */
|
||||
#main > #upper {
|
||||
#landingContainer > #upper {
|
||||
height: 77%;
|
||||
display: flex;
|
||||
}
|
||||
#main > #upper > #left {
|
||||
#landingContainer > #upper > #left {
|
||||
display: inline-flex;
|
||||
width: 15%;
|
||||
height: 100%;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
#main > #upper > #content {
|
||||
#landingContainer > #upper > #content {
|
||||
display: inline-flex;
|
||||
width: 59%;
|
||||
height: 100%;
|
||||
}
|
||||
#main > #upper > #right {
|
||||
#landingContainer > #upper > #right {
|
||||
display: inline-flex;
|
||||
width: 26%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* Lower content container. */
|
||||
#main > #lower {
|
||||
#landingContainer > #lower {
|
||||
height: 23%;
|
||||
display: flex;
|
||||
background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
|
||||
}
|
||||
#main > #lower > #left {
|
||||
#landingContainer > #lower > #left {
|
||||
height: 100%;
|
||||
width: 33%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
#main > #lower > #left #content {
|
||||
#landingContainer > #lower > #left #content {
|
||||
position: relative;
|
||||
top: 25px;
|
||||
display: inline-flex;
|
||||
line-height: 24px;
|
||||
left: 50px;
|
||||
}
|
||||
#main > #lower > #center {
|
||||
#landingContainer > #lower > #center {
|
||||
height: 100%;
|
||||
width: 34%;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
}
|
||||
#main > #lower > #center #content {
|
||||
#landingContainer > #lower > #center #content {
|
||||
position: relative;
|
||||
top: 10px;
|
||||
}
|
||||
#main > #lower > #right {
|
||||
#landingContainer > #lower > #right {
|
||||
height: 100%;
|
||||
width: 33%;
|
||||
display: inline-flex;
|
||||
@ -1186,7 +1186,7 @@ p {
|
||||
* * */
|
||||
|
||||
/* Main launch content container. */
|
||||
#main > #lower > #right #launch_content {
|
||||
#landingContainer > #lower > #right #launch_content {
|
||||
position: relative;
|
||||
top: 25px;
|
||||
display: inline-flex;
|
||||
|
||||
@ -14,6 +14,15 @@ let launch_content, launch_details, launch_progress, launch_progress_label, laun
|
||||
|
||||
// Synchronous Listener
|
||||
document.addEventListener('readystatechange', function(){
|
||||
|
||||
if (document.readyState === 'complete'){
|
||||
if(ConfigManager.isFirstLaunch()){
|
||||
$('#welcomeContainer').fadeIn(500)
|
||||
} else {
|
||||
$('#landingContainer').fadeIn(500)
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState === 'interactive'){
|
||||
|
||||
// Save a reference to the launch elements.
|
||||
|
||||
@ -7,6 +7,8 @@ const uuidV4 = require('uuid/v4')
|
||||
const sysRoot = process.env.APPDATA || (process.platform == 'darwin' ? process.env.HOME + '/Library/Application Support' : '/var/local')
|
||||
const dataPath = path.join(sysRoot, '.westeroscraft')
|
||||
|
||||
const firstLaunch = !fs.existsSync(dataPath)
|
||||
|
||||
function resolveMaxRAM(){
|
||||
const mem = os.totalmem()
|
||||
return mem >= 8000000000 ? '4G' : (mem >= 6000000000 ? '3G' : '2G')
|
||||
@ -88,6 +90,16 @@ exports.getLauncherDirectory = function(){
|
||||
return dataPath
|
||||
}
|
||||
|
||||
/**
|
||||
* Check to see if this is the first time the user has launched the
|
||||
* application. This is determined by the existance of the data path.
|
||||
*
|
||||
* @returns {boolean} True if this is the first launch, otherwise false.
|
||||
*/
|
||||
exports.isFirstLaunch = function(){
|
||||
return firstLaunch
|
||||
}
|
||||
|
||||
// System Settings (Unconfigurable on UI)
|
||||
|
||||
/**
|
||||
|
||||
144
app/landing.ejs
Normal file
144
app/landing.ejs
Normal file
@ -0,0 +1,144 @@
|
||||
<div id="landingContainer" style="display: none;">
|
||||
<div id="upper">
|
||||
<div id="left">
|
||||
<img id="image_seal" src="assets/images/WesterosSealCircle.png"/>
|
||||
</div>
|
||||
<div id="content">
|
||||
</div>
|
||||
<div id="right">
|
||||
<div id="rightContainer">
|
||||
<div id="user_content">
|
||||
<span id="user_text">Username</span>
|
||||
<div id="avatarContainer">
|
||||
<div id="avatarOverlay">Edit</div>
|
||||
<img id="avatarImage" src="https://cdn.discordapp.com/avatars/169197209630277642/6650b5a50e1cb3d00a79b9b88b9a0cd4.png"/>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mediaContent">
|
||||
<div id="internalMedia">
|
||||
<div class="mediaContainer">
|
||||
<svg id="newsSVG" class="mediaSVG" viewBox="18 14 106.36 104.43">
|
||||
<defs>
|
||||
<style>.cls-2,.cls-3{fill:none;stroke-miterlimit:10;stroke-width:6px;}</style>
|
||||
</defs>
|
||||
<path class="cls-2" d="M115.36,113.8H27.18a6.67,6.67,0,0,1-6.67-6.67V19.27H108.2V107.1a6.71,6.71,0,0,0,6.71,6.7h0a6.71,6.71,0,0,0,6.71-6.71v-75H108.15"/>
|
||||
<line class="cls-3" x1="73.75" y1="36.18" x2="97.14" y2="36.18"/>
|
||||
<g>
|
||||
<rect class="cls-1" x="31.77" y="32.96" width="33.79" height="20.76"/>
|
||||
<line class="cls-3" x1="73.75" y1="50.22" x2="97.14" y2="50.22"/>
|
||||
<line class="cls-3" x1="31.66" y1="64.25" x2="97.14" y2="64.25"/>
|
||||
<line class="cls-3" x1="31.66" y1="78.28" x2="97.14" y2="78.28"/>
|
||||
<line class="cls-3" x1="31.66" y1="92.31" x2="97.14" y2="92.31"/>
|
||||
<line class="cls-3" x1="31.66" y1="92.31" x2="97.14" y2="92.31"/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mediaDivider"></div>
|
||||
<div id="externalMedia">
|
||||
<div class="mediaContainer">
|
||||
<a href="http://www.westeroscraft.com">
|
||||
<svg id="linkSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500">
|
||||
<g>
|
||||
<path d="M75.37,65.51a3.85,3.85,0,0,0-1.73.42,8.22,8.22,0,0,1,.94,3.76A8.36,8.36,0,0,1,66.23,78H46.37a8.35,8.35,0,1,1,0-16.7h9.18a21.51,21.51,0,0,1,6.65-8.72H46.37a17.07,17.07,0,1,0,0,34.15H66.23A17,17,0,0,0,82.77,65.51Z"/>
|
||||
<path d="M66,73.88a3.85,3.85,0,0,0,1.73-.42,8.22,8.22,0,0,1-.94-3.76,8.36,8.36,0,0,1,8.35-8.35H95A8.35,8.35,0,1,1,95,78H85.8a21.51,21.51,0,0,1-6.65,8.72H95a17.07,17.07,0,0,0,0-34.15H75.13A17,17,0,0,0,58.59,73.88Z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mediaContainer">
|
||||
<a href="https://twitter.com/westeroscraft">
|
||||
<svg id="twitterSVG" class="mediaSVG" viewBox="0 0 5000 4060" preserveAspectRatio="xMidYMid meet">
|
||||
<g>
|
||||
<path d="M1210 4048 c-350 -30 -780 -175 -1124 -378 -56 -33 -86 -57 -86 -68 0 -16 7 -17 83 -9 114 12 349 1 493 -22 295 -49 620 -180 843 -341 l54 -38 -49 -7 c-367 -49 -660 -256 -821 -582 -30 -61 -53 -120 -51 -130 3 -16 12 -17 73 -13 97 7 199 5 270 -4 l60 -9 -65 -22 c-341 -117 -609 -419 -681 -769 -18 -88 -26 -226 -13 -239 4 -3 32 7 63 22 68 35 198 77 266 86 28 4 58 9 68 12 10 2 -22 -34 -72 -82 -240 -232 -353 -532 -321 -852 15 -149 79 -347 133 -418 16 -20 17 -19 49 20 377 455 913 795 1491 945 160 41 346 74 485 86 l82 7 -7 -59 c-5 -33 -7 -117 -6 -189 2 -163 31 -286 103 -430 141 -285 422 -504 708 -550 112 -19 333 -19 442 0 180 30 335 108 477 239 l58 54 95 -24 c143 -36 286 -89 427 -160 70 -35 131 -60 135 -56 19 19 -74 209 -151 312 -50 66 -161 178 -216 217 l-30 22 73 -14 c111 -21 257 -63 353 -101 99 -39 99 -39 99 -19 0 57 -237 326 -412 468 l-88 71 6 51 c4 28 1 130 -5 226 -30 440 -131 806 -333 1202 -380 745 -1036 1277 -1823 1477 -243 62 -430 81 -786 78 -134 0 -291 -5 -349 -10z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mediaContainer">
|
||||
<a href="https://www.instagram.com/westeroscraft/">
|
||||
<svg id="instagramSVG" class="mediaSVG" viewBox="0 0 5040 5040">
|
||||
<defs>
|
||||
<radialGradient id="instaFill" cx="30%" cy="107%" r="150%">
|
||||
<stop offset="0%" stop-color="#fdf497"/>
|
||||
<stop offset="5%" stop-color="#fdf497"/>
|
||||
<stop offset="45%" stop-color="#fd5949"/>
|
||||
<stop offset="60%" stop-color="#d6249f"/>
|
||||
<stop offset="90%" stop-color="#285AEB"/>
|
||||
</radialGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path d="M1390 5024 c-163 -9 -239 -19 -315 -38 -281 -70 -477 -177 -660 -361 -184 -184 -292 -380 -361 -660 -43 -171 -53 -456 -53 -1445 0 -989 10 -1274 53 -1445 69 -280 177 -476 361 -660 184 -184 380 -292 660 -361 171 -43 456 -53 1445 -53 989 0 1274 10 1445 53 280 69 476 177 660 361 184 184 292 380 361 660 43 171 53 456 53 1445 0 989 -10 1274 -53 1445 -69 280 -177 476 -361 660 -184 184 -380 292 -660 361 -174 44 -454 53 -1470 52 -599 0 -960 -5 -1105 -14z m2230 -473 c58 -6 141 -18 185 -27 397 -78 638 -318 719 -714 37 -183 41 -309 41 -1290 0 -981 -4 -1107 -41 -1290 -81 -395 -319 -633 -714 -714 -183 -37 -309 -41 -1290 -41 -981 0 -1107 4 -1290 41 -397 81 -636 322 -714 719 -33 166 -38 296 -43 1100 -5 796 3 1203 27 1380 67 489 338 758 830 825 47 7 162 15 255 20 250 12 1907 4 2035 -9z"/>
|
||||
<path d="M2355 3819 c-307 -42 -561 -172 -780 -400 -244 -253 -359 -543 -359 -899 0 -361 116 -648 367 -907 262 -269 563 -397 937 -397 374 0 675 128 937 397 251 259 367 546 367 907 0 361 -116 648 -367 907 -197 203 -422 326 -690 378 -101 20 -317 27 -412 14z m400 -509 c275 -88 470 -284 557 -560 20 -65 23 -95 23 -230 0 -135 -3 -165 -23 -230 -88 -278 -284 -474 -562 -562 -65 -20 -95 -23 -230 -23 -135 0 -165 3 -230 23 -278 88 -474 284 -562 562 -20 65 -23 95 -23 230 0 135 3 165 23 230 73 230 219 403 427 507 134 67 212 83 390 79 111 -3 155 -8 210 -26z"/>
|
||||
<path d="M3750 1473 c-29 -11 -66 -38 -106 -77 -70 -71 -94 -126 -94 -221 0 -95 24 -150 94 -221 72 -71 126 -94 225 -94 168 0 311 143 311 311 0 99 -23 154 -94 225 -43 42 -76 66 -110 77 -61 21 -166 21 -226 0z"/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mediaContainer">
|
||||
<a href="https://www.youtube.com/user/WesterosCraft">
|
||||
<svg id="youtubeSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500">
|
||||
<g>
|
||||
<path d="M84.8,69.52,65.88,79.76V59.27Zm23.65.59c0-5.14-.79-17.63-3.94-20.57S99,45.86,73.37,45.86s-28,.73-31.14,3.68S38.29,65,38.29,70.11s.79,17.63,3.94,20.57,5.52,3.68,31.14,3.68,28-.74,31.14-3.68,3.94-15.42,3.94-20.57"/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
<div class="mediaContainer">
|
||||
<a href="https://discord.gg/hqdjs3m">
|
||||
<svg id="discordSVG" class="mediaSVG" viewBox="35.34 34.3575 70.68 68.71500">
|
||||
<g>
|
||||
<path d="M81.23,78.48a6.14,6.14,0,1,1,6.14-6.14,6.14,6.14,0,0,1-6.14,6.14M60,78.48a6.14,6.14,0,1,1,6.14-6.14A6.14,6.14,0,0,1,60,78.48M104.41,73c-.92-7.7-8.24-22.9-8.24-22.9A43,43,0,0,0,88,45.59a17.88,17.88,0,0,0-8.38-1.27l-.13,1.06a23.52,23.52,0,0,1,5.8,1.95,87.59,87.59,0,0,1,8.17,4.87s-10.32-5.63-22.27-5.63a51.32,51.32,0,0,0-23.2,5.63,87.84,87.84,0,0,1,8.17-4.87,23.57,23.57,0,0,1,5.8-1.95l-.13-1.06a17.88,17.88,0,0,0-8.38,1.27,42.84,42.84,0,0,0-8.21,4.56S37.87,65.35,37,73s-.37,11.54-.37,11.54,4.22,5.68,9.9,7.14,7.7,1.47,7.7,1.47l3.75-4.68a21.22,21.22,0,0,1-4.65-2A24.47,24.47,0,0,1,47.93,82S61.16,88.4,70.68,88.4c10,0,22.75-6.44,22.75-6.44a24.56,24.56,0,0,1-5.35,4.56,21.22,21.22,0,0,1-4.65,2l3.75,4.68s2,0,7.7-1.47,9.89-7.14,9.89-7.14.55-3.85-.37-11.54"/>
|
||||
</g>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="lower">
|
||||
<div id="left">
|
||||
<div class="bot_wrapper">
|
||||
<div id="content">
|
||||
<span class="bot_label">PLAYERS</span>
|
||||
<span id="player_count">18/100</span>
|
||||
<div class="bot_divider"></div>
|
||||
<span class="bot_label">MOJANG STATUS</span>
|
||||
<span id="mojang_status_icon">•</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="center">
|
||||
<div class="bot_wrapper">
|
||||
<div id="content">
|
||||
<button id="menu_button">
|
||||
<img src="assets/images/icons/arrow.svg" id="menu_img"/>
|
||||
<span id="menu_text">MENU</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right">
|
||||
<div class="bot_wrapper">
|
||||
<div id="launch_content">
|
||||
<button id="launch_button">PLAY</button>
|
||||
<div class="bot_divider"></div>
|
||||
<!-- Span until we implement the real selection -->
|
||||
<span class="bot_label" id="server_selection">• No Server Selected</span>
|
||||
</div>
|
||||
<div id="launch_details">
|
||||
<div id="launch_details_left">
|
||||
<span id="launch_progress_label">0%</span>
|
||||
<div class="bot_divider"></div>
|
||||
</div>
|
||||
<div id="launch_details_right">
|
||||
<progress id="launch_progress" value="22" max="100"></progress>
|
||||
<span id="launch_details_text" class="bot_label">Please wait..</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="loginContainer">
|
||||
<div id="loginContainer" style="display: none;">
|
||||
<div id="loginContent">
|
||||
<div id='loginForm'>
|
||||
<img id="loginImageSeal" src="assets/images/WesterosSealCircle.png"/>
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
<div id="welcomeContainer">
|
||||
<div id="welcomeContainer" style="display: none;">
|
||||
<div class="cloudDiv">
|
||||
<div class="cloudTop"></div>
|
||||
<div class="cloudBottom"></div>
|
||||
@ -19,4 +19,16 @@
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
<script type="application/javascript">
|
||||
|
||||
// DOM cache.
|
||||
const welcomeButton = document.getElementById('welcomeButton')
|
||||
|
||||
welcomeButton.addEventListener('click', e => {
|
||||
$('#welcomeContainer').fadeOut(250, () => {
|
||||
$('#loginContainer').fadeIn(250)
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
</div>
|
||||
2
index.js
2
index.js
@ -22,7 +22,7 @@ function createWindow() {
|
||||
ejse.data('bkid', Math.floor((Math.random() * fs.readdirSync(path.join(__dirname, 'app', 'assets', 'images', 'backgrounds')).length)))
|
||||
|
||||
win.loadURL(url.format({
|
||||
pathname: path.join(__dirname, 'app', 'index.ejs'),
|
||||
pathname: path.join(__dirname, 'app', 'app.ejs'),
|
||||
protocol: 'file:',
|
||||
slashes: true
|
||||
}))
|
||||
|
||||
Loading…
Reference in New Issue
Block a user