RoomVisual update for screeps that draws structures and CostMatrix

index.d.ts

type RoomVisualOptions = {
  color?: string,
  opacity?: number
}


interface RoomVisual {
  roads: number[][];

  connectRoads(opts?: RoomVisualOptions): void;
  structure(x: number, y: number, type: string, opts?: RoomVisualOptions): void;
  costMatrix(costMatrix: CostMatrix, showValues?: boolean): void;
}

RoomVisual.prototype.ts

const colors = {
  dark: "#181818",
  gray: "#555555",
  light: "#AAAAAA",
  outline: "#8FBB93",
  power: "#f4331f ",
  road: "#666",
};
const dirs: number[][] = [[-1, -1], [1, -1], [-1, 1], [1, 1], [0, -1], [-1, 0], [0, 1], [1, 0]];

RoomVisual.prototype.connectRoads = function (this: RoomVisual, opts: RoomVisualOptions = {}) {
  if (this.roads === undefined) {
    return;
  }

  let color = opts.color || colors.road || "white";

  this.roads.forEach((road) => {
    for (let i = 0; i < dirs.length; i++) {
      let coord = [road[0] + dirs[i][0], road[1] + dirs[i][1]];

      if (_.some(this.roads, (r) => r[0] === coord[0] && r[1] === coord[1])) {
        this.line(road[0], road[1], coord[0], coord[1], {
          color: color,
          opacity: opts.opacity || 1,
          width: 0.25,
        });
      }
    }
  });
};

function scale(x: number, origMin: number, origMax: number, min: number, max: number) {
  return (max - min) / (origMax - origMin) * (x - origMax) + max;
}

/**
 * Draw a {@link PathFinder.CostMatrix} visualization in the room. By default it draws white circles
 * but you can pass the showValues = true to make it draw the values as text.
 * @param costMatrix
 * @param showValues
 */
RoomVisual.prototype.costMatrix = function (this: RoomVisual, costMatrix: CostMatrix, showValues: boolean = false) {
  const color: string = "#ffffff";
  var x, y, v;
  var max = 1;
  var min = 255;
  for (y = 0; y < 50; ++y) {
    for (x = 0; x < 50; ++x) {
      v = costMatrix.get(x, y);
      max = Math.max(max, v);
      min = Math.min(min, v);
    }
  }
  for (y = 0; y < 50; ++y) {
    for (x = 0; x < 50; ++x) {
      v = costMatrix.get(x, y);
      if (v > 0) {
        if (showValues) {
          const size = scale(v, min, max, 0.3, 1);
          const opacity = scale(v, min, max, 0.3, 3);
          this.text(v + "", x, y, {opacity, size});
        } else {
          const radius = scale(v, min, max, 0.01, 0.5);
          this.circle(x, y, {radius, fill: color, opacity: 1});
        }
      }
    }
  }
};

