[REL] Better Build Bar [Not Currently Working]

Hey folks, after much testing, changing, and research I got this to (kind of) work with the new build.

Now, this DOES shadow live_game.html as I had to remove javascript from it in order to remove the white boxes, here is a screenshot of what it looks like in 1600x900 in windowed mode:

and here is what it looks like in 1280x720(minimum resolution) in windowed mode

hmm. I think it's a step in the right direction for power users.

For casual players, the default bar is better. But this is definitely a step in the right direction for us power users.

Especially since I rarely ever use the build bar, and use hotkeys instead.

Currently removed from PAMM due to problems.

EDIT: Fixed, back on PAMM

WOW

good job !

adding to the rookie mod list.

You probably could just do a few javascript calls to make the edits to the right divs when the mod loads instead of shadowing the file. Here's the basic version:

Add this to your modinfo.json file:

Code:

"live_game": [
        "coui://ui/mods/YOURMODID/MakeItBetter.js"
    ],

And this to that js file:

Code:

$(function () {
    editTheHTMLWithBetterness();
});

Could you elaborate a little bit more? maybe an example? my js knowledge isn't that great atm

Basically you want to edit the HTML to be the same as if it were the shadowed file. If you just made changes to the CSS styles then you could just include a CSS file with your mod like this:

Code:

"live_game": [
        "coui://ui/mods/YOURMODID/MakeItBetter.css",
        "coui://ui/mods/YOURMODID/MakeItBetter.js"
],

and put your styles in there. Then use the jQuery commands to change the right divs to match your new styles. Say it looks like this by default:

Code:

<div class="buildbar">Build Stuffs!</div>

To change that class to betterbuildbar just use this command:

Code:

$(".buildbar").removeClass("buildbar").addClass("betterbuildbar");

If you need to do HTML edits too I can show you those.

looks great but could you make it an option as to weather it is transparent or not? just a small button in the corner to toggle it would be great.

https://github.com/pamods

i.e. commander hp

Oh man, I am so confused... let me rephrase my previous statement, my js knowledge is next to non-existent

So, you can make changes to a file by either shadowing it (replacing the whole file like you are doing) or using javascript to make small changes once the file loads in the game. The reason javascript is preferred for small changes is because it allows other mods to keep working correctly at the same time. Shadowing an entire file is usually something to leave for extreme situations.

jQuery is a javascript library that is designed to make it very easy to manipulate parts of a web page. You can use jQuery selectors to tell it which page elements to work with, and jQuery functions to make the actual change. So for example:

Code:

$("#div_id").html("BANANAS");

will erase the contents of the element with the id of "div_id" and replace it with the string "BANANAS". You can use this to target specific parts of the page and replace it. There is much more to jQuery, but that's the overview in 30 seconds.

So if I want to replace (<div style="min-width: 450px; margin: -8px -8px 0px -8px; padding: 0px 0px 4px 0px; background: #0d0d0d;">)

HTML:

<div class="div_build_bar" id="bldbar1" data-bind="event: { mouseout: clearBuildHover }">

        <div class="div_build_bar_midspan receiveMouse">
            <div style="min-width: 450px; margin: -8px -8px 0px -8px; padding: 0px 0px 4px 0px; background: #0d0d0d;">
                <div class="div_build_bar_cont" data-bind="foreach: buildItems">
                    <div class="div_build_item" id="bld1" data-bind="event: {
                            mouseover: function () { $parent.setBuildHover($index()) },
                            mousedown: function (data, event) { $parent.executeStartBuild(event, $index()) }
                        }">
                        <span class="span_build_count" data-bind="text: count, visible: count() > 0"></span>
                        <!--  <span class="span_hotkey" data-bind="text: model.buildKeysViewModel.getBuildKeyForSpecId($data.id())"></span>-->
                        <a href="#" data-bind="rollover_sound_exclusive: { sound: 'default', group: $index() }">
                            <img class="img_build_unit" src="img/build_bar/units/build_unit_sample.png" data-bind="attr: { src: icon }" />
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>

with(<div style="min-width: 450px; background: #0d0d0d; opacity:0.8;filter:alpha(opacity=80);">)

HTML:

    <div class="div_build_bar" id="bldbar1" data-bind="event: { mouseout: clearBuildHover }">

        <div class="div_build_bar_midspan receiveMouse">
            <div style="min-width: 450px; background: #0d0d0d; opacity:0.8;filter:alpha(opacity=80);">
                <div class="div_build_bar_cont" data-bind="foreach: buildItems">
                    <div class="div_build_item" id="bld1" data-bind="event: {
                            mouseover: function () { $parent.setBuildHover($index()) },
                            mousedown: function (data, event) { $parent.executeStartBuild(event, $index()) }
                        }">
                        <span class="span_build_count" data-bind="text: count, visible: count() > 0"></span>
                        <!--  <span class="span_hotkey" data-bind="text: model.buildKeysViewModel.getBuildKeyForSpecId($data.id())"></span>-->
                        <a href="#" data-bind="rollover_sound_exclusive: { sound: 'default', group: $index() }">
                            <img class="img_build_unit" src="img/build_bar/units/build_unit_sample.png" data-bind="attr: { src: icon }" />
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </div>

what do I do?
EDIT: also this is in live_game.html

Code:

$("#bldbar1").html("NEW HTML GOES HERE");

Remember to escape out the quotes in the html though, so every " should instead be \"

*EDIT*

I just read that a second time. (Sorry, my brain is fried after that tournament.)
You really only have to use this;

Code:

$(".div_build_bar_midspan > div").css();

http://api.jquery.com/css/

As an example, I'm doing just about the same thing, although I'm only changing one property in JS:

Code:

  $('.div_build_bar_midspan > div').css('min-width', '200px')

https://github.com/JustinLove/build_side_bar

What If I am making 2 edits, becuase I have to get rid of the margin and add in opacity

Brute force often works - call css multiple times. I believe if you read far enough down there is an object form for multiple properties.

You might also just want to replace the style attribute outright - .attr('style', '......')

I'd point to the jquery docs, but they seem to be having issues at the moment.

Nevermind, I figured it out

HTML:

(function() {
$(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('opacity', '.8');
})()

Okay, so I need some more help. I want to be able to trigger having the opacity style on or off with a button, how do I do that?
Also, how do I stick a button on to live_game.html without shadowing it

You would bind to the click event of the button. jQuery style is $('#button').on('click', function() {}) Knockout style... I'd have to look up but it's like data-bind="click: someFunctionInTheModel"

You can turn an HTML fragment into DOM nodes and use jquery methods to insert them into the DOM. If you want the button outside the build bar, you can use Floating Framework to make it positionable.

A number of mods use various forms of fragment loading. My basic template includes one, derived from another mod; I've forgotten which.

https://github.com/JustinLove/pa_mod_basic

Overall you'd be well served by looking up a jQuery tutorial. You may also want to look into knockout since the game uses it so heavily. http://knockoutjs.com/

I can't find this anywhere on the jquery website, @wondible I just need to know how to create a new div with js so I don't have to shadow the file.