add playback progress bar
Signed-off-by: szdytom <szdytom@qq.com>
This commit is contained in:
parent
475208def0
commit
94cd28d403
@ -14,16 +14,22 @@
|
||||
</div>
|
||||
<div id="control-panel">
|
||||
<div class="ctrl-title">Analyzer</div>
|
||||
<table class="full-width info-table">
|
||||
<tbody>
|
||||
<tr><td>Analyze Status:</td><td id="analyze-status">Not Analyzed</td></tr>
|
||||
<tr><td>Total Steps:</td><td id="analyze-steps">N/A</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="full-width info-table"><tbody>
|
||||
<tr><td>Analyze Status:</td><td id="analyze-status" class="text-right">Not Analyzed</td></tr>
|
||||
<tr><td>Total Steps:</td><td id="analyze-steps" class="text-right">N/A</td></tr>
|
||||
</tbody></table>
|
||||
<div class="btn-group full-width top-margin">
|
||||
<button id="analyze" class="btn float-left full-width">Analyze</button>
|
||||
</div>
|
||||
<div class="ctrl-title">Import / Export</div>
|
||||
<div class="ctrl-title top-margin">Playback</div>
|
||||
<div id="progress-indicator">
|
||||
<div id="progress-value" class="float-left">415 / 1618</div>
|
||||
<div id="progress-left" class="float-right">-1203</div>
|
||||
</div>
|
||||
<div id="progress-bar" class="full-width top-margin">
|
||||
<div id="progress-bar-fg" class="full-height"></div>
|
||||
</div>
|
||||
<div class="ctrl-title top-margin">Import / Export</div>
|
||||
<textarea autocomplete="off" spellcheck="false" id="maze_charmap"></textarea>
|
||||
<div id="charmap_controls" class="btn-group full-width top-margin">
|
||||
<button id="charmap_import" class="btn float-left">Import</button>
|
||||
@ -37,6 +43,20 @@
|
||||
|
||||
<style>
|
||||
|
||||
#progress-bar {
|
||||
background-color: lightgrey;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
#progress-bar-fg {
|
||||
width: 30%;
|
||||
background-color: orange;
|
||||
}
|
||||
|
||||
.full-height {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.full-width {
|
||||
width: 100%;
|
||||
}
|
||||
@ -48,6 +68,10 @@
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
main {
|
||||
margin: 40px;
|
||||
}
|
||||
@ -77,7 +101,6 @@ textarea {
|
||||
font-weight: bold;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid black;
|
||||
float: right;
|
||||
font-size: x-large;
|
||||
width: 100%;
|
||||
}
|
||||
@ -101,10 +124,12 @@ textarea {
|
||||
}
|
||||
|
||||
.float-left {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
display: inline-block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
|
@ -103,10 +103,12 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
});
|
||||
|
||||
analyze_button.addEventListener('click', function() {
|
||||
resetAnalyze();
|
||||
if (current_worker != null) {
|
||||
current_worker.terminate();
|
||||
current_worker = null;
|
||||
analyze_button.innerHTML = 'Analyze';
|
||||
return;
|
||||
}
|
||||
|
||||
if (maze == null) {
|
||||
|
Loading…
x
Reference in New Issue
Block a user