文字フォントとワンマン対応改造

components/ActionSheetComponents/EachTrainInfoCore/HeaderText.tsx

@@ -6,6 +6,7 @@ import { getType } from "../../../lib/eachTrainInfoCoreLib/getType";
 import { migrateTrainName } from "../../../lib/eachTrainInfoCoreLib/migrateTrainName";
 import { TrainIconStatus } from "./trainIconStatus";
 import { TrainViewIcon } from "./trainViewIcon";
+import { useFonts } from "expo-font";
 
 type Props = {
   data: { trainNum: string; limited: string };
@@ -34,6 +35,10 @@ export const HeaderText: FC<Props> = ({
   navigate,
   from,
 }) => {
+  const [loaded, error] = useFonts({
+    "JR-Nishi": require("../../../assets/fonts/西日本方向幕ロゴ.otf"),
+    "Zou": require("../../../assets/fonts/DelaGothicOne-Regular.ttf"),
+  });
   const [typeName, trainName] = useMemo(() => {
     if (!data.limited) return "";
     const limitedArray = data.limited.split(":");
@@ -59,10 +64,111 @@ export const HeaderText: FC<Props> = ({
   return (
     <View style={{ padding: 10, flexDirection: "row", alignItems: "center" }}>
       <TrainIconStatus {...{ data, navigate, from }} />
-      <Text style={textConfig}>
-        {typeName}{" "}
-        {trainName}
-      </Text>
+      <View
+        style={{
+          //backgroundColor: "rgb(69, 69, 69)",
+          borderRadius: 5,
+          //borderWidth: 1,
+          flexDirection: "row",
+          alignItems: "center",
+        }}
+      >
+        {loaded ? (
+          <>
+            <Text
+              style={{
+                fontSize: 20,
+                fontFamily: "JR-Nishi",
+                textShadowColor: "white",
+                textShadowOffset: { width: 0, height: 0 },
+                textShadowRadius: 0,
+                //margin: 2,
+                marginRight: 5,
+                //backgroundColor: "rgb(69, 69, 69)",
+                color: "white",
+              }}
+            >
+              {(() => {
+                if (typeName) return typeName;
+                switch (true) {
+                  case !!data.trainNum.match("T"):
+                  case !!data.trainNum.match("R"):
+                  case !!data.trainNum.match("E"):
+                  case !!data.trainNum.match("L"):
+                  case !!data.trainNum.match("A"):
+                  case !!data.trainNum.match("B"):
+                    return "回送";
+                  case !!data.trainNum.match("D"):
+                  case !!data.trainNum.match("M"):
+                    return "普通";
+                  default:
+                    return "";
+                }
+              })()}
+            </Text>
+            {new RegExp(/^4[1-9]\d\d[DM]$/).test(data.trainNum) || new RegExp(/^5[1-7]\d\d[DM]$/).test(data.trainNum) || data.trainNum ==="3621D" ?
+            
+            <View style={{ flexDirection: "column", marginRight: 7 }}>
+              <Text
+                style={{
+                  fontSize: 12,
+                  textShadowColor: "white",
+                  textShadowOffset: { width: 0, height: 0 },
+                  textShadowRadius: 0,
+                  margin: -2,
+                  marginRight: 5,
+                  color: "white",
+                  fontFamily: "Zou",
+                }}
+              >
+                ワン
+              </Text>
+              <Text
+                style={{
+                  fontSize: 12,
+                  textShadowColor: "white",
+                  textShadowOffset: { width: 0, height: 0 },
+                  textShadowRadius: 0,
+                  margin: -2,
+                  color: "white",
+                  fontFamily: "Zou",
+                }}
+              >
+                {"　"}マン
+              </Text>
+            </View>
+           : null} 
+          </>
+        ) : (
+          <Text style={textConfig}>{typeName}</Text>
+        )}
+        <Text
+          style={{
+            fontSize: 18,
+            textShadowColor: "white",
+            textShadowOffset: { width: 0, height: 0 },
+            textShadowRadius: 0,
+            //borderWidth: 1,
+            //borderColor: "white",
+            fontWeight: "bold",
+            //fontStyle: "italic",
+            // color: (() => {
+            //   switch (typeName) {
+            //     case "快速":
+            //       return "rgb(7, 124, 192)";
+            //     case "特急":
+            //       return "rgb(211, 13, 6)";
+            //     default:
+            //       return "white";
+            //   }
+            // })(),
+            color: "white",
+          }}
+        >
+          {trainName}
+        </Text>
+      </View>
+
       <View style={{ flex: 1 }} />
       <Text style={textConfig}>
         {showHeadStation.map((d) => `${headStation[d].id} + `)}