add image artifact using impact.moe api

.idea/inspectionProfiles/Project_Default.xml

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

src/components/pages/Artifacts.tsx

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