summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--derelict.js22
-rw-r--r--style.css18
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;
+}