diff options
| -rw-r--r-- | derelict.js | 97 |
1 files changed, 62 insertions, 35 deletions
diff --git a/derelict.js b/derelict.js index a8900ee..ca95460 100644 --- a/derelict.js +++ b/derelict.js @@ -14,6 +14,11 @@ class Timeline { simple_list = [] + setCallbacks({timeUpdatedCallback, playbackCallback}) { + this.timeUpdatedCallback = timeUpdatedCallback + this.playbackCallback = playbackCallback + } + register(wreck) { if (this.start === undefined || wreck.timestamp - EXPIRY < this.start) { this.start = wreck.timestamp - EXPIRY @@ -31,13 +36,45 @@ class Timeline { } setTo(time) { - if (!time instanceof Date) - time = new Date(time) - this.current = time + if (time < this.start) + this.current = new Date(this.start) + else if (time > this.finish) + this.current = new Date(this.finish) + else { + if (!time instanceof Date) + time = new Date(time) + this.current = time + } + this.update() + this.timeUpdatedCallback(this.current, this.start, this.finish) + return this.current + } + + play() { + if (this.callbackId !== undefined) + return + this.callbackId = setInterval(() => { + const time = this.current + 5000 + const act = this.setTo(time) + if (act != time) + this.pause() + }, 100) + this.playbackCallback(true) } - getCurrentTime() { - return this.current.toLocaleString() + pause() { + if (this.callbackId === undefined) + return + clearInterval(this.callbackId) + this.callbackId = undefined + this.playbackCallback(false) + } + + togglePlayback() { + if (this.callbackId === undefined) + this.play() + else + this.pause() } } @@ -195,10 +232,14 @@ class StatusBar { time = document.createElement('span') constructor(timeline) { - this.timeline = timeline this.domElement.classList.add("bottom-bar") this.initializeSeekbar() this.initializeButtons() + timeline.setCallbacks({ + timeUpdatedCallback: this.timeUpdatedCallback.bind(this), + playbackCallback: this.playbackCallback.bind(this), + }) + this.time.textContent = timeline.current.toLocaleString() } initializeSeekbar() { @@ -220,6 +261,19 @@ class StatusBar { this.buttons.appendChild(this.time) this.domElement.appendChild(this.buttons) } + + timeUpdatedCallback(current, start, finish) { + const norm = (current - start) / (finish - start) + this.progress.style.width = `${norm * 100}%` + this.time.textContent = current.toLocaleString() + } + + playbackCallback(status) { + if (status) + this.play.textContent = "⏸️" + else + this.play.textContent = "▶️" + } } function vec3FromXYZ({x, y, z}) { @@ -277,34 +331,8 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox 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 - } - battle_obj.timeline.simple_list.forEach(item => item.toggleKilled(current)) - const norm = (current - start) / (end - start) - progress.style.width = `${norm * 100}%` - writeTime(current) - }, 100) - } - else { - clearInterval(callbackId) - play.textContent = "▶️" - } - } + 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)) @@ -318,7 +346,6 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox } } battle_obj.timeline.simple_list.forEach(item => item.toggleKilled(start)) - writeTime(current) seekbar.onclick = seekWithBar seekbar.ondrag = seekWithBar |