add image artifact using impact.moe api

This commit is contained in:
muhammadeko 2022-05-16 14:48:23 +07:00
parent d3a4c65683
commit 4e7909ba49
No known key found for this signature in database
GPG Key ID: 51366716C10E98B1
2 changed files with 147 additions and 104 deletions

View File

@ -2,5 +2,15 @@
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myValues">
<value>
<list size="1">
<item index="0" class="java.lang.String" itemvalue="src" />
</list>
</value>
</option>
<option name="myCustomValuesEnabled" value="true" />
</inspection_tool>
</profile>
</component>

View File

@ -11,6 +11,7 @@ interface IArtifact {
name: string;
}
interface IPropTypeValues {
[key: string]: number[]; //number is the values
}
@ -60,6 +61,11 @@ export default function Artifacts() {
setArtifactData(dataArtifact);
initReliquaryData();
});
fetch("https://github.com/impact-moe/impact-api/wiki/Artifacts").then(res => res.json())
.then(data => {
console.log(data);
});
}, []);
useEffect(() => {
@ -169,6 +175,14 @@ export default function Artifacts() {
const generated = "/giveart @" + uid + " " + selectedArtifact + " " + selectedMainStat + " " + selectedAffixesCombine.join(" ") + " " + Number(artifactEnhancements + 1);
setGeneratedArtifact(generated);
};
const generateImageUrl = (artifactName:string)=>{
let url = "https://impact.moe/assets/img/artifact-icons/";
let artifactNameLower = artifactName.toLowerCase();
artifactNameLower = artifactNameLower.replaceAll("'", "");
artifactNameLower = artifactNameLower.replaceAll(" ", "-");
if (artifactNameLower === "wanderers-string-kettle") artifactNameLower = "wanderings-string-kettle";
return url + artifactNameLower + ".webp";
}
return (
<form method="POST" className="space-y-8 divide-y divide-gray-200 bg-white p-10">
<div className="space-y-8 divide-y divide-gray-200 sm:space-y-5">
@ -184,7 +198,9 @@ export default function Artifacts() {
{t("uid")}
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2">
<input type="text" aria-label="UID" name="uid" id="uid" className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" onChange={(event) => setUid(parseInt(event.target.value))}/>
<input type="text" aria-label="UID" name="uid" id="uid"
className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"
onChange={(event) => setUid(parseInt(event.target.value))}/>
</div>
</div>
<div
@ -200,7 +216,16 @@ export default function Artifacts() {
options={artifactData}
getOptionLabel={(option) => t(option.name)}
onChange={handleArtifactChange}
renderInput={(params) => <TextField {...params} label="Artifact Name" variant="outlined"/>}
renderInput={(params) => {
return <TextField {...params} label="Artifact Name" variant="outlined"/>
}}
renderOption={(option, {name}) => {
return <li {...option}>
<img src={generateImageUrl(name)} alt={""} className="inline-block h-8 w-8 rounded-full"
style={{marginRight: '10px'}}/>
<span className="ml-2">{t(name)}</span>
</li>
}}
/>
</div>
</div>
@ -219,7 +244,8 @@ export default function Artifacts() {
options={reliquaryMains}
getOptionLabel={(option) => t(option.PropType)}
onChange={handleMainStatChange}
renderInput={(params) => <TextField {...params} label="Main Stats" variant="outlined"/>}
renderInput={(params) => <TextField {...params} label="Main Stats"
variant="outlined"/>}
/>
</div>
</div>
@ -230,7 +256,8 @@ export default function Artifacts() {
className="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
{t('sub_stats')}
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2 h-48 overflow-auto grid gap-x-10 gap-y-2 grid-cols-2">
<div
className="mt-1 sm:mt-0 sm:col-span-2 h-48 overflow-auto grid gap-x-10 gap-y-2 grid-cols-2">
{Object.keys(affixesValues).map((key, index) => {
return (
<div key={index} className="flex items-center mt-1">
@ -261,11 +288,17 @@ export default function Artifacts() {
{t('enhancement_level')}
</label>
<div className="mt-1 sm:mt-0 sm:col-span-2">
<input type="number" defaultValue="1" min="1" max="20" className="w-full flex-none block shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" onChange={(e)=>setArtifactEnhancements(Number(e.currentTarget.value))}/>
<input type="number" defaultValue="1" min="1" max="20"
className="w-full flex-none block shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"
onChange={(e) => setArtifactEnhancements(Number(e.currentTarget.value))}/>
</div>
</div>
<div className="block sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
<input type="text" onClick={(e)=>{navigator.clipboard.writeText(e.currentTarget.value)}} className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md" value={generatedArtifact} readOnly/>
<input type="text" onClick={(e) => {
navigator.clipboard.writeText(e.currentTarget.value)
}}
className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"
value={generatedArtifact} readOnly/>
</div>
</div>
</div>