[REL] Better Build Bar [Not Currently Working]

Discussion in 'Released Mods' started by Corang, March 1, 2014.

  1. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    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:
    sc1.png
    and here is what it looks like in 1280x720(minimum resolution) in windowed mode
    sc2.png
    Last edited: May 24, 2014
    Quitch, burntcustard, FSN1977 and 5 others like this.
  2. brianpurkiss

    brianpurkiss Post Master General

    Messages:
    7,879
    Likes Received:
    7,438
    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.
  3. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    Currently removed from PAMM due to problems.

    EDIT: Fixed, back on PAMM
    Last edited: March 1, 2014
  4. tatsujb

    tatsujb Post Master General

    Messages:
    12,902
    Likes Received:
    5,385
    WOW

    good job !

    adding to the rookie mod list.
  5. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    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();
    });
  6. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    Could you elaborate a little bit more? maybe an example? my js knowledge isn't that great atm
  7. LavaSnake

    LavaSnake Post Master General

    Messages:
    1,620
    Likes Received:
    691
    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.
  8. ace902902

    ace902902 Active Member

    Messages:
    548
    Likes Received:
    212
    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.
  9. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    https://github.com/pamods

    i.e. commander hp
  10. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    Oh man, I am so confused... let me rephrase my previous statement, my js knowledge is next to non-existent
  11. cptconundrum

    cptconundrum Post Master General

    Messages:
    4,186
    Likes Received:
    4,900
    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.
    LavaSnake likes this.
  12. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    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
  13. cptconundrum

    cptconundrum Post Master General

    Messages:
    4,186
    Likes Received:
    4,900
    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/
  14. wondible

    wondible Post Master General

    Messages:
    3,315
    Likes Received:
    2,089
    cptconundrum likes this.
  15. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    What If I am making 2 edits, becuase I have to get rid of the margin and add in opacity
  16. wondible

    wondible Post Master General

    Messages:
    3,315
    Likes Received:
    2,089
    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.
  17. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    Nevermind, I figured it out
    HTML:
    (function() {
    $(".div_build_bar_midspan > div").css('margin', '0px 0px 0px 0px').css('opacity', '.8');
    })()
    LavaSnake and cptconundrum like this.
  18. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    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
    Last edited: March 2, 2014
  19. wondible

    wondible Post Master General

    Messages:
    3,315
    Likes Received:
    2,089
    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/
  20. Corang

    Corang Well-Known Member

    Messages:
    772
    Likes Received:
    313
    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.

Share This Page