Merge commit 'a7ccb0b41fa99f9173d582f6b89d33449e02ac3b' into develop

components/ActionSheetComponents/EachTrainInfoCore.js

@@ -170,12 +170,12 @@ export const EachTrainInfoCore = ({
     const position = points.findIndex((d) => d == true);
     let isThrew = false;
     if (position == -1) return () => {};
+    setShowThrew(true);
     if (trainDataWidhThrough[position].split(",")[1] == "通過") {
       LayoutAnimation.configureNext({
         duration: 400,
         update: { type: "easeInEaseOut", springDamping: 0.6 },
       });
-      setShowThrew(true);
       isThrew = true;
     }
     if (position < 5) {

lib/webViewInjectjavascript.ts

@@ -52,7 +52,7 @@ export const injectJavascriptData: InjectJavascriptData = (
   const trainIcon = `
     const setStationIcon = (setIconElem,img,hasProblem) =>{
       const position = setIconElem.getAttribute("style").includes("left");
-      setIconElem.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:"+(position ? 'left' : 'right')+";height:20px;'>");
+      setIconElem.insertAdjacentHTML('beforebegin', "<img src="+img+" style='float:"+(position ? 'left' : 'right')+";height:22px;'>");
       setIconElem.remove();
     }
     
@@ -1247,18 +1247,104 @@ 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;'>" + 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', "<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: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: "+(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>");
   }
   `;
 
   const textInsert =
     `
+
+
+const setNewTrainItem = (element)=>{
+  element.style.borderColor = 'white';
+  element.style.borderWidth = '2px';
+  element.style.borderStyle = 'solid';
+  element.style.borderRadius = '10%';
+  element.style.backgroundColor = 'rgba(255, 255, 255, 0.8)';
+  element.style.boxShadow = '0 0 4px rgba(0, 0, 0, 0.2)';
+  element.style.margin = '2px';
+  element.style.display = 'flex';
+  element.style.alignItems = 'center';
+  element.style.justifyContent = 'center';
+  element.style.width = '4.5em';
+  element.style.minHeight = '80px';
+  element.style.height = '100%';
+  element.getElementsByTagName("img")[0].style.float = 'unset';
+  element.style.webkitTapHighlightColor = 'rgba(0, 0, 0, 0)';
+  element.style.transition = 'transform 0.1s ease-in-out';
+  element.addEventListener('touchstart', () => element.style.transform = 'scale(0.8)');
+  element.addEventListener('touchend', () => element.style.transform = 'scale(1)');
+  if(element.getAttribute("style").includes("left")){
+  // borderを使って五角形を生成 下り
+    element.style.borderRadius = '20% 20% 80% 80%';
+    element.style.flexDirection = 'column-reverse';
+  }
+  else if(element.getAttribute("style").includes("right")){
+  // borderを使って五角形を生成 上り
+    element.style.borderRadius = '80% 80% 20% 20%';
+    element.style.flexDirection = 'column';
+  }
+
+}
     //列番付与
 const setStrings = () =>{
   try {
     const elements = document.querySelectorAll('#disp > div > div > div[onclick]');
+    const elementBaseBase = document.querySelectorAll('[id^="stationBlock"]');
+    elementBaseBase.forEach(e=>{ //それぞれの駅ブロック横一列
+      e.style.display = 'flex';
+      e.style.height = "unset";
+      e.style.flexDirection = 'row';
+      //e.style.alignItems = "left";
+      e.style.justifyContent = 'center';
+      const x = e.querySelectorAll(':scope > div');//配下のdiv要素を選択
+      //x[0] 登りブロック x[2] 下りブロック x[1] 駅ブロック
+      const aaa = (x2,pos) => {
+        x2.style.display = 'flex';
+        x2.style.flexDirection = 'row';
+        if(pos == "right"){
+          x2.style.alignItems = 'flex-start';
+          x2.style.justifyContent = 'flex-start';
+        }else if(pos == "left"){
+          x2.style.alignItems = 'flex-end';
+          x2.style.justifyContent = 'flex-end';
+        }
+        x2.style.flexWrap = 'wrap';
+        x2.style.width = '100%';
+        x2.style.height = "100%";
+        
+      }
+      const aaa2 = (x2) => {
+        x2.style.display = 'flex';
+        x2.style.flexDirection = 'row';
+        x2.style.alignItems = 'center';
+        x2.style.justifyContent = 'center';
+        x2.style.flexWrap = 'wrap';
+        x2.style.width = '100%';
+        x2.style.height = "unset";
+        const x3 = x2.querySelectorAll(":scope > div");
+        x3.forEach(i=>{
+          i.style.position = "unset";
+          i.style.display = "flex";
+          i.style.flexDirection = "column";
+          i.style.flex = "1";
+          i.style.backgroundColor = "#00000000";
+          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");
+      aaa2(x[1]);
+      aaa(x[2],"right");
+      
+    });
     for (let element of elements) {
       if(element.getAttribute('offclick')){ continue; }
       element.setAttribute('offclick',element.getAttribute('onclick'))
@@ -1289,6 +1375,7 @@ const setStrings = () =>{
         }
       ` : ""}
       nameReplace(列車名データ,列番データ,行き先情報,hasProblem); 
+      setNewTrainItem(element);
     }
     try{
       for(let d of document.getElementById('disp').childNodes){