From 563a42e3e70e4f634f1720ff4316868bcf2dfff0 Mon Sep 17 00:00:00 2001
From: Daisuke Yamamoto <yamacentworld@yahoo.co.jp>
Date: Thu, 5 Dec 2024 18:38:27 +0900
Subject: [PATCH] =?UTF-8?q?simulator=E3=81=AEprogress=E3=82=92=E5=B7=A6?=
 =?UTF-8?q?=E5=8F=B3=E5=8F=8D=E8=BB=A2=EF=BC=88=E5=B7=A6=E2=86=92=E5=8F=B3?=
 =?UTF-8?q?=EF=BC=89=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../simulator-chair-display.tsx               | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/frontend/app/components/modules/simulator-display/simulator-chair-display.tsx b/frontend/app/components/modules/simulator-display/simulator-chair-display.tsx
index bee65f4e..4d75c3b2 100644
--- a/frontend/app/components/modules/simulator-display/simulator-chair-display.tsx
+++ b/frontend/app/components/modules/simulator-display/simulator-chair-display.tsx
@@ -137,33 +137,36 @@ const ChairProgress: FC<{
     <div className="flex items-center">
       <div className="flex border-b pb-1 w-full">
         <div className="flex w-1/2">
-          <PinIcon color={colors.red[500]} width={20} />
-          <div className="relative w-full ms-6">
+          <div className="relative w-full me-6">
             {rideStatus &&
-              ["PICKUP", "CARRYING", "ARRIVED"].includes(rideStatus) && (
+              ["MATCHING", "COMPLETED", "ENROUTE"].includes(rideStatus) && (
                 <ChairIcon
                   model={model}
-                  className={`size-6 absolute top-[-2px] ${rideStatus === "CARRYING" ? "animate-shake" : ""}`}
-                  style={{ right: `${progressToDestination}%` }}
+                  className={twMerge(
+                    "scale-x-[-1] size-6 absolute top-[-2px]",
+                    rideStatus === "ENROUTE" && "animate-shake",
+                  )}
+                  style={{ left: `${progressToPickup}%` }}
                 />
               )}
           </div>
+          <PinIcon color={colors.black} width={20} />
         </div>
         <div className="flex w-1/2">
-          <PinIcon color={colors.black} width={20} />
-          <div className="relative w-full ms-6">
+          <div className="relative w-full me-6">
             {rideStatus &&
-              ["MATCHING", "COMPLETED", "ENROUTE"].includes(rideStatus) && (
+              ["PICKUP", "CARRYING", "ARRIVED"].includes(rideStatus) && (
                 <ChairIcon
                   model={model}
                   className={twMerge(
-                    "size-6 absolute top-[-2px]",
-                    rideStatus === "ENROUTE" && "animate-shake",
+                    "scale-x-[-1] size-6 absolute top-[-2px]",
+                    rideStatus === "CARRYING" && "animate-shake",
                   )}
-                  style={{ right: `${progressToPickup}%` }}
+                  style={{ left: `${progressToDestination}%` }}
                 />
               )}
           </div>
+          <PinIcon color={colors.red[500]} width={20} />
         </div>
       </div>
     </div>