I have spent many long hours, lost and wandering in the debugger to bring you this arcane knowledge. Er, anyway... Donation Panel may not be the first mod-created panel, but I didn't know of any others to draw inspiration from. I spent a lot of time just trying to get it to appear properly, even though I started with some early work on updating Missile Command (a fact plainly visible in the design) I thought I'd share a couple of important points while they are still relatively fresh. I'm still cargo-culting a lot of stuff from the stock panels; this isn't a definitive way to do it, but one more example added to the stock panels. Since this was a fairly significant mod, I used RequireJS; this probably made things a bit harder for me, although the stock panel binding is triggered from api/panel.js via boot.json, so I don't think it will make a big difference. Use HTML and api.Panel.bindPanels() api.Panel has an argument for a config object; I ultimately had more success using the HTML element attributes, which is how all stock panels are set up. It's also important to note that api.Panel expects to be used with the new operator. I ended up using the wrapper api.Panel.bindElement(el), but while reviewing timing, I noticed that api.Panel.bindPanels() is safe against re-binding. It is also what Uber uses for incremental updates, so it should probably be preferred. Use absolute positioning I did most of the panel testing on the start scene for faster reloads. On that page I found my panel going off-screen; absolute positioning may not be only answer, but it worked for me. Use a transparent background All pages have a background image (galaxy currently); set the body background to transparent for a floating panel. Fit I think that 'fit' affects how the engine culls blank space and positions the resulting content, but this is still mostly speculation. .body_panel and body-dock This is still a source of significant cargo-culting and mystery. I ended up using CSS that adds attributes to both. My very fuzzy understanding is that .body_panel attributes are mirrored back to the panel element in the main scene, and body-dock acts as the main element in the panel scene itself and sets it's size. Not all stock panels (e.g. live_game_econ) use these, but many do. And from my work getting an input box into Bulk Create Units: no-keyboard Removing this attribute allows the panel to receive keyboard events, but they are also received by the main scene, and will trigger hotkeys. yield-focus Removing this attribute allows a panel to capture keyboard events. This prevents hotkeys from firing, but requires you to click out of the panel in order to make them work again. For BCU, I toggle both attributes when the input box is selected.
sessionStorage isn't all that useful The session store is bound to the lifetime of the panel/coherent process. It's useful in the default panel because it is always the same process, but most panels in live_game are transient. Session is really only useful if you are doing page transitions within your panel, or possibly to preserve state between debugging single-panel-refreshes.
I'm having a terrible time with variable height panels getting truncated. Finally punted and anchored both top and bottom, so the panel has a lot of wasted transparent space. Meanwhile, either transparent background is no longer required, or it was an artifact of my early testing on the start scene.
I am having issues with the width/height of panels. For some reason it seems to work when I first start game, but after reloading live_game the region ends up at values below 1 and the panel becomes invisible. In some cases I was able to delete the api.panels.xyz object and rebind, but mostly not. Seems pretty random to me. Do your panels have this issue as well or am I missing something? EDIT: The best thing about posting in the forums like this is that I always find a solution only minutes later: $panel.appendTo($('.div_bottom_left')); api.Panel.bindPanels(); $('#minimap_panel panel-dock').css({width: '250px', height: '250px'}); Setting the width and height like this seems to work.
And now it isn't working again. I don't understand at all how where and how this thing gets the size of the panel, but it gets a size of below 1 and thus makes the whole thing invisible for mine. Does anybody understand how the panels manage their size? EDIT: The issue seems to be that the size of body-dock is returned as 0 even when I try anything I know to increase it. Removing the element works fine, as the code that interacts with body-dock has a fallback for <body> and <body> works. Weird stuff
From what I can read: Child panels poll their body-dock (or body) size every 200ms, and send a message to the parent if changed. The parent panel can adjust the panel-dock proxy and make api calls to move the panel object. One of the complications is that HTML is naturally flexible size - if the panel samples a small size, the panel gets set to that, and then the content adapts - at which point it perfectly matches the initial size. I believe this was my issue with the variable height panel.
