Misaligned Commander Promotion Level When Increasing Font Size

[MiRai]

I've been attempting to make some edits to some existing mods for personal use. I know nothing about actual code when it comes to JS or CSS, and so I've sorta been hacking my way through combining Racington's Unit Icon Size and Polo's Vertical Health Bars. Needless to say, I've been mostly successful , but I'm running into one final issue that I cannot figure out.

Issue: After increasing the size of the commander's promotion level text, it is no longer centered on the unit icon.
I've provided a rough overview for what is happening in the image at the bottom of the post to go along with what I've written (including links to the modified code), but here's a quick way to get to where I'm at:

• In ..\Sid Meier's Civilization VII\Base\modules\base-standard\ui\unit-flags\
• unit-flags.css - Increase visibility of commander's promotion level:
  • unit-flags.css, line 171 , unit-flag__promotion-number:
    • Set the topvalue to something slightly larger (1.5rem).
    • Add text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
• unit-flags.js - Increase scale of unit icons:
  • unit-flags.js, line 70
    • Set 'w-12', 'h-12'to something larger (18 or 20).
    • This will mess up the tier graphic, but we're not concerned about that because I already have a solution.
    • Note: You may need to further increase the top setting in the CSS file to get a better view of the commander's promotion level after bumping up the size (3.5rem).
• unit-flags.css - Increase font size of commander promotion level:
  • unit-flags.css, line 171 , unit-flag__promotion-number:
    • Add font-size: 32px;
    • Note: There's more than one way to increase the font size, so use whatever works for you.

Here's where we begin to see the issue... the level text is becoming un-centered on the double-digit number, but if you continue to increase the font size (e.g. 64px), the single-digit number will also drift away from the center. It's as if the element that handles (or contains) the text is scaling from the upper left, rather than from the center.

I'll add that you can further control the promotion level in unit-flags.js, line 105, where arguments, such as 'text-center' , are assigned, but I don't know anything about JS to make any additions here.

Regardless, this has been driving me crazy for the past day as I furiously search the internet, looking for some random code that may or may not fix this issue, and I've made zero progress. Again, I know nothing about actual programming, and I probably could've figured this out if I did, but at this point I'm stuck, and any help would be greatly appreciated.


If you wish to review the code changes I've made above, here they are.
unit-flags.css - https://pastebin.com/RiwzCxiC
unit-flags.js - https://pastebin.com/aEYQcinw

 

[Archanist]

I think the issue is that a lot of these components are absolute positioning, so they get placed on a certain position from the origin rather than scaling with their parent component. You may want to try making the component "block" or "relative"

Re: Promotion Level, try adding the class "bottom-1" and "left-1/2" (these are tailwind css classes which is what firaxis based their system off of, I'm not sure if it will work 100% here but it should give an idea).

For the text, put it in a container with the classes "w-full" and "text-center". Might get it closer to what you want.

Disclaimer: I havent tried any js UI changes to the game yet, but I do software dev for my job and it's really similar to this.

 

[MiRai]

I appreciate the reply, but unfortunately, I'm still unable to find a combination that fixes this (correction: found a fix down below). Admittedly, I've not done a great job at documenting which combinations I used, but here are two that I remember (and have screenshots of).

Added 'w-full' and 'bg-black' so that we can check if the container is centered (and it is centered, I measured).

Changed 'absolute' to 'relative' and removed 'text-center'

Using 'block' seemed to break the container entirely, and I also tossed in 'flex', 'flex-col', 'justify-center', and 'items-center' along the way, even though I don't know what they do or if they conflict with or override anything else. In addition, when 'text-center' is not being used, you can use the CSS to center the text with text-align: center;, but the result isn't any different than what the JS does (the promotion level text is still misaligned).

----SOLUTION----

However, a solution has been found while writing out this post! It's something I considered early on as an attempt to just brute force it, but felt like it should be explored as a last resort.

const numLevels = this.unit.Experience?.getLevel;
    if (numLevels > 9) {
        unitFlagPromotionNumber.style.right = '55%'; // Set Horizontal
        unitFlagPromotionNumber.style.bottom = '50%'; // Set Vertical
        unitFlagPromotionNumber.style.transform = 'translate(50%,50%)'; // Apply Center By Percent (X,Y)
    }

I stole this.unit.Experience?.getLevel from further down in the JS file and guessed at modifying it based on some other code that Racington had used, and it actually worked.

Now I can actually go back to playing the game.