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

2025-09-07 09:09:06 +00:00
parent 0c2c733a59
commit 74054b107d
5 changed files with 238 additions and 63 deletions
--- a/components/Apps/FixedPositionBox.tsx
+++ b/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;
-    num: string;
-    delay: string;
-    Pos: string;
-    PosNum: string;
-    Direction: number;
-    Type: string;
-    Line: string;
+    Pos?: string;
+    Direction?: number;
+    Index?: number;
+    Line?: string;
+    PosNum?: number;
+    Type?: string;
+    delay?: string | number;
+    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
-          style={{
-            padding: 5,
-            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", flex: 1, backgroundColor: "white" }}
+      >
+        <View style={{ flex: 1, flexDirection: "row" }}>
          <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,
-                fontFamily: stringConfig[1] ? "JR-Nishi" : undefined,
-                fontWeight: !stringConfig[1] ? "bold" : undefined,
+                flexDirection: "row",
+                alignContent: "center",
+                alignSelf: "center",
              }}
            >
-              {stringConfig[0]}
-            </Text>
-            <Text style={{ fontSize: 10 }}>{ToData}行</Text>
+              <Text
+                style={{
+                  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,
-            width: 10,
-            borderLeftColor: getTrainType(customData.type).color,
-            borderTopColor: "white",
-            borderBottomColor: "white",
-            borderTopWidth: 25,
-            borderBottomWidth: 25,
-            borderLeftWidth: 10,
-            borderRightWidth: 0,
+            backgroundColor: "black",
+            flex: 1,
+            flexDirection: "row",
+            alignItems: "center",
          }}
-        ></View>
-        <View style={{ backgroundColor: "white", flex: 1 }}>
-          <Text style={{ fontSize: 20 }}>列車情報追跡中</Text>
-          <Text style={{ fontSize: 20 }}>次は　どこですか</Text>
+        >
+          <Text
+            style={{
+              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>
  );
 };
--- a/components/駅名表/Sign.js
+++ b/components/駅名表/Sign.js
@@ -197,9 +197,7 @@ export default function Sign(props) {
          source={require("../../assets/StationSign.json")}
        />
      )}
-      <StationNumberMaker
-        {...{ currentStation: currentStationData, isMatsuyama }}
-      />
+      <StationNumberMaker {...{ currentStation: currentStationData }} />
      <StationNameArea
        {...{ currentStation: currentStationData, isMatsuyama }}
      />
--- a/components/駅名表/StationNumberMaker.tsx
+++ b/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) => {
-  const { currentStation, isMatsuyama } = props;
+type 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>
      );
-    });
+    })}</>
 };
--- a/lib/getTrainType.ts
+++ b/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":
--- a/stateBox/useTrainMenu.js
+++ b/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 });
    //列車メニュースイッチ