From 94cd28d403361754cdced124c66ebf8b68275580 Mon Sep 17 00:00:00 2001
From: szdytom <szdytom@qq.com>
Date: Sat, 20 Jan 2024 16:16:26 +0800
Subject: [PATCH] add playback progress bar

Signed-off-by: szdytom <szdytom@qq.com>
---
 analyzer/index.html | 41 +++++++++++++++++++++++++++++++++--------
 analyzer/index.js   |  2 ++
 2 files changed, 35 insertions(+), 8 deletions(-)

diff --git a/analyzer/index.html b/analyzer/index.html
index 48e8eda..2091cfb 100644
--- a/analyzer/index.html
+++ b/analyzer/index.html
@@ -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;
 }
 
diff --git a/analyzer/index.js b/analyzer/index.js
index 56687eb..17047a3 100644
--- a/analyzer/index.js
+++ b/analyzer/index.js
@@ -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) {