Added new progress bar UI, massive improvement.

This commit is contained in:
Daniel Scalzi 2017-11-27 20:49:50 -05:00
parent dbf024cce6
commit aac789bf2c
3 changed files with 54 additions and 7 deletions

View File

@ -419,11 +419,20 @@ p {
top: 25px; top: 25px;
/*display: flex;*/ /*display: flex;*/
display: none; display: none;
}
#launch_details_left {
display: flex;
}
#launch_details_right {
display: flex;
flex-direction: column; flex-direction: column;
justify-content: center;
} }
#launch_progress[value] { #launch_progress[value] {
height: 2px; height: 3px;
width: 265px; width: 265px;
-webkit-appearance: none; -webkit-appearance: none;
} }
@ -437,5 +446,20 @@ p {
} }
#launch_details_text { #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;
} }

View File

@ -44,7 +44,13 @@ document.onreadystatechange = function () {
}) })
// Bind progress bar length to length of bot wrapper // 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(){ testdownloads = async function(){
const content = document.getElementById("launch_content")
const details = document.getElementById("launch_details") const details = document.getElementById("launch_details")
const progress = document.getElementById("launch_progress") const progress = document.getElementById("launch_progress")
const progress_text = document.getElementById("launch_progress_label")
const det_text = document.getElementById("launch_details_text") const det_text = document.getElementById("launch_details_text")
det_text.innerHTML = 'Please wait..' det_text.innerHTML = 'Please wait..'
progress.setAttribute('max', '100') progress.setAttribute('max', '100')
details.style.display = 'flex' details.style.display = 'flex'
content.style.display = 'none'
det_text.innerHTML = 'Loading version information..' det_text.innerHTML = 'Loading version information..'
const versionData = await ag.loadVersionData('1.11.2', GAME_DIRECTORY) const versionData = await ag.loadVersionData('1.11.2', GAME_DIRECTORY)
progress.setAttribute('value', 20) progress.setAttribute('value', 20)
progress_text.innerHTML = '20%'
det_text.innerHTML = 'Validating asset integrity..' det_text.innerHTML = 'Validating asset integrity..'
await ag.validateAssets(versionData, GAME_DIRECTORY) await ag.validateAssets(versionData, GAME_DIRECTORY)
progress.setAttribute('value', 40) progress.setAttribute('value', 40)
progress_text.innerHTML = '40%'
console.log('assets done') console.log('assets done')
det_text.innerHTML = 'Validating library integrity..' det_text.innerHTML = 'Validating library integrity..'
await ag.validateLibraries(versionData, GAME_DIRECTORY) await ag.validateLibraries(versionData, GAME_DIRECTORY)
progress.setAttribute('value', 60) progress.setAttribute('value', 60)
progress_text.innerHTML = '60%'
console.log('libs done') console.log('libs done')
det_text.innerHTML = 'Validating miscellaneous file integrity..' det_text.innerHTML = 'Validating miscellaneous file integrity..'
await ag.validateMiscellaneous(versionData, GAME_DIRECTORY) await ag.validateMiscellaneous(versionData, GAME_DIRECTORY)
progress.setAttribute('value', 80) progress.setAttribute('value', 80)
progress_text.innerHTML = '80%'
console.log('files done') console.log('files done')
det_text.innerHTML = 'Validating server distribution files..' det_text.innerHTML = 'Validating server distribution files..'
const serv = await ag.validateDistribution('WesterosCraft-1.11.2', GAME_DIRECTORY) const serv = await ag.validateDistribution('WesterosCraft-1.11.2', GAME_DIRECTORY)
progress.setAttribute('value', 100) progress.setAttribute('value', 100)
progress_text.innerHTML = '100%'
console.log('forge stuff done') console.log('forge stuff done')
det_text.innerHTML = 'Downloading files..' det_text.innerHTML = 'Downloading files..'
ag.instance.on('totaldlprogress', function(data){ ag.instance.on('totaldlprogress', function(data){
progress.setAttribute('max', data.total) progress.setAttribute('max', data.total)
progress.setAttribute('value', data.acc) progress.setAttribute('value', data.acc)
progress_text.innerHTML = parseInt((data.acc/data.total)*100) + '%'
}) })
ag.instance.on('dlcomplete', async function(){ ag.instance.on('dlcomplete', async function(){
@ -108,10 +123,12 @@ testdownloads = async function(){
proc = pb.build() proc = pb.build()
det_text.innerHTML = 'Done. Enjoy the server!' det_text.innerHTML = 'Done. Enjoy the server!'
} catch(err) { } 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(){ setTimeout(function(){
details.style.display = 'none' details.style.display = 'none'
content.style.display = 'inline-flex'
}, 5000) }, 5000)
}) })
ag.processDlQueues() ag.processDlQueues()

View File

@ -59,9 +59,14 @@
<button id="launch_button">PLAY</button> <button id="launch_button">PLAY</button>
<div class="bot_divider"></div> <div class="bot_divider"></div>
<!-- Span until we implement the real selection --> <!-- 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>
<div id="launch_details"> <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> <progress id="launch_progress" value="22" max="100"></progress>
<span id="launch_details_text" class="bot_label">Please wait..</span> <span id="launch_details_text" class="bot_label">Please wait..</span>
</div> </div>
@ -69,5 +74,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</body> </body>
</html> </html>