103 lines
3.1 KiB
JavaScript
103 lines
3.1 KiB
JavaScript
import {Container} from '@pixi/display';
|
|
import {Graphics} from '@pixi/graphics';
|
|
import {PixiComponent} from '@pixi/react';
|
|
import {useEffect, useState} from 'react';
|
|
|
|
const tileSize = {x: 16, y: 16};
|
|
|
|
const TargetingGhostInternal = PixiComponent('TargetingGhost', {
|
|
create: () => {
|
|
// Solid target square.
|
|
const target = new Graphics();
|
|
target.lineStyle(1, 0xffffff);
|
|
target.drawRect(0.5, 0.5, tileSize.x, tileSize.y);
|
|
target.pivot = {x: tileSize.x / 2, y: tileSize.y / 2};
|
|
// Inner spinny part.
|
|
const targetInner = new Graphics();
|
|
targetInner.alpha = 0.6;
|
|
targetInner.lineStyle(3, 0x333333);
|
|
targetInner.beginFill(0xdddddd);
|
|
targetInner.pivot = {x: tileSize.x / 2, y: tileSize.y / 2};
|
|
targetInner.drawRect(0, 0, tileSize.x, tileSize.y);
|
|
targetInner.position.x = 0.5;
|
|
targetInner.position.y = 0.5;
|
|
// ...
|
|
const container = new Container();
|
|
container.addChild(target, targetInner);
|
|
return container;
|
|
},
|
|
applyProps: (container, oldProps, {x, y, radians}) => {
|
|
container.position.set(x, y);
|
|
container.children[1].rotation = radians / 4;
|
|
container.children[1].scale.set(0.3 + 0.2 * (Math.cos(radians) + 1));
|
|
},
|
|
})
|
|
|
|
export default function TargetingGhost({entity, projection}) {
|
|
const [radians, setRadians] = useState(0);
|
|
useEffect(() => {
|
|
const handle = setInterval(() => {
|
|
setRadians((radians) => (radians + 0.2) % (Math.PI * 2))
|
|
}, 50);
|
|
return () => {
|
|
clearInterval(handle);
|
|
};
|
|
}, []);
|
|
const {Direction: {direction}, Position: {x, y}} = entity;
|
|
const tileX = x - (x % tileSize.x);
|
|
const tileY = y - (y % tileSize.y);
|
|
let startX = tileX + (tileSize.x / 2);
|
|
let startY = tileY + (tileSize.y / 2);
|
|
switch (direction) {
|
|
case 0:
|
|
startX += projection.distance[1] * tileSize.x;
|
|
startY -= projection.distance[0] * tileSize.y;
|
|
break;
|
|
case 1:
|
|
startX += projection.distance[0] * tileSize.x;
|
|
startY += projection.distance[1] * tileSize.y;
|
|
break;
|
|
case 2:
|
|
startX -= projection.distance[1] * tileSize.x;
|
|
startY += projection.distance[0] * tileSize.y;
|
|
break;
|
|
case 3:
|
|
startX -= projection.distance[0] * tileSize.x;
|
|
startY -= projection.distance[1] * tileSize.y;
|
|
break;
|
|
}
|
|
const ghosts = [];
|
|
for (const row in projection.grid) {
|
|
const columns = projection.grid[row];
|
|
for (const column in columns) {
|
|
const targeted = projection.grid[row][column];
|
|
if (targeted) {
|
|
let axe;
|
|
switch (direction) {
|
|
case 0:
|
|
axe = [column, row];
|
|
break;
|
|
case 1:
|
|
axe = [-row, column];
|
|
break;
|
|
case 2:
|
|
axe = [-column, -row];
|
|
break;
|
|
case 3:
|
|
axe = [row, -column];
|
|
break;
|
|
}
|
|
ghosts.push(
|
|
<TargetingGhostInternal
|
|
key={JSON.stringify({column, row})}
|
|
x={startX + (tileSize.x * parseInt(axe[0]))}
|
|
y={startY + (tileSize.y * parseInt(axe[1]))}
|
|
radians={radians}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
}
|
|
return <>{ghosts}</>;
|
|
}
|