Javascript general discussion

[SeelingCat]

Anyone have any ideas on why the js files seem to be duplicated as ts files?

(Also if you find the command for changing city [or leader or civ I guess] names, I'll love you forever)

 

[Gedemon]

Anyone have any ideas on why the js files seem to be duplicated as ts files?

(Also if you find the command for changing city [or leader or civ I guess] names, I'll love you forever)

good question, no idea why both are here.

and they are sometime a bit different in what they are supposed to do (for example some map scripts)

for those I edited it's the .js that was loaded.

for the difference itself, see

Difference between TypeScript and JavaScript - GeeksforGeeks

Your All-in-One Learning Portal: GeeksforGeeks is a comprehensive educational platform that empowers learners across domains-spanning computer science and programming, school education, upskilling, commerce, software tools, competitive exams, and more.

www.geeksforgeeks.org

and if you want to test things in scripts, there is no console, but I think

console.log(text);

write into the Scripting.log file in "\AppData\Local\Firaxis Games\Sid Meier's Civilization VII\Logs"

 

[stormernaut]

good question, no idea why both are here.

and they are sometime a bit different in what they are supposed to do (for example some map scripts)

for those I edited it's the .js that was loaded.

for the difference itself, see

Difference between TypeScript and JavaScript - GeeksforGeeks

Your All-in-One Learning Portal: GeeksforGeeks is a comprehensive educational platform that empowers learners across domains-spanning computer science and programming, school education, upskilling, commerce, software tools, competitive exams, and more.

www.geeksforgeeks.org

and if you want to test things in scripts, there is no console, but I think



write into the Scripting.log file in "\AppData\Local\Firaxis Games\Sid Meier's Civilization VII\Logs"

I am a software engineer and I primarily do frontend web development, the .ts (TypeScript) files are the source files (the files the developers actually wrote the code in, typescript adds type safety to your javascript code) and they get transpiled into javascript which is why you see the .js files. You should be able to technically update the typescript files, you would just need to transpile the typescript file to generate a new .js file with the updates you made. I won't get into the details there though as you would need node js on your machine and install the packages nessecary to do the transpiling. But if you want to do quick updates, you can directly update the javascript file, reload the game, and your changes will (i guess i should say 'should') apply. If you are going to update any of the files though I would git initialize the folder containing the files so you can roll back any changes you made or see the changes you made.

 

[Gedemon]

I am a software engineer and I primarily do frontend web development, the .ts (TypeScript) files are the source files (the files the developers actually wrote the code in, typescript adds type safety to your javascript code) and they get transpiled into javascript which is why you see the .js files. You should be able to technically update the typescript files, you would just need to transpile the typescript file to generate a new .js file with the updates you made. I won't get into details there though you would need node js on your machince and install packages to do the transpiling. But if you want to do quick updates, you can directly update the javascript file, reload the game, and your changes will (i guess i should say 'should') apply. If you are going to update any of the files though I would git initialize the folder containing the files so you can roll back any changes you made or see the changes you made.

thanks !

they can also be changed using mods, which is the best way to release them publicly.

 

[Gorbles]

Anyone have any ideas on why the js files seem to be duplicated as ts files?

(Also if you find the command for changing city [or leader or civ I guess] names, I'll love you forever)

TS is TypeScript, which is (effectively) a development aid / complement to vanilla JavaScript. If their pipeline is anything like I'd expect it to be, the TS files will either be transpiled into plain JS, or they'll be type-stripped into plan JS (depending on how many JavaScript feature sets they're running with).

 

[cabelhigh12]

Any idea why they switched from Lua to JS? Is JS more flexible? Or can maybe JS is just more widely used than Lua?

 

[The_J]

Any idea why they switched from Lua to JS? Is JS more flexible? Or can maybe JS is just more widely used than Lua?

I think we can only speculate.
Most likely it depends on what is integrated in the engine, and that's the only real point.
In general, there's probably a bigger user base for javascript and it's easier to get qualified personnell.

 

[RogueAustralian]

I think we can only speculate.
Most likely it depends on what is integrated in the engine, and that's the only real point.
In general, there's probably a bigger user base for javascript and it's easier to get qualified personnell.

I think your point here largely nails it - Javascript / Typescript is either perennially the first or second most popular programming language, and thus, fairly easy to hire for. For me personally, it encouraged me to get into modding Civ 7 when I found that out.

For my part, I'm working on a UI mod (me and everyone else ). Was poking around and turns out Firaxis has implemented a lot of the logic for many of the fixes, just not on the UI. An example I've found is that they have added support for moving items down in the production queue, even if it's not supported on the front end yet. Have a litany of other things too, but I figured that was the one that was irritating me today.

 

[RogueAustralian]

So do we think that the full CSS spec is supported in the UI? It seems to use a DOM renderer for many of the elements. I wonder if CSS animations are supported?

EDIT: Transforms, at least, are. I'll test animations next, but I think there's a full blown DOM renderer and CSS spec is fully supported. Never modded 5 or 6, so I don't know if this is news to anyone else, but it's cool to me.

 

[Gorbles]

I think we can only speculate.
Most likely it depends on what is integrated in the engine, and that's the only real point.
In general, there's probably a bigger user base for javascript and it's easier to get qualified personnell.

I think your point here largely nails it - Javascript / Typescript is either perennially the first or second most popular programming language, and thus, fairly easy to hire for. For me personally, it encouraged me to get into modding Civ 7 when I found that out.

It depends how you phrase the following:

JavaScript is a frontend scripting language. LUA is a generalised (and as far as I'm aware - Turing-complete) scripting language. A lot of places implement a subset of the LUA language set.

(case in point I'm familiar with - Relic's RTS games use LUA as a file extension but they implement a subset of a version of LUA as SCaR - SCripting At Relic. They also use this for earlier versions of their game data files - the layer Civ exposes as XML)

It's 2025. JavaScript has multiple modern standards with extensive browser support. Only cutting-edge standards (and whatever Google pushes to advance Chrome at the expense of open source browsers) have wonky support.

It's not necessarily that there's a wider hiring base (as The_J notes - he's right; there is), but it's more that modern frontend pipelines are JS-oriented. I'm already looking at the CSS files that accompany the JS pipeline Firaxis are using (at least this time around). Again, part of the frontend stack.

So do we think that the full CSS spec is supported in the UI? It seems to use a DOM renderer for many of the elements. I wonder if CSS animations are supported?

EDIT: Transforms, at least, are. I'll test animations next, but I think there's a full blown DOM renderer and CSS spec is fully supported. Never modded 5 or 6, so I don't know if this is news to anyone else, but it's cool to me.

It really depends on the transpile target. We don't have access to Firaxis' pipeline, so we don't know what version of the ECMAScript spec they're targeting (yet).

(at my work we recently moved from ES2016 to esnext - which is what, ES10 or 11? - in-house due to constraints around TS 5.0)

 

[RogueAustralian]

There's raw-text HTML stored in string variables in several places and inline concatenation in that without template literals. Have nightmares about this sort of stuff at work. It does seem though that there's a really robust component system in place though. Haven't figured out how to override CSS files yet; if anyone has figured out how to do that I'd love to know so I don't have to do it with element selectors post facto.

 

[stlh2opolo]

There's raw-text HTML stored in string variables in several places and inline concatenation in that without template literals. Have nightmares about this sort of stuff at work. It does seem though that there's a really robust component system in place though. Haven't figured out how to override CSS files yet; if anyone has figured out how to do that I'd love to know so I don't have to do it with element selectors post facto.

(JS/Modding noob here) - Is the below what you mean by "post facto?"

ui/unit-flags/unit-flags.js

unitFlagContainer.classList.add('unit-flag__container', 'absolute', '-top-8', '-left-8', 'pointer-events-auto', 'flex', 'flex-col', 'justify-center', 'items-center', 'w-16', 'h-16');

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)

 

[Archanist]

(JS/Modding noob here) - Is the below what you mean by "post facto?"

ui/unit-flags/unit-flags.js


Selfishly spent a ton of 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

This looks like Tailwind CSS (the classlist)

 

[RogueAustralian]

(JS/Modding noob here) - Is the below what you mean by "post facto?"

ui/unit-flags/unit-flags.js


Selfishly spent a ton of 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

Not quite, although that’s also a pretty good example. (Edit: as someone stated above - it’s tailwind CSS that’s been compiled and referred to in code - in the css files, it’ll be a bit messier since the scss files are what the devs wrote)

I’m currently struggling through a custom Civ implementation. Almost have it, it’s just not showing up in the Civ selection screen. Probably missing one thing in an XML file… I’ll upload a template Civ when I’m done with Venice.

 

[Gedemon]

I think we can only speculate.
Most likely it depends on what is integrated in the engine, and that's the only real point.
In general, there's probably a bigger user base for javascript and it's easier to get qualified personnell.

Other possible motivations: civ6 Lua was Havok Script, which is not supported anymore, and Firaxis said they were handling multiplatform which is, I think, part of what Coherent Labs offers

Coherent GT: JavaScript guide

coherent-labs.com

 

[Solver]

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.

 

[WildW]

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.

I noticed that UI scripts weren't printing to Scripting.log, so if you're only looking there, I suggest checking the UI logs and maybe AppOptions.txt to see if there's a setting you're missing for the logs to be printed.

 

[Gedemon]

IDK where console.log is writing from UI context.

You could try

Automation.log("Hello World !");

which write in its own log, Automation.log

 

[Solver]

Thanks, I do see the Automation.log printouts, seems convenient enough.

 

[koreyama]

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.

I think this is an example of how to add a new file.

K

Thread 'Enable Yield Icons by Default'

Feb 10, 2025

Description
Auto Yield Icons is a simple yet effective mod that ensures yield icons are always enabled by default in Civilization VII. With this mod, you no longer need to manually toggle the yield icons every time you start a new game.

I wasn’t sure how to add a new file instead of replacing an existing one, but I managed to get it working for now. However, I’m not sure if this is the correct approach.

Also, I’d like to localize the mod, but I’m not quite sure how to do it. If there are any good examples, I’d appreciate any guidance...

• koreyama
• Replies: 4
• Forum: Released Mods

•