設定機能を実装

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}
         />

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,