Added new progress bar UI, massive improvement.

app/assets/css/launcher.css

@@ -419,11 +419,20 @@ p {
     top: 25px;
     /*display: flex;*/
     display: none;
+}
+
+#launch_details_left {
+    display: flex;
+}
+
+#launch_details_right {
+    display: flex;
     flex-direction: column;
+    justify-content: center;
 }
 
 #launch_progress[value] {
-    height: 2px;
+    height: 3px;
     width: 265px;
     -webkit-appearance: none;
 }
@@ -437,5 +446,20 @@ p {
 }
 
 #launch_details_text {
-    font-size: 5px;
+    font-size: 11px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    overflow: hidden;
+}
+
+#launch_progress_label {
+    color: white;
+    font-family: 'Avenir Book';
+    font-weight: 900;
+    letter-spacing: 1px;
+    text-shadow: 0px 0px 0px #bebcbb;
+    font-size: 20px;
+    min-width: 53.21px;
+    max-width: 53.21px;
+    text-align: right;
 }

app/assets/js/script.js

@@ -44,7 +44,13 @@ document.onreadystatechange = function () {
         })
 
         // Bind progress bar length to length of bot wrapper
-        document.getElementById("launch_progress").style.width = document.getElementById("launch_content").getBoundingClientRect().width
+        const targetWidth = document.getElementById("launch_content").getBoundingClientRect().width
+        const targetWidth2 = document.getElementById("server_selection").getBoundingClientRect().width
+        const targetWidth3 = document.getElementById("launch_button").getBoundingClientRect().width
+        document.getElementById("launch_details").style.maxWidth = targetWidth
+        document.getElementById("launch_progress").style.width = targetWidth2
+        document.getElementById("launch_details_right").style.maxWidth = targetWidth2
+        document.getElementById("launch_progress_label").style.width = targetWidth3
     }
 }
 
@@ -56,42 +62,51 @@ $(document).on('click', 'a[href^="http"]', function(event) {
 })
 
 testdownloads = async function(){
+    const content = document.getElementById("launch_content")
     const details = document.getElementById("launch_details")
     const progress = document.getElementById("launch_progress")
+    const progress_text = document.getElementById("launch_progress_label")
     const det_text = document.getElementById("launch_details_text")
 
     det_text.innerHTML = 'Please wait..'
     progress.setAttribute('max', '100')
     details.style.display = 'flex'
+    content.style.display = 'none'
 
     det_text.innerHTML = 'Loading version information..'
     const versionData = await ag.loadVersionData('1.11.2', GAME_DIRECTORY)
     progress.setAttribute('value', 20)
+    progress_text.innerHTML = '20%'
 
     det_text.innerHTML = 'Validating asset integrity..'
     await ag.validateAssets(versionData, GAME_DIRECTORY)
     progress.setAttribute('value', 40)
+    progress_text.innerHTML = '40%'
     console.log('assets done')
 
     det_text.innerHTML = 'Validating library integrity..'
     await ag.validateLibraries(versionData, GAME_DIRECTORY)
     progress.setAttribute('value', 60)
+    progress_text.innerHTML = '60%'
     console.log('libs done')
 
     det_text.innerHTML = 'Validating miscellaneous file integrity..'
     await ag.validateMiscellaneous(versionData, GAME_DIRECTORY)
     progress.setAttribute('value', 80)
+    progress_text.innerHTML = '80%'
     console.log('files done')
 
     det_text.innerHTML = 'Validating server distribution files..'
     const serv = await ag.validateDistribution('WesterosCraft-1.11.2', GAME_DIRECTORY)
     progress.setAttribute('value', 100)
+    progress_text.innerHTML = '100%'
     console.log('forge stuff done')
 
     det_text.innerHTML = 'Downloading files..'
     ag.instance.on('totaldlprogress', function(data){
         progress.setAttribute('max', data.total)
         progress.setAttribute('value', data.acc)
+        progress_text.innerHTML = parseInt((data.acc/data.total)*100) + '%'
     })
 
     ag.instance.on('dlcomplete', async function(){
@@ -108,10 +123,12 @@ testdownloads = async function(){
             proc = pb.build()
             det_text.innerHTML = 'Done. Enjoy the server!'
         } catch(err) {
-            det_text.innerHTML = 'Error while launching: ' + err.message;
+            //det_text.innerHTML = 'Error: ' + err.message;
+            det_text.innerHTML = 'Error: See log for details..';
         }
         setTimeout(function(){
             details.style.display = 'none'
+            content.style.display = 'inline-flex'
         }, 5000)
     })
     ag.processDlQueues()

app/index.ejs

@@ -59,11 +59,17 @@
                         <button id="launch_button">PLAY</button>
                         <div class="bot_divider"></div>
                         <!-- Span until we implement the real selection -->
-                        <span class="bot_label">&#8226; Westeroscraft Production Server</span>
+                        <span class="bot_label" id="server_selection">&#8226; Westeroscraft Production Server</span>
                     </div>
                     <div id="launch_details">
-                        <progress id="launch_progress" value="22" max="100"></progress>
+                        <div id="launch_details_left">
-                        <span id="launch_details_text" class="bot_label">Please wait..</span>
+                            <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>