47 lines
1.6 KiB
TypeScript
47 lines
1.6 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 <></>
|
|
}
|
|
const image = pj.health > 0 ? pj.image : '/img/skull.png'
|
|
return <><img src={image}/><div className="shadow"/></>
|
|
}
|
|
function printExperience (): JSX.Element {
|
|
if (pj.experience_to_next_level_current === undefined || pj.experience_to_next_level_complete === undefined) {
|
|
return <></>
|
|
}
|
|
return (
|
|
<p>Exp <span style={{ color: 'red' }}>{pj.experience_to_next_level_current}</span>
|
|
/<span style={{ color: 'green' }}>{pj.experience_to_next_level_complete}</span></p>
|
|
)
|
|
}
|
|
return (
|
|
<div className="pj-list-item">
|
|
<div className="avatar">
|
|
{
|
|
avatar()
|
|
}
|
|
</div>
|
|
<div className="data">
|
|
<p>{pj.nick} Nvl <span style={{ color: 'red' }}>{pj.level}.</span></p>
|
|
{
|
|
printExperience()
|
|
}
|
|
<label className="bar-container">
|
|
S <PJHealthLikeBar value={pj.health} max={pj.max_health}/>
|
|
</label>
|
|
<label className="bar-container">
|
|
M <PJHealthLikeBar value={pj.mana} max={pj.max_mana}/>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|