Javascript general discussion

Solver said:
Question on JS and the mod system, perhaps @sukritact might now. I've been trying to create an example mod with a new JS file but it doesn't seem to actually be called.

I add a new JS file and put it under UIScripts in the modinfo file. It does get loaded in the ActionGroup as per Modding.log but nothing in the JS file ever gets called, even if it only consists of a console.log. I've never worked with Web frontend techs so I wouldn't trust myself on the JS front either, but a console.log I can probably manage. Sukritact's UI mod overwrites existing files in their entirety, and I wanted to see if there's ideally a way not do that.
Click to expand...
The file *does* need to be imported in your .modinfo:

Code: 
<ActionGroups>
        <ActionGroup id="game-rogues-ui-tweaks-always" scope="game" criteria="always">
            <Properties>
                <LoadOrder>99</LoadOrder>
            </Properties>
            <Actions>
                <ImportFiles>
                    <Item>ui/build-queue/model-build-queue.js</Item>
                    <Item>ui/build-queue/panel-build-queue.js</Item>
                    <Item>ui/production-chooser/panel-production-chooser.js</Item>
                </ImportFiles>
            </Actions>
        </ActionGroup>
    </ActionGroups>

EDIT: I didn't read your message fully. Most JS files at the end have something like this:

JavaScript: 
engine.whenReady.then(() => {
    const updateModel = () => {
        engine.updateWholeModel(BuildQueue);
    };
    engine.createJSModel('g_BuildQueue', BuildQueue);
    BuildQueue.updateCallback = updateModel;
});

This is what registers it with the game. (this is from model-build-queue.js). Another example for panel-build-queue:

JavaScript: 
Controls.define('panel-build-queue', {
    createInstance: PanelBuildQueue,
    description: 'Area for production build queue information.',
    styles: ["fs://game/base-standard/ui/build-queue/panel-build-queue.css"]
});

Both of these blocks register it with the game and propagate it to the game. In this case, it's overriding the PanelBuildQueue default with my modded one.

Gedemon said:
IDK where console.log is writing from UI context.

You could try
Code: 
Automation.log("Hello World !");
which write in its own log, Automation.log
Click to expand...
It seems to print to the console log in the debug pane (there's a tab for it that at least prints the errors I catch, so I assume it's acting as stdout, if not only as stderr)
 
Gedemon said:
IDK where console.log is writing from UI context.

You could try
Code: 
Automation.log("Hello World !");
which write in its own log, Automation.log
Click to expand...
I was able to do logging with console.error() instead of console.log() in UI js. The logs are printed in Logs/UI.log. Classic log level filtering lol.
 
I found that I had to import the files with UIScripts instead of ImportFiles if it's a new js file that has code that needs to be run on load. Ran into this when adding a new lens layer as they have a line of code at the end of the file to register with the lens manager but it was never getting called if I just used ImportFiles. Not sure the difference here but this is working for me.

XML: 
                <ImportFiles>
                    <!-- Replacing existing ui code or new css files (not code) -->
                    <Item>ui/building-placement/building-placement-manager.js</Item>
                    <Item>ui/interface-modes/interface-mode-place-building.js</Item>
                    <Item>ui/lenses/layer/building-placement-layer.js</Item>
                    <Item>ui/lenses/layer/resource-layer.js</Item>
                    <Item>ui/mini-map/panel-mini-map.js</Item>
                    <Item>ui/plot-icon/plot-icons-root.js</Item>
                    <Item>ui/plot-icon/plot-icon-resource.js</Item>
                    <Item>ui/plot-icon/plot-icon-resource.css</Item>
                    <Item>ui/plot-icon/plot-icon-discovery.css</Item>
                    <Item>ui/resource-allocation/screen-resource-allocation.css</Item>
                    <Item>ui/resource-allocation/screen-resource-allocation.js</Item>
                    <Item>ui/resource-allocation/model-resource-allocation.js</Item>
                </ImportFiles>
                <UIScripts>
                    <!-- New UI code that has registration code to run when loaded  -->
                    <Item>ui/lenses/layer/discovery-layer.js</Item>
                    <Item>ui/plot-icon/plot-icon-discovery.js</Item>
                </UIScripts>
 
stlh2opolo said:
(JS/Modding noob here) - Is the below what you mean by "post facto?"

ui/unit-flags/unit-flags.js


