diff options
| -rw-r--r-- | derelict.js | 44 | ||||
| -rw-r--r-- | style.css | 23 |
2 files changed, 56 insertions, 11 deletions
diff --git a/derelict.js b/derelict.js index 87bc4d5..8f0f8a3 100644 --- a/derelict.js +++ b/derelict.js @@ -178,17 +178,39 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox grids.forEach(g => g.scene.background = rt) }) - const start = Date.parse(battle.started_at) - const end = Date.parse(battle.ended_at) - const timeline = document.getElementById("timeline") - const step = 1000 - const toggleAll = () => elements.forEach(item => item.toggleKilled(timeline.value)) - timeline.min = start - step - timeline.max = end + step + EXPIRY - timeline.value = timeline.min - timeline.step = step - timeline.oninput = toggleAll - toggleAll() + const start = Date.parse(battle.started_at) - EXPIRY + const end = Date.parse(battle.ended_at) + EXPIRY + + const bottomBar = document.createElement("div") + const seekbar = document.createElement("div") + const progress = document.createElement("div") + bottomBar.classList.add("bottom-bar") + seekbar.classList.add("seekbar") + seekbar.draggable = true + progress.classList.add("progress") + progress.style.width = "0%" + + container.appendChild(bottomBar) + bottomBar.appendChild(seekbar) + seekbar.appendChild(progress) + + let current = 0 + 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) { + elements.forEach(item => item.toggleKilled(timestamp)) + progress.style.width = `${lim * 100}%` + current = lim + } + } + elements.forEach(item => item.toggleKilled(start)) + + seekbar.onclick = seekWithBar + seekbar.ondrag = seekWithBar + seekbar.ondragstart = e => e.dataTransfer.setDragImage(new Image(0, 0), 0, 0) } export function init({id, container, toolbar}) { @@ -186,3 +186,26 @@ body { height: 100vh; box-sizing: border-box; } + +.bottom-bar { + position: absolute; + bottom: 0; + left: 0; + width: 100%; + box-sizing: border-box; + padding: 0 1em 1em 1em; + z-index: 10000; +} + +.bottom-bar .seekbar { + width: 100%; + height: 0.5em; + background: #333; + cursor: pointer; +} + +.bottom-bar .seekbar .progress { + height: 100%; + background: #bf1041; + pointer-events: none; +} |