1 files changed, 108 insertions, 0 deletions
diff --git a/src/views/Clock.js b/src/views/Clock.js
new file mode 100644
index 0000000..a394b62
--- /dev/null
+++ b/src/views/Clock.js
@@ -0,0 +1,108 @@
+/**
+ * Analog Clock
+ */
+
+import React, { useState, useEffect } from "react";
+
+const clock = {
+  width: "20vw",
+  height: "20vw",
+  background: "url(assets/img/clock/clock.png)",
+  backgroundSize: "contain",
+  backgroundPosition: "center center",
+  backgroundRepeat: "no-repeat",
+  position: "relative",
+};
+
+const handStyle = {
+  position: "absolute",
+  top: "0%",
+  left: "0%",
+};
+
+const hourStyle = {
+  ...handStyle,
+  height: "calc(540 / 1268 * 10vw)",
+  transformOrigin: "45.46% 96.62%",
+};
+
+const minuteStyle = {
+  ...handStyle,
+  height: "calc(795 / 1268 * 10vw)",
+  transformOrigin: "50% 84.05%",
+};
+
+const secondStyle = {
+  ...handStyle,
+  height: "calc(993 / 1268 * 10vw)",
+  transformOrigin: "45.83% 76.63%",
+};
+
+const hourTransform =
+  "translateX(10.45vw) translateY(10vw) translateX(-100%) translateY(-100%) ";
+const minuteTransform =
+  "translateX(10.45vw) translateY(10.8vw) translateX(-100%) translateY(-100%) ";
+const secondTransform =
+  "translateX(10.2vw) translateY(11.5vw) translateX(-100%) translateY(-100%) ";
+
+export default function Clock({ utc }) {
+  const [hour, setHour] = useState({});
+  const [minute, setMinute] = useState({});
+  const [second, setSecond] = useState({});
+
+  useEffect(() => {
+    const update = () => {
+      const time = new Date();
+      const hours = utc ? time.getUTCHours() : time.getHours();
+      const minutes = time.getMinutes();
+      const seconds = time.getSeconds();
+      const ms = time.getMilliseconds();
+      setHour({
+        ...hourStyle,
+        transform:
+          hourTransform +
+          "rotate(" +
+          (((hours % 12) + minutes / 60 + seconds / 3600) / 12) * 360 +
+          "deg)",
+      });
+      setMinute({
+        ...minuteStyle,
+        transform:
+          minuteTransform +
+          "rotate(" +
+          (minutes / 60 + seconds / 3600) * 360 +
+          "deg)",
+      });
+      setSecond({
+        ...secondStyle,
+        transform:
+          secondTransform +
+          "rotate(" +
+          (seconds / 60 + ms / 60000) * 360 +
+          "deg)",
+      });
+    };
+    update();
+    const intervalId = setInterval(update, 50);
+    return () => clearInterval(intervalId);
+  }, []);
+
+  return (
+    <div style={clock}>
+      <img src="assets/img/clock/hour.png" style={hour} />
+      <img src="assets/img/clock/minute.png" style={minute} />
+      <img src="assets/img/clock/second.png" style={second} />
+    </div>
+  );
+}
+
+// ratio: 500 / 1268
+// hour: 540
+// minute: 795
+// second: 993
+
+// hour transform origin: 40 x 515 // 88 / 533
+// minute transform origin: 37 x 622 // 72 x 740
+// second transform origin: 11 x 751 // 24 x 980
+
+const rand = (n) => Math.random() * n;