Selfishly spent a ton of time today trying to find how to change the unit flag and healthbar sizes because they are just SO small. Finally found it here after zero luck with the .css and unit-flag-manager.js (the scale appears to be there, but it just doesn't work). Seems like there's a few total elements that you have to change to get it to work (icon centering, tiers, and the healthbar size - see player vs IP below)

View attachment 718724
Click to expand...
I was exploring this as well. I found two ways of tackling it.

1. Modify unit-flags.js on this line:
Code: 
unitFlagHealthbar.classList.add('unit-flag__healthbar', 'absolute', 'h-1', 'bg-black');
and change the 'h-1' to 'h-n' where n increases the height by four pixels at a time. However, this only works for players and not independents' health bars. Also, Sukritacts mod uses this file so it wont work with that.

2. Edit unit-flags.css and change the unit-flag__healthbar class from
Code: 
.unit-flag__healthbar {
    left: 0.0555555556rem;
    right: 0.0555555556rem;
    top: 0.2222222222rem;
    background-color: rgba(0, 0, 0, 1);
}

to

Code: 
.unit-flag__healthbar {
    left: 0.0555555556rem;
    right: 0.0555555556rem;
    top: 0.2222222222rem;
      height: 0.3888888888889rem;
    background-color: rgba(0, 0, 0, 1);
}
 
And1210 said:
1. Modify unit-flags.js on this line:
Code: 
unitFlagHealthbar.classList.add('unit-flag__healthbar', 'absolute', 'h-1', 'bg-black');
and change the 'h-1' to 'h-n' where n increases the height by four pixels at a time. However, this only works for players and not independents' health bars. Also, Sukritacts mod uses this file so it wont work with that.
Click to expand...
Quick note, if I'm right that theyre using tailwind (the syntax is exactly the same for classes) changing n to a number will only work for certain values that are defined by the tailwind config. For tiny values it will work, but if you need something specific like 100 pixels, h-25 is likely not gonna work.

If you want to be specifc (like set the height to 3 pixels), use h-[3px]

tailwindcss.com

height - Sizing

Utilities for setting the height of an element.
tailwindcss.com tailwindcss.com
 
And1210 said:
I was exploring this as well. I found two ways of tackling it.

1. Modify unit-flags.js on this line:
Code: 
unitFlagHealthbar.classList.add('unit-flag__healthbar', 'absolute', 'h-1', 'bg-black');
and change the 'h-1' to 'h-n' where n increases the height by four pixels at a time. However, this only works for players and not independents' health bars. Also, Sukritacts mod uses this file so it wont work with that.

2. Edit unit-flags.css and change the unit-flag__healthbar class from
Code: 
.unit-flag__healthbar {
    left: 0.0555555556rem;
    right: 0.0555555556rem;
    top: 0.2222222222rem;
    background-color: rgba(0, 0, 0, 1);
}

to

Code: 
.unit-flag__healthbar {
    left: 0.0555555556rem;
    right: 0.0555555556rem;
    top: 0.2222222222rem;
      height: 0.3888888888889rem;
    background-color: rgba(0, 0, 0, 1);
}
Click to expand...
Good finds - I actually ended up diving pretty deep, was able to edit the health bars to be vertical: https://forums.civfanatics.com/resources/polos-vertical-health-bars.31892/

It did require edits on nearly every one of the unit-flags__healthbar classes, and also the independent-powers.js. I also had to add a line for the recon unit class in unit-flags.js:
Code: 
        else if (unitDefinition.CoreClass == "CORE_CLASS_RECON") {
            this.unitContainer?.classList.add('unit-flag--recon');
        }

I'm following some of the other threads right now about compatibility, hopefully there will be easy ways to integrate in the future.
 
Archanist said:
Quick note, if I'm right that theyre using tailwind (the syntax is exactly the same for classes) changing n to a number will only work for certain values that are defined by the tailwind config. For tiny values it will work, but if you need something specific like 100 pixels, h-25 is likely not gonna work.

If you want to be specifc (like set the height to 3 pixels), use h-[3px]

tailwindcss.com

height - Sizing

Utilities for setting the height of an element.
tailwindcss.com tailwindcss.com
Click to expand...
there are already defined classes for 'h-n' defined in Base/modules/core/ui/themes/default/default.css. I have never used tailwind but am quite familiar with html and css. You are right that not every n value will work, only the ones defined in the file mentioned. I don't believe h-[3px] will work as it is a class name but I could be wrong
 
stlh2opolo said:
Good finds - I actually ended up diving pretty deep, was able to edit the health bars to be vertical: https://forums.civfanatics.com/resources/polos-vertical-health-bars.31892/

It did require edits on nearly every one of the unit-flags__healthbar classes, and also the independent-powers.js. I also had to add a line for the recon unit class in unit-flags.js:
Code: 
        else if (unitDefinition.CoreClass == "CORE_CLASS_RECON") {
            this.unitContainer?.classList.add('unit-flag--recon');
        }

I'm following some of the other threads right now about compatibility, hopefully there will be easy ways to integrate in the future.
Click to expand...
Nice mod! I like the skew you added on the health bars. Interesting that the recon unit didnt have a class and I am also finding it interesting that the independent powers have a separate UI file.

I am wondering if you could have achieved something similar to your mod by applying a rotation transform on .unit-flag__healthbar which would allow you to not have to modify everything else. You would likely have to do some messing about with the positioning as well but something to think on for sure.

It could look something like this (I have not tested this css):
Code: 
.unit-flag__healthbar {
    background-color: rgba(0, 0, 0, .9);
    border-style: solid;
    border-color: rgba(0, 0, 0, .9);
    border-width: 1;
    transform: skewY(30deg) rotate(90deg);
}

Definitely hoping there are easier ways to integrate little snippets of code into the game in the future!
 
And1210 said:
there are already defined classes for 'h-n' defined in Base/modules/core/ui/themes/default/default.css. I have never used tailwind but am quite familiar with html and css. You are right that not every n value will work, only the ones defined in the file mentioned. I don't believe h-[3px] will work as it is a class name but I could be wrong
Click to expand...
Ah, it might not work, but good to know the devs were definitely thinking of tailwind. Nice to know they use Sass, though

_layout.scss
1739621595924.png
 
You must log in or register to reply here.

Similar threads

LilBudyWizer
Best Practices
Replies
0
Views
229
LilBudyWizer
LilBudyWizer
S
Finding function definitions
Replies
3
Views
248
sacamano
S
T
Narrowness Of Game Engine Effects Is Becoming Frustrating, I Think It Bodes Ill For Future Modding
2
Replies
21
Views
905
tman2000
T
G
Mod to increase city size
2
Replies
31
Views
2K
LilBudyWizer
LilBudyWizer
LilBudyWizer
Fun with Imports
Replies
3
Views
164
LilBudyWizer
LilBudyWizer
Back
Top Bottom