diff --git a/app/app.ejs b/app/app.ejs
index cf42b38f..fbf9ea9f 100644
--- a/app/app.ejs
+++ b/app/app.ejs
@@ -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>
\ No newline at end of file
diff --git a/app/assets/css/launcher.css b/app/assets/css/launcher.css
index a97c3a0b..8a4d6a27 100644
--- a/app/assets/css/launcher.css
+++ b/app/assets/css/launcher.css
@@ -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;
diff --git a/app/assets/js/actionbinder.js b/app/assets/js/actionbinder.js
index 1a6e794d..2dfb43d4 100644
--- a/app/assets/js/actionbinder.js
+++ b/app/assets/js/actionbinder.js
@@ -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.
diff --git a/app/assets/js/configmanager.js b/app/assets/js/configmanager.js
index b789afa9..8899d134 100644
--- a/app/assets/js/configmanager.js
+++ b/app/assets/js/configmanager.js
@@ -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)
/**
diff --git a/app/landing.ejs b/app/landing.ejs
new file mode 100644
index 00000000..2afc2daa
--- /dev/null
+++ b/app/landing.ejs
@@ -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>
\ No newline at end of file
diff --git a/app/login.ejs b/app/login.ejs
index 3ee8c9ec..2689c2d9 100644
--- a/app/login.ejs
+++ b/app/login.ejs
@@ -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"/>
diff --git a/app/welcome.ejs b/app/welcome.ejs
index 4065d929..45d4498b 100644
--- a/app/welcome.ejs
+++ b/app/welcome.ejs
@@ -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>
\ No newline at end of file
diff --git a/index.js b/index.js
index 6593d737..e5571db8 100644
--- a/index.js
+++ b/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
}))