createPlanetSystem.ts

import { defineSystem } from "@latticexyz/recs";
import { PhaserLayer } from "../createPhaserLayer";

export const createPlanetSystem = (layer: PhaserLayer) => {
  const {
    world,
    scenes: {
      Main: { objectPool, input },
    },
  } = layer;

  // Store the start and end positions of the drag
  let startPoint: { x: number; y: number } | null = null;
  let startPlanet: string | null = null;

  const line = objectPool.get(`AttackLine`, "Line");

  // Create planets using rectangles
  const planet1 = objectPool.get("Planet1", "Rectangle");
  planet1.setComponent({
    id: "shape",
    once: (rect) => {
      rect.setSize(32, 32);
      rect.setFillStyle(0x3498db);
      rect.setPosition(-32 * 10, -32 * 8);
    },
  });

  const planet2 = objectPool.get("Planet2", "Rectangle");
  planet2.setComponent({
    id: "shape",
    once: (rect) => {
      rect.setSize(32, 32);
      rect.setFillStyle(0x2ecc71);
      rect.setPosition(-32 * 6, 32 * 2);
    },
  });

  const planet3 = objectPool.get("Planet3", "Rectangle");
  planet3.setComponent({
    id: "shape",
    once: (rect) => {
      rect.setSize(32, 32);
      rect.setFillStyle(0xe74c3c);
      rect.setPosition(-32 * 3, -32 * 5);
    },
  });

  // Input handling for drag and drop
  input.pointerdown$.subscribe((event) => {
    const { worldX, worldY } = event.pointer;

    // Check if the pointer is down on any of the planets
    if (isOverlapping(planet1, worldX, worldY)) {
      startPoint = { x: worldX, y: worldY };
      startPlanet = "Planet1";
    } else if (isOverlapping(planet2, worldX, worldY)) {
      startPoint = { x: worldX, y: worldY };
      startPlanet = "Planet2";
    } else if (isOverlapping(planet3, worldX, worldY)) {
      startPoint = { x: worldX, y: worldY };
      startPlanet = "Planet3";
    }
  });

  input.pointerup$.subscribe((event) => {
    const { worldX, worldY } = event.pointer;

    if (startPoint && startPlanet) {
      let endPlanet = null;

      // Check if the pointer is released over any of the planets
      if (isOverlapping(planet1, worldX, worldY)) {
        endPlanet = "Planet1";
      } else if (isOverlapping(planet2, worldX, worldY)) {
        endPlanet = "Planet2";
      } else if (isOverlapping(planet3, worldX, worldY)) {
        endPlanet = "Planet3";
      }

      if (endPlanet && endPlanet !== startPlanet) {
        // Draw a line between the two planets
        line.setComponent({
          id: "line",
          once: (line) => {
            line.isStroked = true;
            line.setFillStyle(0xff00ff);
            line.geom.x1 = startPoint.x;
            line.geom.y1 = startPoint.y;
            line.geom.x2 = worldX;
            line.geom.y2 = worldY;
          },
        });

        // Call the function to print the connected planets
        console.log(`Connected ${startPlanet} to ${endPlanet}`);
      }
    }

    // Reset start point and planet after the drag is complete
    startPoint = null;
    startPlanet = null;
  });

  // Utility function to check if a point is overlapping a planet
  const isOverlapping = (planet: any, x: number, y: number): boolean => {
    const planetWidth = 32;
    const planetHeight = 32;
    return (
      x >= planet.position.x &&
      x <= planet.position.x + planetWidth &&
      y >= planet.position.y &&
      y <= planet.position.y + planetHeight
    );
  };
};