natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

refactor

This commit is contained in:
syuilo 2022-08-06 20:04:23 +09:00
parent c4830dcf3a
commit e3aa39e050
1 changed files with 31 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
packages/client/src/components/analog-clock.vue
View File

@ -112,46 +112,50 @@ const texts = computed(() => {
return angles; return angles;
}); });
const now = shallowRef(new Date()); let enabled = true;
now.value.setMinutes(now.value.getMinutes() + (new Date().getTimezoneOffset() + props.offset)); let majorGraduationColor = $ref<string>();
//let minorGraduationColor = $ref<string>();
const enabled = ref(true); let sHandColor = $ref<string>();
const majorGraduationColor = ref<string>(); let mHandColor = $ref<string>();
const minorGraduationColor = ref<string>(); let hHandColor = $ref<string>();
const sHandColor = ref<string>(); let nowColor = $ref<string>();
const mHandColor = ref<string>(); let h = $ref<number>(0);
const hHandColor = ref<string>(); let m = $ref<number>(0);
const nowColor = ref<string>(); let s = $ref<number>(0);
const s = computed(() => now.value.getSeconds()); let hAngle = $ref<number>(0);
const m = computed(() => now.value.getMinutes()); let mAngle = $ref<number>(0);
const h = computed(() => now.value.getHours()); let sAngle = $ref<number>(0);
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);
function tick() { function tick() {
const date = new Date(); const now = new Date();
date.setMinutes(now.value.getMinutes() + (new Date().getTimezoneOffset() + props.offset)); now.setMinutes(now.getMinutes() + (new Date().getTimezoneOffset() + props.offset));
now.value = date; 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() { function calcColors() {
const computedStyle = getComputedStyle(document.documentElement); const computedStyle = getComputedStyle(document.documentElement);
const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark(); const dark = tinycolor(computedStyle.getPropertyValue('--bg')).isDark();
const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString(); const accent = tinycolor(computedStyle.getPropertyValue('--accent')).toHexString();
majorGraduationColor.value = dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)'; majorGraduationColor = 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)'; //minorGraduationColor = 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)'; sHandColor = dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
mHandColor.value = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString(); mHandColor = tinycolor(computedStyle.getPropertyValue('--fg')).toHexString();
hHandColor.value = accent; hHandColor = accent;
nowColor.value = accent; nowColor = accent;
} }
calcColors(); calcColors();
onMounted(() => { onMounted(() => {
const update = () => { const update = () => {
if (enabled.value) { if (enabled) {
tick(); tick();
window.setTimeout(update, 1000); window.setTimeout(update, 1000);
} }
@ -162,7 +166,7 @@ onMounted(() => {
}); });
onBeforeUnmount(() => { onBeforeUnmount(() => {
enabled.value = false; enabled = false;
globalEvents.off('themeChanged', calcColors); globalEvents.off('themeChanged', calcColors);
}); });