列車位置のレイアウトを調整

components/Apps/FixedPositionBox.tsx

@@ -9,6 +9,8 @@ import { customTrainDataDetector } from "../custom-train-data";
 import { getStringConfig, typeID } from "@/lib/getStringConfig";
 import { getTrainType } from "@/lib/getTrainType";
 import Constants from "expo-constants";
+import { trainPosition } from "@/lib/trainPositionTextArray";
+import { StationNumberMaker } from "../駅名表/StationNumberMaker";
 
 export const FixedPositionBox = () => {
   const { fixedPosition, setFixedPosition } = useCurrentTrain();
@@ -19,20 +21,18 @@ export const FixedPositionBox = () => {
         position: "absolute",
         top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
         borderRadius: 5,
-        zIndex: 500,
+        zIndex: 1500,
         width: "100%",
         height: 50,
         flexDirection: "row",
       }}
     >
-      <View style={{ width: 60 }} />
       {fixedPosition.type === "station" && (
         <FixedStation stationID={fixedPosition.value} />
       )}
       {fixedPosition.type === "train" && (
         <FixedTrain trainID={fixedPosition.value} />
       )}
-      <View style={{ width: 60 }} />
     </View>
   );
 };
@@ -161,14 +161,14 @@ export const FixedTrain = ({ trainID }) => {
     }
   };
   const [train, setTrain] = useState<{
-    Index: string;
+    Pos?: string;
-    num: string;
+    Direction?: number;
-    delay: string;
+    Index?: number;
-    Pos: string;
+    Line?: string;
-    PosNum: string;
+    PosNum?: number;
-    Direction: number;
+    Type?: string;
-    Type: string;
+    delay?: string | number;
-    Line: string;
+    num?: string;
   }>(null);
   const [customData, setCustomData] = useState<{
     ToData: string;
@@ -208,62 +208,221 @@ export const FixedTrain = ({ trainID }) => {
     const x = getStringConfig(customData.type, customData.TrainNumber);
     setStringConfig(x);
   }, [customData]);
+
+  const { getStationDataFromName } = useStationList();
+  const [station, setStation] = useState<StationProps[]>([]);
+  useEffect(() => {
+    const data = getStationDataFromName(ToData);
+    setStation(data);
+  }, [ToData]);
+  const lineColor =
+    station.length > 0
+      ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
+      : "black";
+  let firstText = "";
+  let secondText = "";
+  let marginText = "";
+  let externalText = "";
+  const { isBetween, Pos: PosData } = trainPosition(train);
+  if (isBetween === true) {
+    const { from, to } = PosData;
+    firstText = from;
+    secondText = to;
+    marginText = "→";
+  } else {
+    const { Pos } = PosData;
+    if (Pos !== "") {
+      firstText = Pos;
+    }
+  }
   return (
     <TouchableOpacity
-      style={{ flex: 1, flexDirection: "row" }}
+      style={{ flex: 1, flexDirection: "row", backgroundColor: "black" }}
       onPress={() => {
         setFixedPosition({ type: null, value: null });
       }}
     >
-      <View style={{ flex: 1, flexDirection: "row" }}>
+      <View
-        <View
+        style={{ flexDirection: "column", flex: 1, backgroundColor: "white" }}
-          style={{
+      >
-            padding: 5,
+        <View style={{ flex: 1, flexDirection: "row" }}>
-            backgroundColor: getTrainType(customData.type).color,
-            flexDirection: "row",
-            alignContent: "center",
-            alignSelf: "center",
-            height: "100%",
-          }}
-        >
-          <Image source={{ uri: customData.img }} width={30} height={35} />
           <View
             style={{
-              flexDirection: "column",
+              backgroundColor: getTrainType(customData.type, true).color,
+              flexDirection: "row",
               alignContent: "center",
               alignSelf: "center",
+              height: "100%",
             }}
           >
-            <Text
+            <Image
+              source={{ uri: customData.img }}
+              width={14}
+              height={17}
+              style={{ margin: 5 }}
+            />
+            <View
               style={{
-                fontSize: 15,
+                flexDirection: "row",
-                fontFamily: stringConfig[1] ? "JR-Nishi" : undefined,
+                alignContent: "center",
-                fontWeight: !stringConfig[1] ? "bold" : undefined,
+                alignSelf: "center",
               }}
             >
-              {stringConfig[0]}
+              <Text
-            </Text>
+                style={{
-            <Text style={{ fontSize: 10 }}>{ToData}行</Text>
+                  fontSize: 14,
+                  fontFamily: stringConfig[1] ? "JR-Nishi" : undefined,
+                  fontWeight: !stringConfig[1] ? "bold" : undefined,
+                  marginTop: stringConfig[1] ? 3 : 0,
+                  color: "white",
+                  textAlignVertical: "center",
+                  textAlign: "center",
+                }}
+              >
+                {stringConfig[0]}
+              </Text>
+              {customData.trainName && (
+                <Text
+                  style={{
+                    fontSize: customData?.trainName?.length > 6 ? 9 : 14,
+                    color: "white",
+                    maxWidth: 70,
+                    textAlignVertical: "center",
+                  }}
+                >
+                  {customData.trainName}
+                </Text>
+              )}
+            </View>
+            <View
+              style={{
+                backgroundColor: getTrainType(customData.type, true).color,
+                width: 10,
+                borderLeftColor: getTrainType(customData.type, true).color,
+                borderTopColor: lineColor,
+                borderBottomColor: lineColor,
+                borderTopWidth: 14,
+                borderBottomWidth: 14,
+                borderLeftWidth: 10,
+                borderRightWidth: 0,
+              }}
+            ></View>
+          </View>
+          <View
+            style={{
+              flexDirection: "row",
+              alignContent: "center",
+              alignSelf: "center",
+              height: "100%",
+              backgroundColor: lineColor,
+              flex: 1,
+            }}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                alignContent: "center",
+                alignSelf: "center",
+                alignItems: "center",
+              }}
+            >
+              <StationNumberMaker
+                currentStation={station}
+                singleSize={20}
+                useEach={true}
+              />
+              <Text
+                style={{
+                  fontSize: 14,
+                  color: "white",
+                  fontWeight: "bold",
+                  textAlignVertical: "center",
+                  margin: 0,
+                  padding: 0,
+                  height: "100%",
+                }}
+              >
+                {ToData}行
+              </Text>
+            </View>
           </View>
         </View>
