Update GranblueElement with slug

types/GranblueElement.d.ts

@@ -6,4 +6,5 @@ interface GranblueElement {
     en: string
     ja: string
   }
+  slug: string
 }

utils/elements.tsx

@@ -1,60 +1,73 @@
-const elements: GranblueElement[] = [
+export const elements: GranblueElement[] = [
   {
     id: 0,
     weaknessId: 0,
     name: {
-      en: 'null',
+      en: 'Null',
       ja: '無',
     },
+    slug: 'null',
   },
   {
     id: 1,
     weaknessId: 2,
     name: {
-      en: 'wind',
+      en: 'Wind',
       ja: '風',
     },
+    slug: 'wind',
   },
   {
     id: 2,
     weaknessId: 3,
     name: {
-      en: 'fire',
+      en: 'Fire',
       ja: '火',
     },
+    slug: 'fire',
   },
   {
     id: 3,
     weaknessId: 4,
     name: {
-      en: 'water',
+      en: 'Water',
       ja: '水',
     },
+    slug: 'water',
   },
   {
     id: 4,
     weaknessId: 1,
     name: {
-      en: 'earth',
+      en: 'Earth',
       ja: '土',
     },
+    slug: 'earth',
   },
   {
     id: 5,
     weaknessId: 5,
     name: {
-      en: 'dark',
+      en: 'Dark',
       ja: '闇',
     },
+    slug: 'dark',
   },
   {
     id: 6,
     weaknessId: 6,
     name: {
-      en: 'light',
+      en: 'Light',
       ja: '光',
     },
+    slug: 'light',
   },
 ]
 
-export default elements
+export function numberToElement(value: number) {
+  return elements.find((element) => element.id === value) || elements[0]
+}
+
+export function stringToElement(value: string) {
+  return elements.find((element) => element.name.en === value)
+}