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.

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;

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.

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