34 lines
1.2 KiB
TypeScript
34 lines
1.2 KiB
TypeScript
import { observer } from 'mobx-react-lite';
|
|
import type { GameStore } from '../game/GameStore';
|
|
import type { Rabbit } from '../game/entities/Rabbit';
|
|
import { RABBIT_NIGHT_SPRITE, RABBIT_SPRITE } from '../game/sprites';
|
|
import HealthBar from './HealthBar';
|
|
import PixelSprite from './PixelSprite';
|
|
|
|
const RABBIT_SIZE = 30;
|
|
|
|
const RabbitEntity = observer(function RabbitEntity({ rabbit, store }: { rabbit: Rabbit; store: GameStore }) {
|
|
const size = store.isBloodMoon ? RABBIT_SIZE * 2 : RABBIT_SIZE;
|
|
|
|
return (
|
|
<div>
|
|
<div
|
|
className="entity rabbit-shadow"
|
|
style={{ left: rabbit.x, top: rabbit.y, width: size, height: size / 2, marginTop: size * 0.6 }}
|
|
/>
|
|
<div
|
|
className={`entity rabbit ${rabbit.hitFlashTimer > 0 ? 'chopping' : ''}`}
|
|
style={{ left: rabbit.x, top: rabbit.y - rabbit.z, zIndex: Math.floor(rabbit.y - rabbit.z) }}
|
|
data-rabbit-id={rabbit.id}
|
|
>
|
|
<PixelSprite pixels={store.isNight ? RABBIT_NIGHT_SPRITE : RABBIT_SPRITE} size={size} />
|
|
</div>
|
|
{rabbit.hp < store.rabbitMaxHp && (
|
|
<HealthBar x={rabbit.x} y={rabbit.y - rabbit.z - size * 0.5 - 6} ratio={rabbit.hp / store.rabbitMaxHp} />
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default RabbitEntity;
|