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());
+ },
+};