Justin Edmund
bad870a546
These reps act like the existing PartyRep except for Characters and Summons, as well as a new component just for Weapons. They only render the grid of objects and nothing else. Eventually PartyRep will use WeaponRep
106 lines
2.8 KiB
TypeScript
106 lines
2.8 KiB
TypeScript
import React, { useEffect, useState } from 'react'
|
|
import { useRouter } from 'next/router'
|
|
import { useTranslation } from 'next-i18next'
|
|
import 'fix-date'
|
|
|
|
import './index.scss'
|
|
|
|
interface Props {
|
|
grid: {
|
|
mainWeapon: GridWeapon | undefined
|
|
allWeapons: GridArray<GridWeapon>
|
|
}
|
|
}
|
|
|
|
const WEAPONS_COUNT = 9
|
|
|
|
const WeaponRep = (props: Props) => {
|
|
// Localization for alt tags
|
|
const router = useRouter()
|
|
const { t } = useTranslation('common')
|
|
const locale =
|
|
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
|
|
|
// Component state
|
|
const [mainhand, setMainhand] = useState<GridWeapon>()
|
|
const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
|
|
const [grid, setGrid] = useState<GridArray<GridWeapon>>({})
|
|
|
|
// On grid update
|
|
useEffect(() => {
|
|
const newWeapons = Array(WEAPONS_COUNT)
|
|
const gridWeapons = Array(WEAPONS_COUNT)
|
|
|
|
if (props.grid.mainWeapon) {
|
|
setMainhand(props.grid.mainWeapon)
|
|
} else {
|
|
setMainhand(undefined)
|
|
}
|
|
|
|
if (props.grid.allWeapons) {
|
|
for (const [key, value] of Object.entries(props.grid.allWeapons)) {
|
|
if (value) {
|
|
newWeapons[value.position] = value.object
|
|
gridWeapons[value.position] = value
|
|
}
|
|
}
|
|
}
|
|
|
|
setWeapons(newWeapons)
|
|
setGrid(gridWeapons)
|
|
}, [props.grid])
|
|
|
|
// Methods: Image generation
|
|
function generateMainhandImage() {
|
|
let url = ''
|
|
|
|
if (mainhand && mainhand.object) {
|
|
if (mainhand.object.element == 0 && mainhand.element) {
|
|
url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.object.granblue_id}_${mainhand.element}.jpg`
|
|
} else {
|
|
url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.object.granblue_id}.jpg`
|
|
}
|
|
}
|
|
|
|
return mainhand ? <img alt={mainhand.object.name[locale]} src={url} /> : ''
|
|
}
|
|
|
|
function generateGridImage(position: number) {
|
|
let url = ''
|
|
|
|
const weapon = weapons[position]
|
|
const gridWeapon = grid[position]
|
|
|
|
if (weapon && gridWeapon) {
|
|
if (weapon.element == 0 && gridWeapon.element) {
|
|
url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${gridWeapon.element}.jpg`
|
|
} else {
|
|
url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
|
|
}
|
|
}
|
|
|
|
return weapons[position] ? (
|
|
<img alt={weapons[position]?.name[locale]} src={url} />
|
|
) : (
|
|
''
|
|
)
|
|
}
|
|
|
|
// Render
|
|
return (
|
|
<div className="WeaponRep Rep">
|
|
<div className="Mainhand Weapon">{generateMainhandImage()}</div>
|
|
<ul className="GridWeapons">
|
|
{Array.from(Array(WEAPONS_COUNT)).map((x, i) => {
|
|
return (
|
|
<li key={`weapons-${i}`} className="Grid Weapon">
|
|
{generateGridImage(i)}
|
|
</li>
|
|
)
|
|
})}
|
|
</ul>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default WeaponRep
|