diff options
| -rw-r--r-- | derelict.js | 32 |
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)) |