Merge pull request #612 from isucon/frontend/refactor/completed-as-ma…

…tching [FE] シュミレーターのRideStatus表示のうち"完了"を"空車"として表示する / 他
isucon · Dec 5, 2024 · bc7b293 · bc7b293
2 parents 014521e + 616a3b2
commit bc7b293
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/frontend/app/components/modules/simulator-chair-status/simulator-chair-status.tsx b/frontend/app/components/modules/simulator-chair-status/simulator-chair-status.tsx
@@ -10,8 +10,8 @@ const StatusList = {
   PICKUP: ["乗車待ち", colors.amber["500"]],
   CARRYING: ["賃走", colors.red["500"]],
   ARRIVED: ["到着", colors.emerald["500"]],
-  COMPLETED: ["完了", colors.emerald["500"]],
-} as const;
+  COMPLETED: ["空車", colors.sky["500"]],
+} as const satisfies Record<RideStatus, [string, string]>;
 
 export const SimulatorChairRideStatus: FC<
   ComponentProps<"div"> & {

diff --git a/frontend/app/components/modules/simulator-display/simulator-chair-display.tsx b/frontend/app/components/modules/simulator-display/simulator-chair-display.tsx
@@ -101,37 +101,37 @@ const ChairProgress: FC<{
     return rideStatus !== undefined ? getSimulatorStartCoordinate() : null;
   }, [rideStatus]);
 
-  const pickupProgress: number = useMemo(() => {
+  const progressToPickup: number = useMemo(() => {
     if (!rideStatus || !pickupLoc || !startLoc || !currentLoc) {
       return 0;
     }
     switch (rideStatus) {
       case "MATCHING":
+      case "COMPLETED":
         return 0;
       case "PICKUP":
       case "ARRIVED":
       case "CARRYING":
-      case "COMPLETED":
         return 100;
       default:
         return progress(startLoc, currentLoc, pickupLoc);
     }
   }, [rideStatus, pickupLoc, startLoc, currentLoc]);
 
-  const distanceProgress: number = useMemo(() => {
+  const progressToDestination: number = useMemo(() => {
     if (!rideStatus || !destLoc || !pickupLoc || !currentLoc) {
       return 0;
     }
     switch (rideStatus) {
       case "MATCHING":
+      case "COMPLETED":
       case "PICKUP":
       case "ENROUTE":
         return 0;
       case "ARRIVED":
-      case "COMPLETED":
         return 100;
       default:
-        return progress(destLoc, currentLoc, pickupLoc);
+        return progress(pickupLoc, currentLoc, destLoc);
     }
   }, [rideStatus, destLoc, pickupLoc, currentLoc]);
 
@@ -142,30 +142,29 @@ const ChairProgress: FC<{
           <PinIcon color={colors.red[500]} width={20} />
           <div className="relative w-full ms-6">
             {rideStatus &&
-              ["PICKUP", "CARRYING", "ARRIVED", "COMPLETED"].includes(
-                rideStatus,
-              ) && (
+              ["PICKUP", "CARRYING", "ARRIVED"].includes(rideStatus) && (
                 <ChairIcon
                   model={model}
                   className={`size-6 absolute top-[-2px] ${rideStatus === "CARRYING" ? "animate-shake" : ""}`}
-                  style={{ right: `${distanceProgress}%` }}
+                  style={{ right: `${progressToDestination}%` }}
                 />
               )}
           </div>
         </div>
         <div className="flex w-1/2">
           <PinIcon color={colors.black} width={20} />
           <div className="relative w-full ms-6">
-            {rideStatus && ["MATCHING", "ENROUTE"].includes(rideStatus) && (
-              <ChairIcon
-                model={model}
-                className={twMerge(
-                  "size-6 absolute top-[-2px]",
-                  rideStatus === "ENROUTE" && "animate-shake",
-                )}
-                style={{ right: `${pickupProgress}%` }}
-              />
-            )}
+            {rideStatus &&
+              ["MATCHING", "COMPLETED", "ENROUTE"].includes(rideStatus) && (
+                <ChairIcon
+                  model={model}
+                  className={twMerge(
+                    "size-6 absolute top-[-2px]",
+                    rideStatus === "ENROUTE" && "animate-shake",
+                  )}
+                  style={{ right: `${progressToPickup}%` }}
+                />
+              )}
           </div>
         </div>
       </div>

diff --git a/frontend/app/routes/client._index/route.tsx b/frontend/app/routes/client._index/route.tsx
@@ -278,6 +278,7 @@ export default function Index() {
                 statusModalRef.current?.close();
                 setCurrentLocation(destLocation);
                 setDestLocation(undefined);
+                setEstimatePrice(undefined);
               }}
             />
           )}