cha0s/silphius
1
1
Fork 0
Code Issues 11 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: components

Browse Source
This commit is contained in:
cha0s 2024-07-31 10:16:21 -05:00
parent 170cd4e0d1
commit 2997370e3b
3 changed files with 50 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
app/react/components/pixi/aabb.jsx Normal file
View 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
View 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);

44
app/react/components/pixi/entity.jsx
View File

@ -1,50 +1,14 @@
import {Container, Graphics} from '@pixi/react';
import {memo, useCallback} from 'react';
import {Container} from '@pixi/react';
import {memo} from 'react';
import {useDebug} from '@/react/context/debug.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 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}) {
const [debug] = useDebug();
const [mainEntity] = useMainEntity();