ID:2150370
 
I'm trying to get my current game webclient-ready, as I have a decent follower base outside of BYOND who might be interested in playing it if they don't have to go through the rigmarole of installing a mostly extraneous programming suite.

I have just enabled it, but I'm running into a few problems with making it presentable to the point where I'd want to show it around without a lot of caveats and explanations.

Biggest item is customizing maptext. I must be doing something very wrong. The only way I've figured out to make maptext center vertically and horizontally is to use
for each and every individual atom with maptext, and that can't be right. Even doing this, I can't seem to change the font. I know I must be missing something. Could somebody point me in the right direction?

Second is I'm wondering if there's a way to enable/disable the widgets in the webclient. My game is not playable without a keyboard so the D-Pad is kind of extraneous. The sound button is just going to cause confusion unless and until the game includes sound. And the buttons that display available commands are also undesired, as none of the command names actually seem to fit in them. I thought setting all the verbs to hidden might get rid of them at least, but it didn't. They are still there.

I have tried searching the forums for information on these topics, but if it exists, I'm evidently not using the right key words.

Thank you!
I currently don't have anything in place to disable the hotbar or D-pad on command; that's on my list but I haven't gotten to it yet. You can however create a quick custom skin without them in a .dms. Roughly it'd be something like:

<body>
<div id=mainvsplit byondclass=child style="width:100%;height:100%;margin:0" skinparams="is-vertical=true;splitter=75;left:map;right:output">
<div id=map byondclass=map></div>
<div id=output byondclass=output></div>
</div>
</body>

For the maptext, I'd have to check but IIRC the map control still doesn't have 100% support for the style param. As a workaround you should be able to add styles to your stylesheet in the skin's .dms file, and that should carry over to the webclient properly.

<style>
#map {text-align: center; vertical-align: center;}
</style>

The map element's font really ought to be respected as a default, so if it's not then that's a bug. However I think the same workaround would apply to that.
Thanks, that does look much better, but the style sheet for #map is not recognizing anything I put in for color or vertical-align (even when correcting center in your example to middle). I know it's applying the style because changes to text-align and font-family are functional. I also tried kludging the style in to the map's div tag. No joy.

EDIT: The bad is, in fact, my own - the CSS property is text-color, not color. Oops! It's now doing everything I want it to do.

Do you have a similar quick and dirty example for how to define a pop up window with a browser element to take the place of one I designed in the vanilla interface? I'm literate enough that I was able to take your example of the split elements and make a web client that looks like I need it to look, but my brain is bouncing off the web client reference.

It looks like it's really powerful and versatile and able to do a lot of things that the DS client can't, but for now I just really need to get it doing all the things the DS client does.
Calling browse() with the normal popup settings you'd use in DS should create a popup for you automatically. The webclient recognizes this case and will create a new browser control, and a pop control to put it in. I'm not sure you need anything beyond that, but if do I can probably come up with something if you can fill in some more details on how this is used.

In DS, all windows and panes are type "main", and separate out into panes or windows based on the is-pane value. The webclient has separate "pane" and "pop" controls. The webclient can put non-panes into a child or tab control directly, so you don't even strictly need panes unless you want to use them for organizational purposes. If you want a window (pop) with a specific name to be predefined in your skin, then you'd just create something along these lines:

<div id=browserpop byondclass=pop skinparams="is-visible=false">
<div id=browser1 byondclass=browser></div>
</div>

That pop should respond to winshow() like normal.
Thank you for the examples. I'm starting to see how this all works.

Yeah, I was using browse() initially, but I really needed the ability to detect when the browser window was closed, as part of a nascent but growing menu management.
...and I don't know what I did but it's suddenly back to not recognizing my text-color and vertical-align. Blah.
If you use developer tools in Chrome (or whatever browser you're using) you can take a look at the HTML in use. It's possible that maybe the styles didn't come through or something like that.
Yeah, it shows the style, it shows vertical-align:middle, and it shows the values as valid. I know they're being applied to the right elements in general because I can change other values, just not text-color or vertical-align. I finally did get the text color I want with skin parameters.

I have no idea what's going on here. I swear it was working and then with no change to the style section, it wasn't. I've set up a simple test case with a copy of my style sheet in it in case that something odd in my project was throwing it off, and I get the same thing. No value of vertical-align has any effect.

Should I be submitting a formal bug report at this point? I assumed from the outset this was my own inexperience, but I'm starting to suspect there's an issue.
It sounds like an issue to me too. I think a bug report would be a good idea.