pink-it plugin

[modukon]

Features:

• can automatically destroy all planets inside the pink circle (using dropped bomb from the pink ship)
• shows a list of all pink circles in view and their owners/operators
• click any planet to see how big a pink circle would be if a bomb was dropped on it

[netlify]

✅ Deploy Preview for dfares-plugins ready!

Name	Link
🔨 Latest commit	057ccff
🔍 Latest deploy log	https://app.netlify.com/sites/dfares-plugins/deploys/65be7361c040190007137dc2
😎 Deploy Preview	https://deploy-preview-2--dfares-plugins.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[deuchainn]

Suggested change

	import { getPlayerColor } from "https://cdn.skypack.dev/@darkforest_eth/procedural";
	import { getPlayerColor } from "https://cdn.skypack.dev/@dfares/procedural";

1. imports should be at the top of the file
2. import the from @dfares rather than the @darkforest_eth registry.

[deuchainn]

Suggested change

	function FullButtonLine(buttons) {
	let table = document.createElement("table");
	table.style.textAlign = "center";
	table.style.width = "100%";
	table.style.tableLayout = "fixed"; // to make all buttons the same width
	for (let i=0; i < buttons.length; ++i) {
	let b = buttons[i];
	let td = document.createElement("td");
	let ele = b.element ? b.element : b;
	ele.style.border = "1px solid white";
	ele.style.width = "100%";
	td.style.width = "100%"; // to make all buttons the same width
	td.style.padding = "5px";
	if (i !== 0) td.style.paddingLeft = "0px";
	td.append(ele);
	table.append(td);
	}
	return table;
	}
	function FullButtonLine(buttons) {
	const table = document.createElement("table");
	table.style.textAlign = "center";
	table.style.width = "100%";
	table.style.tableLayout = "fixed"; // to make all buttons the same width
	let first = true;
	for (const button of buttons) {
	const td = document.createElement("td");
	const ele = b.element ? b.element : b;
	ele.style.border = "1px solid white";
	ele.style.width = "100%";
	td.style.width = "100%"; // to make all buttons the same width
	td.style.padding = "5px";
	if (!first) {
	td.style.paddingLeft = "0px";
	}
	td.append(ele);
	table.append(td);
	first = false;
	}
	return table;
	}

[deuchainn]

Suggested change

	var tr = document.createElement('tr');
	for (var str of strArr) {
	var th = document.createElement('th');
	const tr = document.createElement('tr');
	for (const str of strArr) {
	const th = document.createElement('th');

[deuchainn]

Suggested change

	var td = document.createElement('td');
	td.style.border = "1px solid white";
	td.innerHTML = text;
	if (width) td.width = width+"px";
	if (color) td.style.color = color;
	if (center) td.style["text-align"] = "center";
	tr.appendChild(td);
	return td;
	const td = document.createElement('td');
	td.style.border = "1px solid white";
	td.innerHTML = text;
	if (width) td.width = `${width}px`;
	if (color) td.style.color = color;
	if (center) td.style["text-align"] = "center";
	tr.appendChild(td);
	return td;

[deuchainn]

Suggested change

	}
	function percentToStrHexColor(percent) {
	}
	function percentToStrHexColor(percent) {

[deuchainn]

Suggested change

	}
	function getPlanetRingRadius(planet, multiplier=1.3, min=minDrawPlanetRadius) {
	}
	function getPlanetRingRadius(planet, multiplier=1.3, min=minDrawPlanetRadius) {

spacing between functions

[deuchainn]

Suggested change

	let radius = viewport.worldToCanvasDist(ui.getRadiusOfPlanetLevel(planet.planetLevel));
	radius *= multiplier;
	if (radius < min) radius = min;
	return radius;
	const radius = viewport.worldToCanvasDist(ui.getRadiusOfPlanetLevel(planet.planetLevel)) * multiplier;
	return radius < min
	? min
	: radius;

nitpick could be simplifed like this.

[deuchainn]

Suggested change

	let radius = getPlanetRingRadius(planet);
	let animationDuration = 1500;
	animationDuration *= (1 - level*0.1);
	var millis = Date.now();
	for (var i=0; i<=level; ++i) {
	drawRingAnimation(ctx, planetX, planetY, radius, millis, animationDuration, color, reverse);
	millis += animationDuration / (level+1);
	}
	const radius = getPlanetRingRadius(planet);
	const animationDuration = 1500 * (1 - level * 0.1);
	let millis = Date.now();
	for (let i = 0; i <= level; ++i) {
	drawRingAnimation(ctx, planetX, planetY, radius, millis, animationDuration, color, reverse);
	millis += animationDuration / (level+1);
	}

1. both radius and animationDuration are constants that never changed
2. Don't mind the ++i still the i++ could also be used.
3. rather use let over var keyword.

[deuchainn]

Suggested change

	let selectedPlanet = ui.getSelectedPlanet();
	// if (selectedPlanet && pzHoveringInList.locationId === selectedPlanet.locationId) return;

The selectedPlanet is not used here for anything.

[deuchainn]

Suggested change

	let color = "hsla(300, 100%, 40%, 0.7)";
	const color = "hsla(300, 100%, 40%, 0.7)";

immutable variable here.

[deuchainn]

@modukon i created a PR onto your PR here, rather than keep adding minor comments.

[modukon]

@modukon i created a PR onto your PR here, rather than keep adding minor comments.

i merged it, i hope that worked, if i have to do anything else tell me

[deuchainn]

LGTM! 🚢 it

[deuchainn]

@fromddy looks good to me i don't have permissions to merge but i assume you or @Stx69 can merge?