Extended play button and added time display

2 files changed, 37 insertions, 3 deletions

diff --git a/derelict.js b/derelict.js
index bc6e17e..e7f1f76 100644
--- a/derelict.js
+++ b/derelict.js
@@ -183,34 +183,46 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox
 
 	const bottomBar = document.createElement("div")
 	const seekbar = document.createElement("div")
+	const buttons = document.createElement("div")
 	const progress = document.createElement("div")
 	const tip = document.createElement("div")
 	const play = document.createElement("button")
+	const time = document.createElement("span")
 	bottomBar.classList.add("bottom-bar")
 	seekbar.classList.add("seekbar")
 	seekbar.draggable = true
+	buttons.classList.add("buttons")
 	progress.classList.add("progress")
 	progress.style.width = "0%"
 	tip.classList.add("tip")
-	play.innerText = "Play"
+	play.textContent = "▶️"
 
 	container.appendChild(bottomBar)
-	bottomBar.appendChild(play)
 	bottomBar.appendChild(seekbar)
+	bottomBar.appendChild(buttons)
+	buttons.appendChild(play)
+	buttons.appendChild(time)
 	seekbar.appendChild(progress)
 	progress.appendChild(tip)
 
+	const writeTime = stamp => {
+		let date = new Date(stamp)
+		time.textContent = date.toLocaleString()
+	}
+
 	let current = start
 	let isPlaying = false
 	let callbackId
 	play.onclick = () => {
 		isPlaying = !isPlaying
 		if (isPlaying) {
+			play.textContent = "⏸️"
 			callbackId = setInterval(() => {
 				if (current + 5000 > end) {
 					current = end
 					isPlaying = false
 					clearInterval(callbackId)
+					play.textContent = "▶️"
 				}
 				else {
 					current += 5000
@@ -218,10 +230,12 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox
 				elements.forEach(item => item.toggleKilled(current))
 				const norm = (current - start) / (end - start)
 				progress.style.width = `${norm * 100}%`
-			}, 80)
+				writeTime(current)
+			}, 100)
 		}
 		else {
 			clearInterval(callbackId)
+			play.textContent = "▶️"
 		}
 	}
 	const seekWithBar = e => {
@@ -233,9 +247,11 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox
 			current = timestamp
 			elements.forEach(item => item.toggleKilled(timestamp))
 			progress.style.width = `${lim * 100}%`
+			writeTime(current)
 		}
 	}
 	elements.forEach(item => item.toggleKilled(start))
+	writeTime(current)
 
 	seekbar.onclick = seekWithBar
 	seekbar.ondrag = seekWithBar
diff --git a/style.css b/style.css
index cd3ca8a..c9e92dc 100644
--- a/style.css
+++ b/style.css
@@ -229,3 +229,21 @@ body {
 	right: -0.45em;
 	top: -0.2em;
 }
+
+.buttons {
+	margin: 0.2em;
+}
+
+.buttons button {
+	border: none;
+	background: none;
+	color: #eee;
+	cursor: pointer;
+	font-size: 1.4em;
+	margin: 0 0.2em;
+}
+
+.buttons button:hover {
+	background: #fff1;
+	color: #fff;
+}