2024-06-27 02:57:28 -05:00
|
|
|
import {Container, Graphics} from '@pixi/react';
|
|
|
|
import {memo, useCallback} from 'react';
|
|
|
|
|
2024-07-20 04:32:33 -05:00
|
|
|
import {useDebug} from '@/react/context/debug.js';
|
|
|
|
import {useMainEntity} from '@/react/context/main-entity.js';
|
2024-06-27 02:57:28 -05:00
|
|
|
|
2024-07-27 15:28:08 -05:00
|
|
|
import Light from './light.jsx';
|
2024-07-30 09:56:53 -05:00
|
|
|
import SpriteComponent from './sprite.jsx';
|
2024-06-27 02:57:28 -05:00
|
|
|
|
2024-07-03 16:13:14 -05:00
|
|
|
function Aabb({color, width = 0.5, x0, y0, x1, y1, ...rest}) {
|
2024-07-02 12:00:12 -05:00
|
|
|
const draw = useCallback((g) => {
|
|
|
|
g.clear();
|
2024-07-03 16:13:14 -05:00
|
|
|
g.lineStyle(width, color);
|
2024-07-02 16:17:07 -05:00
|
|
|
g.moveTo(x0, y0);
|
2024-07-25 16:39:05 -05:00
|
|
|
g.lineTo(x1, y0);
|
|
|
|
g.lineTo(x1, y1);
|
|
|
|
g.lineTo(x0, y1);
|
2024-07-02 16:17:07 -05:00
|
|
|
g.lineTo(x0, y0);
|
2024-07-03 16:13:14 -05:00
|
|
|
}, [color, width, x0, x1, y0, y1]);
|
2024-07-02 12:00:12 -05:00
|
|
|
return (
|
2024-07-25 16:39:05 -05:00
|
|
|
<Graphics draw={draw} x={0} y={0} {...rest} />
|
2024-07-02 12:00:12 -05:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2024-07-30 09:56:53 -05:00
|
|
|
function Crosshair() {
|
2024-06-27 02:57:28 -05:00
|
|
|
const draw = useCallback((g) => {
|
|
|
|
g.clear();
|
|
|
|
g.lineStyle(1, 0x000000);
|
|
|
|
g.moveTo(-5, 0);
|
|
|
|
g.lineTo(5, 0);
|
|
|
|
g.moveTo(0, -5);
|
|
|
|
g.lineTo(0, 5);
|
|
|
|
g.lineStyle(0.5, 0xffffff);
|
|
|
|
g.moveTo(-5, 0);
|
|
|
|
g.lineTo(5, 0);
|
|
|
|
g.moveTo(0, -5);
|
|
|
|
g.lineTo(0, 5);
|
|
|
|
g.lineStyle(1, 0x000000);
|
|
|
|
g.drawCircle(0, 0, 3);
|
|
|
|
g.lineStyle(0.5, 0xffffff);
|
|
|
|
g.drawCircle(0, 0, 3);
|
|
|
|
}, []);
|
|
|
|
return (
|
2024-07-30 09:56:53 -05:00
|
|
|
<Graphics draw={draw} />
|
2024-06-27 02:57:28 -05:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2024-07-01 18:12:53 -05:00
|
|
|
function Entity({entity, ...rest}) {
|
2024-06-27 02:57:28 -05:00
|
|
|
const [debug] = useDebug();
|
2024-07-02 16:17:07 -05:00
|
|
|
const [mainEntity] = useMainEntity();
|
2024-06-27 02:57:28 -05:00
|
|
|
if (!entity) {
|
|
|
|
return false;
|
|
|
|
}
|
2024-07-30 09:56:53 -05:00
|
|
|
const {Direction, id, Sprite} = entity;
|
2024-06-27 02:57:28 -05:00
|
|
|
return (
|
2024-07-30 09:56:53 -05:00
|
|
|
<>
|
|
|
|
<Container
|
|
|
|
x={entity.Position.x}
|
|
|
|
y={entity.Position.y}
|
|
|
|
zIndex={entity.Position?.y || 0}
|
|
|
|
>
|
|
|
|
{entity.Sprite && (
|
|
|
|
<SpriteComponent
|
|
|
|
alpha={Sprite.alpha}
|
|
|
|
anchor={Sprite.anchor}
|
|
|
|
animation={Sprite.animation}
|
|
|
|
direction={Direction?.direction}
|
|
|
|
frame={Sprite.frame}
|
|
|
|
id={id}
|
|
|
|
scale={Sprite.scale}
|
|
|
|
rotates={Sprite.rotates}
|
|
|
|
rotation={Sprite.rotation}
|
|
|
|
source={Sprite.source}
|
|
|
|
tint={Sprite.tint}
|
|
|
|
{...rest}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{entity.Light && (
|
|
|
|
<Light
|
|
|
|
brightness={entity.Light.brightness}
|
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{debug && entity.Position && (
|
|
|
|
<Crosshair />
|
|
|
|
)}
|
|
|
|
</Container>
|
2024-07-02 12:00:12 -05:00
|
|
|
{debug && (
|
2024-07-02 16:17:07 -05:00
|
|
|
<Aabb
|
|
|
|
color={0xff00ff}
|
2024-07-03 16:13:14 -05:00
|
|
|
{...entity.VisibleAabb}
|
2024-07-02 16:17:07 -05:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
{debug && entity.Collider && (
|
2024-07-03 16:13:14 -05:00
|
|
|
<>
|
|
|
|
<Aabb
|
|
|
|
color={0xffffff}
|
|
|
|
width={0.5}
|
|
|
|
{...entity.Collider.aabb}
|
|
|
|
/>
|
|
|
|
{entity.Collider.aabbs.map((aabb, i) => (
|
|
|
|
<Aabb
|
|
|
|
color={0xffff00}
|
|
|
|
width={0.25}
|
|
|
|
key={i}
|
|
|
|
{...aabb}
|
|
|
|
/>
|
|
|
|
))}
|
|
|
|
</>
|
2024-07-02 16:17:07 -05:00
|
|
|
)}
|
|
|
|
{debug && mainEntity == entity.id && (
|
|
|
|
<Aabb
|
|
|
|
color={0x00ff00}
|
|
|
|
{...entity.Interacts.aabb()}
|
|
|
|
/>
|
2024-07-02 12:00:12 -05:00
|
|
|
)}
|
2024-07-30 09:56:53 -05:00
|
|
|
</>
|
2024-06-27 02:57:28 -05:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2024-07-01 18:12:53 -05:00
|
|
|
export default memo(Entity);
|