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>
<div id="control-panel"> <div id="control-panel">
<div class="ctrl-title">Analyzer</div> <div class="ctrl-title">Analyzer</div>
<table class="full-width info-table"> <table class="full-width info-table"><tbody>
<tbody> <tr><td>Analyze Status:</td><td id="analyze-status" class="text-right">Not Analyzed</td></tr>
<tr><td>Analyze Status:</td><td id="analyze-status">Not Analyzed</td></tr> <tr><td>Total Steps:</td><td id="analyze-steps" class="text-right">N/A</td></tr>
<tr><td>Total Steps:</td><td id="analyze-steps">N/A</td></tr> </tbody></table>
</tbody>
</table>
<div class="btn-group full-width top-margin"> <div class="btn-group full-width top-margin">
<button id="analyze" class="btn float-left full-width">Analyze</button> <button id="analyze" class="btn float-left full-width">Analyze</button>
</div> </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> <textarea autocomplete="off" spellcheck="false" id="maze_charmap"></textarea>
<div id="charmap_controls" class="btn-group full-width top-margin"> <div id="charmap_controls" class="btn-group full-width top-margin">
<button id="charmap_import" class="btn float-left">Import</button> <button id="charmap_import" class="btn float-left">Import</button>
@ -37,6 +43,20 @@
<style> <style>
#progress-bar {
background-color: lightgrey;
height: 10px;
}
#progress-bar-fg {
width: 30%;
background-color: orange;
}
.full-height {
height: 100%;
}
.full-width { .full-width {
width: 100%; width: 100%;
} }
@ -48,6 +68,10 @@
border-spacing: 0; border-spacing: 0;
} }
.text-right {
text-align: right;
}
main { main {
margin: 40px; margin: 40px;
} }
@ -77,7 +101,6 @@ textarea {
font-weight: bold; font-weight: bold;
margin-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid black; border-bottom: 1px solid black;
float: right;
font-size: x-large; font-size: x-large;
width: 100%; width: 100%;
} }
@ -101,10 +124,12 @@ textarea {
} }
.float-left { .float-left {
display: inline-block;
float: left; float: left;
} }
.float-right { .float-right {
display: inline-block;
float: right; float: right;
} }

View File

@ -103,10 +103,12 @@ document.addEventListener('DOMContentLoaded', () => {
}); });
analyze_button.addEventListener('click', function() { analyze_button.addEventListener('click', function() {
resetAnalyze();
if (current_worker != null) { if (current_worker != null) {
current_worker.terminate(); current_worker.terminate();
current_worker = null; current_worker = null;
analyze_button.innerHTML = 'Analyze'; analyze_button.innerHTML = 'Analyze';
return;
} }
if (maze == null) { if (maze == null) {