Merge commit 'b5b9558136f02741e7ba472e09b244bf055a294b' into develop

components/Settings/LayoutSettings.js

@@ -18,6 +18,8 @@ export const LayoutSettings = ({
   setUsePDFView,
   trainMenu,
   setTrainMenu,
+  uiSetting,
+  setUiSetting,
   trainPosition,
   setTrainPosition,
   headerSize,
@@ -38,6 +40,17 @@ export const LayoutSettings = ({
             falseText={"本家\n(文字アイコン)"}
             trueText={"オリジナル\n(車種アイコン)"}
           />
+          <SwitchArea
+            str="列車表示"
+            bool={uiSetting}
+            setBool={setUiSetting}
+            falseImage={require("../../assets/configuration/layout_default.jpg")}
+            trueImage={require("../../assets/configuration/layout_tokyo.jpg")}
+            falseText={"本家"}
+            trueText={"オリジナル"}
+            falseValue="default"
+            trueValue="tokyo"
+          />
           <SwitchArea
             str="トップメニュー表示"
             bool={mapSwitch}

components/Settings/settings.js

@@ -39,6 +39,7 @@ export default function Setting(props) {
   const [trainPosition, setTrainPosition] = useState(false);
   const [headerSize, setHeaderSize] = useState("default");
   const [startPage, setStartPage] = useState(false);
+  const [uiSetting, setUiSetting] = useState("tokyo");
   useLayoutEffect(() => {
     AS.getItem("iconSwitch").then(setIconSetting);
     AS.getItem("mapSwitch").then(setMapSwitch);
@@ -48,6 +49,7 @@ export default function Setting(props) {
     AS.getItem("trainPositionSwitch").then(setTrainPosition);
     AS.getItem("headerSize").then(setHeaderSize);
     AS.getItem("startPage").then(setStartPage);
+    AS.getItem("uiSetting").then(setUiSetting);
   }, []);
   const testNFC = async () => {
     //const result = await ExpoFelicaReader.scan();
@@ -63,6 +65,7 @@ export default function Setting(props) {
       AS.setItem("trainPositionSwitch", trainPosition.toString()),
       AS.setItem("headerSize", headerSize),
       AS.setItem("startPage", startPage.toString()),
+      AS.setItem("uiSetting", uiSetting),
     ]).then(() => Updates.reloadAsync());
   };
   return (
@@ -114,6 +117,8 @@ export default function Setting(props) {
             setTrainMenu={setTrainMenu}
             trainPosition={trainPosition}
             setTrainPosition={setTrainPosition}
+            uiSetting={uiSetting}
+            setUiSetting={setUiSetting}
             testNFC={testNFC}
             updateAndReload={updateAndReload}
             headerSize={headerSize}

components/atom/SwitchArea.js

@@ -8,6 +8,8 @@ export const SwitchArea = ({
   trueImage,
   falseText,
   trueText,
+  falseValue = false,
+  trueValue = true,
   children,
 }) => {
   return (
@@ -37,7 +39,7 @@ export const SwitchArea = ({
           bool={bool}
           setBool={setBool}
           color="red"
-          value={false}
+          value={falseValue}
           image={falseImage}
           subText={falseText}
         />
@@ -45,7 +47,7 @@ export const SwitchArea = ({
           bool={bool}
           setBool={setBool}
           color="red"
-          value={true}
+          value={trueValue}
           image={trueImage}
           subText={trueText}
         />

lib/webViewInjectjavascript.ts

@@ -2,13 +2,15 @@ type InjectJavascriptData = (
   a: string,
   b: string,
   c: string,
-  d: string
+  d: string,
+  e: string
 ) => string;
 export const injectJavascriptData: InjectJavascriptData = (
   mapSwitch,
   iconSetting,
   stationMenu,
-  trainMenu
+  trainMenu,
+  uiSetting
 ) => {
   // 一番上のメニュー非表示　地図スイッチによって切り替え
   const topMenu =
@@ -1247,11 +1249,17 @@ export const injectJavascriptData: InjectJavascriptData = (
     const returnText1 = (isWanman ? "ワンマン " : "") + trainName + viaData;
     const returnText2 = (ToData ? ToData+"行 " : ToData)+ TrainNumber;
     行き先情報.innerText = "";
-    行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color:black;text-align:center;'>" + (ToData ? ToData + "行 " : ToData) + "</p>");
+    ${uiSetting === "tokyo" ? `
-    行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + returnText1 + "</p>");
+      行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color:black;text-align:center;'>" + (ToData ? ToData + "行 " : ToData) + "</p>");
-    行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;padding:0;color:black;text-align:center;'>" + TrainNumber + (JRF ? "":"レ") + "</p>");
+      行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;color: black;text-align:center;'>" + returnText1 + "</p>");
-    行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;text-align:center;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p>");
+      行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;padding:0;color:black;text-align:center;'>" + TrainNumber + (JRF ? "":"レ") + "</p>");
-  }
+      行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:8px;font-weight:bold;padding:0;text-align:center;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p>");
+      `: `
+      行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color: black;'>" + returnText1 + "</p>");
+      行き先情報.insertAdjacentHTML('beforebegin', "<div style='display:inline-flex;flex-direction:row;'><p style='font-size:10px;font-weight: bold;padding:0;color:black;'>" + (ToData ? ToData + "行 " : ToData) + "</p><p style='font-size:10px;padding:0;color:black;'>" + TrainNumber + (JRF ? "":"レ") + "</p></div>");
+      行き先情報.insertAdjacentHTML('beforebegin', "<p style='font-size:10px;font-weight:bold;padding:0;color: "+(hasProblem ? "red":"black")+";'>" + (hasProblem ? "‼️停止中‼️" : "") + "</p>");
+      `}
+      }
   `;
 
   const textInsert =
@@ -1293,58 +1301,62 @@ const setNewTrainItem = (element)=>{
 const setStrings = () =>{
   try {
     const elements = document.querySelectorAll('#disp > div > div > div[onclick]');
-    const elementBaseBase = document.querySelectorAll('[id^="stationBlock"]');
+    const setNewTrainItemUI = ()=>{
-    elementBaseBase.forEach(e=>{ //それぞれの駅ブロック横一列
+      const elementBaseBase = document.querySelectorAll('[id^="stationBlock"]');
-      e.style.display = 'flex';
+      elementBaseBase.forEach(e=>{ //それぞれの駅ブロック横一列
-      e.style.height = "unset";
+        e.style.display = 'flex';
-      e.style.flexDirection = 'row';
+        e.style.height = "unset";
-      //e.style.alignItems = "left";
+        e.style.flexDirection = 'row';
-      e.style.justifyContent = 'center';
+        //e.style.alignItems = "left";
-      const x = e.querySelectorAll(':scope > div');//配下のdiv要素を選択
+        e.style.justifyContent = 'center';
-      //x[0] 登りブロック x[2] 下りブロック x[1] 駅ブロック
+        const x = e.querySelectorAll(':scope > div');//配下のdiv要素を選択
-      const aaa = (x2,pos) => {
+        //x[0] 登りブロック x[2] 下りブロック x[1] 駅ブロック
-        x2.style.display = 'flex';
+        const aaa = (x2,pos) => {
-        x2.style.flexDirection = 'row';
+          x2.style.display = 'flex';
-        if(pos == "right"){
+          x2.style.flexDirection = 'row';
-          x2.style.alignItems = 'flex-start';
+          if(pos == "right"){
-          x2.style.justifyContent = 'flex-start';
+            x2.style.alignItems = 'flex-start';
-        }else if(pos == "left"){
+            x2.style.justifyContent = 'flex-start';
-          x2.style.alignItems = 'flex-end';
+          }else if(pos == "left"){
-          x2.style.justifyContent = 'flex-end';
+            x2.style.alignItems = 'flex-end';
+            x2.style.justifyContent = 'flex-end';
+          }
+          x2.style.flexWrap = 'wrap';
+          x2.style.width = '100%';
+          x2.style.height = "100%";
+          
         }
-        x2.style.flexWrap = 'wrap';
+        const aaa2 = (x2) => {
-        x2.style.width = '100%';
+          x2.style.display = 'flex';
-        x2.style.height = "100%";
+          x2.style.flexDirection = 'row';
-        
+          x2.style.alignItems = 'center';
-      }
+          x2.style.justifyContent = 'center';
-      const aaa2 = (x2) => {
+          x2.style.flexWrap = 'wrap';
-        x2.style.display = 'flex';
+          x2.style.width = '100%';
-        x2.style.flexDirection = 'row';
+          x2.style.height = "unset";
-        x2.style.alignItems = 'center';
+          const x3 = x2.querySelectorAll(":scope > div");
-        x2.style.justifyContent = 'center';
+          x3.forEach(i=>{
-        x2.style.flexWrap = 'wrap';
+            i.style.position = "unset";
-        x2.style.width = '100%';
+            i.style.display = "flex";
-        x2.style.height = "unset";
+            i.style.flexDirection = "column";
-        const x3 = x2.querySelectorAll(":scope > div");
+            i.style.flex = "1";
-        x3.forEach(i=>{
+            i.style.backgroundColor = "#00000000";
-          i.style.position = "unset";
+            i.querySelectorAll(":scope > *").forEach(j=>{
-          i.style.display = "flex";
+              j.style.width = "100%";
-          i.style.flexDirection = "column";
+              j.style.textAlign = "center";
-          i.style.flex = "1";
+              j.style.margin = "5px";
-          i.style.backgroundColor = "#00000000";
+              j.style.padding = "5px";
-          i.querySelectorAll(":scope > *").forEach(j=>{
+            });
-            j.style.width = "100%";
-            j.style.textAlign = "center";
-            j.style.margin = "5px";
-            j.style.padding = "5px";
           });
-        });
+        }
-      }
+        aaa(x[0],"left");
-      aaa(x[0],"left");
+        aaa2(x[1]);
-      aaa2(x[1]);
+        aaa(x[2],"right");
-      aaa(x[2],"right");
+        
-      
+      });
-    });
+    }
+    
+    ${uiSetting === "tokyo" ? `setNewTrainItemUI();`: ``}
     for (let element of elements) {
       if(element.getAttribute('offclick')){ continue; }
       element.setAttribute('offclick',element.getAttribute('onclick'))
@@ -1375,7 +1387,7 @@ const setStrings = () =>{
         }
       ` : ""}
       nameReplace(列車名データ,列番データ,行き先情報,hasProblem); 
-      setNewTrainItem(element);
+      ${uiSetting === "tokyo" ? `setNewTrainItem(element);`: ``}
     }
     try{
       for(let d of document.getElementById('disp').childNodes){

stateBox/useTrainMenu.js

@@ -16,6 +16,8 @@ const initialState = {
   setMapSwitch: () => {},
   stationMenu: undefined,
   setStationMenu: () => {},
+  uiSetting: undefined,
+  setUiSetting: () => {},
   LoadError: false,
   setLoadError: () => {},
   trainInfo: {
@@ -58,12 +60,16 @@ export const TrainMenuProvider = ({ children }) => {
   //駅情報画面用
   const [trainMenu, setTrainMenu] = useState("true");
 
+  //GUIデザインベース
+  const [uiSetting, setUiSetting] = useState("tokyo");
+
   //地図表示テキスト
   const injectJavascript = injectJavascriptData(
     mapSwitch,
     iconSetting,
     stationMenu,
-    trainMenu
+    trainMenu,
+    uiSetting
   );
 
   useEffect(() => {
@@ -75,6 +81,8 @@ export const TrainMenuProvider = ({ children }) => {
     ASCore({ k: "stationSwitch", s: setStationMenu, d: "true", u: true });
     //列車メニュースイッチ
     ASCore({ k: "trainSwitch", s: setTrainMenu, d: "true", u: true });
+    //GUIデザインベーススイッチ
+    ASCore({ k: "uiSetting", s: setUiSetting, d: "tokyo", u: true });
   }, []);
 
   return (
@@ -90,6 +98,8 @@ export const TrainMenuProvider = ({ children }) => {
         setMapSwitch,
         stationMenu,
         setStationMenu,
+        uiSetting,
+        setUiSetting,
         LoadError,
         setLoadError,
         trainInfo,