+
         <View
           style={{
-            backgroundColor: getTrainType(customData.type).color,
+            backgroundColor: "black",
-            width: 10,
+            flex: 1,
-            borderLeftColor: getTrainType(customData.type).color,
+            flexDirection: "row",
-            borderTopColor: "white",
+            alignItems: "center",
-            borderBottomColor: "white",
-            borderTopWidth: 25,
-            borderBottomWidth: 25,
-            borderLeftWidth: 10,
-            borderRightWidth: 0,
           }}
-        ></View>
+        >
-        <View style={{ backgroundColor: "white", flex: 1 }}>
+          <Text
-          <Text style={{ fontSize: 20 }}>列車情報追跡中</Text>
+            style={{
-          <Text style={{ fontSize: 20 }}>次は　どこですか</Text>
+              fontSize: 20,
+              fontStyle: "italic",
+              color: "white",
+              flex: 1,
+            }}
+          >
+            次は 新居浜
+          </Text>
+          <View
+            style={{
+              backgroundColor: "white",
+              width: 10,
+              borderLeftColor: "black",
+              borderTopColor: "black",
+              borderBottomColor: "white",
+              borderRightColor: "white",
+              borderTopWidth: 25,
+              borderBottomWidth: 0,
+              borderLeftWidth: 0,
+              borderRightWidth: 10,
+              flex: 1,
+            }}
+          ></View>
         </View>
       </View>
+      <View style={{ flex: 1, backgroundColor: "white", flexDirection: "row" }}>
+        <View style={{ flexDirection: "column", height: "100%" }}>
+          <View
+            style={{
+              backgroundColor: "white",
+              width: 10,
+              borderLeftColor: lineColor,
+              borderTopColor: lineColor,
+              borderBottomColor: "white",
+              borderRightColor: "white",
+              borderTopWidth: 25,
+              borderBottomWidth: 0,
+              borderLeftWidth: 0,
+              borderRightWidth: 10,
+              flex: 1,
+            }}
+          ></View>
+          <View
+            style={{
+              backgroundColor: "white",
+              width: 10,
+              borderLeftColor: "white",
+              borderTopColor: "white",
+              borderBottomColor: "white",
+              borderRightColor: "white",
+              borderTopWidth: 25,
+              borderBottomWidth: 0,
+              borderLeftWidth: 0,
+              borderRightWidth: 10,
+              flex: 1,
+            }}
+          ></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>
     </TouchableOpacity>
   );
 };

components/駅名表/Sign.js

@@ -197,9 +197,7 @@ export default function Sign(props) {
           source={require("../../assets/StationSign.json")}
         />
       )}
