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

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.

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

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

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.).

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.

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?

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); 

YESSSSSSSSSSS MUHAUHUAHA IT'S ALIVEEEEE

Now i just need to adjust the size and make it look perty

THANK YOU! I'm not done with this thread though xD

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

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

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.

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 )

Code:

if (self.numberOfEmptySlots === 0) {
    model.allPlayersAreReady.subscribe(function(v) {if (v && model.isGameCreator()) model.startGame();});
}
else {
    return null;
};

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

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?

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.

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)

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.

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

Anyway, i do not know what's supposed to go in that data-bind... ;-;

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.

Released on PAMM as Auto Start Game.

Code is here: https://palobby.com/mods/gAutoStartGame/ui/mods/gAutoStartGame/new_game.js