92 lines
2.3 KiB
TypeScript
92 lines
2.3 KiB
TypeScript
import type { OnitamaScene } from "@/scenes/OnitamaScene";
|
|
|
|
import {
|
|
CELL_SIZE,
|
|
COLORS,
|
|
createHighlightInnerPulseTween,
|
|
createHighlightOuterPulseTween,
|
|
} from "@/config";
|
|
|
|
export interface HighlightRenderOptions {
|
|
x: number;
|
|
y: number;
|
|
}
|
|
|
|
/**
|
|
* Renderer for move target highlight visuals
|
|
* Extracts visual creation logic from HighlightSpawner
|
|
*/
|
|
export class HighlightRenderer {
|
|
constructor(private readonly scene: OnitamaScene) {}
|
|
|
|
/**
|
|
* Render highlight visuals into a container
|
|
* @param container - The container to add visuals to
|
|
* @param options - Highlight rendering options
|
|
*/
|
|
render(
|
|
container: Phaser.GameObjects.Container,
|
|
options: HighlightRenderOptions,
|
|
): void {
|
|
const { x, y } = options;
|
|
|
|
// Set container position
|
|
container.setPosition(x, y);
|
|
|
|
// Outer circle (animated pulse)
|
|
const outerCircle = this.scene.add.circle(
|
|
0,
|
|
0,
|
|
CELL_SIZE / 3,
|
|
COLORS.black,
|
|
0.2,
|
|
);
|
|
container.add(outerCircle);
|
|
|
|
// Inner circle
|
|
const innerCircle = this.scene.add.circle(
|
|
0,
|
|
0,
|
|
CELL_SIZE / 4,
|
|
COLORS.black,
|
|
0.4,
|
|
);
|
|
container.add(innerCircle);
|
|
|
|
// Store references for animation
|
|
container.setData("outerCircle", outerCircle);
|
|
container.setData("innerCircle", innerCircle);
|
|
}
|
|
|
|
/**
|
|
* Create a standalone highlight visual at the specified position
|
|
* Useful for previews or temporary displays
|
|
*/
|
|
createStandalone(x: number, y: number): Phaser.GameObjects.Container {
|
|
const container = this.scene.add.container(x, y);
|
|
this.render(container, { x, y });
|
|
return container;
|
|
}
|
|
|
|
/**
|
|
* Setup pulse animations for highlight circles
|
|
* @param container - The highlight container
|
|
*/
|
|
setupPulseAnimations(container: Phaser.GameObjects.Container): void {
|
|
const outerCircle = container.getData("outerCircle") as
|
|
| Phaser.GameObjects.Arc
|
|
| undefined;
|
|
const innerCircle = container.getData("innerCircle") as
|
|
| Phaser.GameObjects.Arc
|
|
| undefined;
|
|
|
|
if (!outerCircle || !innerCircle) return;
|
|
|
|
// Inner circle pulse
|
|
createHighlightInnerPulseTween(this.scene, [outerCircle, innerCircle]);
|
|
|
|
// Outer circle staggered pulse
|
|
createHighlightOuterPulseTween(this.scene, outerCircle);
|
|
}
|
|
}
|