harukin/jrshikoku
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge commit '2ee197a2947872288d2158a0f5e5175e22809dac' into develop

Browse Source
This commit is contained in:
harukin-expo-dev-env 2024-08-31 12:13:14 +00:00
commit 25c0d7ae00
8 changed files with 331 additions and 470 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/StationSign.json Normal file
View File

File diff suppressed because one or more lines are too long

218
components/ActionSheetComponents/StationDeteilView.js
View File

@ -15,7 +15,6 @@ import Sign from "../../components/駅名表/Sign";
import { TicketBox } from "../atom/TicketBox";
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
import lineColorList from "../../assets/originData/lineColorList";
import { getPDFViewURL } from "../../lib/getPdfViewURL";
import { useBusAndTrainData } from "../../stateBox/useBusAndTrainData";
import { AS } from "../../storageControl";
@ -231,140 +230,6 @@ export const StationDeteilView = (props) => {
);
};
const StationName = (props) => {
const { stringData, ss } = props;
return (
<View style={ss}>
<Text style={styleSheet.下枠駅名}>{stringData.Station_JP}</Text>
<Text style={styleSheet.下枠駅名}>{stringData.Station_EN}</Text>
</View>
);
};
const NexPreStationLine = ({ currentStation, originalStationList }) => {
const [preStation, setPreStation] = useState();
const [nexStation, setNexStation] = useState();
const [lineName, setLineName] = useState();
useEffect(() => {
getPreNextStation(currentStation);
}, [currentStation]);
useEffect(() => {
if (!currentStation) return () => {};
getPreNextStation(currentStation);
}, []);
const getPreNextStation = (now) => {
const lineList = [
"予讃線(高松-松山間)[Y]",
"予讃線(松山-宇和島間)[U]",
"予讃線/愛ある伊予灘線(向井原-伊予大洲間)[S]",
"土讃線(多度津-高知間)[D]",
"土讃線(高知-窪川間)[K]",
"高徳線(高松-徳島間)[T]",
"徳島線(徳島-阿波池田間)[B]",
"鳴門線(池谷-鳴門間)[N]",
"瀬戸大橋線(児島-宇多津間)[M]",
];
let returnData;
lineList.forEach((d) => {
let cache = originalStationList[d].findIndex(
(data) => data.StationNumber == now.StationNumber
);
if (cache != -1) {
returnData = [
originalStationList[d][cache - 1],
originalStationList[d][cache + 1],
d,
];
}
});
setPreStation(returnData[0]);
setNexStation(returnData[1]);
setLineName(returnData[2]);
};
return (
<View
style={{
height: 50,
backgroundColor: lineName
? lineColorList[lineName.split("[")[1].replace("]", "")]
: "red",
flexDirection: "row",
alignContent: "center",
alignItems: "center",
}}
>
<View style={styleSheet.下枠フレーム}>
{preStation ? (
<>
<Text style={styleSheet.下枠左右マーク}>◀</Text>
{preStation.StationNumber ? (
<View style={styleSheet.下枠駅ナンバー}>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: parseInt("10%"),
color: "white",
}}
>
{preStation.StationNumber}
</Text>
<View style={{ flex: 1 }} />
</View>
) : (
<></>
)}
<StationName
stringData={preStation}
ss={{ flex: 1, alignItems: "flex-start" }}
/>
</>
) : (
<></>
)}
</View>
<Text
style={{
fontSize: parseInt("10%"),
color: "white",
textAlign: "center",
}}
>
{lineName &&
lineName
.split("(")
.map((d, index) => (index == 1 ? "(" + d : d))
.join("\n")}
</Text>
<View style={styleSheet.下枠フレーム}>
{nexStation ? (
<>
<StationName
stringData={nexStation}
ss={{ flex: 1, alignItems: "flex-end" }}
/>
{nexStation.StationNumber ? (
<View style={styleSheet.下枠駅ナンバー}>
<View style={{ flex: 1 }} />
<Text style={{ fontSize: parseInt("15%"), color: "white" }}>
{nexStation.StationNumber}
</Text>
<View style={{ flex: 1 }} />
</View>
) : (
<></>
)}
<Text style={styleSheet.下枠左右マーク}>▶</Text>
</>
) : (
<></>
)}
</View>
</View>
);
};
const 駅構内図 = (props) => {
const [open, setOpen] = useState(false);
@ -439,85 +304,4 @@ const Handler = () => {
return () => backHandler.remove();
}, []);
return <></>;
};
const styleSheet = {
外枠: {
width: wp("80%"),
height: (wp("80%") / 20) * 9,
borderColor: "#2E94BB",
borderWidth: 1,
backgroundColor: "white",
},
下帯: {
position: "absolute",
bottom: "0%",
left: "0%",
width: "100%",
height: "30%",
backgroundColor: "#2E94BB",
},
JRStyle: {
position: "absolute",
top: "2%",
left: "2%",
fontWeight: "bold",
fontSize: parseInt("30%"),
color: "#2E94BB",
},
stationNameAreaOverWrap: {
position: "absolute",
top: "10%",
alignContent: "center",
flexDirection: "row",
},
Station_JP: {
fontWeight: "bold",
fontSize: parseInt("40%"),
color: "#005170",
},
Station_EN: {
fontWeight: "bold",
fontSize: parseInt("15%"),
color: "#005170",
},
下帯内容: {
position: "absolute",
bottom: "0%",
height: "30%",
width: "100%",
alignItems: "center",
flexDirection: "column",
},
下枠フレーム: {
flex: 1,
flexDirection: "row",
alignContent: "center",
height: wp("10%"),
},
下枠左右マーク: {
fontWeight: "bold",
fontSize: parseInt("20%"),
color: "white",
paddingHorizontal: 10,
textAlignVertical: "center",
},
下枠駅ナンバー: {
alignContent: "center",
alignItems: "center",
width: wp("8%"),
height: wp("8%"),
margin: wp("1%"),
borderColor: "white",
borderWidth: parseInt("2%"),
borderRadius: parseInt("100%"),
},
下枠駅名: {
fontWeight: "bold",
fontSize: parseInt("15%"),
color: "white",
flex: 1,
paddingHorizontal: 0,
marginVertical: 0,
textAlignVertical: "center",
},
};
};

