💄 およそ○分を表示

.husky/pre-commit

@@ -1,6 +1,6 @@
+#!/bin/sh
 ## .husky/pre-commit
 
-#!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
 yarn inspect

src/components/ParkingCard.tsx

@@ -1,7 +1,7 @@
 import { VFC } from "react";
 import { FaCarSide } from "react-icons/fa";
 import { useRouter } from "next/router";
-import { Heading, Flex, Text, HStack, Spacer } from "@chakra-ui/react";
+import { Heading, Flex, Text, HStack, Spacer, Center } from "@chakra-ui/react";
 import { ChevronRightIcon, Icon } from "@chakra-ui/icons";
 import { Parking, ParkingStatus } from "@/types/Parking";
 
@@ -46,25 +46,37 @@ const stateColor = (status: ParkingStatus): string => {
   }
 };
 
-const stateText = (status: ParkingStatus): string => {
+const renderStateText = (status: ParkingStatus): JSX.Element => {
+  const texts = [];
+
   switch (status.state) {
     case "disable":
-      return "未開場";
+      texts.push("未開場");
+      break;
     case "beforeOpen":
-      return "開場前";
+      texts.push("開場前");
+      break;
     case "afterClosed":
-      return "閉場";
+      texts.push("閉場");
+      break;
     case "opened":
       if (status.percent == 100) {
-        return "満車";
+        texts.push("満車");
       } else {
-        return `およそ ${status.percent.toString()}%`;
+        texts.push("満車まで", `およそ${status.fillMinutes.toString()}分`);
       }
+      break;
     case "filled":
-      return "満車";
-    default:
-      return "";
+      texts.push("満車");
+      break;
   }
+  return (
+    <Text fontSize="sm" align="right">
+      {texts.map((text, index) => (
+        <p key={index}>{text}</p>
+      ))}
+    </Text>
+  );
 };
 
 const ParkingCard: VFC<Props> = ({ parking, status }: Props) => {
@@ -94,7 +106,7 @@ const ParkingCard: VFC<Props> = ({ parking, status }: Props) => {
       </HStack>
       <Spacer />
       <HStack>
-        <Text fontSize="sm">{stateText(status)}</Text>
+        {renderStateText(status)}
         <ChevronRightIcon />
       </HStack>
     </Flex>

src/types/Parking.ts

@@ -35,4 +35,5 @@ type ParkingState = typeof State[keyof typeof State];
 export type ParkingStatus = {
   state: ParkingState;
   percent: number;
+  fillMinutes: number;
 };

src/utils/parking.ts

@@ -11,24 +11,28 @@ export const parkingStatus = (now: Date, game: Game, parking: Parking): ParkingS
 
   if (parking.status === "disable") {
     // 未開放
-    return { state: "disable", percent: 0 };
+    return { state: "disable", percent: 0, fillMinutes: 0 };
   } else if (now.getTime() < openDate.getTime()) {
     // 開場前
-    return { state: "beforeOpen", percent: 0 };
+    return { state: "beforeOpen", percent: 0, fillMinutes: 0 };
   } else if (now.getTime() >= closeDate.getTime()) {
     // 閉場後
-    return { state: "afterClosed", percent: 0 };
+    return { state: "afterClosed", percent: 0, fillMinutes: 0 };
   } else {
     if (parking.status === "full") {
       // 満車時
-      return { state: "filled", percent: 100 };
+      return { state: "filled", percent: 100, fillMinutes: 0 };
     } else {
       // 現状の埋まり具合と予測
       const percent = suggestPercent(now, new Date(game.startAt.getTime()), parking.predicts);
       if (percent >= 100) {
-        return { state: "filled", percent: 100 };
+        return { state: "filled", percent: 100, fillMinutes: 0 };
       } else {
-        return { state: "opened", percent: percent };
+        const fillDate = parkingFillDate(game, parking);
+        const fillMinutes = fillDate
+          ? Math.floor((fillDate?.getTime() - now.getTime()) / 60000)
+          : 0;
+        return { state: "opened", percent: percent, fillMinutes: fillMinutes };
       }
     }
   }