列車の現在地が追従するように変更

components/Apps/FixedPositionBox/FixedTrainBox.tsx

@@ -16,7 +16,7 @@ type props = {
   trainID: string;
 };
 
-export const FixedTrain:FC<props> = ({ trainID }) => {
+export const FixedTrain: FC<props> = ({ trainID }) => {
   const {
     fixedPosition,
     setFixedPosition,
@@ -178,12 +178,18 @@ export const FixedTrain:FC<props> = ({ trainID }) => {
   }, [train]);
 
   const [nextStationData, setNextStationData] = useState<StationProps[]>([]);
+  const [untilStationData, setUntilStationData] = useState<StationProps[]>([]);
   useEffect(() => {
     const points = findReversalPoints(currentPosition, stopStationIDList);
     if (!points) return;
     if (points.length == 0) return;
-    let searchCount = points.findIndex((d) => d == true);
-    for (searchCount; searchCount < points.length; searchCount++) {
+    let searchCountBase = points.findIndex((d) => d == true);
+    for (
+      let searchCount = searchCountBase;
+      searchCount < points.length;
+      searchCount++
+    ) {
+      console.log(trainDataWidhThrough[searchCount]);
       const nextPos = trainDataWidhThrough[searchCount];
       if (nextPos) {
         const [station, se, time] = nextPos.split(",");
@@ -194,6 +200,15 @@ export const FixedTrain:FC<props> = ({ trainID }) => {
         }
       }
     }
+    let trainList = [];
+    for (
+      let searchCount = searchCountBase - 1;
+      searchCount < points.length;
+      searchCount++
+    ) {
+      trainList.push(trainDataWidhThrough[searchCount]);
+    }
+    setUntilStationData(trainList);
   }, [currentPosition, trainDataWidhThrough]);
   const [ToData, setToData] = useState("");
   useEffect(() => {
@@ -350,7 +365,7 @@ export const FixedTrain:FC<props> = ({ trainID }) => {
               marginHorizontal: 5,
             }}
           >
-            次は
+            {nextStationData[0]?.Station_JP == train?.Pos ? "ただいま" : "次は"}
           </Text>
           <StationNumberMaker
             currentStation={nextStationData}
@@ -383,12 +398,16 @@ export const FixedTrain:FC<props> = ({ trainID }) => {
           ></View>
         </View>
       </View>
-      <CurrentPositionBox train={train} lineColor={lineColor} />
+      <CurrentPositionBox
+        train={train}
+        lineColor={lineColor}
+        trainDataWithThrough={untilStationData}
+      />
     </TouchableOpacity>
   );
 };
 
-const CurrentPositionBox = ({ train, lineColor }) => {
+const CurrentPositionBox = ({ train, lineColor, trainDataWithThrough }) => {
   let firstText = "";
   let secondText = "";
   let marginText = "";
@@ -439,12 +458,68 @@ const CurrentPositionBox = ({ train, lineColor }) => {
           }}
         ></View>
       </View>
-      <Text style={{ color: "black", fontSize: 10, alignSelf: "flex-end" }}>
-        現在地：
-      </Text>
-      <Text style={{ color: "black", fontSize: 30, alignSelf: "center" }}>
-        {marginText == "→" ? firstText + marginText + secondText : firstText}
-      </Text>
+      <View style={{ flex: 1, flexDirection: "row", overflow: "hidden" }}>
+        {trainDataWithThrough.length > 0 &&
+          trainDataWithThrough.map((d, index, array) => {
+            if (!d) return null;
+            if (d == "") return null;
+            const [station, se, time] = d.split(",");
+            return (
+              <>
+                {(index == 0 && secondText == "") || <View
+                  style={{
+                    flexDirection: "column",
+                    backgroundColor: "#6e6e6eff",
+                    borderRadius: 10,
+                    marginHorizontal: 2,
+                    padding: 2,
+                    justifyContent: "center",
+                    alignItems: "center",
+                    overflow: "hidden",
+                  }}
+                >
+                  {station.split("").map((i, index) => {
+                    return (
+                      <Text
+                        key={index}
+                        style={{
+                          fontSize: 6,
+                          color: "white",
+                          margin: 0,
+                          padding: 0,
+                          fontWeight: "bold",
+                        }}
+                      >
+                        {i}
+                      </Text>
+                    );
+                  })}
+                  <View style={{ flex: 1 }} />
+                  <Text style={{ fontSize: 8, color: "white" }}>
+                    {se.includes("通") ? "" : "●"}
+                  </Text>
+                </View>}
+                {(index == 0 && secondText != "") && (
+                  <View
+                    style={{
+                      flexDirection: "column",
+                      backgroundColor: "#6e6e6e0e",
+                      borderRadius: 10,
+                      marginHorizontal: 2,
+                      padding: 2,
+                      justifyContent: "center",
+                      alignItems: "center",
+                      overflow: "hidden",
+                    }}
+                  >
+                    <View style={{ flex: 1 }} />
+                    <Text style={{ fontSize: 8, color: "black" }}>＞</Text>
+                  </View>
+                )}
+              </>
+            );
+          })}
+      </View>
     </View>
   );
 };