From 09e123222fa572d14359eb414dc1df2b0c678068 Mon Sep 17 00:00:00 2001 From: harukin-expo-dev-env Date: Sat, 31 Aug 2024 07:42:21 +0000 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E6=9D=BE=E5=B1=B1=E9=A7=85=E8=A1=A8?= =?UTF-8?q?=E7=A4=BA=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/駅名表/Sign.js | 262 +++++++++++++++----- components/駅名表/StationNameArea.tsx | 35 +-- components/駅名表/StationNumberMaker.tsx | 10 +- 3 files changed, 220 insertions(+), 87 deletions(-) diff --git a/components/駅名表/Sign.js b/components/駅名表/Sign.js index e65f7db..aa51be5 100644 --- a/components/駅名表/Sign.js +++ b/components/駅名表/Sign.js @@ -99,62 +99,153 @@ export default function Sign(props) { setNexStation(returnData[1]); }; const lottieRef = useRef(); - return ( - - - - {isCurrentStation ? ( - - - - ) : ( - { - 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); + const isMatsuyama = currentStation[0].StationNumber == "Y55"; + //const isMatsuyama = true; + if (isMatsuyama) { + return ( + + - - - )} + source={{ uri: "https://cdn.lottielab.com/l/D4m3dmEqsjVN77.json?s" }} + /> + + + {isCurrentStation ? ( + + + + ) : ( + { + 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); + }} + > + + + )} - JR - - - - - - ); + JR + + + + + + ); + } else { + return ( + + + + {isCurrentStation ? ( + + + + ) : ( + { + 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); + }} + > + + + )} + + JR + + + + + + ); + } } const LottieDelayView = ({ @@ -187,20 +278,26 @@ const LottieDelayView = ({ /> ); }; -const NexPreStationLine = ({ nexStation, preStation }) => { +const NexPreStationLine = ({ nexStation, preStation, isMatsuyama }) => { return ( {preStation ? ( <> - ◀ + {!isMatsuyama && ◀} {preStation.StationNumber ? ( - + {preStation.StationNumber} @@ -227,9 +324,20 @@ const NexPreStationLine = ({ nexStation, preStation }) => { ss={{ flex: 1, alignItems: "flex-end" }} /> {nexStation.StationNumber ? ( - + - + {nexStation.StationNumber} @@ -237,7 +345,7 @@ const NexPreStationLine = ({ nexStation, preStation }) => { ) : ( <> )} - ▶ + {!isMatsuyama && ▶} ) : ( <> @@ -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%"), + }, }; diff --git a/components/駅名表/StationNameArea.tsx b/components/駅名表/StationNameArea.tsx index c56ba98..e1e1bb2 100644 --- a/components/駅名表/StationNameArea.tsx +++ b/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 ( @@ -15,19 +32,3 @@ export const StationNameArea = (props) => { ); }; -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", -}; diff --git a/components/駅名表/StationNumberMaker.tsx b/components/駅名表/StationNumberMaker.tsx index 52a6ef3..0961343 100644 --- a/components/駅名表/StationNumberMaker.tsx +++ b/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) => { ); }); -}; \ No newline at end of file +};