Merge pull request #264 from ayanami77/refac/timer

.github/workflows/ci.yaml

@@ -21,7 +21,7 @@ jobs:
       - name: Set up Node.js ${{ matrix.node-version }}
         uses: pnpm/action-setup@v2
         with:
-          version: 9
+          version: 9.0.4
 
       - name: Install dependencies
         run: pnpm i --frozen-lockfile

biome.json

@@ -23,6 +23,6 @@
     "lineWidth": 120
   },
   "files": {
-    "ignore": ["src/routeTree.gen.ts"]
+    "ignore": ["src/routeTree.gen.ts", "src/Rhythmate-Service/*"]
   }
 }

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
-  "packageManager": "pnpm@9.1.1",
+  "packageManager": "pnpm@9.0.4",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",

src/features/common/hooks/useInterval.tsx

@@ -1,11 +1,9 @@
 import { useEffect } from "react";
 
-const useInterval = (callback: any, delay?: number | null) => {
+const useInterval = (callback: () => void, delay: number) => {
   useEffect(() => {
-    if (delay !== null) {
-      const interval = setInterval(() => callback(), delay || 0);
-      return () => clearInterval(interval);
-    }
+    const interval = setInterval(() => callback(), delay || 0);
+    return () => clearInterval(interval);
   }, [callback, delay]);
 };
 

src/features/quests/components/QuestBoard.tsx

@@ -29,7 +29,6 @@ export const QuestBoard: FC<Props> = (props) => {
     currentQuest.minutes,
     currentQuest.startedAt,
   );
-
   const [questStatus, setQuestStatus] = useState<QuestStatus>(status);
 
   useInterval(() => {
@@ -42,19 +41,16 @@ export const QuestBoard: FC<Props> = (props) => {
 
     const { diffHH, diffMM, diffSS } = calcDiffTimeBetweenNowAndTargetTime(baseTime);
 
-    if (status === FORCE_STOP && questStatus !== FORCE_STOP) {
+    // クエスト強制終了へ切り替える
+    if (status === FORCE_STOP) {
       setQuestStatus(FORCE_STOP);
     }
     // クエスト解放へ切り替える
-    if (diffHH === diffMM && diffMM === diffSS && questStatus === CLOSED) {
+    if (diffHH === 0 && diffMM === 0 && diffSS === 0 && questStatus === CLOSED) {
       setQuestStatus(OPEN);
     }
-    // クエスト集中へ切り替える
-    if (diffHH === diffMM && diffMM === diffSS && questStatus === OPEN) {
-      setQuestStatus(ENGAGED);
-    }
     // クエスト終了へ切り替える
-    if (diffHH === diffMM && diffMM === diffSS && questStatus === ENGAGED) {
+    if (diffHH === 0 && diffMM === 0 && diffSS === 0 && questStatus === ENGAGED) {
       setQuestStatus(DONE);
     }
   }, 1000);

src/features/quests/components/QuestBoardTimer.tsx

@@ -11,33 +11,27 @@ type Props = {
   startedAt: string;
 };
 
+const constructTime = (hh: number, mm: number, ss: number) => {
+  return `${String(hh)}時間${String(mm).padStart(2, "0")}分${String(ss).padStart(2, "0")}秒`;
+};
+
 export const QuestBoardTimer: FC<Props> = ({ startsAt, isStarted, minutes, startedAt }) => {
   const { baseTime } = calcBaseTime(startsAt, isStarted, minutes, startedAt);
 
   const { diffHH, diffMM, diffSS } = calcDiffTimeBetweenNowAndTargetTime(baseTime);
 
-  const [hh, setHH] = useState(0 < diffHH ? diffHH : 0);
-  const [mm, setMM] = useState(0 < diffMM ? diffMM : 0);
-  const [ss, setSS] = useState(0 < diffSS ? diffSS : 0);
+  const [time, setTime] = useState(constructTime(diffHH, diffMM, diffSS));
 
   useInterval(() => {
     const { baseTime, status } = calcBaseTime(startsAt, getIsStarted(startedAt), minutes, startedAt);
 
     if (status !== FORCE_STOP) {
       const { diffHH, diffMM, diffSS } = calcDiffTimeBetweenNowAndTargetTime(baseTime);
-      setHH(diffHH);
-      setMM(diffMM);
-      setSS(diffSS);
+      setTime(constructTime(diffHH, diffMM, diffSS));
     } else {
-      setHH(0);
-      setMM(0);
-      setSS(0);
+      setTime(constructTime(0, 0, 0));
     }
   }, 1000);
 
-  return (
-    <span className="text-2xl text-rhyth-light-blue tracking-wider">
-      {String(hh)}時間{String(mm).padStart(2, "0")}分{String(ss).padStart(2, "0")}秒
-    </span>
-  );
+  return <span className="text-2xl text-rhyth-light-blue tracking-wider">{time}</span>;
 };

src/features/quests/funcs/time.ts

@@ -29,7 +29,7 @@ export const calcBaseTime = (
   }
 
   // クエスト解放中前後30分
-  if (!isStarted && beforeDiffMM < 0) {
+  if (!isStarted && -30 <= beforeDiffMM && beforeDiffMM < 0) {
     return {
       baseTime: formatDateTimeWithAddMinutes(startsAt, 15),
       status: OPEN,