diff options
| -rw-r--r-- | derelict.js | 45 |
1 files changed, 30 insertions, 15 deletions
diff --git a/derelict.js b/derelict.js index 0e629b9..cb6d399 100644 --- a/derelict.js +++ b/derelict.js @@ -180,6 +180,30 @@ class Wreck { } } +class StatusBar { + domElement = document.createElement('div') + seekbar = document.createElement('div') + progress = document.createElement('div') + + constructor(timeline) { + this.timeline = timeline + this.domElement.classList.add("bottom-bar") + this.initializeSeekbar() + } + + initializeSeekbar() { + this.seekbar.classList.add("seekbar") + this.seekbar.draggable = true + this.progress.classList.add("progress") + this.progress.style.width = "0%" + const tip = document.createElement('div') + tip.classList.add("tip") + this.seekbar.appendChild(this.progress) + this.progress.appendChild(tip) + this.domElement.appendChild(this.seekbar) + } +} + function vec3FromXYZ({x, y, z}) { return new THREE.Vector3(x, y, z) } @@ -222,29 +246,20 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox const start = battle_obj.timeline.start - EXPIRY const end = battle_obj.timeline.finish + EXPIRY - const bottomBar = document.createElement("div") - const seekbar = document.createElement("div") const buttons = document.createElement("div") - const progress = document.createElement("div") - const tip = document.createElement("div") const play = document.createElement("button") const time = document.createElement("span") - bottomBar.classList.add("bottom-bar") - seekbar.classList.add("seekbar") - seekbar.draggable = true buttons.classList.add("buttons") - progress.classList.add("progress") - progress.style.width = "0%" - tip.classList.add("tip") play.textContent = "▶️" - container.appendChild(bottomBar) - bottomBar.appendChild(seekbar) - bottomBar.appendChild(buttons) + const statusBar = new StatusBar(battle_obj.timeline) + container.appendChild(statusBar.domElement) + + statusBar.domElement.appendChild(buttons) buttons.appendChild(play) buttons.appendChild(time) - seekbar.appendChild(progress) - progress.appendChild(tip) + const seekbar = statusBar.seekbar + const progress = statusBar.progress const writeTime = stamp => { let date = new Date(stamp) |