Skip to content

Instantly share code, notes, and snippets.

@Ramblurr

Ramblurr/RoomVisual.prototype.ts

Last active April 19, 2017 06:16
Show Gist options
  • Save Ramblurr/13b65a64bdc62f274924c37eecc3d4fa to your computer and use it in GitHub Desktop.
Save Ramblurr/13b65a64bdc62f274924c37eecc3d4fa to your computer and use it in GitHub Desktop.
Download ZIP
RoomVisual update for screeps that draws structures and CostMatrix
Raw
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;
}
Raw
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;
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment