| | <!DOCTYPE html> |
| | <html> |
| | <head> |
| | <meta charset="utf-8"> |
| | <title>My static Space</title> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
| | <link rel="preconnect" href="https://rsms.me/"> |
| | <link rel="stylesheet" href="https://rsms.me/inter/inter.css"> |
| | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| | <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap"> |
| | <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.5.0/github-markdown.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" /> |
| | <style> |
| | |
| | |
| | |
| | |
| | body { |
| | margin: 0; |
| | background-color: #ffffff; |
| | width: 100%; |
| | } |
| | @media (prefers-color-scheme: dark) { |
| | body { |
| | background-color: #0d1117; |
| | } |
| | } |
| | body, .markdown-body, button { |
| | font-family: 'Inter', 'Noto Sans JP', sans-serif !important; |
| | } |
| | .markdown-body { |
| | box-sizing: border-box; |
| | width: 100%; |
| | max-width: 960px; |
| | margin-right: auto; |
| | margin-left: auto; |
| | padding: 1rem; |
| | } |
| | .markdown-body table { |
| | |
| | } |
| | .markdown-body table th, .markdown-body table td { |
| | padding: 0px 13px; |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div class="markdown-body"> |
| | <h1>MiHoMo API Test</h1> |
| | <div class="parsedAPI_input"> |
| | <p><span>Input UID: </span><input type="text" id="uidInputBox" name="uid" required minlength="9" maxlength="9" size="9" value="802415000"/> <button type="button" name="runBtn1" id="runBtn1" onclick="runBtn1Click()">Run</button></p> |
| | <p class="connectingLabelRoot" id="connectingLabelRoot" style="display: none;"><span class="connectingLabelChild" id="connectingLabelNowProgress" style="display: none;">Connecting... </span><span class="connectingLabelChild" id="connectingLabelOk" style="display: none;"></span></p> |
| | </div> |
| | <div id="responseDataPlaceholder"> |
| | <h2>player (truncated)</h2> |
| | <table> |
| | <thead> |
| | <tr> |
| | <th>key</th> |
| | <th>value</th> |
| | </tr> |
| | </thead> |
| | <tbody id="responseDataPlaceholderPlayer"> |
| | </tbody> |
| | </table> |
| | <h2>characters (truncated)</h2> |
| | <table> |
| | <thead> |
| | <tr> |
| | <th>key</th> |
| | <th>value</th> |
| | </tr> |
| | </thead> |
| | <tbody id="responseDataPlaceholderCharacters"> |
| | </tbody> |
| | </table> |
| | </div> |
| | </div> |
| | <script> |
| | const StarRailResBaseUrl = 'https://raw.githubusercontent.com/Mar-7th/StarRailRes/master/'; |
| | const apiConnectTimeout = 15000; |
| | const apiConnectUserAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'; |
| | const apiConnectDefaultHeader = { |
| | 'Cache-Control': apiConnectUserAgent, |
| | 'Access-Control-Allow-Origin': '*', |
| | }; |
| | |
| | window.addEventListener('load', async function(){ |
| | |
| | }); |
| | |
| | async function runBtn1Click () { |
| | |
| | const uidInputValue = document.querySelector('#uidInputBox').value; |
| | document.querySelector('#connectingLabelRoot').style.display = 'block'; |
| | document.querySelector('#connectingLabelNowProgress').style.display = 'inline'; |
| | document.querySelector('#connectingLabelOk').style.display = 'inline'; |
| | const apiResponseData = await apiConnect({ |
| | 'method': 'get', |
| | 'url': `https://corsproxy.io/?${encodeURIComponent(`https://api.mihomo.me/sr_info_parsed/${uidInputValue}?lang=jp&version=v2`)}`, |
| | 'headers': apiConnectDefaultHeader, |
| | 'timeout': apiConnectTimeout |
| | }); |
| | console.log(apiResponseData); |
| | |
| | |
| | if (apiResponseData) { |
| | document.querySelector('#connectingLabelOk').innerHTML = `OK (Time: ${Math.ceil(apiResponseData.apiConnectionTime)} ms)`; |
| | htmlBuildFromApiData(apiResponseData); |
| | } else { |
| | document.querySelector('#connectingLabelOk').innerHTML = `Failed`; |
| | } |
| | } |
| | |
| | async function apiConnect (axiosObj) { |
| | |
| | let connectionTimerStart = performance.now(); |
| | try { |
| | const response = await axios(axiosObj); |
| | let connectionTimerEnd = performance.now(); |
| | return { |
| | 'apiConnectionTime': connectionTimerEnd - connectionTimerStart, |
| | 'response': response.data |
| | }; |
| | } catch (error) { |
| | let connectionTimerEnd = performance.now(); |
| | console.error(`API request failed: ${error.code}`); |
| | alert(`API request failed: ${error.code}`); |
| | |
| | throw error; |
| | return null; |
| | } |
| | } |
| | |
| | function htmlBuildFromApiData (apiResponseData) { |
| | const fakeClone01 = document.querySelector('#responseDataPlaceholderPlayer').cloneNode(false); |
| | const fakeClone02 = document.querySelector('#responseDataPlaceholderCharacters').cloneNode(false); |
| | document.querySelector('#responseDataPlaceholderPlayer').parentNode.replaceChild(fakeClone01, document.querySelector('#responseDataPlaceholderPlayer')); |
| | document.querySelector('#responseDataPlaceholderCharacters').parentNode.replaceChild(fakeClone02, document.querySelector('#responseDataPlaceholderCharacters')); |
| | let inputDataKeyList = [ |
| | 'player.uid', |
| | 'player.nickname', |
| | 'player.signature', |
| | 'player.level', |
| | 'player.world_level', |
| | 'player.friend_count', |
| | 'player.avatar.icon', |
| | 'player.is_display', |
| | 'player.space_info.memory_data.level', |
| | 'player.space_info.memory_data.chaos_level', |
| | 'player.space_info.universe_level', |
| | 'player.space_info.challenge_data.maze_group_index', |
| | 'player.space_info.challenge_data.pre_maze_group_index', |
| | 'player.space_info.pass_area_progress', |
| | 'player.space_info.light_cone_count', |
| | 'player.space_info.avatar_count', |
| | 'player.space_info.achievement_count', |
| | ]; |
| | for (let i = 0; i < inputDataKeyList.length; i++) { |
| | document.querySelector('#responseDataPlaceholderPlayer').appendChild(trElAddReturn(apiResponseData.response, inputDataKeyList[i])); |
| | } |
| | for (let i = 0; i < apiResponseData.response.characters.length; i++) { |
| | let inputDataKeyList2 = [ |
| | `characters.${i}.name`, |
| | `characters.${i}.rarity`, |
| | `characters.${i}.rank`, |
| | `characters.${i}.level`, |
| | `characters.${i}.promotion`, |
| | `characters.${i}.icon`, |
| | `characters.${i}.preview`, |
| | `characters.${i}.portrait`, |
| | `characters.${i}.path.name`, |
| | `characters.${i}.path.icon`, |
| | `characters.${i}.element.name`, |
| | `characters.${i}.element.icon`, |
| | `characters.${i}.light_cone.name`, |
| | `characters.${i}.light_cone.rarity`, |
| | `characters.${i}.light_cone.rank`, |
| | `characters.${i}.light_cone.level`, |
| | `characters.${i}.light_cone.promotion`, |
| | `characters.${i}.light_cone.icon`, |
| | `characters.${i}.light_cone.preview`, |
| | `characters.${i}.light_cone.portrait`, |
| | `characters.${i}.light_cone.path.name`, |
| | `characters.${i}.light_cone.path.icon`, |
| | ]; |
| | for (let j = 0; j < inputDataKeyList2.length; j++) { |
| | document.querySelector('#responseDataPlaceholderCharacters').appendChild(trElAddReturn(apiResponseData.response, inputDataKeyList2[j])); |
| | } |
| | } |
| | } |
| | |
| | function trElAddReturn (inputData, objKey) { |
| | const imageDetectRegex = /\.(png|jpg|jpeg|webp|gif|bmp)$/i; |
| | const tr = document.createElement('tr'); |
| | const tdKey = document.createElement('td'); |
| | const tdValue = document.createElement('td'); |
| | tdKey.innerHTML = objKey; |
| | |
| | let keyParts = objKey.split('.'); |
| | let value = inputData; |
| | for (let i = 0; i < keyParts.length; i++) { |
| | |
| | if (!isNaN(keyParts[i])) { |
| | keyParts[i] = parseInt(keyParts[i], 10); |
| | } |
| | value = value[keyParts[i]]; |
| | } |
| | if (imageDetectRegex.test(value)) { |
| | const imageEl = document.createElement('img'); |
| | imageEl.src = StarRailResBaseUrl + value; |
| | tdValue.appendChild(imageEl); |
| | } else { |
| | tdValue.innerHTML = value; |
| | } |
| | tr.appendChild(tdKey); |
| | tr.appendChild(tdValue); |
| | return tr; |
| | } |
| | </script> |
| | </body> |
| | </html> |
