画面表示全体的に作成

components/Apps.js

@@ -24,6 +24,7 @@ import { MapsButton } from "./Apps/MapsButton";
 import { ReloadButton } from "./Apps/ReloadButton";
 import { LandscapeBackButton } from "./Apps/LandscapeBackButton";
 import { useStationList } from "../stateBox/useStationList";
+import { FixedPositionBox } from "./Apps/FixedPositionBox";
 /* 
 import StatusbarDetect from '../StatusbarDetect';
 var Status = StatusbarDetect(); */
@@ -127,13 +128,7 @@ export default function Apps() {
         />
       )}
       {fixedPosition.type && (
-        <Text
+        <FixedPositionBox />
-          onPress={() => {
-            setFixedPosition({ type: null, value: null });
-          }}
-        >
-          {fixedPosition.type}: {fixedPosition.value}
-        </Text>
       )}
 
       {mapSwitch == "true" ? (

components/Apps/FixedPositionBox.tsx

@@ -0,0 +1,269 @@
+import lineColorList from "@/assets/originData/lineColorList";
+import { getStationID } from "@/lib/eachTrainInfoCoreLib/getStationData";
+import { useAllTrainDiagram } from "@/stateBox/useAllTrainDiagram";
+import { useCurrentTrain } from "@/stateBox/useCurrentTrain";
+import { useStationList, StationProps } from "@/stateBox/useStationList";
+import { useEffect, useState } from "react";
+import { Text, TouchableOpacity, View, Image, Platform } from "react-native";
+import { customTrainDataDetector } from "../custom-train-data";
+import { getStringConfig, typeID } from "@/lib/getStringConfig";
+import { getTrainType } from "@/lib/getTrainType";
+import Constants from "expo-constants";
+
+export const FixedPositionBox = () => {
+  const { fixedPosition, setFixedPosition } = useCurrentTrain();
+
+  return (
+    <View
+      style={{
+        position: "absolute",
+        top: Platform.OS == "ios" ? Constants.statusBarHeight : 0,
+        borderRadius: 5,
+        zIndex: 500,
+        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>
+  );
+};
+
+export const FixedStation = ({ stationID }) => {
+  const { fixedPosition, setFixedPosition } = useCurrentTrain();
+  const { getStationDataFromId } = useStationList();
+  const [station, setStation] = useState<StationProps[]>([]);
+  useEffect(() => {
+    const data = getStationDataFromId(stationID);
+    setStation(data);
+  }, [stationID]);
+  console.log(station);
+  const lineColor =
+    station.length > 0
+      ? lineColorList[station[0]?.StationNumber.slice(0, 1)]
+      : "white";
+  return (
+    <TouchableOpacity
+      style={{ flex: 1, flexDirection: "column" }}
+      onPress={() => {
+        setFixedPosition({ type: null, value: null });
+      }}
+    >
+      <View style={{ flex: 1, flexDirection: "row" }}>
+        <View
+          style={{
+            paddingHorizontal: 5,
+            backgroundColor: lineColor,
+            flexDirection: "row",
+          }}
+        >
+          {station.map((s) => {
+            if (s.StationNumber === null) return null;
+            return (
+              <View
+                key={s.StationNumber}
+                style={{
+                  flexDirection: "column",
+                  alignItems: "center",
+                  borderColor: lineColor,
+                  backgroundColor: "white",
+                  borderWidth: 1,
+                  borderRadius: 30,
+                  width: 25,
+                  height: 25,
+                }}
+              >
+                <Text style={{ fontSize: 10, margin: 0, padding: 0 }}>
+                  {s.StationNumber?.slice(0, 1)}
+                </Text>
+                <Text style={{ fontSize: 10, margin: 0, padding: 0 }}>
+                  {s.StationNumber?.slice(1)}
+                </Text>
+              </View>
+            );
+          })}
+        </View>
+        <View
+          style={{
+            backgroundColor: lineColor,
+          }}
+        >
+          <Text style={{ fontSize: 20 }}>{station[0]?.Station_JP}</Text>
+        </View>
+        <View
+          style={{
+            backgroundColor: lineColor,
+            width: 10,
+            borderLeftColor: lineColor,
+            borderBottomColor: "white",
+            borderBottomWidth: 25,
+            borderLeftWidth: 10,
+            borderRightWidth: 0,
+            borderTopWidth: 0,
+          }}
+        ></View>
+        <View style={{ backgroundColor: "white", flex: 1 }}>
+          <Text style={{ fontSize: 20 }}>駅情報固定中</Text>
+        </View>
+      </View>
+
+      <View
+        style={{
+          flex: 1,
+          flexDirection: "row",
+          backgroundColor: lineColor,
+        }}
+      >
+        <View style={{ backgroundColor: "white", flex: 1 }}>
+          <Text style={{ fontSize: 20 }}>次：15:00 快速マリン　岡山</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+export const FixedTrain = ({ trainID }) => {
+  const { fixedPosition, setFixedPosition, currentTrain } = useCurrentTrain();
+  const { allCustomTrainData, allTrainDiagram } = useAllTrainDiagram();
+
+  const getTrainDataFromCurrentTrain = (trainNum: string) => {
+    const customTrainData = customTrainDataDetector(
+      trainNum,
+      allCustomTrainData
+    );
+    switch (customTrainData.type) {
+      case "Normal":
+      case "OneMan":
+        const currentTrainData = currentTrain.filter((a) => a.num == trainNum);
+        if (currentTrainData.length == 0) return customTrainData;
+        else if (currentTrainData[0].Type.includes("rapid:")) {
+          const typeText = currentTrainData[0].Type.split(":");
+          const returnData = {
+            type: "Rapid",
+            trainName: typeText[1].replace("\r", ""),
+            trainIcon: null,
+            trainNumDistance: null,
+            info: "",
+          };
+          return returnData;
+        }
+        return customTrainData;
+      default:
+        return customTrainData;
+    }
+  };
+  const [train, setTrain] = useState<{
+    Index: string;
+    num: string;
+    delay: string;
+    Pos: string;
+    PosNum: string;
+    Direction: number;
+    Type: string;
+    Line: string;
+  }>(null);
+  const [customData, setCustomData] = useState<{
+    ToData: string;
+    TrainNumber: string;
+    id: string;
+    img: string;
+    isWanman: boolean;
+    trainName: string;
+    trainNumDistance: number;
+    type: typeID;
+    viaData: string;
+    info?: string;
+    uwasa?: string;
+  }>(getTrainDataFromCurrentTrain(trainID));
+  useEffect(() => {
+    setCustomData(getTrainDataFromCurrentTrain(trainID));
+  }, [currentTrain, trainID]);
+  useEffect(() => {
+    currentTrain.forEach((d) => {
+      if (d.num == trainID) setTrain(d);
+    });
+  }, [trainID, currentTrain]);
+
+  const [ToData, setToData] = useState("");
+  useEffect(() => {
+    if (customData.ToData && customData.ToData != "") {
+      setToData(customData.ToData);
+    } else {
+      const base = allTrainDiagram[trainID];
+      if (!base) return;
+      const data = base.split("#");
+      setToData(data[data.length - 2].split(",")[0]);
+    }
+  }, [customData, train]);
+  const [stringConfig, setStringConfig] = useState([, ,]);
+  useEffect(() => {
+    const x = getStringConfig(customData.type, customData.TrainNumber);
+    setStringConfig(x);
+  }, [customData]);
+  return (
+    <TouchableOpacity
+      style={{ flex: 1, flexDirection: "row" }}
+      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",
+              alignContent: "center",
+              alignSelf: "center",
+            }}
+          >
+            <Text
+              style={{
+                fontSize: 15,
+                fontFamily: stringConfig[1] ? "JR-Nishi" : undefined,
+                fontWeight: !stringConfig[1] ? "bold" : undefined,
+              }}
+            >
+              {stringConfig[0]}
+            </Text>
+            <Text style={{ fontSize: 10 }}>{ToData}行</Text>
+          </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,
+          }}
+        ></View>
+        <View style={{ backgroundColor: "white", flex: 1 }}>
+          <Text style={{ fontSize: 20 }}>列車情報追跡中</Text>
+          <Text style={{ fontSize: 20 }}>次は　どこですか</Text>
+        </View>
+      </View>
+    </TouchableOpacity>
+  );
+};

components/Apps/MapsButton.tsx

@@ -37,6 +37,7 @@ export const MapsButton: FC<MapsButtonProps> = ({ onPress }) => {
       alignSelf: "center",
       alignItems: "center",
       display: mapSwitch == "true" ? "flex" : "none",
+      zIndex: 1000,
     },
     text: {
       textAlign: "center",

components/Apps/ReloadButton.tsx

@@ -38,6 +38,7 @@ export const ReloadButton:FC<ReloadButton> = ({ onPress, right }) => {
       alignSelf: "center",
       alignItems: "center",
       display: mapSwitch,
+      zIndex: 1000,
     },
     text: {
       textAlign: "center",

components/Menu/StationPagination.tsx

@@ -3,20 +3,7 @@ import { View, Text, TouchableOpacity } from "react-native";
 import { useInterval } from "../../lib/useInterval";
 
 import lineColorList from "../../assets/originData/lineColorList";
-
+import { StationProps } from "@/stateBox/useStationList";
-type StationProps = {
-  DispNum: string;
-  JrHpUrl: string;
-  MyStation: string;
-  StationMap: string;
-  StationNumber: string | null;
-  StationTimeTable: string;
-  Station_EN: string;
-  Station_JP: string;
-  jslodApi: string;
-  lat: number;
-  lng: number;
-};
 type StationNumberProps = {
   currentStation: StationProps[];
   active: boolean;

lib/getStringConfig.ts

@@ -1,4 +1,4 @@
-type typeID =
+export type typeID =
   | "Normal"
   | "OneMan"
   | "Rapid"

stateBox/useCurrentTrain.js

@@ -20,7 +20,7 @@ const initialState = {
   getCurrentTrain: () => {},
   inject: (i) => {},
   fixedPosition: null,
-  setFixedPosition: () => {},
+  setFixedPosition: (e) => {},
   setInjectData: (e) => {},
   getCurrentStationData: (e) => {},
   getPosition: (e) => {},

stateBox/useStationList.tsx

@@ -10,12 +10,24 @@ import {
   getStationList,
   lineList_LineWebID,
 } from "../lib/getStationList";
-
+export type StationProps = {
+  DispNum: string;
+  JrHpUrl: string;
+  MyStation: string;
+  StationMap: string;
+  StationNumber: string | null;
+  StationTimeTable: string;
+  Station_EN: string;
+  Station_JP: string;
+  jslodApi: string;
+  lat: number;
+  lng: number;
+};
 type initialStateType = {
-  originalStationList: any[][];
+  originalStationList: StationProps[][];
-  setOriginalStationList: React.Dispatch<React.SetStateAction<any[]>>;
+  setOriginalStationList: React.Dispatch<React.SetStateAction<StationProps[]>>;
-  getStationDataFromName: (id: string) => any[];
+  getStationDataFromName: (id: string) => StationProps[];
-  getStationDataFromId: (id: string) => any[];
+  getStationDataFromId: (id: string) => StationProps[];
   getStationDataFromNameBase: (name: string) => any[];
   stationList: any[];
   getInjectJavascriptAddress: (StationNumber: string) => string;