From 6169acd478e9206eec65cf836ed8ff9dfa5302e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Acid=20Chicken=20=28=E7=A1=AB=E9=85=B8=E9=B6=8F=29?=
 <root@acid-chicken.com>
Date: Tue, 17 Jul 2018 18:43:04 +0900
Subject: [PATCH] Update analog-clock.vue

---
 .../common/views/components/analog-clock.vue  | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/client/app/common/views/components/analog-clock.vue b/src/client/app/common/views/components/analog-clock.vue
index 53fb2a8dad..d3a365b156 100644
--- a/src/client/app/common/views/components/analog-clock.vue
+++ b/src/client/app/common/views/components/analog-clock.vue
@@ -45,7 +45,7 @@ export default Vue.extend({
 	data() {
 		return {
 			now: new Date(),
-			clock: null,
+			enabled: true,
 
 			graduationsPadding: 0.5,
 			handsPadding: 1,
@@ -74,6 +74,9 @@ export default Vue.extend({
 			return themeColor;
 		},
 
+		ms(): number {
+			return this.now.getMilliseconds();
+		}
 		s(): number {
 			return this.now.getSeconds();
 		},
@@ -85,13 +88,13 @@ export default Vue.extend({
 		},
 
 		hAngle(): number {
-			return Math.PI * (this.h % 12 + this.m / 60) / 6;
+			return Math.PI * (this.h % 12 + (this.m + (this.s + this.ms / 1000) / 60) / 60) / 6;
 		},
 		mAngle(): number {
-			return Math.PI * (this.m + this.s / 60) / 30;
+			return Math.PI * (this.m + (this.s + this.ms / 1000) / 60) / 30;
 		},
 		sAngle(): number {
-			return Math.PI * this.s / 30;
+			return Math.PI * (this.s + this.ms / 1000) / 30;
 		},
 
 		graduations(): any {
@@ -106,11 +109,17 @@ export default Vue.extend({
 	},
 
 	mounted() {
-		this.clock = setInterval(this.tick, 1000);
+		const update = () => {
+			if (this.enabled) {
+				this.tick();
+				requestAnimationFrame(update);
+			}
+		});
+		update();
 	},
 
 	beforeDestroy() {
-		clearInterval(this.clock);
+		enabled = false;
 	},
 
 	methods: {