30
components/駅名表/LottieDelayView.tsx Normal file
View File

@ -0,0 +1,30 @@
import React, { FC, useEffect, useRef, useState } from "react";
import LottieView from "lottie-react-native";
type Props = {
progress: number;
};
export const LottieDelayView: FC<Props> = ({ progress }) => {
const lottieRef = useRef<LottieView>();
const [progressState, setProgressState] = useState(undefined);
useEffect(() => {
if (progress == 0) {
lottieRef.current.play(progressState !== undefined ? 35 : 7, 7);
} else {
lottieRef.current.play(progressState !== undefined ? 7 : 35, 35);
}
}, [progress]);
return (
<LottieView
progress={progressState}
speed={1.4}
style={{ width: 80, height: 80 }}
loop={false}
source={require("../../assets/939-star.json")}
ref={lottieRef}
onAnimationFinish={(isCanceled) => {
setProgressState(progress);
}}
/>
);
};

113
components/駅名表/NextPreStationLine.tsx Normal file
View File

@ -0,0 +1,113 @@
import React, { CSSProperties, FC } from "react";
import { widthPercentageToDP as wp } from "react-native-responsive-screen";
import { Text, TextStyle, View, ViewStyle } from "react-native";
import { StationName } from "./StationName";
import lineColorList from "../../assets/originData/lineColorList";
export const NextPreStationLine = ({ nexStation, preStation, isMatsuyama }) => {
return (
<View style={下枠フレーム}>
<View style={下枠フレーム}>
{!!preStation && (
<>
<BottomSideArrow isMatsuyama={isMatsuyama} children={"◀"} />
{!!preStation.StationNumber && (
<BottomStationNumberView
isMatsuyama={isMatsuyama}
children={preStation.StationNumber}
/>
)}
<StationName
stringData={preStation}
ss={{ flex: 1, alignItems: "flex-start" }}
/>
</>
)}
</View>
<View style={下枠フレーム}>
{!!nexStation && (
<>
<StationName
stringData={nexStation}
ss={{ flex: 1, alignItems: "flex-end" }}
/>
{!!nexStation.StationNumber && (
<BottomStationNumberView
isMatsuyama={isMatsuyama}
children={nexStation.StationNumber}
/>
)}
<BottomSideArrow isMatsuyama={isMatsuyama} children={"▶"} />
</>
)}
</View>
</View>
);
};
type FCimport = {
isMatsuyama: boolean;
children: string;
};
const BottomSideArrow: FC<FCimport> = ({ isMatsuyama, children }) => {
return !isMatsuyama && <Text style={下枠左右マーク}>{children}</Text>;
};
const BottomStationNumberView: FC<FCimport> = ({ isMatsuyama, children }) => {
const lineID = children.slice(0, 1);
const lineName = children.slice(1);
return (
<View
style={{
...(isMatsuyama ? 下枠駅ナンバーB : 下枠駅ナンバー),
borderColor: lineColorList[lineID],
}}
>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: parseInt("10%"),
color: "black",
textAlign: "center",
fontWeight: "bold",
}}
>
{lineID + "\n" + lineName}
</Text>
<View style={{ flex: 1 }} />
</View>
);
};
const 下枠フレーム: ViewStyle = {
flex: 1,
flexDirection: "row",
alignContent: "center",
alignItems: "center",
};
const 下枠左右マーク: TextStyle = {
fontWeight: "bold",
fontSize: parseInt("20%"),
color: "white",
paddingHorizontal: 10,
textAlignVertical: "center",
};
const 下枠駅ナンバー: ViewStyle = {
alignContent: "center",
alignItems: "center",
width: wp("8%"),
height: wp("8%"),
margin: wp("1%"),
backgroundColor: "white",
borderWidth: parseInt("3%"),
borderRadius: parseInt("100%"),
};
const 下枠駅ナンバーB: ViewStyle = {
alignContent: "center",
alignItems: "center",
width: wp("7%"),
height: wp("7%"),
margin: wp("2%"),
backgroundColor: "white",
borderWidth: parseInt("3%"),
borderRadius: parseInt("100%"),
};

