enhance(client): improve clock widget

1 files changed, 78 insertions, 21 deletions

diff --git a/packages/client/src/components/analog-clock.vue b/packages/client/src/components/analog-clock.vue
index 2ea7680dd3..438152e2dd 100644
--- a/packages/client/src/components/analog-clock.vue
+++ b/packages/client/src/components/analog-clock.vue
@@ -1,28 +1,58 @@
 <template>
 <svg class="mbcofsoe" viewBox="0 0 10 10" preserveAspectRatio="none">
-	<circle
-		v-for="(angle, i) in graduations"
-		:key="i"
-		:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
-		:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
-		:r="i % 5 == 0 ? 0.125 : 0.05"
-		:fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"
-	/>
-
-	<template v-if="props.numbers">
+	<template v-if="props.graduations === 'dots'">
+		<circle
+			v-for="(angle, i) in graduationsMinor"
+			:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
+			:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
+			:r="i % 5 == 0 ? 0 : 0.05"
+			:fill="minorGraduationColor"
+		/>
+		<circle
+			v-for="(angle, i) in graduationsMajor"
+			:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
+			:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
+			:r="0.125"
+			:fill="majorGraduationColor"
+		/>
+	</template>
+	<template v-else-if="props.graduations === 'dotsMajor'">
+		<circle
+			v-for="(angle, i) in graduationsMajor"
+			:cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
+			:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
+			:r="0.125"
+			:fill="majorGraduationColor"
+		/>
+	</template>
+	<template v-else-if="props.graduations === 'numbers'">
 		<text
 			v-for="(angle, i) in texts"
 			:x="5 + (Math.sin(angle) * (5 - textsPadding))"
 			:y="5 - (Math.cos(angle) * (5 - textsPadding))"
 			text-anchor="middle"
 			dominant-baseline="middle"
-			font-family="Verdana"
 			font-size="0.75"
 			fill="currentColor"
 		>
 			{{ i === 0 ? (props.twentyfour ? '24' : '12') : i }}
 		</text>
 	</template>
+	<template v-else-if="props.graduations === 'numbersCurrent'">
+		<text
+			v-for="(angle, i) in texts"
+			:x="5 + (Math.sin(angle) * (5 - textsPadding))"
+			:y="5 - (Math.cos(angle) * (5 - textsPadding))"
+			text-anchor="middle"
+			dominant-baseline="middle"
+			:font-size="(props.twentyfour ? h : h % 12) === i ? 1 : 0.7"
+			:font-weight="(props.twentyfour ? h : h % 12) === i ? 'bold' : 'normal'"
+			:fill="(props.twentyfour ? h : h % 12) === i ? currentHTextColor : 'currentColor'"
+			:opacity="(props.twentyfour ? h : h % 12) === i ? 1 : 0.5"
+		>
+			{{ i === 0 ? (props.twentyfour ? '24' : '12') : i }}
+		</text>
+	</template>
 
 	<line
 		:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
@@ -59,6 +89,7 @@
 <script lang="ts" setup>
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import tinycolor from 'tinycolor2';
+import { globalEvents } from '@/events.js';
 
 const graduationsPadding = 0.5;
 const textsPadding = 0.5;
@@ -67,28 +98,37 @@ const handsTailLength = 0.7;
 const hHandLengthRatio = 0.75;
 const mHandLengthRatio = 1;
 const sHandLengthRatio = 1;
-const graduations = (() => {
+const graduationsMinor = (() => {
 	const angles: number[] = [];
 	for (let i = 0; i < 60; i++) {
 		const angle = Math.PI * i / 30;
 		angles.push(angle);
 	}
-
 	return angles;
 })();
 
 const props = withDefaults(defineProps<{
-	numbers?: boolean;
 	thickness?: number;
 	offset?: number;
 	twentyfour?: boolean;
+	graduations?: 'none' | 'dots' | 'dotsMajor' | 'numbers' | 'numbersCurrent';
 }>(), {
 	numbers: false,
 	thickness: 0.1,
 	offset: 0 - new Date().getTimezoneOffset(),
 	twentyfour: false,
+	graduations: 'dots',
 });
 
+const graduationsMajor = computed(() => {
+	const angles: number[] = [];
+	const times = props.twentyfour ? 24 : 12;
+	for (let i = 0; i < times; i++) {
+		const angle = Math.PI * i / (times / 2);
+		angles.push(angle);
+	}
+	return angles;
+});
 const texts = computed(() => {
 	const angles: number[] = [];
 	const times = props.twentyfour ? 24 : 12;
@@ -103,13 +143,12 @@ const now = ref(new Date());
 now.value.setMinutes(now.value.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
 
 const enabled = ref(true);
-const computedStyle = getComputedStyle(document.documentElement);
-const dark = computed(() => tinycolor(computedStyle.getPropertyValue('--bg')).isDark());
-const majorGraduationColor = computed(() => dark.value ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)');
-const minorGraduationColor = computed(() => dark.value ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)');
-const sHandColor = computed(() => dark.value ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)');
-const mHandColor = computed(() => tinycolor(computedStyle.getPropertyValue('--fg')).toHexString());
-const hHandColor = computed(() => tinycolor(computedStyle.getPropertyValue('--accent')).toHexString());
+const majorGraduationColor = ref<string>();
+const minorGraduationColor = ref<string>();
+const sHandColor = ref<string>();
+const mHandColor = ref<string>();
+const hHandColor = ref<string>();
+const currentHTextColor = ref<string>();
 const s = computed(() => now.value.getSeconds());
 const m = computed(() => now.value.getMinutes());
 const h = computed(() => now.value.getHours());
@@ -122,6 +161,20 @@ function tick() {
 	now.value.setMinutes(now.value.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
 }
 
+function calcColors() {
+	const computedStyle = getComputedStyle(document.documentElement);
+	const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark();
+	const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
+	majorGraduationColor.value = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
+	minorGraduationColor.value = dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
+	sHandColor.value = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
+	mHandColor.value = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString();
+	hHandColor.value = accent;
+	currentHTextColor.value = accent;
+}
+
+calcColors();
+
 onMounted(() => {
 	const update = () => {
 		if (enabled.value) {
@@ -130,10 +183,14 @@ onMounted(() => {
 		}
 	};
 	update();
+
+	globalEvents.on('themeChanged', calcColors);
 });
 
 onBeforeUnmount(() => {
 	enabled.value = false;
+
+	globalEvents.off('themeChanged', calcColors);
 });
 </script>