summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--derelict.js97
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