324
components/駅名表/Sign.js
View File

@ -7,7 +7,10 @@ import { useInterval } from "../../lib/useInterval";
import { AS } from "../../storageControl";
import { useFavoriteStation } from "../../stateBox/useFavoriteStation";
import lineColorList from "../../assets/originData/lineColorList";
import { StationNameArea } from "./StationNameArea";
import { StationNumberMaker } from "./StationNumberMaker";
import { NextPreStationLine } from "./NextPreStationLine";
import { LottieDelayView } from "./LottieDelayView";
export default function Sign(props) {
const {
@ -61,6 +64,8 @@ export default function Sign(props) {
useEffect(() => {
setNexPrePosition(0);
getPreNextStation(currentStation[0]);
if(currentStation.length == 1)return ()=>{};
getPreNextStation(currentStation[1]);
}, [currentStation]);
useEffect(() => {
@ -91,237 +96,80 @@ export default function Sign(props) {
];
}
});
setPreStation(returnData[0]);
setNexStation(returnData[1]);
if(returnData[0])setPreStation(returnData[0]);
if(returnData[1])setNexStation(returnData[1]);
};
const isMatsuyama = currentStation[0].StationNumber == "Y55";
//const isMatsuyama = true;
const favoliteChanger = () => {
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 lottieRef = useRef();
return (
<TouchableOpacity style={styleSheet.外枠} onPress={oP} onLongPress={oLP}>
<StationNumberMaker currentStation={currentStation} />
<StationNameArea currentStation={currentStation} />
{isMatsuyama && (
<LottieView
autoPlay
loop
style={{
width: wp("80%"),
height: (wp("80%") / 20) * 9,
backgroundColor: "#fff",
}}
source={require("../../assets/StationSign.json")}
/>
)}
<StationNumberMaker {...{ currentStation, isMatsuyama }} />
<StationNameArea {...{ currentStation, isMatsuyama }} />
{isCurrentStation ? (
<TouchableOpacity style={{ position: "absolute", right: 0, top: 0 }}>
<View style={{ position: "absolute", right: 0, top: 0 }}>
<MaterialCommunityIcons
name="crosshairs-gps"
style={{ padding: 5 }}
color="#2E94BB"
color="#0099CC"
size={30}
/>
</TouchableOpacity>
</View>
) : (
<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);
}}
onPress={favoliteChanger}
>
<LottieDelayView
progress={testButtonStatus ? 1 : 0}
speed={1.4}
style={{ width: 80, height: 80 }}
source={require("../../assets/939-star.json")}
lottieRef={lottieRef}
loop={false}
/>
<LottieDelayView progress={testButtonStatus ? 1 : 0} />
</TouchableOpacity>
)}
<Text style={styleSheet.JRStyle}>JR</Text>
<View style={styleSheet.下帯} />
<View style={styleSheet.下帯内容}>
<NexPreStationLine preStation={preStation} nexStation={nexStation} />
<View style={styleSheet[isMatsuyama ? "下帯B" : "下帯"]} />
<View style={styleSheet[isMatsuyama ? "下帯内容B" : "下帯内容"]}>
<NextPreStationLine {...{ nexStation, preStation, isMatsuyama }} />
</View>
</TouchableOpacity>
);
}
const LottieDelayView = ({
progress,
speed,
style,
source,
lottieRef,
loop,
}) => {
const [progressState, setProgressState] = useState(undefined);
useEffect(() => {
if (progress == 0) {
lottieRef.current.play(progressState !== undefined ? 35 : 7, 7);
} else {
lottieRef.current.play(progressState !== undefined ? 7 : 35, 35);
}
}, [progress]);
return (
<LottieView
progress={progressState}
speed={speed}
style={style}
source={source}
ref={lottieRef}
loop={loop}
onAnimationFinish={(isCanceled) => {
setProgressState(progress);
}}
/>
);
};
const NexPreStationLine = ({ nexStation, preStation }) => {
return (
<View style={styleSheet.下枠フレーム}>
<View style={styleSheet.下枠フレーム}>
{preStation ? (
<>
<Text style={styleSheet.下枠左右マーク}>◀</Text>
{preStation.StationNumber ? (
<View style={styleSheet.下枠駅ナンバー}>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: parseInt("10%"),
color: "white",
}}
>
{preStation.StationNumber}
</Text>
<View style={{ flex: 1 }} />
</View>
) : (
<></>
)}
<StationName
stringData={preStation}
ss={{ flex: 1, alignItems: "flex-start" }}
/>
</>
) : (
<></>
)}
</View>
<View style={styleSheet.下枠フレーム}>
{nexStation ? (
<>
<StationName
stringData={nexStation}
ss={{ flex: 1, alignItems: "flex-end" }}
/>
{nexStation.StationNumber ? (
<View style={styleSheet.下枠駅ナンバー}>
<View style={{ flex: 1 }} />
<Text style={{ fontSize: parseInt("10%"), color: "white" }}>
{nexStation.StationNumber}
</Text>
<View style={{ flex: 1 }} />
</View>
) : (
<></>
)}
<Text style={styleSheet.下枠左右マーク}>▶</Text>
</>
) : (
<></>
)}
</View>
</View>
);
};
const StationNumberMaker = (props) => {
const getTop = (array, index) => {
if (array.length == 1) return 20;
else if (index == 0) return 5;
else if (index == 1) return 35;
else return 20;
};
return props.currentStation
.filter((d) => (d.StationNumber ? true : false))
.map((d, index, array) => {
const lineID = d.StationNumber.slice(0, 1);
const lineName = d.StationNumber.slice(1);
return (
<View
style={{
position: "absolute",
alignContent: "center",
alignItems: "center",
top: getTop(array, index) + "%",
right: "10%",
width: wp("10%"),
height: wp("10%"),
borderColor: lineColorList[lineID],
borderWidth: parseInt("3%"),
borderRadius: parseInt("100%"),
}}
key={array[index].StationNumber}
>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: parseInt("13%"),
margin: 0,
padding: 0,
textAlign: "center",
}}
>
{lineID + "\n" + lineName}
</Text>
<View style={{ flex: 1 }} />
</View>
);
});
};
const StationNameArea = (props) => {
const { currentStation } = props;
return (
<View style={styleSheet.stationNameAreaOverWrap}>
<View style={{ flex: 1 }} />
<View style={{ alignItems: "center" }}>
{/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text> */}
<Text style={styleSheet.Station_JP}>
{currentStation[0].Station_JP}
</Text>
<Text style={styleSheet.Station_EN}>
{currentStation[0].Station_EN}
</Text>
</View>
<View style={{ flex: 1 }} />
</View>
);
};
const StationName = (props) => {
const { stringData, ss } = props;
return (
<View style={ss}>
<Text style={styleSheet.下枠駅名}>{stringData.Station_JP}</Text>
<Text style={styleSheet.下枠駅名}>{stringData.Station_EN}</Text>
</View>
);
};
const styleSheet = {
外枠: {
width: wp("80%"),
height: (wp("80%") / 20) * 9,
borderColor: "#2E94BB",
borderColor: "#0099CC",
borderWidth: 1,
backgroundColor: "white",
},
@ -331,31 +179,23 @@ const styleSheet = {
left: "0%",
width: "100%",
height: "30%",
backgroundColor: "#2E94BB",
backgroundColor: "#0099CC",
},
下帯B: {
position: "absolute",
bottom: "0%",
left: "0%",
width: "100%",
height: "25%",
backgroundColor: "#454545",
},
JRStyle: {
position: "absolute",
top: "2%",
left: "2%",
fontWeight: "bold",
fontSize: parseInt("30%"),
color: "#2E94BB",
},
stationNameAreaOverWrap: {
position: "absolute",
top: "10%",
alignContent: "center",
flexDirection: "row",
},
Station_JP: {
fontWeight: "bold",
fontSize: parseInt("40%"),
color: "#005170",
},
Station_EN: {
fontWeight: "bold",
fontSize: parseInt("15%"),
color: "#005170",
fontSize: parseInt("25%"),
color: "#0099CC",
},
下帯内容: {
position: "absolute",
@ -365,34 +205,12 @@ const styleSheet = {
alignItems: "center",
flexDirection: "column",
},
下枠フレーム: {
flex: 1,
flexDirection: "row",
alignContent: "center",
下帯内容B: {
position: "absolute",
bottom: "0%",
height: "25%",
width: "100%",
alignItems: "center",
},
下枠左右マーク: {
fontWeight: "bold",
fontSize: parseInt("20%"),
color: "white",
paddingHorizontal: 10,
textAlignVertical: "center",
},
下枠駅ナンバー: {
alignContent: "center",
alignItems: "center",
width: wp("8%"),
height: wp("8%"),
margin: wp("1%"),
borderColor: "white",
borderWidth: parseInt("2%"),
borderRadius: parseInt("100%"),
},
下枠駅名: {
fontWeight: "bold",
fontSize: parseInt("15%"),
color: "white",
flex: 1,
textAlignVertical: "center",
flexDirection: "column",
},
};

22
components/駅名表/StationName.tsx Normal file
View File

@ -0,0 +1,22 @@
import React, { FC } from "react";
import { Text, TextStyle, View } from "react-native";
export const StationName: FC<{
stringData: { Station_JP: string; Station_EN: string };
ss: TextStyle;
}> = (props) => {
const { stringData, ss } = props;
return (
<View style={ss}>
<Text style={styleSheet}>{stringData.Station_JP}</Text>
<Text style={styleSheet}>{stringData.Station_EN}</Text>
</View>
);
};
const styleSheet: TextStyle = {
fontWeight: "bold",
fontSize: parseInt("15%"),
color: "white",
flex: 1,
textAlignVertical: "center",
};

40
components/駅名表/StationNameArea.tsx Normal file
View File

@ -0,0 +1,40 @@
import React, { CSSProperties } from "react";
import { Text, TextStyle, View, ViewStyle } from "react-native";
export const StationNameArea = (props) => {
const { currentStation, isMatsuyama } = props;
const stationNameAreaOverWrap: ViewStyle = {
position: "absolute",
top: "10%",
alignContent: "center",
flexDirection: "row",
height: "50%",
width: "100%",
};
const Station_JP: TextStyle = {
letterSpacing: currentStation[0].Station_JP.length < 4 ? 15 : 0,
fontWeight: "bold",
fontSize: parseInt(currentStation[0].Station_JP.length < 6 ? "40%" : "25%"),
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 }} />
<View style={{ alignItems: "center",flexDirection:"column" }}>
<View style={{ flex: 1 }} />
{/* <Text style={{fontWeight:"bold",fontSize:parseInt("15%"),color:"#005170"}}>{stationName.今.LineName}</Text> */}
<Text style={Station_JP}>{currentStation[0].Station_JP}</Text>
<Text style={Station_EN}>{currentStation[0].Station_EN}</Text>
<View style={{ flex: 1 }} />
</View>
<View style={{ flex: 1 }} />
</View>
);
};

53
components/駅名表/StationNumberMaker.tsx Normal file
View File

@ -0,0 +1,53 @@
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 { 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 currentStation
.filter((d) => (d.StationNumber ? true : false))
.map((d, index, array) => {
const lineID = d.StationNumber.slice(0, 1);
const lineName = d.StationNumber.slice(1);
return (
<View
style={{
position: "absolute",
alignContent: "center",
alignItems: "center",
top: `${getTop(array, index)}%`,
right: "10%",
width: wp("10%"),
height: wp("10%"),
borderColor: lineColorList[lineID],
backgroundColor: "white",
borderWidth: parseInt("3%"),
borderRadius: parseInt("100%"),
}}
key={array[index].StationNumber}
>
<View style={{ flex: 1 }} />
<Text
style={{
fontSize: parseInt("13%"),
margin: 0,
padding: 0,
textAlign: "center",
color: "black",
fontWeight: "bold",
}}
>
{lineID + "\n" + lineName}
</Text>
<View style={{ flex: 1 }} />
</View>
);
});
};