129 lines
4 KiB
TypeScript
129 lines
4 KiB
TypeScript
|
|
import React, { useEffect, useState } from 'react'
|
|
import classNames from 'classnames'
|
|
|
|
import { formatTimeAgo } from '~utils/timeAgo'
|
|
|
|
import './index.scss'
|
|
|
|
interface Props {
|
|
shortcode: string
|
|
name: string
|
|
raid: Raid
|
|
grid: GridWeapon[]
|
|
user?: User
|
|
createdAt: Date
|
|
displayUser: boolean
|
|
onClick: (shortcode: string) => void
|
|
}
|
|
|
|
const GridRep = (props: Props) => {
|
|
const numWeapons: number = 9
|
|
|
|
const [mainhand, setMainhand] = useState<Weapon>()
|
|
const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
|
|
|
|
const titleClass = classNames({
|
|
'empty': !props.name
|
|
})
|
|
|
|
const raidClass = classNames({
|
|
'raid': true,
|
|
'empty': !props.raid
|
|
})
|
|
|
|
const userClass = classNames({
|
|
'user': true,
|
|
'empty': !props.user
|
|
})
|
|
|
|
useEffect(() => {
|
|
const newWeapons = Array(numWeapons)
|
|
|
|
for (const [key, value] of Object.entries(props.grid)) {
|
|
if (value.position == -1)
|
|
setMainhand(value.object)
|
|
else if (!value.mainhand && value.position != null)
|
|
newWeapons[value.position] = value.object
|
|
}
|
|
|
|
setWeapons(newWeapons)
|
|
}, [props.grid])
|
|
|
|
function navigate() {
|
|
props.onClick(props.shortcode)
|
|
}
|
|
|
|
function generateMainhandImage() {
|
|
return (mainhand) ?
|
|
<img alt={mainhand?.name.en} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand?.granblue_id}.jpg`} /> : ''
|
|
}
|
|
|
|
function generateGridImage(position: number) {
|
|
return (weapons[position]) ?
|
|
<img alt={weapons[position]?.name.en} src={`${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapons[position]?.granblue_id}.jpg`} /> : ''
|
|
}
|
|
|
|
const userImage = () => {
|
|
if (props.user)
|
|
return (
|
|
<img
|
|
alt="Gran"
|
|
className="gran"
|
|
srcSet="/profile/gran.png,
|
|
/profile/gran@2x.png 2x"
|
|
src="/profile/gran.png" />
|
|
)
|
|
else
|
|
return (<div className="no-user" />)
|
|
}
|
|
|
|
const details = (
|
|
<div className="Details">
|
|
<h2 className={titleClass}>{ (props.name) ? props.name : 'Untitled' }</h2>
|
|
<div className="bottom">
|
|
<div className={raidClass}>{ (props.raid) ? props.raid.name.en : 'No raid set' }</div>
|
|
<time className="last-updated" dateTime={props.createdAt.toISOString()}>{formatTimeAgo(props.createdAt, 'en-us')}</time>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
const detailsWithUsername = (
|
|
<div className="Details">
|
|
<h2 className={titleClass}>{ (props.name) ? props.name : 'Untitled' }</h2>
|
|
<div className={raidClass}>{ (props.raid) ? props.raid.name.en : 'No raid set' }</div>
|
|
<div className="bottom">
|
|
<div className={userClass}>
|
|
{ userImage() }
|
|
{ (props.user) ? props.user.username : 'Anonymous' }
|
|
</div>
|
|
<time className="last-updated" dateTime={props.createdAt.toISOString()}>{formatTimeAgo(props.createdAt, 'en-us')}</time>
|
|
</div>
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<div className="GridRep" onClick={navigate}>
|
|
{ (props.displayUser) ? detailsWithUsername : details}
|
|
<div className="Grid">
|
|
<div className="weapon grid_mainhand">
|
|
{generateMainhandImage()}
|
|
</div>
|
|
|
|
<ul className="grid_weapons">
|
|
{
|
|
Array.from(Array(numWeapons)).map((x, i) => {
|
|
return (
|
|
<li key={`${props.shortcode}-${i}`} className="weapon grid_weapon">
|
|
{generateGridImage(i)}
|
|
</li>
|
|
)
|
|
})
|
|
}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default GridRep
|