fixedTrainBoxのレイアウト変更

components/Apps/FixedPositionBox/FixedTrainBox.tsx

@@ -19,6 +19,7 @@ import { findReversalPoints } from "@/lib/eachTrainInfoCoreLib/findReversalPoint
 import { CustomTrainData, trainTypeID } from "@/lib/CommonTypes";
 import { getCurrentTrainData } from "@/lib/getCurrentTrainData";
 import { Ionicons } from "@expo/vector-icons";
+import dayjs from "dayjs";
 
 type props = {
   trainID: string;
@@ -239,7 +240,9 @@ export const FixedTrain: FC<props> = ({
           overflow: "hidden",
         }}
       >
-        <View style={{ flex:  displaySize === 50 ? 1 : 5, flexDirection: "row" }}>
+        <View
+          style={{ flex: displaySize === 50 ? 1 : 5, flexDirection: "row" }}
+        >
           <View
             style={{
               backgroundColor: customTrainType.color,
@@ -252,8 +255,8 @@ export const FixedTrain: FC<props> = ({
           >
             <Image
               source={{ uri: customData.img }}
-              width={14}
+              width={displaySize === 50 ? 14 : 22}
-              height={17}
+              height={displaySize === 50 ? 17 : 25}
               style={{ margin: 5 }}
             />
             <View
@@ -275,7 +278,7 @@ export const FixedTrain: FC<props> = ({
                   marginTop: customTrainType.fontAvailable ? 3 : 0,
                   color: "white",
                   textAlignVertical: "center",
-                  textAlign: "center",
+                  textAlign: "left",
                 }}
               >
                 {customTrainType.shortName}
@@ -334,7 +337,7 @@ export const FixedTrain: FC<props> = ({
               />
               <Text
                 style={{
-                  fontSize: 14,
+                  fontSize: 12,
                   color: "white",
                   fontWeight: "bold",
                   textAlignVertical: "center",
@@ -480,7 +483,10 @@ export const FixedTrain: FC<props> = ({
           alignItems: "center",
         }}
         onPress={() => {
-          LayoutAnimation.configureNext(LayoutAnimation.Presets.linear);
+          LayoutAnimation.configureNext({
+            duration: 500,
+            update: { type: "spring", springDamping: 0.7 },
+          });
           if (displaySize === 50) {
             setDisplaySize(200);
           } else {
@@ -556,6 +562,7 @@ const CurrentPositionBox = ({
       firstText = Pos;
     }
   }
+  const delayTime = train?.delay == "入線" ? 0 : parseInt(train?.delay);
   return (
     <View
       style={{
@@ -602,14 +609,21 @@ const CurrentPositionBox = ({
             if (!d) return null;
             if (d == "") return null;
             const [station, se, time] = d.split(",");
+            let distanceMinute = 0;
+            if (time != "") {
+              const now = dayjs();
+              const distanceTime = now
+                .hour(time.split(":")[0])
+                .minute(time.split(":")[1]);
+              distanceMinute = distanceTime.diff(now, "minute") + delayTime;
+            }
             return (
               <>
-                {(index == 0 && secondText == "") || (
                 <View
                   style={{
                     flexDirection: "column",
                     backgroundColor: "#6e6e6eff",
-                      borderRadius: 10,
+                    borderRadius: 30,
                     marginHorizontal: isSmall ? 2 : 4,
                     marginVertical: isSmall ? 0 : 2,
                     padding: isSmall ? 2 : 4,
@@ -624,7 +638,7 @@ const CurrentPositionBox = ({
                       <Text
                         key={i + index}
                         style={{
-                            fontSize: isSmall ? 6 : 14,
+                          fontSize: isSmall ? 5 : 12,
                           color: "white",
                           margin: 0,
                           padding: 0,
@@ -636,32 +650,53 @@ const CurrentPositionBox = ({
                     );
                   })}
                   <View style={{ flex: 1 }} />
+                  {isSmall ||
+                    (time != "" && (
                       <Text
-                      style={{ fontSize: isSmall ? 8 : 14, color: "white" }}
+                        style={{
+                          fontSize: isSmall ? 8 : 14,
+                          color: "black",
+                          backgroundColor: "white",
+                          fontWeight: "bold",
+                        }}
                       >
-                      {se.includes("通") ? "" : "●"}
+                        {distanceMinute}
+                      </Text>
+                    ))}
+                  <Text
+                    style={{
+                      fontSize: isSmall ? 8 : 14,
+                      color: se.includes("通") ? "#020202ff" : "white",
+                      marginTop: isSmall ? 0 : 3,
+                    }}
+                  >
+                    {se.includes("通")
+                      ? null
+                      : index == 1 && secondText == ""
+                      ? "→"
+                      : "●"}
                   </Text>
                 </View>
-                )}
                 {index == 0 && secondText != "" && (
                   <View
                     style={{
                       flexDirection: "column",
                       backgroundColor: "#6e6e6e0e",
                       borderRadius: 10,
-                      marginHorizontal: 2,
+                      marginHorizontal: isSmall ? 2 : 4,
-                      padding: 2,
+                      padding: isSmall ? 2 : 4,
                       justifyContent: "center",
                       alignItems: "center",
                       overflow: "hidden",
                     }}
                   >
                     <View style={{ flex: 1 }} />
-                    <Text
+                    <Ionicons
-                      style={{ fontSize: isSmall ? 8 : 14, color: "black" }}
+                      name="arrow-forward"
-                    >
+                      size={isSmall ? 8 : 14}
-                      ＞
+                      color="black"
-                    </Text>
+                      style={{ marginTop: isSmall ? 0 : 3 }}
+                    />
                   </View>
                 )}
               </>