Baipyrus/Matrix
1
0
Fork 0
mirror of https://gitlab1.ptb.de/waltem01/Matrix synced 2024-11-14 00:43:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

better commentary

Browse Source
This commit is contained in:
waltem01 2024-03-08 10:25:20 +01:00
parent d60800bc3f
commit e672e854c9
1 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
Webserver/src/routes/clock/+page.svelte
View File

@ -1,16 +1,21 @@
<script lang="ts">
import { onMount } from 'svelte';
// Data structure to keep track of clock
interface Clock {
// Clock circle radius
body: number;
// Clock hand radii
hands: {
minute: number;
hour: number;
};
// Clock time percentages
time: {
minute: number;
hour: number;
};
// Clock hand positions
positions?: {
minute: {
x: number;
@ -21,9 +26,11 @@
y: number;
};
};
// Clock update speed in seconds
speed: number;
}
//.System variables
const clock: Clock = {
body: 50,
hands: {
@ -39,8 +46,8 @@
const TWO_PI = 2 * Math.PI;
const HALF_PI = Math.PI / 2;
// (x = r * cos(a), y = r * sin(a))
function calcPos(time: 'minute' | 'hour', operation: 'sin' | 'cos') {
// Calculate (x = r * cos(a), y = r * sin(a))
const radius = clock.hands[time];
const angle = TWO_PI * clock.time[time];
const relative = Math[operation](angle - HALF_PI);
@ -52,10 +59,12 @@
const current = new Date();
const time = current.toTimeString();
const [hour, minute, _] = time.split(' ')[0].split(':');
// Update time variables
clock.time = {
hour: Number(hour) / 12,
minute: Number(minute) / 60
};
// Update hand positions
clock.positions = {
minute: {
x: calcPos('minute', 'cos'),
@ -74,8 +83,10 @@
});
</script>
<!-- Virtual clock display using SVG -->
<div class="bg-black">
<svg class="text-white" viewBox="0 0 100 100">
<!-- Clock body -->
<circle class="stroke-current" cx="50" cy="50" r={clock.body} fill="none" stroke-width="2" />
<line
class="stroke-current"
@ -85,6 +96,7 @@
y2={clock.positions?.minute.y ?? 0}
stroke-width="1"
/>
<!-- Clock hours hand -->
<line
class="stroke-current"
x1="50"