From e3aa39e0503e12592c4cea9fcfd23b1f0de23055 Mon Sep 17 00:00:00 2001 From: syuilo Date: Sat, 6 Aug 2022 20:04:23 +0900 Subject: [PATCH] refactor --- .../client/src/components/analog-clock.vue | 58 ++++++++++--------- 1 file changed, 31 insertions(+), 27 deletions(-) diff --git a/packages/client/src/components/analog-clock.vue b/packages/client/src/components/analog-clock.vue index e960926a1..b138bfcb4 100644 --- a/packages/client/src/components/analog-clock.vue +++ b/packages/client/src/components/analog-clock.vue @@ -112,46 +112,50 @@ const texts = computed(() => { return angles; }); -const now = shallowRef(new Date()); -now.value.setMinutes(now.value.getMinutes() + (new Date().getTimezoneOffset() + props.offset)); - -const enabled = ref(true); -const majorGraduationColor = ref(); -const minorGraduationColor = ref(); -const sHandColor = ref(); -const mHandColor = ref(); -const hHandColor = ref(); -const nowColor = ref(); -const s = computed(() => now.value.getSeconds()); -const m = computed(() => now.value.getMinutes()); -const h = computed(() => now.value.getHours()); -const hAngle = computed(() => Math.PI * (h.value % (props.twentyfour ? 24 : 12) + (m.value + s.value / 60) / 60) / (props.twentyfour ? 12 : 6)); -const mAngle = computed(() => Math.PI * (m.value + s.value / 60) / 30); -const sAngle = computed(() => Math.PI * s.value / 30); +let enabled = true; +let majorGraduationColor = $ref(); +//let minorGraduationColor = $ref(); +let sHandColor = $ref(); +let mHandColor = $ref(); +let hHandColor = $ref(); +let nowColor = $ref(); +let h = $ref(0); +let m = $ref(0); +let s = $ref(0); +let hAngle = $ref(0); +let mAngle = $ref(0); +let sAngle = $ref(0); function tick() { - const date = new Date(); - date.setMinutes(now.value.getMinutes() + (new Date().getTimezoneOffset() + props.offset)); - now.value = date; + const now = new Date(); + now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset)); + s = now.getSeconds(); + m = now.getMinutes(); + h = now.getHours(); + hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6); + mAngle = Math.PI * (m + s / 60) / 30; + sAngle = Math.PI * s / 30; } +tick(); + 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; - nowColor.value = accent; + majorGraduationColor = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)'; + //minorGraduationColor = dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)'; + sHandColor = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)'; + mHandColor = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString(); + hHandColor = accent; + nowColor = accent; } calcColors(); onMounted(() => { const update = () => { - if (enabled.value) { + if (enabled) { tick(); window.setTimeout(update, 1000); } @@ -162,7 +166,7 @@ onMounted(() => { }); onBeforeUnmount(() => { - enabled.value = false; + enabled = false; globalEvents.off('themeChanged', calcColors); });