My discussion about taking my mods "to the next level"

Discussion in 'Mod Discussions' started by killerkiwijuice, March 11, 2015.

  1. killerkiwijuice

    killerkiwijuice Post Master General

    Messages:
    3,879
    Likes Received:
    3,597
    ok, I think i might have done something worthwhile. I mostly got this code from commander health bar mod. This is from the new .js file:
    Code:
    (function() {
    $("commander_info_frame_content").append(
        "<div class='commander_info_img' data-bind='click: function() { api.select.commander(); api.camera.track(true); }'>" +
        "<img src='coui://ui/mods/thing/icon_si_commander.png'/>" +
        "<div class='select_link_ComHP'>" +
            "<a>Select</a>" +
        "</div>");
    })();
    I'm still not entirely sure what the $("commander_info_frame_content").append( does. And of course nothing shows up in game but that was not an expectation ;p - Is this a good start at least?

    Attached the new thing if anyone wants to look at it but the CSS is unchanged, kinda.

    Attached Files:

    wondible likes this.
  2. DeathByDenim

    DeathByDenim Post Master General

    Messages:
    4,328
    Likes Received:
    2,125
    Where did you get "commander_info_frame_content" from? It doesn't seem to be in live_game_players.html. Append appends to existing HTML elements (see docs). By the way, you want ".blabla" for classes named "blabla" and "#blabla" for elements with an id of "blabla".

    (Maybe they changed the name in the update that was just pushed, but probably not. :))

    edit: spelling
    Last edited: March 12, 2015
    wondible and killerkiwijuice like this.
  3. killerkiwijuice

    killerkiwijuice Post Master General

    Messages:
    3,879
    Likes Received:
    3,597
    The commander info frame thing is from the CommanderHP bar mod. I don't know what it does but it seemed important so I just threw it in there xD

    And thanks for the class lesson, didn't know that :p
  4. DeathByDenim

    DeathByDenim Post Master General

    Messages:
    4,328
    Likes Received:
    2,125
    Ah, you are modding a mod, eh? Make sure that you set the priority accordingly. Both your mod and the commander HUD mod have a priority of 100, which means that the order in which they load is rather random. So set the priority of your mod to a higher number than 100 (or was it lower... no, higher, I think, maybe.).
  5. killerkiwijuice

    killerkiwijuice Post Master General

    Messages:
    3,879
    Likes Received:
    3,597
    Well i used code from the commanderHP Bar mod to see if I can get it working, and yeah it's a lower number for priority I think. I pretty much copy-pasted part of it, mostly to save time but also since I didn't know how to make an image actually SELECT the commander.

    I put this into a separate folder (the com.pa.blablablabla)to allow PAMM to load it as a different mod called "Commander Button".

    CommanderHP bar is the mod where all the "commander_info_frame" stuff comes from, I don't know what it does. I'll try and test the mod now and see if a button appears.
  6. killerkiwijuice

    killerkiwijuice Post Master General

    Messages:
    3,879
    Likes Received:
    3,597
    Alright I changed something. I got the player tab at the top left of the screen to disappear! yay! actually i had to remove the "+"'s from the end of the divs. That caused a syntax error and the live_game_players.js didn't even parse

    This is my new JS i only switched that append thing with a document.write thing:
    Code:
    document.write(
        "<div class='commander_info_img' data-bind='click: function() { api.select.commander(); api.camera.track(true); }'>" 
        "<img src='coui://ui/mods/thing/icon_si_commander.png'/>" 
        "<div class='select_link_ComHP'>" 
            "<a>Select</a>" 
        "</div>"
    );
    
    I also changed the CSS to
    Code:
    .commander_info_img img {
        width: 70%;
        height: auto;
        margin: 0px -20px 2px 5px;
    }
    Doing this made the entire player bar at the top left go away which means I did something correct (not really but change is good right now lol)

    The button still doesn't appear of course, and here's the "scenes" thing, if it matters:
    Code:
        "scenes": {
            "live_game_players": [
                "coui://ui/mods/thing/commselect.js",
                "coui://ui/mods/thing/commselect.css"
            ]
        },
    Am I at least close or nah?
    Last edited: March 13, 2015
    DeathByDenim likes this.
  7. wondible

    wondible Post Master General

    Messages:
    3,315
    Likes Received:
    2,089
    document.write is archaric and I'm not entirely sure what it would do outside of an inline script tag. Try $('body').append() You may want to fine tune beyond body later.

    You need the '+'. Probably what you quoted had a syntax error and stopped doing things to break the panel ;^)

    Have you made friends with the coherent debugger yet?

    Since you are working in a panel, this bit from inputmap.js is quite handy in the debugger console.

    Code:
     api.game.debug.reloadScene(api.Panel.pageId); 
    DeathByDenim and killerkiwijuice like this.
  8. killerkiwijuice

    killerkiwijuice Post Master General

    Messages:
    3,879
    Likes Received:
    3,597
    YESSSSSSSSSSS MUHAUHUAHA IT'S ALIVEEEEE
    [​IMG]
    Now i just need to adjust the size and make it look perty

    THANK YOU! I'm not done with this thread though xD
    DeathByDenim and wondible like this.
  9. killerkiwijuice

    killerkiwijuice Post Master General

    Messages:
    3,879
    Likes Received:
    3,597
    Now i'll never miss the chance to save my commander from a surprise boom bot snipe!

    Sorry bout the quality, copy the URL and add a 'v' to the end
    [​IMG]
    cdrkf likes this.
  10. killerkiwijuice

    killerkiwijuice Post Master General

    Messages:
    3,879
    Likes Received:
    3,597
    OK I think I have a pretty good idea for a new mod, and obviously I'm not quite sure how to implement this one yet.

    The idea is to make a mod where the game auto-starts when all players are ready in the lobby. I've already looked in new_game.js and found the model
    Code:
    self.allPlayersAreReady
    and the function
    Code:
    self.startGame
    There is a function with both of these on line 967 in new_game.js.

    I know the general idea behind making this will be something like:
    Code:
    if (self.allPlayersAreReady === true) {
           //start the game!
    }
    Only problem is that I have no idea how to make the game auto-start when all players are ready xD
  11. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    something like
    Code:
    model.allPlayersAreReady.subscribe(function(v) {if (v && model.isGameCreator()) model.startGame();});
    should do it

    So register a listener to allPlayersAreReady that triggers startgame if it changes to true when all players are ready.
    You may need to handle additional conditions for stuff like "all slots are filled", not sure what it does when you call startgame with half the slots being empty.
    killerkiwijuice likes this.
  12. killerkiwijuice

    killerkiwijuice Post Master General

    Messages:
    3,879
    Likes Received:
    3,597
    Yeah that works great.

    And for the empty slots thingy, do you think this would work? (I can't test it on AI and people hate joining games where the host leaves right when the match starts :p)
    Code:
    if (self.numberOfEmptySlots === 0) {
        model.allPlayersAreReady.subscribe(function(v) {if (v && model.isGameCreator()) model.startGame();});
    }
    else {
        return null;
    };
  13. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    No I don't think that would work, as there are multiple things wrong with it:
    - You return something? What function is that part of? I would not expect a return
    - You only add the listener if there are no empty slots, but I would expect that the listener is added directly when the lobby is entered.

    I would have expected to add conditions to the if inside the listener
  14. killerkiwijuice

    killerkiwijuice Post Master General

    Messages:
    3,879
    Likes Received:
    3,597
    Actually, it looks like it works as inteded without any other arguments.

    Alright, I have the mod in game and it works as intended, but I want to take it a step further. I'd like to add a checkbox that enables or disables "Allow Auto Start".

    I've looked at the checkboxes in new_game.html, the thing that is confusing me is the 'data-bind' stuff. I've copied the structure of a checkbox, but I have no idea what to do with the data-binds. I made a new_game.html file in the mod, adjusted the mod_info.json, and this is what I copied( I only changed the desc part to say "Allow Auto Start")
    Code:
        <div class="allow_auto_start">
            <label data-bind="click: function () { if (model.canChangeSettings()) model.listenToSpectators(!model.listenToSpectators()); model.changeSettings(); }">
                <input type="checkbox" style="pointer-events: none !important;" data-bind="enable: canChangeSettings, checked: listenToSpectators" />
                    <loc desc="">Allow Auto Start</loc>
            </label>
        </div>
    1) The checkbox doesn't show up in game, the html loads fine though on google chrome.
    2) This obviously is not going to enable or disable the allow auto start things. Does anyone know what to put in data-binds?
  15. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    I feel you placed that code not where I would place it, as it would not work there. Can you post where you put it?
    The code example you showed so far can only work if you place it in a way that makes the whole thing rather ,..... well it would work but in a pretty ugly way.

    You happened to take a pretty complicated checkbox there.
    Basically it adds a few features on top what the typical knockout checkbox does:
    - it puts a label element around the checkbox and registers a click function on it. This click function toggles the value of listenToSpectators if the user is allowed to change it.
    - it disables direct mouse interaction with the checkbox and uses the checkbox only as display.

    Not quite sure why that is done. Maybe for some graphical reasons. Maybe without it the user has to click the little square? Not sure right now.

    Anyway the "data-bind stuff" is basically all what is knockout about, and PA's UI is made with knockout. Understanding knockout is fundamentally important. Have you gone through the knockout tutorial? Do you know the observable pattern that knockout basically revolves around?
    Basically the only location where your code example from above could work is a location that is called when there are no more empty slots and the all users are ready. So your code probably adds a listener to the observable again and again and again. It works, but isn't clean and shows a misunderstanding of what knockout is about.
  16. killerkiwijuice

    killerkiwijuice Post Master General

    Messages:
    3,879
    Likes Received:
    3,597
    I attached the entire mod folder vvvvvv
    I just don't know how to get that HTML checkbox to 'tick' the option for auto start from the JS file.

    Also i took a look at knockout, it's not too confusing to me anymore. Although I'm still not very comfortable with it (only spent about 15 minutes with it xD)

    Attached Files:

  17. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    That is exactly what the checked binding I linked is for.

    The zip you attached doesn't contain a functional mod? There is a new_game.html file with a script tag and only a button in it. Can't follow the intention of that.
  18. killerkiwijuice

    killerkiwijuice Post Master General

    Messages:
    3,879
    Likes Received:
    3,597
    I think i'm just going to ditch the html file and stick with the $ thing to make everything more simple.

    So i just did this:
    Code:
    model.allPlayersAreReady.subscribe(function(v) {
        if (v && model.isGameCreator()) model.startGame();
        }
    );
    $("body").append(
        "<div class = 'allow_auto_start'>" +
            "<label data-bind = click: function() { -----wtf is supposed to happen here-----}'/>" +
                "<input type = 'checkbox'>" +
                    "<loc>Allow Auto Start</loc>" +
            "</label>" +
        "</div>"
    );
    This time the LOC text shows up, but all the way in the bottom left corner :( PROGRESS ! xd :p

    Anyway, i do not know what's supposed to go in that data-bind... ;-;
    Last edited: March 23, 2015
  19. cola_colin

    cola_colin Moderator Alumni

    Messages:
    12,074
    Likes Received:
    16,221
    Try to understand how the original checkbox you copied from worked. You need to setup an observable that replaces the spectator-something observable of the original code.
    Also the way you place the braces on the code in the first lines is very questionable and I can't see the check for the slot number in that anymore.
  20. mikeyh

    mikeyh Post Master General

    Messages:
    1,869
    Likes Received:
    1,509

Share This Page