i just realised this issue doesn't have the help wanted tag, can I still make this PR?

Of course!
But please use the same formula that's used in game, which I digged up below:

import { lab } from 'd3-color';
import { interpolateLab } from 'd3-interpolate';
import { utils } from 'pixi.js';

export const darkSlateGray = 0x121f1f;

lab(
	interpolateLab(
		utils.hex2string(color),
		utils.hex2string(darkSlateGray),
	)(0.7),
).formatHex()

Can you do it for all the blocks?

should i be using the exact same formula? from what i've seen, the color will turn out to be way darker than expected. for example, this:

versus this:

Otherwise, do you mean to use a similar method like this?

utils.string2hex(
	lab(
		utils.hex2string(color)
	).formatHex(),
)

Oh yeah, that's because in game the inside of the block is very dark, and the line around isn't.

Here is the formula for the line.

export function getLineColor(color) {
	return utils.string2hex(
		lab(utils.hex2string(color))
			.brighter(1.2)
			.formatHex(),
	);
}

You can try adding the line while keeping the dark fill.

If adding the line is too complicated, just play around with the interpolateLab parameter until you get something that looks decent, maybe with lower values like 0.1 or 0.2 instead of 0.7.

gotcha, thanks! I've made the updates to the PR.

Given that the same formula (originally getStrokeColor) is used now across multiple places, I thought that getFillColor is a more accurate name for the method.

thank you! 😄 I've updated just the syntax for now and will continue investigating the bug.

From what I've seen, it seems to be happening when I add the instance.lineStyle method in Polygon.ts . It's strange because it seems to only be happening for the second polygon added, regardless of type.

@getkey what are the steps you took to trigger the bug?

I have tried clearing my level and adding 2 polygons, then exporting them and importing them back in but that works ok for me. I've only been able to replicate the issue by loading in the file you have provided but was wondering what steps were taken to create that particular file.

This is a Pixi.js bug, which I've reported upstream: pixijs/pixijs#8409. Let's wait until it is resolved in Pixi.js.

@enjiruuuu I upgraded to the latest Pixi.js, and surely enough the selection bug is gone. 🙂

One remaining problem: the paints get block styles. Example:

I'd make a new BlockPolygon component that would be used for all blocks, and keep the old Polygon to be used for paints. (In the future there could be even more specialized Polygons like IcePolygon with the ice texture, but I think this is good enough for now 🙂 )

@getkey sweet, thanks for the update!

I've made the fix in the recent commit, do let me know if this is what you meant haha incase I misunderstood something 😬

Mhh I'm having second thoughts, because I realize now that BlockPolygon and Polygon are 90% copy-paste of each other.

You can make Polygon more generic. Make it purely about drawing, and move the logic of what to draw higher in the hierarchy. Let it accept:

• the vertices
• the fill color
• the stroke color
• the stroke width (can be 0)
• the texture (can be null)
• etc

Then you can make 2 React components: Paint.tsx and Block.tsx. They both rely on ModifiablePolygonand know what are the right styles for a paint or a block. I prefer that compared to adding addType to ModifiablePolygon, because in my experience you don't want to cram conditional config in a single component, that will turn in technical debt.

Note: ModifiablePolygon magically forwards the props to Polygon, but let me know if the type-checker gives you trouble.