diff options
| -rw-r--r-- | derelict.js | 22 | ||||
| -rw-r--r-- | style.css | 18 |
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 @@ -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; +} |