From 0dfb9f8291cc38360c18b91ce784cd6a9e1596b1 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Sat, 27 Aug 2022 00:40:20 +0900
Subject: [PATCH] enhance(client): tweak clock

---
 .../client/src/components/analog-clock.vue    | 44 ++++++++++++++++++-
 packages/client/src/widgets/unix-clock.vue    |  2 +-
 2 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/packages/client/src/components/analog-clock.vue b/packages/client/src/components/analog-clock.vue
index b138bfcb46..b709a22548 100644
--- a/packages/client/src/components/analog-clock.vue
+++ b/packages/client/src/components/analog-clock.vue
@@ -26,6 +26,7 @@
 		</text>
 	</template>
 
+	<!--
 	<line
 		:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
 		:y1="5 + (Math.cos(sAngle) * (sHandLengthRatio * handsTailLength))"
@@ -35,6 +36,20 @@
 		:stroke-width="thickness / 2"
 		stroke-linecap="round"
 	/>
+	-->
+
+	<line
+		class="s"
+		:class="{ animate: !disableSAnimate }"
+		:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
+		:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
+		:x2="5 + (0 * ((sHandLengthRatio * 5) - handsPadding))"
+		:y2="5 - (1 * ((sHandLengthRatio * 5) - handsPadding))"
+		:stroke="sHandColor"
+		:stroke-width="thickness / 2"
+		:style="`transform: rotateZ(${sAngle}rad)`"
+		stroke-linecap="round"
+	/>
 
 	<line
 		:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
@@ -59,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed, onMounted, onBeforeUnmount, shallowRef } from 'vue';
+import { ref, computed, onMounted, onBeforeUnmount, shallowRef, nextTick } from 'vue';
 import tinycolor from 'tinycolor2';
 import { globalEvents } from '@/events.js';
 
@@ -125,6 +140,8 @@ let s = $ref<number>(0);
 let hAngle = $ref<number>(0);
 let mAngle = $ref<number>(0);
 let sAngle = $ref<number>(0);
+let disableSAnimate = $ref(false);
+let sOneRound = false;
 
 function tick() {
 	const now = new Date();
@@ -134,7 +151,21 @@ function tick() {
 	h = now.getHours();
 	hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
 	mAngle = Math.PI * (m + s / 60) / 30;
-	sAngle = Math.PI * s / 30;
+	if (sOneRound) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
+		sAngle = Math.PI * 60 / 30;
+		window.setTimeout(() => {
+			disableSAnimate = true;
+			window.setTimeout(() => {
+				sAngle = 0;
+				window.setTimeout(() => {
+					disableSAnimate = false;
+				}, 100);
+			}, 100);
+		}, 500);
+	} else {
+		sAngle = Math.PI * s / 30;
+	}
+	sOneRound = s === 59;
 }
 
 tick();
@@ -175,5 +206,14 @@ onBeforeUnmount(() => {
 <style lang="scss" scoped>
 .mbcofsoe {
 	display: block;
+
+	> .s {
+		will-change: transform;
+		transform-origin: 50% 50%;
+
+		&.animate {
+			transition: transform .2s cubic-bezier(.4,2.08,.55,.44);
+		}
+	}
 }
 </style>
diff --git a/packages/client/src/widgets/unix-clock.vue b/packages/client/src/widgets/unix-clock.vue
index c9e2b4b92a..cf85ac782c 100644
--- a/packages/client/src/widgets/unix-clock.vue
+++ b/packages/client/src/widgets/unix-clock.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="mkw-unixClock _monospace" :class="{ _panel: !widgetProps.transparent }" :style="{ fontSize: `${widgetProps.fontSize}em` }">
-	<div v-if="widgetProps.showLabel" class="label">UNIX time</div>
+	<div v-if="widgetProps.showLabel" class="label">UNIX Epoch</div>
 	<div class="time">
 		<span v-text="ss"></span>
 		<span v-if="widgetProps.showMs" class="colon" :class="{ showColon }">:</span>