refactor: use raw unix time

packages/frontend/src/components/MkAnalogClock.vue

@@ -39,7 +39,6 @@
 	-->
 
 	<line
-		ref="sLine"
 		:class="[$style.s, { [$style.animate]: !disableSAnimate && sAnimation !== 'none', [$style.elastic]: sAnimation === 'elastic', [$style.easeOut]: sAnimation === 'easeOut' }]"
 		:x1="5 - (0 * (sHandLengthRatio * handsTailLength))"
 		:y1="5 + (1 * (sHandLengthRatio * handsTailLength))"
@@ -74,7 +73,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onBeforeUnmount, ref } from 'vue';
+import { computed, onMounted, onBeforeUnmount } from 'vue';
 import tinycolor from 'tinycolor2';
 import { globalEvents } from '@/events.js';
 import { defaultIdlingRenderScheduler } from '@/scripts/idle-render.js';
@@ -132,7 +131,6 @@ const texts = computed(() => {
 	return angles;
 });
 
-let enabled = true;
 let majorGraduationColor = $ref<string>();
 //let minorGraduationColor = $ref<string>();
 let sHandColor = $ref<string>();
@@ -146,8 +144,6 @@ let hAngle = $ref<number>(0);
 let mAngle = $ref<number>(0);
 let sAngle = $ref<number>(0);
 let disableSAnimate = $ref(false);
-let sOneRound = false;
-const sLine = ref<SVGPathElement>();
 
 function tick() {
 	const now = props.now();
@@ -163,25 +159,7 @@ function tick() {
 	}
 	hAngle = Math.PI * (h % (props.twentyfour ? 24 : 12) + (m + s / 60) / 60) / (props.twentyfour ? 12 : 6);
 	mAngle = Math.PI * (m + s / 60) / 30;
-	if (sOneRound && sLine.value) { // 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
-		sAngle = Math.PI * 60 / 30;
-		defaultIdlingRenderScheduler.delete(tick);
-		sLine.value.addEventListener('transitionend', () => {
-			disableSAnimate = true;
-			requestAnimationFrame(() => {
-				sAngle = 0;
-				requestAnimationFrame(() => {
-					disableSAnimate = false;
-					if (enabled) {
-						defaultIdlingRenderScheduler.add(tick);
-					}
-				});
-			});
-		}, { once: true });
-	} else {
-		sAngle = Math.PI * s / 30;
-	}
-	sOneRound = s === 59;
+	sAngle = Math.PI * (now.valueOf() / 1000) / 30; // NOTE: 秒針はトランジションするので実際の UNIX 秒から角度を算出する
 }
 
 tick();
@@ -206,7 +184,6 @@ onMounted(() => {
 });
 
 onBeforeUnmount(() => {
-	enabled = false;
 	defaultIdlingRenderScheduler.delete(tick);
 	globalEvents.off('themeChanged', calcColors);
 });