From 3c4448a15182c77f2d7345c8f372f4a5765f7070 Mon Sep 17 00:00:00 2001 From: Dominic Zimmer Date: Thu, 27 Oct 2022 13:23:43 +0200 Subject: [PATCH] Implement timeline UI --- timeline/style.css | 32 ++++++++++++++++++++++++++++++++ timeline/timeline.html | 38 ++++++++++++++++++++++++++++++++++++++ timeline/timeline.js | 31 +++++++++++++++++++++++++++++++ 3 files changed, 101 insertions(+) create mode 100644 timeline/style.css create mode 100644 timeline/timeline.html create mode 100644 timeline/timeline.js diff --git a/timeline/style.css b/timeline/style.css new file mode 100644 index 0000000..4eb8635 --- /dev/null +++ b/timeline/style.css @@ -0,0 +1,32 @@ +:root { + --fg: red; + --bg: black; + --accent: white; + --mute: gray; +} +svg { + background-color: var(--bg); +} +.timeline { + stroke: var(--fg); + fill: none; + stroke-width: 1px; + stroke-dasharray: 314px 314px; + stroke-dashoffset: -314px; +} +.time { + stroke: var(--accent); + fill: none; + stroke-width: 0.1px; +} +.h0 { + stroke-width: 1px; +} +.h3 { + stroke-width: 0.4px; +} +.timeline-mute { + stroke: var(--mute); + fill: none; + stroke-width: 0.5px; +} diff --git a/timeline/timeline.html b/timeline/timeline.html new file mode 100644 index 0000000..35679cb --- /dev/null +++ b/timeline/timeline.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/timeline/timeline.js b/timeline/timeline.js new file mode 100644 index 0000000..f4fcfc2 --- /dev/null +++ b/timeline/timeline.js @@ -0,0 +1,31 @@ +let overridetime = undefined; +//overridetime = Date.now(); + +// Saturday at 23:00 UTC, the event starts +const startTime = overridetime ?? Date.parse('Sat, 29 Oct 2022 23:00:00'); + +const timeToOffset = (hours) => { + const speed1 = -10; + const speed2 = -31; + if (hours <= 0) return 0; + if (hours >= 25) return 24*speed1 + speed2; + if (hours <= 2) { + return hours * speed1; + } else if (hours > 2 && hours < 3) { + return 2*speed1 + (hours-2) * speed2; + } else { + return 2*speed1 + speed2 + (hours-3) * speed1; + } +}; + +const update = () => { + const now = Date.now(); + const hoursPassed = (now-startTime) / 1000 / 3600; + // test speed here + const offset = timeToOffset(hoursPassed); + const timeline = document.getElementById("timeline"); + timeline.style.strokeDashoffset = 314 + offset; +}; + +update(); +setInterval(update, 50);