diff options
author | Aki <please@ignore.pl> | 2021-05-21 23:34:35 +0200 |
---|---|---|
committer | Aki <please@ignore.pl> | 2021-05-21 23:34:35 +0200 |
commit | b10798f22dc8832b96253641f1215498698909b7 (patch) | |
tree | a1a5f0d46bfa4913c4decbacfb1a11bf7c89bd54 /derelict.js | |
parent | ad21ad362ab9fb746ef5263a67f71f7d203bbba0 (diff) | |
download | derelict-prototype-b10798f22dc8832b96253641f1215498698909b7.zip derelict-prototype-b10798f22dc8832b96253641f1215498698909b7.tar.gz derelict-prototype-b10798f22dc8832b96253641f1215498698909b7.tar.bz2 |
Added new seekbar
Diffstat (limited to 'derelict.js')
-rw-r--r-- | derelict.js | 44 |
1 files changed, 33 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}) { |