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,11 +11,12 @@ interface IArtifact {
name: string;
}
interface IPropTypeValues {
[key: string]: number[]; //number is the values
}
interface ISelectedPropTypeValues{
interface ISelectedPropTypeValues {
[key: string]: number[]; //number is the ids
}
@ -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(() => {
@ -69,7 +75,7 @@ export default function Artifacts() {
useEffect(() => {
handleGeneratedArtifact()
}, [uid, selectedArtifact, selectedMainStat, selectedAffixesValues , artifactEnhancements]);
}, [uid, selectedArtifact, selectedMainStat, selectedAffixesValues, artifactEnhancements]);
const handleArtifactChange = (event: any, value: any) => {
if (value !== null) {
@ -87,12 +93,12 @@ export default function Artifacts() {
return reliquaryAffixes.filter((x) => x.PropType === propType && x.PropValue === propValue)[0].Id;
};
const getListOfIdsByPropTypeAndRequestValue = (affixName: string, requestValue: number)=>{
const getListOfIdsByPropTypeAndRequestValue = (affixName: string, requestValue: number) => {
const possibleValues = affixesValues[affixName];
let ids:number[] = [];
let ids: number[] = [];
let closestValue = 0;
let less:number[] = [];
let less: number[] = [];
possibleValues.forEach((value) => {
if (value <= requestValue) {
@ -104,25 +110,25 @@ export default function Artifacts() {
less.reverse();
for (let i of less) {
while ((closestValue+i) <= requestValue) {
while ((closestValue + i) <= requestValue) {
closestValue += i;
const id = getAffixIdByPropTypeAndPropValue(affixName, i);
if (id !== undefined) {
ids.push(id);
}
}
if(closestValue === requestValue) break;
if (closestValue === requestValue) break;
}
return {ids, closestValue};
}
const handleAffixChange = (event: ChangeEvent<HTMLInputElement>, affixName:string) => {
const handleAffixChange = (event: ChangeEvent<HTMLInputElement>, affixName: string) => {
let affixesSelected = {...selectedAffixesValues};
const affixValues = parseInt(event.target.value);
if (affixValues > 0) {
if (affixesSelected[affixName] === undefined) affixesSelected[affixName] = [];
if (affixName.indexOf("PERCENT") !== -1 || affixName.indexOf("CRITICAL") !== -1 || affixName.indexOf("EFFICIENCY") !== -1 || affixName.indexOf("HURT") !== -1 || affixName.indexOf("RATIO") !== -1 || affixName.indexOf("ADD") !== -1){
const {ids} = getListOfIdsByPropTypeAndRequestValue(affixName, affixValues/100);
if (affixName.indexOf("PERCENT") !== -1 || affixName.indexOf("CRITICAL") !== -1 || affixName.indexOf("EFFICIENCY") !== -1 || affixName.indexOf("HURT") !== -1 || affixName.indexOf("RATIO") !== -1 || affixName.indexOf("ADD") !== -1) {
const {ids} = getListOfIdsByPropTypeAndRequestValue(affixName, affixValues / 100);
affixesSelected[affixName] = ids;
} else {
const {ids} = getListOfIdsByPropTypeAndRequestValue(affixName, affixValues);
@ -134,21 +140,21 @@ export default function Artifacts() {
setSelectedAffixesValues(affixesSelected);
};
const handleGetAffixClosestValue = (event: ChangeEvent<HTMLInputElement>, affixName:string) => {
const handleGetAffixClosestValue = (event: ChangeEvent<HTMLInputElement>, affixName: string) => {
const affixValues = parseInt(event.target.value);
if (affixValues === 0) return;
const {closestValue} =getListOfIdsByPropTypeAndRequestValue(affixName, affixValues);
const {closestValue} = getListOfIdsByPropTypeAndRequestValue(affixName, affixValues);
event.target.value = parseFloat(closestValue.toFixed(3)).toString();
}
const getPropTypeValues = (affixes:IReliquaryAffix[])=>{
let propTypeValues:IPropTypeValues = {};
affixes.forEach(affix=>{
const getPropTypeValues = (affixes: IReliquaryAffix[]) => {
let propTypeValues: IPropTypeValues = {};
affixes.forEach(affix => {
if (propTypeValues[affix.PropType] === undefined) {
propTypeValues[affix.PropType] = [];
}
if(affix.PropValue>0) propTypeValues[affix.PropType].push(affix.PropValue);
if (affix.PropValue > 0) propTypeValues[affix.PropType].push(affix.PropValue);
});
return propTypeValues;
};
@ -161,14 +167,22 @@ export default function Artifacts() {
const distinctValues = Array.from(new Set(affixValues));
distinctValues.forEach(value => {
const countAffixes = affixValues.filter(x => x === value).length;
if (countAffixes > 1) selectedAffixesCombine.push(value+","+countAffixes);
if (countAffixes > 1) selectedAffixesCombine.push(value + "," + countAffixes);
else selectedAffixesCombine.push(value);
})
})
}
const generated = "/giveart @"+uid+" "+selectedArtifact+" "+selectedMainStat+" "+selectedAffixesCombine.join(" ")+" "+Number(artifactEnhancements+1);
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">
@ -245,8 +272,8 @@ export default function Artifacts() {
className="block shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"
id={key}
defaultValue={0}
onChange={(e)=>handleAffixChange(e,key)}
onBlur={(e)=>handleGetAffixClosestValue(e,key)}
onChange={(e) => handleAffixChange(e, key)}
onBlur={(e) => handleGetAffixClosestValue(e, key)}
/>
</div>
</div>
@ -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>