feat: moved time signals to a separate file (#278)

Author: high1

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}
       />
       <ClockHand
         class="stroke-zinc-600 stroke-4 dark:stroke-zinc-200"
         length={46}
-        transform={hour()}
+        transform={time.hour}
       />
       <ClockHand
         class="stroke-zinc-400 stroke-3"
         length={64}
-        transform={minute()}
+        transform={time.minute}
       />
       <ClockHand
         class="stroke-solid-light stroke-2 dark:stroke-solid"
         length={76}
-        transform={second()}
+        transform={time.second}
       />
     </>
   );

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)})`;

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