refactor: components
This commit is contained in:
parent
170cd4e0d1
commit
2997370e3b
19
app/react/components/pixi/aabb.jsx
Normal file
19
app/react/components/pixi/aabb.jsx
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import {Graphics} from '@pixi/react';
|
||||||
|
import {memo, useCallback} from 'react';
|
||||||
|
|
||||||
|
function Aabb({color, width = 0.5, x0, y0, x1, y1}) {
|
||||||
|
const draw = useCallback((g) => {
|
||||||
|
g.clear();
|
||||||
|
g.lineStyle(width, color);
|
||||||
|
g.moveTo(x0, y0);
|
||||||
|
g.lineTo(x1, y0);
|
||||||
|
g.lineTo(x1, y1);
|
||||||
|
g.lineTo(x0, y1);
|
||||||
|
g.lineTo(x0, y0);
|
||||||
|
}, [color, width, x0, x1, y0, y1]);
|
||||||
|
return (
|
||||||
|
<Graphics draw={draw} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo(Aabb);
|
27
app/react/components/pixi/crosshair.jsx
Normal file
27
app/react/components/pixi/crosshair.jsx
Normal file
|
@ -0,0 +1,27 @@
|
||||||
|
import {Graphics} from '@pixi/react';
|
||||||
|
import {memo, useCallback} from 'react';
|
||||||
|
|
||||||
|
function Crosshair() {
|
||||||
|
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 (
|
||||||
|
<Graphics draw={draw} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo(Crosshair);
|
|
@ -1,50 +1,14 @@
|
||||||
import {Container, Graphics} from '@pixi/react';
|
import {Container} from '@pixi/react';
|
||||||
import {memo, useCallback} from 'react';
|
import {memo} from 'react';
|
||||||
|
|
||||||
import {useDebug} from '@/react/context/debug.js';
|
import {useDebug} from '@/react/context/debug.js';
|
||||||
import {useMainEntity} from '@/react/context/main-entity.js';
|
import {useMainEntity} from '@/react/context/main-entity.js';
|
||||||
|
|
||||||
|
import Aabb from './aabb.jsx';
|
||||||
|
import Crosshair from './crosshair.jsx';
|
||||||
import Light from './light.jsx';
|
import Light from './light.jsx';
|
||||||
import SpriteComponent from './sprite.jsx';
|
import SpriteComponent from './sprite.jsx';
|
||||||
|
|
||||||
function Aabb({color, width = 0.5, x0, y0, x1, y1, ...rest}) {
|
|
||||||
const draw = useCallback((g) => {
|
|
||||||
g.clear();
|
|
||||||
g.lineStyle(width, color);
|
|
||||||
g.moveTo(x0, y0);
|
|
||||||
g.lineTo(x1, y0);
|
|
||||||
g.lineTo(x1, y1);
|
|
||||||
g.lineTo(x0, y1);
|
|
||||||
g.lineTo(x0, y0);
|
|
||||||
}, [color, width, x0, x1, y0, y1]);
|
|
||||||
return (
|
|
||||||
<Graphics draw={draw} x={0} y={0} {...rest} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Crosshair() {
|
|
||||||
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 (
|
|
||||||
<Graphics draw={draw} />
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function Entity({entity, ...rest}) {
|
function Entity({entity, ...rest}) {
|
||||||
const [debug] = useDebug();
|
const [debug] = useDebug();
|
||||||
const [mainEntity] = useMainEntity();
|
const [mainEntity] = useMainEntity();
|
||||||
|
|
Loading…
Reference in New Issue
Block a user