gistfile1.js

(function() {
console.log("load showarmymetal.js");
	
// first we need to create a mapping of unit_spec (the path of a unit) to the metal value.
// I will use the unitInfoParser.js file that I also use in the alertsManager
// when I wrote this code I first read through the unitInfoParser code again to remember how it works 
// So remember reading code of PA and other mods is a VERY big part of modding!
// then I looked at the unit definition files to find how the property is called
// then I wrote the code
// then I copy pasted the bloock of var unitMetalValues = .... ()); into the debugger while the game was
// running into the console
// of the economy bar. I run the code and waited a second or two for the parsing to complete. 
// Then I entered unitMetalValues into the console
// to check the result. I got this: http://i.imgur.com/ZWEuKY7.png which looks fine :)
var unitMetalValues = (function() {
	var map = {};
	
	// use the unitInfoParser to create a map of  unit spec > build_metal_cost
	// read the unit definition files in /media/pa/units/
	// unitInfoParser is a generic piece of code that allows to get data from those files
	unitInfoParser.loadUnitData(function(result) {
		_.assign(map, result); // result is the finished map from the unitInfoParser, assign it over to 
		// the map object
	}, function(unit) {
		return unit.build_metal_cost; // this is the function that is passed the unit data and selects 
		// the interesting data
	}, function(dataUpTheTree, dataDownTheTree) {
		return dataUpTheTree; // this function is passed data as it was returned by the function above.
		// this function exists, because many units are not defined by one file, but rather by multiple
//			files
		// so a land unit first is a basic land unit that is then referenced by the tank file which 
		//overwrites relevant properties
		// to make it a tank. We'll just take the value that is the most "up" in that tree (well list)
//			of files, since
		// that is the value PA uses in this case.
	});
	
	return map;
}());

// Make a knockout observable. This is a value holder that you can attach listeners to that are notified 
//when it changes
// It can also be bound to the html of a page, so the page will display the value and
// update by itself when you write a new value into this.
// I am writing this code without even thinking much about how the UI will look later.  It usually is 
//better
// to first think about the data you are dealing with. So in this case we want to have a single number
//	that tracks the
// value of your army.
// Knockout is made to work like this. Later I can easily bind this value to the html
model.armyValue = ko.observable(0);	

// this was only added once I worked on how to display the value. I realized I would need to show
// the value in thousands so this is a computed that makes a -K value from the armyValue
model.armyValueK = ko.computed(function() {
	return (model.armyValue() / 1000).toFixed(2)+"K";
});

// the idea to track a unit when it dies is good, but the reality is that incomplete units
// also trigger the death alert. Since those were never added to the value of our army
// we need to filter them out. We do this by storing the id of all created units we have seen
// if we see a death alert that is not in this set, we will ignore it.
var createdUnitsIdSet = {};

// add a listener for alerts. To write this I actually first put a very simple listener into the console
// that just console logs the objects the alertsManager gives to the listener.
// this way I can see how the objects are structured: http://i.imgur.com/rgAPXAh.png
alertsManager.addListener(function(l){
	for (var i = 0; i < l.list.length; i++) {
		var alert = l.list[i];
		// fetch the metal value of the unit from the map we created for that
		var metalValue = unitMetalValues[alert.spec_id];
		if (alert.watch_type === 0) { // created alert, see /ui/main/game/live_game/js/constant.js
			// notice that by using the right other constant you may also be able to for example track how
			// much metal in units you have destroyed
			createdUnitsIdSet[alert.id] = true; // we use the object as a set
			model.armyValue(model.armyValue() + metalValue);
		} else if (alert.watch_type === 2) { // destroyed alert
			if (createdUnitsIdSet[alert.id]) { // only if we observed the creation of the unit
				model.armyValue(model.armyValue() - metalValue);
			}
		}
	}
});

/*
After I wrote the block of code above I reloaded the UI and then ran this code in the console of the 
economy scene:

model.armyValue.subscribe(function(v) {
	console.log(v);
});

This adds a listener to the armyValue observable that prints any changes into the console.
Now I made a few things, destroyed some of them, etc to see the value change in the console.
When it didn't work at first I added a console.log in the alerts listener to verify some assumptions 
I had made.
Only once that worked I continued with work on the html.
*/

// now we need to add the value into some visible area of the html of the scene. To edit the html
// I first modify directly the html in live_game_econ.html. In there you can just directly add the html 
// that looks best and reload the UI by pressing F5 in the debugger to see the changes directly.
// To test some things the ability to directly edit the live html in the debugger is also very helpful.
// To be precise I decided first to put the text into the middle
// Then I used the magnifing glass function to find the html part for the middle and added this
// <div>test</div>
// in a location that looked like it would work. 
// my next step included marking the html node that contains EFFICIENCY and pressing
// delete to simply remove it. This way you can also figure out what part of a page does something:
// simply delete stuff. If you deleted too much just press F5 to reload the scene.
// From there I continued to do trial and error to
// get a somewhat decent result:

// add <div class="army_value_text" data-bind="text: model.armyValueK()">0</div> as a child to
// the element that contains the middle elements.
$('.div-eff > div').append('<div class="army_value_text" data-bind="text: model.armyValueK()">0</div>');

// remove the element that contains the "Efficiency" text
$('.build_eff_text').remove();

// add a different margin via the style attribute to the overall efficiency %
// to move it up a little.
$('.div_rate_ctr_perc_center').css("margin", "-2px 0px -4px 0px");

// When I added these things like this via js I reverted the file in my local PA-git repository
// if you dont use a version control system on your PA directory you can also validate the
// files in steam or the uberlauncher
}());