summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--derelict.js54
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}) {