From 85fd66b72858db3f1a9b682b347111eff58e4bdd Mon Sep 17 00:00:00 2001
From: harukin-expo-dev-env <harukin@haruk.in>
Date: Tue, 16 Sep 2025 11:29:05 +0000
Subject: [PATCH] =?UTF-8?q?fixedTrainBox=E3=81=AE=E3=83=AC=E3=82=A4?=
 =?UTF-8?q?=E3=82=A2=E3=82=A6=E3=83=88=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Apps/FixedPositionBox/FixedTrainBox.tsx   | 133 +++++++++++-------
 1 file changed, 84 insertions(+), 49 deletions(-)

diff --git a/components/Apps/FixedPositionBox/FixedTrainBox.tsx b/components/Apps/FixedPositionBox/FixedTrainBox.tsx
index 191184a..0655711 100644
--- a/components/Apps/FixedPositionBox/FixedTrainBox.tsx
+++ b/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}
-              height={17}
+              width={displaySize === 50 ? 14 : 22}
+              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,66 +609,94 @@ 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
+                <View
+                  style={{
+                    flexDirection: "column",
+                    backgroundColor: "#6e6e6eff",
+                    borderRadius: 30,
+                    marginHorizontal: isSmall ? 2 : 4,
+                    marginVertical: isSmall ? 0 : 2,
+                    padding: isSmall ? 2 : 4,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    overflow: "hidden",
+                  }}
+                  key={d + "CurrentPositionBox"}
+                >
+                  {station.split("").map((i, index) => {
+                    return (
+                      <Text
+                        key={i + index}
+                        style={{
+                          fontSize: isSmall ? 5 : 12,
+                          color: "white",
+                          margin: 0,
+                          padding: 0,
+                          fontWeight: "bold",
+                        }}
+                      >
+                        {i}
+                      </Text>
+                    );
+                  })}
+                  <View style={{ flex: 1 }} />
+                  {isSmall ||
+                    (time != "" && (
+                      <Text
+                        style={{
+                          fontSize: isSmall ? 8 : 14,
+                          color: "black",
+                          backgroundColor: "white",
+                          fontWeight: "bold",
+                        }}
+                      >
+                        {distanceMinute}
+                      </Text>
+                    ))}
+                  <Text
                     style={{
-                      flexDirection: "column",
-                      backgroundColor: "#6e6e6eff",
-                      borderRadius: 10,
-                      marginHorizontal: isSmall ? 2 : 4,
-                      marginVertical: isSmall ? 0 : 2,
-                      padding: isSmall ? 2 : 4,
-                      justifyContent: "center",
-                      alignItems: "center",
-                      overflow: "hidden",
+                      fontSize: isSmall ? 8 : 14,
+                      color: se.includes("通") ? "#020202ff" : "white",
+                      marginTop: isSmall ? 0 : 3,
                     }}
-                    key={d + "CurrentPositionBox"}
                   >
-                    {station.split("").map((i, index) => {
-                      return (
-                        <Text
-                          key={i + index}
-                          style={{
-                            fontSize: isSmall ? 6 : 14,
-                            color: "white",
-                            margin: 0,
-                            padding: 0,
-                            fontWeight: "bold",
-                          }}
-                        >
-                          {i}
-                        </Text>
-                      );
-                    })}
-                    <View style={{ flex: 1 }} />
-                    <Text
-                      style={{ fontSize: isSmall ? 8 : 14, color: "white" }}
-                    >
-                      {se.includes("通") ? "" : "●"}
-                    </Text>
-                  </View>
-                )}
+                    {se.includes("通")
+                      ? null
+                      : index == 1 && secondText == ""
+                      ? "→"
+                      : "●"}
+                  </Text>
+                </View>
                 {index == 0 && secondText != "" && (
                   <View
                     style={{
                       flexDirection: "column",
                       backgroundColor: "#6e6e6e0e",
                       borderRadius: 10,
-                      marginHorizontal: 2,
-                      padding: 2,
+                      marginHorizontal: isSmall ? 2 : 4,
+                      padding: isSmall ? 2 : 4,
                       justifyContent: "center",
                       alignItems: "center",
                       overflow: "hidden",
                     }}
                   >
                     <View style={{ flex: 1 }} />
-                    <Text
-                      style={{ fontSize: isSmall ? 8 : 14, color: "black" }}
-                    >
-                      ＞
-                    </Text>
+                    <Ionicons
+                      name="arrow-forward"
+                      size={isSmall ? 8 : 14}
+                      color="black"
+                      style={{ marginTop: isSmall ? 0 : 3 }}
+                    />
                   </View>
                 )}
               </>