diff --git a/src/ClockHands.tsx b/src/ClockHands.tsx index c0e9ff8..b1f0405 100644 --- a/src/ClockHands.tsx +++ b/src/ClockHands.tsx @@ -1,22 +1,12 @@ -import { createSignal, onCleanup } from 'solid-js'; +import { onCleanup } from 'solid-js'; import { ClockLine as ClockHand } from '@/ClockLine'; -import { hours, rotate, seconds } from '@/common'; +import { time } from '@/time'; import { getTestId } from '@/utilities'; -const getSecondsSinceMidnight = (): number => - (Date.now() - new Date().setHours(0, 0, 0, 0)) / 1000; - export const ClockHands = () => { - const [time, setTime] = createSignal(getSecondsSinceMidnight()); - - const subsecond = () => rotate(time() % 1, 0); - const second = () => rotate((time() % seconds) / seconds); - const minute = () => rotate(((time() / seconds) % seconds) / seconds); - const hour = () => rotate(((time() / seconds ** 2) % hours) / hours); - let frame = requestAnimationFrame(function loop() { - setTime(getSecondsSinceMidnight()); + time.update(); frame = requestAnimationFrame(loop); }); @@ -30,22 +20,22 @@ export const ClockHands = () => { class="stroke-zinc-200 stroke-3 dark:stroke-zinc-600" data-testid={getTestId('subsecond')} length={82} - transform={subsecond()} + transform={time.milisecond} /> ); diff --git a/src/common.ts b/src/common.ts index 5bdc63a..b48ece5 100644 --- a/src/common.ts +++ b/src/common.ts @@ -1,4 +1,3 @@ export const seconds = 60; -export const hours = seconds / 5; export const rotate = (rotate: number, fractionDigits = 1) => `rotate(${(rotate * 360).toFixed(fractionDigits)})`; diff --git a/src/time.ts b/src/time.ts new file mode 100644 index 0000000..b570897 --- /dev/null +++ b/src/time.ts @@ -0,0 +1,27 @@ +import { createSignal } from 'solid-js'; + +import { rotate, seconds } from '@/common'; + +const hours = seconds / 5; +const getSecondsSinceMidnight = (): number => + (Date.now() - new Date().setHours(0, 0, 0, 0)) / 1000; + +const [clock, setClock] = createSignal(getSecondsSinceMidnight()); + +export const time = { + get hour() { + return rotate(((clock() / seconds ** 2) % hours) / hours); + }, + get milisecond() { + return rotate(clock() % 1, 0); + }, + get minute() { + return rotate(((clock() / seconds) % seconds) / seconds); + }, + get second() { + return rotate((clock() % seconds) / seconds); + }, + update: () => { + setClock(getSecondsSinceMidnight()); + }, +};