fix health indicators across browser

[dharapandya85]

Description:
This PR fixes misalignment of hanging creature health indicators, this appears in certain browser (Brave).

Changes:

• Ensured health badge sprite and health text use same X coordinates.
• Used hex footprint math with centering health indicators
• Adjusted vertical placement so health indicators appear consistent above creature sprite

This fixes issue #2088

My wallet address is 0x1834Ad801952DcB73E88700c889C180d13eF919F

[vercel]

@dharapandya85 is attempting to deploy a commit to the FreezingMoon Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
ancientbeast	Ready	Preview	Dec 28, 2025 2:11am

[DreadKnight]

@dharapandya85 Haven't tried this in Brave yet, but it displays really bad in other browsers (like Firefox).

[dharapandya85]

@DreadKnight , I removed sprite.texture.height with sprite.height, and same with width, here,

sprite.x =
			(!player.flipped
				? display['offset-x']
				: HEX_WIDTH_PX * size - sprite.width - display['offset-x']) +
			sprite.width / 2;
		sprite.y = display['offset-y'] + sprite.height;

I created a constant centerX with const centerX = HEX_WIDTH_PX * (size - 0.5) with slightly adding size-0.5, and slightly changed hintGrp.y with this hintGrp.y = -sprite.height-5; replaced +5 with -5 for bottom,

here, we use hardcoded pixel values, which can vary in different browsers,

const healthIndicatorSprite = healthIndicatorGroup.create(
			player.flipped ? 19 : 19 + HEX_WIDTH_PX * (size - 1),
			49,
			'p' + team + '_health',
		);

		const healthIndicatorText = phaser.add.text(
			player.flipped ? HEX_WIDTH_PX * 0.5 : HEX_WIDTH_PX * (size - 0.5),
			63,
			health,
			{
				font: 'bold 15pt Play',
				fill: '#fff',
				align: 'center',
				stroke: '#000',
				strokeThickness: 6,
			},
		);

so, I thought to replace this player.flipped ? 19 : 19 + HEX_WIDTH_PX * (size - 1), with centerX, and 49 with 0, so pill creates at (0,0), same with healthIndicatorText, I replaced player.flipped ? HEX_WIDTH_PX * 0.5 : HEX_WIDTH_PX * (size - 0.5), with centerX, and 63 with 14.
Can you guide me why a certain brower like Firefox, display this, and how can I correct the pill or health indicators placement,

[DreadKnight]

@dharapandya85 Why is this marked "ready for review" with no new patches that might fix? 🐻

I see; I would have tried a totally different approach, like browser specific CSS tweak for Brave.

This is a rather small issue that might just go away on its own, so don't spend too much on it.
Feel free to poke at something else if this one is not working out...

[dharapandya85]

Please check now. I could not see feedback earlier, so I marked it for review, apologies.

[DreadKnight]

@dharapandya85 Way better, text just a tad above in Firefox etc. as you can see:

Also, comments lack style consistency with the rest of the code base 🐻

[DreadKnight]

@dharapandya85 Almost there. Still 1-2 pixels too high and having inconsistent comments, should be like "// This".
Feel free to mark ready for review when you think it's done, ideally after some testing 🐻

[dharapandya85]

Please check now.

[DreadKnight]

@dharapandya85 There's a space between // and first non-code commented capitalized letter 🐻

[dharapandya85]

I forgot there is a space between // and comment, so I formatted the comments.