diff options
| -rw-r--r-- | derelict.js | 54 |
1 files changed, 22 insertions, 32 deletions
diff --git a/derelict.js b/derelict.js index ca95460..a91b1a8 100644 --- a/derelict.js +++ b/derelict.js @@ -35,6 +35,12 @@ class Timeline { this.simple_list.forEach(wreck => wreck.toggleKilled(this.current)) } + setNormalized(value) { + const span = this.finish - this.start + const time = this.start + span * value + this.setTo(time) + } + setTo(time) { if (time < this.start) this.current = new Date(this.start) @@ -232,6 +238,7 @@ class StatusBar { time = document.createElement('span') constructor(timeline) { + this.timeline = timeline this.domElement.classList.add("bottom-bar") this.initializeSeekbar() this.initializeButtons() @@ -252,6 +259,9 @@ class StatusBar { this.seekbar.appendChild(this.progress) this.progress.appendChild(tip) this.domElement.appendChild(this.seekbar) + this.seekbar.onclick = this.seek.bind(this) + this.seekbar.ondrag = this.seek.bind(this) + this.seekbar.ondragstart = e => e.dataTransfer.setDragImage(new Image(0, 0), 0, 0) } initializeButtons() { @@ -260,6 +270,17 @@ class StatusBar { this.buttons.appendChild(this.play) this.buttons.appendChild(this.time) this.domElement.appendChild(this.buttons) + this.play.onclick = () => this.timeline.togglePlayback() + } + + seek(event) { + const rect = event.srcElement.getBoundingClientRect() + let value = (event.clientX - rect.left) / event.srcElement.clientWidth + value = Math.min(1, Math.max(0, value)) + value = Math.floor(value * event.srcElement.clientWidth) / event.srcElement.clientWidth + // TODO: Fix slider dragging behaviour. It's not consistent across browsers and even their versions... + if (event.clientX != 0) + this.timeline.setNormalized(value) } timeUpdatedCallback(current, start, finish) { @@ -315,41 +336,10 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox battle_obj.grids.forEach(g => g.scene.background = rt) }) - const start = battle_obj.timeline.start - EXPIRY - const end = battle_obj.timeline.finish + EXPIRY - const statusBar = new StatusBar(battle_obj.timeline) container.appendChild(statusBar.domElement) - const seekbar = statusBar.seekbar - const progress = statusBar.progress - const play = statusBar.play - const time = statusBar.time - - const writeTime = stamp => { - let date = new Date(stamp) - time.textContent = date.toLocaleString() - } - - play.onclick = () => battle_obj.timeline.togglePlayback() - - 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 != timestamp) { - current = timestamp - battle_obj.timeline.simple_list.forEach(item => item.toggleKilled(timestamp)) - progress.style.width = `${lim * 100}%` - writeTime(current) - } - } - battle_obj.timeline.simple_list.forEach(item => item.toggleKilled(start)) - - seekbar.onclick = seekWithBar - seekbar.ondrag = seekWithBar - seekbar.ondragstart = e => e.dataTransfer.setDragImage(new Image(0, 0), 0, 0) + battle_obj.timeline.update() } export function init({id, container, toolbar}) { |