-      <StationNumberMaker
+      <StationNumberMaker {...{ currentStation: currentStationData }} />
-        {...{ currentStation: currentStationData, isMatsuyama }}
-      />
       <StationNameArea
         {...{ currentStation: currentStationData, isMatsuyama }}
       />

components/駅名表/StationNumberMaker.tsx

@@ -1,10 +1,16 @@
-import React from "react";
+import React, { FC } from "react";
 import { Text, View } from "react-native";
 import { useWindowDimensions } from "react-native";
 import lineColorList from "../../assets/originData/lineColorList";
+import { StationProps } from "@/stateBox/useStationList";
 
-export const StationNumberMaker = (props) => {
+type props = {
-  const { currentStation, isMatsuyama } = props;
+  currentStation: StationProps[];
+  useEach?: boolean;
+  singleSize?: number;
+};
+export const StationNumberMaker: FC<props> = (props) => {
+  const { currentStation, useEach = false, singleSize } = props;
   const { width } = useWindowDimensions();
   const getTop = (array: number[], index: number) => {
     if (array.length == 1) return 20;
@@ -12,7 +18,7 @@ export const StationNumberMaker = (props) => {
     else if (index == 1) return 35;
     else return 20;
   };
-  return currentStation
+  return <>{currentStation
     .filter((d) => (d.StationNumber ? true : false))
     .map((d, index, array) => {
       const lineID = d.StationNumber.slice(0, 1);
@@ -20,29 +26,41 @@ export const StationNumberMaker = (props) => {
       return (
         <View
           style={{
-            position: "absolute",
             alignContent: "center",
             alignItems: "center",
-            top: `${getTop(array, index)}%`,
-            right: "10%",
-            width: (width / 100 * 10),
-            height: (width / 100 * 10),
             borderColor: lineColorList[lineID],
             backgroundColor: "white",
+            ...(useEach ? {
+            width: singleSize,
+            height: singleSize,
+            borderWidth: parseInt("1%"),
+            borderRadius: parseInt("100%"),
+          } : {
+            width: (width / 100) * 10,
+            height: (width / 100) * 10,
             borderWidth: parseInt("3%"),
             borderRadius: parseInt("100%"),
+            position: "absolute",
+            top: `${getTop(array, index)}%`,
+            right: "10%"
+          })
           }}
           key={array[index].StationNumber}
         >
           <View style={{ flex: 1 }} />
           <Text
             style={{
-              fontSize: parseInt("13%"),
               margin: 0,
               padding: 0,
               textAlign: "center",
-              color:  "black",
+              color: "black",
               fontWeight: "bold",
+              ...(useEach ? {
+
+              fontSize: 6,//singleSize * 0.03,
+              }:{
+              fontSize: parseInt("13%"),
+              })
             }}
           >
             {lineID + "\n" + lineName}
@@ -50,5 +68,5 @@ export const StationNumberMaker = (props) => {
           <View style={{ flex: 1 }} />
         </View>
       );
-    });
+    })}</>
 };

lib/getTrainType.ts

@@ -51,7 +51,7 @@ export const getTrainType: getTrainType = (nameString, whiteMode) => {
       };
     case "Rapid":
     case "OneManRapid":
-      return { color:  whiteMode ? "#00b8d8cc" : "aqua", name: "快速", data: "rapid" };
+      return { color:  whiteMode ? "#00a0bdff" : "aqua", name: "快速", data: "rapid" };
     case "LTDEXP":
       return { color: "red", name: "特急", data: "express" };
     case "NightLTDEXP":
@@ -66,7 +66,7 @@ export const getTrainType: getTrainType = (nameString, whiteMode) => {
     case "Party":
       return { color: "#ff7300ff", name: "団体臨時", data: "normal" };
     case "Freight":
-      return { color: "#00869ecc", name: "貨物", data: "notService" };
+      return { color: "#007488ff", name: "貨物", data: "notService" };
     case "Forwarding":
       return { color: "#727272cc", name: "回送", data: "notService" };
     case "FreightForwarding":

stateBox/useTrainMenu.js

@@ -94,7 +94,7 @@ export const TrainMenuProvider = ({ children }) => {
     //列車アイコンスイッチ
     ASCore({ k: "iconSwitch", s: setIconSetting, d: "true", u: true });
     //地図スイッチ
-    ASCore({ k: "mapSwitch", s: setMapSwitch, d: "false", u: true });
+    ASCore({ k: "mapSwitch", s: setMapSwitch, d: "true", u: true });
     //駅メニュースイッチ
     ASCore({ k: "stationSwitch", s: setStationMenu, d: "true", u: true });
     //列車メニュースイッチ