38 lines
1.3 KiB
TypeScript
38 lines
1.3 KiB
TypeScript
import * as React from 'react'
|
|
import type { PJ } from '@lastres/pj'
|
|
import PJHealthLikeBar from '@lastres/components/pj-health-like-bar'
|
|
export interface PJListItemProps {
|
|
pj: PJ
|
|
}
|
|
export default function PJListItem (props: PJListItemProps): JSX.Element {
|
|
const pj = props.pj
|
|
function avatar (): React.ReactNode {
|
|
if (pj.image === undefined) {
|
|
return <></>
|
|
}
|
|
return <><img src={pj.image}/><div className="shadow"/></>
|
|
}
|
|
return (
|
|
<div className="pj-list-item">
|
|
<div className="avatar">
|
|
{
|
|
avatar()
|
|
}
|
|
</div>
|
|
<div className="data">
|
|
<p>{pj.nick} Nivel <span style={{ color: 'red' }}>{pj.level}.</span></p>
|
|
<p>Experiencia: <span style={{ color: 'red' }}>{pj.experience_to_next_level_current}</span>
|
|
/<span style={{ color: 'green' }}>{pj.experience_to_next_level_complete}</span></p>
|
|
<label className="bar-container">
|
|
Salud
|
|
<PJHealthLikeBar value={pj.health} max={pj.max_health}/>
|
|
</label>
|
|
<label className="bar-container">
|
|
Mana
|
|
<PJHealthLikeBar value={pj.mana} max={pj.max_mana}/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|