CivClicker Type Availability User Script

Awhile ago I wrote about how I’d gotten addicted to the Cookie Clicker game to the point that I made a userscript that would display a countdown showing how long it would take for me to get to a certain amount of cookies.

The same people that pullled me into that game tried to get me into a new one, CivClicker.  I think I’ve managed to avoid getting pulled in too far but not before noticing an issue and writing a user script to handle it, which I figured I’d share.

In the game there are several classes of job you can assign your people to.  Six of them require there be enough space in a class of building to hold them.  Ten soldiers for each barracks built, for example.  The problem is that nothing shows how much space you have available, so you might intend to assign a bunch of soldiers only to be unable to and not realize why.  My script provides that information.

As with the Cookie Clicker one, this user script is available for download.  I’ll break it down here, though.

One caveat: There are classes that require not only space in buildings but other resources be available to assign people to them.  I didn’t take that into consideration, this is just about space.

// ==UserScript==
// @name          CivClicker Type Availability Display
// @version       1.0.0
// @namespace
// @description   See how many of a specific type of character you have the resources to make.
// @include*
// ==/UserScript==

const VERSION = "1.0.0";

window.addEventListener('load', function() {
	exec(function () {

Just like the Cookie Clicker script, we start with some basic stuff. On page load we run exec() which accepts a function and is defined below.

// write out our elements
var use_rows = ['tannergroup', 'blacksmithgroup', 'apothecarygroup', 'clericgroup', 'soldiergroup', 'cavalrygroup'];
for (var n = 0; row = n < document.getElementById('jobs').getElementsByTagName('tr').length; n++) {
	var row_id = document.getElementById('jobs').getElementsByTagName('tr')[n].getAttribute('id');
	if (use_rows.indexOf(row_id) > -1) {
		document.getElementById('jobs').getElementsByTagName('tr')[n].getElementsByTagName('td')[6].innerHTML += '&nbsp;(<span id="' + row_id.replace('group', 'Available') + '">0</span>)';

In CivClicker there is a table of all of the job types. Each row has an ID matching the naming convention of <type>group. We create an array of the six types we care about, then we loop through the table rows. On the ones that match a name we’re looking for, we add a span to the sixth field (the one that shows how many you already have of that particular type). Through some string manipulation, we give that span the ID of <type>Available so we can reference it later.

// do the check every second
setInterval(function () {
}, 1000);

We set the update_availability() function to run every second.  This means there can be some lag but I didn’t think this needed to run more often.

function update_availability () {
	document.getElementById('tannerAvailable').innerHTML = prettify( - (population.tanners + population.tannersIll));
	document.getElementById('blacksmithAvailable').innerHTML = prettify( - (population.blacksmiths + population.blacksmithsIll));
	document.getElementById('apothecaryAvailable').innerHTML = prettify( - (population.apothecaries + population.apothecariesIll));
	document.getElementById('clericAvailable').innerHTML = prettify( - (population.clerics + population.clericsIll));
	document.getElementById('soldierAvailable').innerHTML = prettify(( * 10) - (population.soldiers + population.soldiersIll + population.soldiersParty));
	document.getElementById('cavalryAvailable').innerHTML = prettify(( * 10) - (population.cavalry + population.cavalryIll + population.cavalryParty));

We see that update_availability() is what actually finds the number of each class that you can have, then subtracts what you already have and displays that in the spans we established earlier.  I’d like to be able to get this down a little bit, we should be able to loop through each class, but since the game itself doesn’t have a list of all the classes available I didn’t bother to expand on that either.  The prettify() function is from the game, however, as I figured I should display numbers the same way they do.


function exec (fn) {
	var script = document.createElement('script');
	script.setAttribute('type', 'application/javascript');
	script.textContent = '(' + fn + ')();';

Last we wrap things up and define the exec() function, which allows us to do this all via script injection, giving access to the game-defined variables.

It’s hardly revolutionary but is another thing I wanted to throw out there.  For the record, your screen ends up looking like this (when you have the font size turned down):


Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.