add playback progress bar

Signed-off-by: szdytom <szdytom@qq.com>
This commit is contained in:
方而静 2024-01-20 16:16:26 +08:00
parent 475208def0
commit 94cd28d403
2 changed files with 35 additions and 8 deletions

View File

@ -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;
}

View File

@ -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) {