|
|
<!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> |
