From 4e7909ba49f61207c70f577300839d0429e41a55 Mon Sep 17 00:00:00 2001 From: muhammadeko Date: Mon, 16 May 2022 14:48:23 +0700 Subject: [PATCH] add image artifact using impact.moe api --- .idea/inspectionProfiles/Project_Default.xml | 10 + src/components/pages/Artifacts.tsx | 241 +++++++++++-------- 2 files changed, 147 insertions(+), 104 deletions(-) diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml index 03d9549..b31444b 100644 --- a/.idea/inspectionProfiles/Project_Default.xml +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -2,5 +2,15 @@ \ No newline at end of file diff --git a/src/components/pages/Artifacts.tsx b/src/components/pages/Artifacts.tsx index 861279f..4b7c24b 100644 --- a/src/components/pages/Artifacts.tsx +++ b/src/components/pages/Artifacts.tsx @@ -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, affixName:string) => { + const handleAffixChange = (event: ChangeEvent, 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, affixName:string) => { + const handleGetAffixClosestValue = (event: ChangeEvent, 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 ( -
-
+ +
+
-
-

{t('fill_details')}

-
-
-
- -
- setUid(parseInt(event.target.value))}/> -
+

{t('fill_details')}

+
+
+
+ +
+ setUid(parseInt(event.target.value))}/>
-
- -
+
+
+ +
+ t(option.name)} + onChange={handleArtifactChange} + renderInput={(params) => { + return + }} + renderOption={(option, {name}) => { + return
  • + {""} + {t(name)} +
    • + }} + /> +
    +
    +
    + +
    +
    t(option.name)} - onChange={handleArtifactChange} - renderInput={(params) => } + options={reliquaryMains} + getOptionLabel={(option) => t(option.PropType)} + onChange={handleMainStatChange} + renderInput={(params) => } />
    +
    +
    +
    - -
    -
    - t(option.PropType)} - onChange={handleMainStatChange} - renderInput={(params) => } - /> -
    -
    -
    -
    - -
    - {Object.keys(affixesValues).map((key, index) => { - return ( -
    -
    -
    - {t(key)} -
    -
    -
    - 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 ( +
    +
    +
    + {t(key)}
    - ) - })} -
    +
    + handleAffixChange(e, key)} + onBlur={(e) => handleGetAffixClosestValue(e, key)} + /> +
    +
    + ) + })}
    -
    - -
    - setArtifactEnhancements(Number(e.currentTarget.value))}/> -
    -
    -
    - {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/> +
    +
    + +
    + setArtifactEnhancements(Number(e.currentTarget.value))}/>
    +
    + { + 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/> +
    - +
    + ); } \ No newline at end of file