diff --git a/components/ActionSheetComponents/EachTrainInfoCore.js b/components/ActionSheetComponents/EachTrainInfoCore.js index c419bb7..c6f7cc0 100644 --- a/components/ActionSheetComponents/EachTrainInfoCore.js +++ b/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) { diff --git a/lib/webViewInjectjavascript.ts b/lib/webViewInjectjavascript.ts index 492d280..a2e8260 100644 --- a/lib/webViewInjectjavascript.ts +++ b/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', ""); + setIconElem.insertAdjacentHTML('beforebegin', ""); setIconElem.remove(); } @@ -1247,18 +1247,104 @@ export const injectJavascriptData: InjectJavascriptData = ( const returnText1 = (isWanman ? "ワンマン " : "") + trainName + viaData; const returnText2 = (ToData ? ToData+"行 " : ToData)+ TrainNumber; 行き先情報.innerText = ""; - 行き先情報.insertAdjacentHTML('beforebegin', "

" + returnText1 + "

"); - 行き先情報.insertAdjacentHTML('beforebegin', "

" + (ToData ? ToData + "行 " : ToData) + "

" + TrainNumber + (JRF ? "":"レ") + "

"); - 行き先情報.insertAdjacentHTML('beforebegin', "

" + (hasProblem ? "‼️停止中‼️" : "") + "

"); + 行き先情報.insertAdjacentHTML('beforebegin', "

" + (ToData ? ToData + "行 " : ToData) + "

"); + 行き先情報.insertAdjacentHTML('beforebegin', "

" + returnText1 + "

"); + 行き先情報.insertAdjacentHTML('beforebegin', "

" + TrainNumber + (JRF ? "":"レ") + "

"); + 行き先情報.insertAdjacentHTML('beforebegin', "

" + (hasProblem ? "‼️停止中‼️" : "") + "

"); } `; 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){