Update WeaponLabelIndicator and icons

components/WeaponLabelIcon/index.scss

@@ -6,74 +6,142 @@
 
     /* Elements */
 
-    &.fire {
+    &.fire.en {
-        background-image: url('/labels/element/Label_Element_Fire.png')
+        background-image: url('/labels/element/fire_en.png')
     }
 
-    &.water {
+    &.fire.ja {
-        background-image: url('/labels/element/Label_Element_Water.png')
+        background-image: url('/labels/element/fire_ja.png')
     }
 
-    &.earth {
+    &.water.en {
-        background-image: url('/labels/element/Label_Element_Earth.png')
+        background-image: url('/labels/element/water_en.png')
     }
 
-    &.wind {
+    &.water.ja {
-        background-image: url('/labels/element/Label_Element_Wind.png')
+        background-image: url('/labels/element/water_ja.png')
     }
 
-    &.dark {
+    &.earth.en {
-        background-image: url('/labels/element/Label_Element_Dark.png')
+        background-image: url('/labels/element/earth_en.png')
     }
 
-    &.light {
+    &.earth.ja {
-        background-image: url('/labels/element/Label_Element_Light.png')
+        background-image: url('/labels/element/earth_ja.png')
     }
 
-    &.null {
+    &.wind.en {
-        background-image: url('/labels/element/Label_Element_Any.png')
+        background-image: url('/labels/element/wind_en.png')
+    }
+
+    &.wind.ja {
+        background-image: url('/labels/element/wind_ja.png')
+    }
+
+    &.dark.en {
+        background-image: url('/labels/element/dark_en.png')
+    }
+
+    &.dark.ja {
+        background-image: url('/labels/element/dark_ja.png')
+    }
+
+    &.light.en {
+        background-image: url('/labels/element/light_en.png')
+    }
+
+    &.light.ja {
+        background-image: url('/labels/element/light_ja.png')
+    }
+
+    &.null.en {
+        background-image: url('/labels/element/any_en.png')
+    }
+
+    &.null.ja {
+        background-image: url('/labels/element/any_ja.png')
     }
 
     /* Proficiencies */
 
-    &.sword {
+    &.sword.en {
-        background-image: url('/labels/proficiency/Label_Weapon_Sabre.png')
+        background-image: url('/labels/proficiency/sabre_en.png')
     }
 
-    &.dagger {
+    &.sword.ja {
-        background-image: url('/labels/proficiency/Label_Weapon_Dagger.png')
+        background-image: url('/labels/proficiency/sabre_ja.png')
     }
 
-    &.axe {
+    &.dagger.en {
-        background-image: url('/labels/proficiency/Label_Weapon_Axe.png')
+        background-image: url('/labels/proficiency/dagger_en.png')
     }
 
-    &.spear {
+    &.dagger.ja {
-        background-image: url('/labels/proficiency/Label_Weapon_Spear.png')
+        background-image: url('/labels/proficiency/dagger_ja.png')
     }
 
-    &.staff {
+    &.axe.en {
-        background-image: url('/labels/proficiency/Label_Weapon_Staff.png')
+        background-image: url('/labels/proficiency/axe_en.png')
     }
 
-    &.fist {
+    &.axe.ja {
-        background-image: url('/labels/proficiency/Label_Weapon_Melee.png')
+        background-image: url('/labels/proficiency/axe_ja.png')
     }
 
-    &.harp {
+    &.spear.en {
-        background-image: url('/labels/proficiency/Label_Weapon_Harp.png')
+        background-image: url('/labels/proficiency/spear_en.png')
     }
 
-    &.gun {
+    &.spear.ja {
-        background-image: url('/labels/proficiency/Label_Weapon_Gun.png')
+        background-image: url('/labels/proficiency/spear_ja.png')
     }
 
-    &.bow {
+    &.staff.en {
-        background-image: url('/labels/proficiency/Label_Weapon_Bow.png')
+        background-image: url('/labels/proficiency/staff_en.png')
     }
 
-    &.katana {
+    &.staff.ja {
-        background-image: url('/labels/proficiency/Label_Weapon_Katana.png')
+        background-image: url('/labels/proficiency/staff_ja.png')
+    }
+
+    &.fist.en {
+        background-image: url('/labels/proficiency/melee_en.png')
+    }
+
+    &.fist.ja {
+        background-image: url('/labels/proficiency/melee_ja.png')
+    }
+
+    &.harp.en {
+        background-image: url('/labels/proficiency/harp_en.png')
+    }
+
+    &.harp.ja {
+        background-image: url('/labels/proficiency/harp_ja.png')
+    }
+
+    &.gun.en {
+        background-image: url('/labels/proficiency/gun_en.png')
+    }
+
+    &.gun.ja {
+        background-image: url('/labels/proficiency/gun_ja.png')
+    }
+
+    &.bow.en {
+        background-image: url('/labels/proficiency/bow_en.png')
+    }
+
+    &.bow.ja {
+        background-image: url('/labels/proficiency/bow_ja.png')
+    }
+
+    &.katana.en {
+        background-image: url('/labels/proficiency/katana_en.png')
+    }
+
+    &.katana.ja {
+        background-image: url('/labels/proficiency/katana_ja.png')
     }
 }
 

components/WeaponLabelIcon/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { useRouter } from 'next/router'
 
 import './index.scss'
 
@@ -6,12 +7,12 @@ interface Props {
     labelType: string
 }
 
-class WeaponLabelIcon extends React.Component<Props> {
+const WeaponLabelIcon = (props: Props) => {
-    render() {
+    const router = useRouter()
-        return (
+    
-            <i className={`WeaponLabelIcon ${this.props.labelType}`} />
+    return (
-        )
+        <i className={`WeaponLabelIcon ${props.labelType} ${router.locale}`} />
-    }
+    )
 }
 
 export default WeaponLabelIcon