新松山駅表示を追加

components/駅名表/Sign.js

@@ -99,62 +99,153 @@ export default function Sign(props) {
     setNexStation(returnData[1]);
   };
   const lottieRef = useRef();
-  return (
+  const isMatsuyama = currentStation[0].StationNumber == "Y55";
-    <TouchableOpacity style={styleSheet.外枠} onPress={oP} onLongPress={oLP}>
+  //const isMatsuyama = true;
-      <StationNumberMaker currentStation={currentStation} />
+  if (isMatsuyama) {
-      <StationNameArea currentStation={currentStation} />
+    return (
-      {isCurrentStation ? (
+      <TouchableOpacity style={styleSheet.外枠} onPress={oP} onLongPress={oLP}>
-        <TouchableOpacity style={{ position: "absolute", right: 0, top: 0 }}>
+        <LottieView
-          <MaterialCommunityIcons
+          autoPlay
-            name="crosshairs-gps"
+          loop
-            style={{ padding: 5 }}
+          style={{
-            color="#2E94BB"
+            width: wp("80%"),
-            size={30}
+            height: (wp("80%") / 20) * 9,
-          />
+            backgroundColor: "#fff",
-        </TouchableOpacity>
-      ) : (
-        <TouchableOpacity
-          style={{ position: "absolute", right: -15, top: -20 }}
-          onPress={() => {
-            if (testButtonStatus) {
-              const otherData = favoriteStation.filter((d) => {
-                const compare = JSON.stringify(d);
-                const current = JSON.stringify(currentStation);
-                if (compare !== current) {
-                  return true;
-                } else {
-                  return false;
-                }
-              });
-              AS.setItem("favoriteStation", JSON.stringify(otherData));
-              setFavoriteStation(otherData);
-            } else {
-              let ret = favoriteStation;
-              ret.push(currentStation);
-              AS.setItem("favoriteStation", JSON.stringify(ret));
-              setFavoriteStation(ret);
-            }
-            setTestButtonStatus(!testButtonStatus);
           }}
-        >
+          source={{ uri: "https://cdn.lottielab.com/l/D4m3dmEqsjVN77.json?s" }}
-          <LottieDelayView
+        />
-            progress={testButtonStatus ? 1 : 0}
+        <StationNumberMaker
-            speed={1.4}
+          currentStation={currentStation}
-            style={{ width: 80, height: 80 }}
+          isMatsuyama={isMatsuyama}
-            source={require("../../assets/939-star.json")}
+        />
-            lottieRef={lottieRef}
+        <StationNameArea
-            loop={false}
+          currentStation={currentStation}
-          />
+          isMatsuyama={isMatsuyama}
-        </TouchableOpacity>
+        />
-      )}
+        {isCurrentStation ? (
+          <TouchableOpacity style={{ position: "absolute", right: 0, top: 0 }}>
+            <MaterialCommunityIcons
+              name="crosshairs-gps"
+              style={{ padding: 5 }}
+              color="#2E94BB"
+              size={30}
+            />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            style={{ position: "absolute", right: -15, top: -20 }}
+            onPress={() => {
+              if (testButtonStatus) {
+                const otherData = favoriteStation.filter((d) => {
+                  const compare = JSON.stringify(d);
+                  const current = JSON.stringify(currentStation);
+                  if (compare !== current) {
+                    return true;
+                  } else {
+                    return false;
+                  }
+                });
+                AS.setItem("favoriteStation", JSON.stringify(otherData));
+                setFavoriteStation(otherData);
+              } else {
+                let ret = favoriteStation;
+                ret.push(currentStation);
+                AS.setItem("favoriteStation", JSON.stringify(ret));
+                setFavoriteStation(ret);
+              }
+              setTestButtonStatus(!testButtonStatus);
+            }}
+          >
+            <LottieDelayView
+              progress={testButtonStatus ? 1 : 0}
+              speed={1.4}
+              style={{ width: 80, height: 80 }}
+              source={require("../../assets/939-star.json")}
+              lottieRef={lottieRef}
+              loop={false}
+            />
+          </TouchableOpacity>
+        )}
 
-      <Text style={styleSheet.JRStyle}>JR</Text>
+        <Text style={styleSheet.JRStyle}>JR</Text>
-      <View style={styleSheet.下帯} />
+        <View style={styleSheet.下帯B} />
-      <View style={styleSheet.下帯内容}>
+        <View style={styleSheet.下帯内容B}>
-        <NexPreStationLine preStation={preStation} nexStation={nexStation} />
+          <NexPreStationLine
-      </View>
+            preStation={preStation}
-    </TouchableOpacity>
+            nexStation={nexStation}
-  );
+            isMatsuyama={isMatsuyama}
+          />
+        </View>
+      </TouchableOpacity>
+    );
+  } else {
+    return (
+      <TouchableOpacity style={styleSheet.外枠} onPress={oP} onLongPress={oLP}>
+        <StationNumberMaker
+          currentStation={currentStation}
+          isMatsuyama={isMatsuyama}
+        />
+        <StationNameArea
+          currentStation={currentStation}
+          isMatsuyama={isMatsuyama}
+        />
+        {isCurrentStation ? (
+          <TouchableOpacity style={{ position: "absolute", right: 0, top: 0 }}>
+            <MaterialCommunityIcons
+              name="crosshairs-gps"
+              style={{ padding: 5 }}
+              color="#2E94BB"
+              size={30}
+            />
+          </TouchableOpacity>
+        ) : (
+          <TouchableOpacity
+            style={{ position: "absolute", right: -15, top: -20 }}
+            onPress={() => {
+              if (testButtonStatus) {
+                const otherData = favoriteStation.filter((d) => {
+                  const compare = JSON.stringify(d);
+                  const current = JSON.stringify(currentStation);
+                  if (compare !== current) {
+                    return true;
+                  } else {
+                    return false;
+                  }
+                });
+                AS.setItem("favoriteStation", JSON.stringify(otherData));
+                setFavoriteStation(otherData);
+              } else {
+                let ret = favoriteStation;
+                ret.push(currentStation);
+                AS.setItem("favoriteStation", JSON.stringify(ret));
+                setFavoriteStation(ret);
+              }
+              setTestButtonStatus(!testButtonStatus);
+            }}
+          >
+            <LottieDelayView
+              progress={testButtonStatus ? 1 : 0}
+              speed={1.4}
+              style={{ width: 80, height: 80 }}
+              source={require("../../assets/939-star.json")}
+              lottieRef={lottieRef}
+              loop={false}
+            />
+          </TouchableOpacity>
+        )}
+
+        <Text style={styleSheet.JRStyle}>JR</Text>
+        <View style={styleSheet.下帯} />
+        <View style={styleSheet.下帯内容}>
+          <NexPreStationLine
+            preStation={preStation}
+            nexStation={nexStation}
+            isMatsuyama={isMatsuyama}
+          />
+        </View>
+      </TouchableOpacity>
+    );
+  }
 }
 
 const LottieDelayView = ({
@@ -187,20 +278,26 @@ const LottieDelayView = ({
     />
   );
 };
-const NexPreStationLine = ({ nexStation, preStation }) => {
+const NexPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
   return (
     <View style={styleSheet.下枠フレーム}>
       <View style={styleSheet.下枠フレーム}>
         {preStation ? (
           <>
-            <Text style={styleSheet.下枠左右マーク}>◀</Text>
+            {!isMatsuyama && <Text style={styleSheet.下枠左右マーク}>◀</Text>}
             {preStation.StationNumber ? (
-              <View style={styleSheet.下枠駅ナンバー}>
+              <View
+                style={
+                  isMatsuyama
+                    ? styleSheet.下枠駅ナンバーB
+                    : styleSheet.下枠駅ナンバー
+                }
+              >
                 <View style={{ flex: 1 }} />
                 <Text
                   style={{
                     fontSize: parseInt("10%"),
-                    color: "white",
+                    color: isMatsuyama ? "black" : "white",
                   }}
                 >
                   {preStation.StationNumber}
@@ -227,9 +324,20 @@ const NexPreStationLine = ({ nexStation, preStation }) => {
               ss={{ flex: 1, alignItems: "flex-end" }}
             />
             {nexStation.StationNumber ? (
-              <View style={styleSheet.下枠駅ナンバー}>
+              <View
+                style={
+                  isMatsuyama
+                    ? styleSheet.下枠駅ナンバーB
+                    : styleSheet.下枠駅ナンバー
+                }
+              >
                 <View style={{ flex: 1 }} />
-                <Text style={{ fontSize: parseInt("10%"), color: "white" }}>
+                <Text
+                  style={{
+                    fontSize: parseInt("10%"),
+                    color: isMatsuyama ? "black" : "white",
+                  }}
+                >
                   {nexStation.StationNumber}
                 </Text>
                 <View style={{ flex: 1 }} />
@@ -237,7 +345,7 @@ const NexPreStationLine = ({ nexStation, preStation }) => {
             ) : (
               <></>
             )}
-            <Text style={styleSheet.下枠左右マーク}>▶</Text>
+            {!isMatsuyama && <Text style={styleSheet.下枠左右マーク}>▶</Text>}
           </>
         ) : (
           <></>
@@ -247,11 +355,6 @@ const NexPreStationLine = ({ nexStation, preStation }) => {
   );
 };
 
-
-
-
-
-
 const styleSheet = {
   外枠: {
     width: wp("80%"),
@@ -268,6 +371,14 @@ const styleSheet = {
     height: "30%",
     backgroundColor: "#2E94BB",
   },
+  下帯B: {
+    position: "absolute",
+    bottom: "0%",
+    left: "0%",
+    width: "100%",
+    height: "25%",
+    backgroundColor: "#454545",
+  },
   JRStyle: {
     position: "absolute",
     top: "2%",
@@ -284,6 +395,14 @@ const styleSheet = {
     alignItems: "center",
     flexDirection: "column",
   },
+  下帯内容B: {
+    position: "absolute",
+    bottom: "0%",
+    height: "25%",
+    width: "100%",
+    alignItems: "center",
+    flexDirection: "column",
+  },
   下枠フレーム: {
     flex: 1,
     flexDirection: "row",
@@ -307,4 +426,15 @@ const styleSheet = {
     borderWidth: parseInt("2%"),
     borderRadius: parseInt("100%"),
   },
+  下枠駅ナンバーB: {
+    alignContent: "center",
+    alignItems: "center",
+    width: wp("7%"),
+    height: wp("7%"),
+    margin: wp("2%"),
+    borderColor: "black",
+    backgroundColor: "white",
+    borderWidth: parseInt("2%"),
+    borderRadius: parseInt("100%"),
+  },
 };

components/駅名表/StationNameArea.tsx

@@ -2,7 +2,24 @@ import React, { CSSProperties } from "react";
 import { Text, TextStyle, View, ViewStyle } from "react-native";
 
 export const StationNameArea = (props) => {
-  const { currentStation } = props;
+  const { currentStation, isMatsuyama } = props;
+
+  const stationNameAreaOverWrap: ViewStyle = {
+    position: "absolute",
+    top: "10%",
+    alignContent: "center",
+    flexDirection: "row",
+  };
+  const Station_JP: TextStyle = {
+    fontWeight: "bold",
+    fontSize: parseInt("40%"),
+    color: isMatsuyama ? "white" : "#005170",
+  };
+  const Station_EN: TextStyle = {
+    fontWeight: "bold",
+    fontSize: parseInt("15%"),
+    color: isMatsuyama ? "white" : "#005170",
+  };
   return (
     <View style={stationNameAreaOverWrap}>
       <View style={{ flex: 1 }} />
@@ -15,19 +32,3 @@ export const StationNameArea = (props) => {
     </View>
   );
 };
-const stationNameAreaOverWrap: ViewStyle = {
-  position: "absolute",
-  top: "10%",
-  alignContent: "center",
-  flexDirection: "row",
-};
-const Station_JP: TextStyle = {
-  fontWeight: "bold",
-  fontSize: parseInt("40%"),
-  color: "#005170",
-};
-const Station_EN: TextStyle = {
-  fontWeight: "bold",
-  fontSize: parseInt("15%"),
-  color: "#005170",
-};

components/駅名表/StationNumberMaker.tsx

@@ -1,17 +1,17 @@
-
 import React from "react";
 import { Text, View } from "react-native";
 import { widthPercentageToDP as wp } from "react-native-responsive-screen";
 import lineColorList from "../../assets/originData/lineColorList";
 
 export const StationNumberMaker = (props) => {
-  const getTop = (array:number[], index:number) => {
+  const { currentStation, isMatsuyama } = props;
+  const getTop = (array: number[], index: number) => {
     if (array.length == 1) return 20;
     else if (index == 0) return 5;
     else if (index == 1) return 35;
     else return 20;
   };
-  return props.currentStation
+  return currentStation
     .filter((d) => (d.StationNumber ? true : false))
     .map((d, index, array) => {
       const lineID = d.StationNumber.slice(0, 1);
@@ -27,6 +27,7 @@ export const StationNumberMaker = (props) => {
             width: wp("10%"),
             height: wp("10%"),
             borderColor: lineColorList[lineID],
+            backgroundColor: "white",
             borderWidth: parseInt("3%"),
             borderRadius: parseInt("100%"),
           }}
@@ -39,6 +40,7 @@ export const StationNumberMaker = (props) => {
               margin: 0,
               padding: 0,
               textAlign: "center",
+              color:  "black",
             }}
           >
             {lineID + "\n" + lineName}
@@ -47,4 +49,4 @@ export const StationNumberMaker = (props) => {
         </View>
       );
     });
-};
+};