partypages/lan-2022-10
2
0
Fork 0
forked from partypages/party-template
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Implement timeline UI
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Dominic Zimmer 2022-10-27 13:23:43 +02:00
parent 929a7080b8
commit 3c4448a151
3 changed files with 101 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
timeline/style.css Normal file
View File

@ -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;
}

38
timeline/timeline.html Normal file
View File

@ -0,0 +1,38 @@
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg viewBox="0 0 260 35">
<path class="timeline-mute" d="M 5 25 L 245 25"/>
<path id="timeline" class="timeline" d="M 5 25 L 25 25 A 5 5 90 0 0 25 15 A 5 5 90 0 0 25 25 L 255 25" />
<path class="time h0" d="M 5 24 L 5 26"/>
<path class="time " d="M 15 24 L 15 26"/>
<path class="time " d="M 25 24 L 25 26"/>
<path class="time h3" d="M 35 24 L 35 26"/>
<path class="time " d="M 45 24 L 45 26"/>
<path class="time " d="M 55 24 L 55 26"/>
<path class="time h3" d="M 65 24 L 65 26"/>
<path class="time " d="M 75 24 L 75 26"/>
<path class="time " d="M 85 24 L 85 26"/>
<path class="time h3" d="M 95 24 L 95 26"/>
<path class="time " d="M 105 24 L 105 26"/>
<path class="time " d="M 115 24 L 115 26"/>
<path class="time h0" d="M 125 24 L 125 26"/>
<path class="time " d="M 135 24 L 135 26"/>
<path class="time " d="M 145 24 L 145 26"/>
<path class="time h3" d="M 155 24 L 155 26"/>
<path class="time " d="M 165 24 L 165 26"/>
<path class="time " d="M 175 24 L 175 26"/>
<path class="time h3" d="M 185 24 L 185 26"/>
<path class="time " d="M 195 24 L 195 26"/>
<path class="time " d="M 205 24 L 205 26"/>
<path class="time h3" d="M 215 24 L 215 26"/>
<path class="time " d="M 225 24 L 225 26"/>
<path class="time " d="M 235 24 L 235 26"/>
<path class="time h0" d="M 245 24 L 245 26"/>
</svg>
<script src="timeline.js" >
</script>
</body>
</html>

31
timeline/timeline.js Normal file
View File

@ -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);