mirror of
https://github.com/exzork/gc-tools.git
synced 2024-11-21 06:47:37 +00:00
add image artifact using impact.moe api
This commit is contained in:
muhammadeko
parent
d3a4c65683
commit
4e7909ba49
@ -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>
|
||||
@ -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,115 +167,142 @@ 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">
|
||||
<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">
|
||||
<div>
|
||||
<div>
|
||||
<div>
|
||||
<p className="mt-1 max-w-2xl text-sm text-gray-500">{t('fill_details')}</p>
|
||||
</div>
|
||||
<div className="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
||||
<div
|
||||
className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label htmlFor="name"
|
||||
className="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
|
||||
{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))}/>
|
||||
</div>
|
||||
<p className="mt-1 max-w-2xl text-sm text-gray-500">{t('fill_details')}</p>
|
||||
</div>
|
||||
<div className="mt-6 sm:mt-5 space-y-6 sm:space-y-5">
|
||||
<div
|
||||
className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label htmlFor="name"
|
||||
className="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
|
||||
{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))}/>
|
||||
</div>
|
||||
<div
|
||||
className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label htmlFor="description"
|
||||
className="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
|
||||
{t('name')}
|
||||
</label>
|
||||
<div className="mt-1 sm:mt-0 sm:col-span-2">
|
||||
</div>
|
||||
<div
|
||||
className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label htmlFor="description"
|
||||
className="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
|
||||
{t('name')}
|
||||
</label>
|
||||
<div className="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<Autocomplete
|
||||
aria-label="Artifact Name" id="ArtifactName"
|
||||
className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"
|
||||
options={artifactData}
|
||||
getOptionLabel={(option) => t(option.name)}
|
||||
onChange={handleArtifactChange}
|
||||
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>
|
||||
<div
|
||||
className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label htmlFor="image"
|
||||
className="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
|
||||
{t('main_stats')}
|
||||
</label>
|
||||
<div className="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div
|
||||
className="relative h-10 rounded-lg flex justify-center items-center">
|
||||
<Autocomplete
|
||||
aria-label="Artifact Name" id="ArtifactName"
|
||||
aria-label="Artifact Main Stats" id="ArtifactMainStats"
|
||||
className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"
|
||||
options={artifactData}
|
||||
getOptionLabel={(option) => t(option.name)}
|
||||
onChange={handleArtifactChange}
|
||||
renderInput={(params) => <TextField {...params} label="Artifact Name" variant="outlined"/>}
|
||||
options={reliquaryMains}
|
||||
getOptionLabel={(option) => t(option.PropType)}
|
||||
onChange={handleMainStatChange}
|
||||
renderInput={(params) => <TextField {...params} label="Main Stats"
|
||||
variant="outlined"/>}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label htmlFor="start_date"
|
||||
className="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
|
||||
{t('sub_stats')}
|
||||
</label>
|
||||
<div
|
||||
className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label htmlFor="image"
|
||||
className="block text-sm font-medium text-gray-700 sm:mt-px sm:pt-2">
|
||||
{t('main_stats')}
|
||||
</label>
|
||||
<div className="mt-1 sm:mt-0 sm:col-span-2">
|
||||
<div
|
||||
className="relative h-10 rounded-lg flex justify-center items-center">
|
||||
<Autocomplete
|
||||
aria-label="Artifact Main Stats" id="ArtifactMainStats"
|
||||
className="block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm border-gray-300 rounded-md"
|
||||
options={reliquaryMains}
|
||||
getOptionLabel={(option) => t(option.PropType)}
|
||||
onChange={handleMainStatChange}
|
||||
renderInput={(params) => <TextField {...params} label="Main Stats" variant="outlined"/>}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label htmlFor="start_date"
|
||||
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">
|
||||
{Object.keys(affixesValues).map((key, index) => {
|
||||
return (
|
||||
<div key={index} className="flex items-center mt-1">
|
||||
<div className="ml-3 flex-grow ">
|
||||
<div className="text-sm leading-5 text-gray-900">
|
||||
{t(key)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="ml-auto flex-none">
|
||||
<input type="number"
|
||||
step={0.01}
|
||||
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)}
|
||||
/>
|
||||
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">
|
||||
<div className="ml-3 flex-grow ">
|
||||
<div className="text-sm leading-5 text-gray-900">
|
||||
{t(key)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="ml-auto flex-none">
|
||||
<input type="number"
|
||||
step={0.01}
|
||||
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)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div
|
||||
className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label htmlFor="start_date"
|
||||
className="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
|
||||
{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))}/>
|
||||
</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/>
|
||||
</div>
|
||||
<div
|
||||
className="sm:grid sm:grid-cols-3 sm:gap-4 sm:items-start sm:border-t sm:border-gray-200 sm:pt-5">
|
||||
<label htmlFor="start_date"
|
||||
className="block text-sm font-medium leading-5 text-gray-700 sm:mt-px sm:pt-2">
|
||||
{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))}/>
|
||||
</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/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user