summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--derelict.js32
1 files changed, 29 insertions, 3 deletions
diff --git a/derelict.js b/derelict.js
index 8f0f8a3..1484c55 100644
--- a/derelict.js
+++ b/derelict.js
@@ -184,26 +184,52 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox
const bottomBar = document.createElement("div")
const seekbar = document.createElement("div")
const progress = document.createElement("div")
+ const play = document.createElement("button")
bottomBar.classList.add("bottom-bar")
seekbar.classList.add("seekbar")
seekbar.draggable = true
progress.classList.add("progress")
progress.style.width = "0%"
+ play.innerText = "Play"
container.appendChild(bottomBar)
+ bottomBar.appendChild(play)
bottomBar.appendChild(seekbar)
seekbar.appendChild(progress)
- let current = 0
+ let current = start
+ let isPlaying = false
+ let callbackId
+ play.onclick = () => {
+ isPlaying = !isPlaying
+ if (isPlaying) {
+ callbackId = setInterval(() => {
+ if (current + 5000 > end) {
+ current = end
+ isPlaying = false
+ clearInterval(callbackId)
+ }
+ else {
+ current += 5000
+ }
+ elements.forEach(item => item.toggleKilled(current))
+ const norm = (current - start) / (end - start)
+ progress.style.width = `${norm * 100}%`
+ }, 80)
+ }
+ else {
+ clearInterval(callbackId)
+ }
+ }
const seekWithBar = e => {
const rect = e.srcElement.getBoundingClientRect()
const norm = Math.min(1, Math.max(0, (e.clientX - rect.left) / e.srcElement.clientWidth))
const lim = Math.floor(norm * e.srcElement.clientWidth) / e.srcElement.clientWidth
const timestamp = start + (end - start) * lim
- if (e.clientX != 0 && current != lim) {
+ if (e.clientX != 0 && current != timestamp) {
+ current = timestamp
elements.forEach(item => item.toggleKilled(timestamp))
progress.style.width = `${lim * 100}%`
- current = lim
}
}
elements.forEach(item => item.toggleKilled(start))