[REL] Economic Efficiency UI Mod

​

Add the :

Metal Ratio,
formula : (metal income / metal outcome) x 100
This value shows relatively how much you spend regarding how much you gain.
50% means you lose twice what you gain
100% means you lose as much as you gain
200% means you lose half what you gain
Energy Ratio,
formula : (energy income / energy outcome) x 100
50% means you lose twice what you gain
100% means you lose as much as you gain
200% means you lose half what you gain

Economic Efficiency,
It is the fabrication rate of your factories and fabricators. It is the lowest value of the two previous ratio (metal and energy). Except that the Economic Efficiency can not exceed 100%, and as long you have ressources in your stock, this value won't go under 100%.
100% means that your factories and your fabricators produce at the maximum of their capacity.
50% means that your factories and your fabricators produce at the 50% of their capacity.

Colour code
Blue = you are wasting ressources (it is bad)
green = good
yellow = you are on the edge
orange = you lack ressources
red = clearly stop building stuff !



Installation
Step 1:
Download the EcoEffv1.zip attachment, and extract it to <PA Install directory>/PA/media/ui/mods/
Step 2:
Install the PA UI Mod Manager: https://forums.uberent.com/threads/rel-ui-mod-manager-v1-2.50726/
Tick the box for "Economic Efficiency" to enable the mod.

Or add these lines to your ui_mod_list.js in the live_game section:
'../../mods/EcoEff/EcoEff.css',
'../../mods/EcoEff/dMexCount.js'

Good luck, looks awesome.

So the general way of implementing this would be:

1.) Navigate to the live_game.js in the media/ui/alpha/live_game folder of PA as well as the live_game.html.
2.) Load PA and attach the UI Debugger, open a game vs AI on a big planet. Tell your commander to endlessly make AA turrets. From here on you can test all changes you make by pressing F5 in the game. The debugger will show you potential errors in it's console.
3.) Open the live_game.html find the definitions for the resource bar and change them to show what you want them to show. For this you need basic html knowledge. What you need to do here is basically add a few more div's in the right location. As a start you can put in fix values just to check the Layout.
4.) Now you need to create the directory of your mod. This is done in PA/media/ui/mods/NAME_HERE
Place a ini for the ui mod manager in there, as described in the ui mod manager thread. You'll need to add one js file to the live_game scene.
5.) Now you need to do the changes you want to make to the game html from javascript file with JQuery. To do this first copy your changed live game html in some extra scene and revert the one that the game uses. Use the modified copy as a reference of what kind of changes you need. In the best case you put the original and the modified version next to each other on 2 screens/windows while writting the js on a 3rd.
Usually the modification of the html is done by selecting some part of the default html via a CSS selector and adding stuff to it with functions like http://api.jquery.com/append/.
Check your modifications a lot with F5
6.) Now that you have loaded a mod that modifies the game html via js it should basically show the resources bars like you have them in your image: static, filled with placeholders. To improve this you need to apply knockout-bindings to the html. You can refer to how i.e. the already exisiting resource counters are bound. A functional knockout-binding has 2 parts: The html and the js. For the html you need to modify what you are doing the html you insert with jquery. For the js part you need to add a few more observables to the _to your script_ global variable "model". Reference the names of these observables in your html knockoutbindings.

7.) After you have written the knockout bindings you are done. You should be able to distribute the mod directory you created to other players.


Google/search the mod forums for whatever parts of this you don't understand and ask afterwards. If you have never even programmed before you have a bit of work before you. Good luck.

Thank you for your advises, i will look at this.

I've been working on this since dallonf mentioned it in the UI thread. It's been an interesting learning experience. Luckily, I learned that you can reload the UI in-game and it will update with any changes you've made.... Since I don't have any other way of previewing changes or debugging my files.

Also, figuring out how to select specific DOM objects when they don't use unique classes or ids has been a trial. You could just do a .replaceWith to the entire economic UI, but that could conflict with other mods.
(Which gives me an idea for a mod suggestion: html files with well-placed unique id attributes. Though, I'm not sure how that would affect the UI's efficiency.)

You can refresh the Ui midgame and it actually loads new changes to it? Dude, thanks a heap.

My first attempt of modding is actually not as bad as i have expected. I still need to debug stuff, but i will be able to share the UI tweak with you really soon.
Thanks again for your help.

Here the first version of the mod.

a screenshot of the result :


The code is a bit messy, sorry about that i will clean up in the next version.

All your feedbacks are welcome.

This looks great, when I get the chance I definitely want to give it a look. Recommend you ask a mod to change the thread title for you.

yeah tell me what you want to call this and I'll change the topic

Changing the thread name is a good idea. I will also edit the OP.

New title :
[REL] Economic Efficiency UI Mod

I just realized that you're not using the UI mod system so far. You really should consider doing so for your code cleanup, as without it your mod will break with every patch and on every file validation.

Yes i did it in a simple way, as it was my really first attempt to do a mod. I would like to do something using the UI mos system as you said but i don't understand how i'm suposed to do actually. For the moment i get the interaction between the HTML the CSS and the JS, by looking at other mod. May be you could briefly explain or show me example of mod using the adequat system.

well read my whole of text above, which describes all steps quickly.
Also refer to this: https://forums.uberent.com/threads/reference-ui-modding-system.50277/
As a very simple example of such a mod you could have a look at what https://forums.uberent.com/threads/rel-slowbars-54357.50349/ is doing.

Did you mean "Economic Efficiency UI Mod"?

yes ^^

nice work.

Collecting all the GUI talk in one place was good for something after all!



I'm liking where this is heading, nice work man.



I'm still somewhat hazy on the PA econ model.
Maybe you can help me understand better?
MetalIncome/MetalOutcome = X
EnergyIncome/EnergyOutcome = Y
Display lower value of (X and Y).


But isn't it in my best interest in completely having Energy drained at all times?
Metal is the really the deciding factor in this game.
This is why map control is so important.
It is an RTS where the objective is to race against the clock.
You are to out-produce and out-expand the enemy.


For example: If I had Commander building 1 factory. He drains all the metal leaving me "wasting energy".
In your display, this shows as "not good".
But is it not better to drain all your metal right away, waste some energy, and have that factory out sooner?
Then you can spam engineers to get more metal points?


Most of us who backed this are not new to flow-based economies.
We know when we need more metal or more storage.
However, maybe a newb may be lulled in a false sense of security?
While green you show green, orange and red as bad things....

Isn't it actually the opposite?
Where wasting metal is the worst econ-sin you can commit?
I would happily waste energy all day if that meant mass spending > mass income at all times.

Actually when you are wasting ressources the number turn blue. If you stay green in my mod you are doing it good.

FYI
i'm learning (slowly) how to use jQuery, i'working on a the compatibility with UI Mod System and the Mod Manager. Normally it will come this week. Thank you ColaColin for your help.