RoomVisual.prototype.structure =
  function (this: RoomVisual, x: number, y: number, type: string, opts: RoomVisualOptions = {}): void {

    opts = Object.assign({opacity: 1}, opts);

    switch (type) {
      case STRUCTURE_CONTAINER:
        this.rect(x - 0.225, y - 0.3, 0.45, 0.6, {
          fill: "yellow",
          opacity: opts.opacity,
          stroke: colors.dark,
          strokeWidth: 0.10,
        });
        break;
      case STRUCTURE_EXTENSION:
        this.circle(x, y, {
          fill: colors.dark,
          opacity: opts.opacity,
          radius: 0.5,
          stroke: colors.outline,
          strokeWidth: 0.05,
        });
        this.circle(x, y, {
          fill: colors.gray,
          opacity: opts.opacity,
          radius: 0.35,
        });
        break;

      case STRUCTURE_LAB:
        this.circle(x, y - 0.025, {
          fill: colors.dark,
          opacity: opts.opacity,
          radius: 0.55,
          stroke: colors.outline,
          strokeWidth: 0.05,
        });
        this.circle(x, y - 0.025, {
          fill: colors.gray,
          opacity: opts.opacity,
          radius: 0.40,
        });
        this.rect(x - 0.45, y + 0.3, 0.9, 0.25, {
          fill: colors.dark,
          opacity: opts.opacity,
          stroke: undefined,
        });
      {
        let box: [number, number][] = [
          [-0.45, 0.3],
          [-0.45, 0.55],
          [0.45, 0.55],
          [0.45, 0.3],
        ];
        box = relPoly(x, y, box);
        this.poly(box, {
          opacity: opts.opacity,
          stroke: colors.outline,
          strokeWidth: 0.05,
        });
      }
        break;

      case STRUCTURE_LINK: {
        let outer: [number, number][] = [
          [0.0, -0.5],
          [0.4, 0.0],
          [0.0, 0.5],
          [-0.4, 0.0],
        ];
        let inner: [number, number][] = [
          [0.0, -0.3],
          [0.25, 0.0],
          [0.0, 0.3],
          [-0.25, 0.0],
        ];

        outer = relPoly(x, y, outer);
        inner = relPoly(x, y, inner);
        outer.push(outer[0]);
        inner.push(inner[0]);
        this.poly(outer, {
          fill: colors.dark,
          opacity: opts.opacity,
          stroke: colors.outline,
          strokeWidth: 0.05,
        });
        this.poly(inner, {
          fill: colors.gray,
          opacity: opts.opacity,
          stroke: undefined,
        });
        break;
      }

      case STRUCTURE_ROAD:
        this.circle(x, y, {
          fill: colors.road,
          opacity: opts.opacity,
          radius: 0.125,
          stroke: undefined,
        });

        if (this.roads === undefined) {
          this.roads = [];
        }

        this.roads.push([x, y]);
        break;

      case STRUCTURE_SPAWN:
        this.circle(x, y, {
          fill: colors.dark,
          opacity: opts.opacity,
          radius: 0.70,
          stroke: "#CCCCCC",
          strokeWidth: 0.10,
        });
        break;

      case STRUCTURE_STORAGE:
        this.rect(x - 0.425, y - 0.55, 0.85, 1.1, {
          fill: "yellow",
          opacity: opts.opacity,
          stroke: colors.light,
          strokeWidth: 0.10,
        });
        break;

      case STRUCTURE_TERMINAL: {
        let outer: [number, number][] = [
          [0.0, -0.8],
          [0.55, -0.55],
          [0.8, 0.0],
          [0.55, 0.55],
          [0.0, 0.8],
          [-0.55, 0.55],
          [-0.8, 0.0],
          [-0.55, -0.55],
        ];
        let inner: [number, number][] = [
          [0.0, -0.65],
          [0.45, -0.45],
          [0.65, 0.0],
          [0.45, 0.45],
          [0.0, 0.65],
          [-0.45, 0.45],
          [-0.65, 0.0],
          [-0.45, -0.45],
        ];
        outer = relPoly(x, y, outer);
        inner = relPoly(x, y, inner);
        outer.push(outer[0]);
        inner.push(inner[0]);
        this.poly(outer, {
          fill: colors.dark,
          opacity: opts.opacity,
          stroke: colors.outline,
          strokeWidth: 0.05,
        });
        this.poly(inner, {
          fill: colors.light,
          opacity: opts.opacity,
          stroke: undefined,
        });
        this.rect(x - 0.45, y - 0.45, 0.9, 0.9, {
          fill: colors.gray,
          opacity: opts.opacity,
          stroke: colors.dark,
          strokeWidth: 0.1,
        });
        break;
      }

      case STRUCTURE_TOWER:
        this.circle(x, y, {
          fill: colors.dark,
          // fill: "transparent",
          opacity: opts.opacity,
          radius: 0.6,
          stroke: colors.outline,
          strokeWidth: 0.05,
        });
        this.rect(x - 0.4, y - 0.3, 0.8, 0.6, {
          fill: colors.gray,
          opacity: opts.opacity,
        });
        this.rect(x - 0.2, y - 0.8, 0.4, 0.45, {
          fill: colors.light,
          opacity: opts.opacity,
          stroke: colors.dark,
          strokeWidth: 0.07,
        });
        break;
      /*
       case STRUCTURE_POWER_SPAWN:
       this.circle(x, y, {
       fill: "red",
       opacity: opts.opacity,
       radius: 0.70,
       stroke: "#CCCCCC",
       strokeWidth: 0.10,
       });
       break;
       */
      case STRUCTURE_POWER_SPAWN:
        this.circle(x, y, {
          fill: colors.dark,
          opacity: opts.opacity,
          radius: 0.70,
          stroke: "#CCCCCC",
          strokeWidth: 0.10,
        });
        this.circle(x, y, {
          fill: colors.dark,
          opacity: opts.opacity,
          radius: 0.65,
          stroke: colors.power,
          strokeWidth: 0.10,
        });
        this.circle(x, y, {
          fill: colors.dark,
          opacity: opts.opacity,
          radius: 0.45,
          stroke: colors.power,
          strokeWidth: 0.15,
        });
        break;
      case STRUCTURE_NUKER:
        let outline = [
          [0, -1],
          [-0.47, 0.2],
          [-0.5, 0.5],
          [0.5, 0.5],
          [0.47, 0.2],
          [0, -1],
        ] as [number, number][];
        outline = relPoly(x, y, outline);
        this.poly(outline, {
          fill: colors.dark,
          opacity: opts.opacity,
          stroke: colors.outline,
          strokeWidth: 0.05,
        });
        let inline = [
          [0, -.80],
          [-0.40, 0.2],
          [0.40, 0.2],
          [0, -.80],
        ] as [number, number][];
        inline = relPoly(x, y, inline);
        this.poly(inline, {
          fill: colors.gray,
          opacity: opts.opacity,
          stroke: colors.outline,
          strokeWidth: 0.01,
        });

      case STRUCTURE_OBSERVER:
        this.circle(x, y, {
          fill: colors.dark,
          opacity: opts.opacity,
          radius: 0.45,
          stroke: colors.outline,
          strokeWidth: 0.07,
        });
        this.circle(x, y + .2, {
          fill: colors.outline,
          opacity: opts.opacity,
          radius: 0.2,
          stroke: undefined,
        });
        break;
      default:
        this.circle(x, y, {
          fill: colors.light,
          opacity: opts.opacity,
          radius: 0.35,
          stroke: colors.dark,
          strokeWidth: 0.20,
        });
        break;
    }
  };

function relPoly(x: number, y: number, poly: [number, number][]): [number, number][] {
  return poly.map((p) => {
    p[0] += x;
    p[1] += y;
    return p;
  });
}