summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--derelict.js44
-rw-r--r--style.css23
2 files changed, 56 insertions, 11 deletions
diff --git a/derelict.js b/derelict.js
index 87bc4d5..8f0f8a3 100644
--- a/derelict.js
+++ b/derelict.js
@@ -178,17 +178,39 @@ function processBattle({battle, renderer, renderer2d, container, toolbar, skybox
grids.forEach(g => g.scene.background = rt)
})
- const start = Date.parse(battle.started_at)
- const end = Date.parse(battle.ended_at)
- const timeline = document.getElementById("timeline")
- const step = 1000
- const toggleAll = () => elements.forEach(item => item.toggleKilled(timeline.value))
- timeline.min = start - step
- timeline.max = end + step + EXPIRY
- timeline.value = timeline.min
- timeline.step = step
- timeline.oninput = toggleAll
- toggleAll()
+ const start = Date.parse(battle.started_at) - EXPIRY
+ const end = Date.parse(battle.ended_at) + EXPIRY
+
+ const bottomBar = document.createElement("div")
+ const seekbar = document.createElement("div")
+ const progress = document.createElement("div")
+ bottomBar.classList.add("bottom-bar")
+ seekbar.classList.add("seekbar")
+ seekbar.draggable = true
+ progress.classList.add("progress")
+ progress.style.width = "0%"
+
+ container.appendChild(bottomBar)
+ bottomBar.appendChild(seekbar)
+ seekbar.appendChild(progress)
+
+ let current = 0
+ 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 != lim) {
+ elements.forEach(item => item.toggleKilled(timestamp))
+ progress.style.width = `${lim * 100}%`
+ current = lim
+ }
+ }
+ elements.forEach(item => item.toggleKilled(start))
+
+ seekbar.onclick = seekWithBar
+ seekbar.ondrag = seekWithBar
+ seekbar.ondragstart = e => e.dataTransfer.setDragImage(new Image(0, 0), 0, 0)
}
export function init({id, container, toolbar}) {
diff --git a/style.css b/style.css
index 62b6670..bd5073b 100644
--- a/style.css
+++ b/style.css
@@ -186,3 +186,26 @@ body {
height: 100vh;
box-sizing: border-box;
}
+
+.bottom-bar {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ box-sizing: border-box;
+ padding: 0 1em 1em 1em;
+ z-index: 10000;
+}
+
+.bottom-bar .seekbar {
+ width: 100%;
+ height: 0.5em;
+ background: #333;
+ cursor: pointer;
+}
+
+.bottom-bar .seekbar .progress {
+ height: 100%;
+ background: #bf1041;
+ pointer-events: none;
+}