48 lines
1.1 KiB
TypeScript
48 lines
1.1 KiB
TypeScript
import { useRef, useState, useEffect, CSSProperties } from 'react'
|
|
import SharedHudVars from './SharedHudVars'
|
|
import './ArmorBar.css'
|
|
|
|
|
|
export type ArmorBarProps = {
|
|
armorValue: number,
|
|
style?: CSSProperties
|
|
}
|
|
|
|
export default ({
|
|
armorValue,
|
|
style
|
|
}: ArmorBarProps) => {
|
|
const armorRef = useRef<HTMLDivElement>(null!)
|
|
|
|
useEffect(() => {
|
|
const armorElement = armorRef.current
|
|
const armors = armorElement.children
|
|
|
|
for (const armor of armors) {
|
|
armor.classList.remove('full')
|
|
armor.classList.remove('half')
|
|
}
|
|
|
|
for (let i = 0; i < Math.ceil(armorValue / 2); i++) {
|
|
if (i >= armors.length) break
|
|
|
|
if (armorValue % 2 !== 0 && Math.ceil(armorValue / 2) === i + 1) {
|
|
armors[i].classList.add('half')
|
|
} else {
|
|
armors[i].classList.add('full')
|
|
}
|
|
}
|
|
}, [armorValue])
|
|
|
|
return <SharedHudVars>
|
|
<div style={style ?? {}} ref={armorRef} className='armor_container' >
|
|
{
|
|
Array.from({ length: 10 }, () => 0)
|
|
.map((num, index) => <div
|
|
key={`armor-${index}`}
|
|
className='armor'
|
|
/>)
|
|
}
|
|
</div>
|
|
</SharedHudVars>
|
|
}
|