-=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- (c) WidthPadding Industries 1987 0|479|0 -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=- -=+=-
Socoder -> Web Development -> HTML5 Fullscreen Quirkyness

Posted : Saturday, 28 December 2013, 09:24
Started to play about with "Fullscreen" options in my new framework, and am hitting roadblocks left right and center, when doing it in HTML5.
For starters, you can't switch to fullscreen from inside the game. Even though I've just learned that you can call Javascript functions from within Monkey, it seems that the browser itself won't let the app go Fullscreen unless specifically requested by a "proper" mouse-based event. (eg, not even an on-canvas ingame click will suffice)
Bloody thing..
So, the "Fullscreen" option is instead a little link on the left sidebar of the game.

This works well enough, except when you want to then close the fullscreen mode (Hit escape), which annoyingly leaves the canvas in it's old size, because I can't fathom how to switch it back to it's old size.


Monkey Framework 2014 test

If anyone can figure out how I can get the canvas size to snap back upon leaving fullscreen mode, lemmie know.

Rightclick 'n' View Source to get any stuff you might need.

Monkey code for Fullscreen is remarkably piss-easy..

''Load, Next List!''
Posted : Saturday, 28 December 2013, 12:05
Additional discovery..
.. Doesn't work on iOS!
Posted : Saturday, 28 December 2013, 14:22
If you're not opposed to adding more JavaScript to the main page, making it change size when you've stopped being fullscreen isn't all that hard; using just the webkit dev prefix for my own sanity, here's what I've come up with:

You don't have to repeat the whole "function" boilerplate if you intend to add more prefixes, either:

I also don't see why you wouldn't be able to use a canvas-click to make the game fullscreen. Maybe it's got to do with how Monkey is translating events... any onclick/onmousedown event should be able to activate it.
Posted : Saturday, 28 December 2013, 17:47
I probably could've worked that out myself, but after a morning filled with things randomly breaking (Updated JMTrackr was hideously out of tune, and the new version of the WordList failed to even compile!!) I opted to stop before I completely fudged the whole bloomin' thing!!

I'll have a play tomorrow, and let you know how it turns out.

''Load, Next List!''
Posted : Sunday, 29 December 2013, 08:28
Had a fiddle, and your code works wonderfully, thanks, CR!
.... unfortunately, something I didn't notice yesterday, is that the sidebar's width seems to be effecting the mouse co-ordinates, meaning everything's 100 pixels off.. hmmm....

Will need to keep tweaking, methinks.

''Load, Next List!''
Posted : Sunday, 29 December 2013, 09:46
Cheated via the method of rejigging the html so that the canvas is on the top left!! Can't imagine that's a totally foolproof fix, but .. meh, whatever!! It'll do.

Thanks for the help, CR!

''Load, Next List!''
Posted : Sunday, 29 December 2013, 21:11
I've still not given up on trying to make the game fullscreenable with a canvas-click. It should be possible, in theory. I'm just trying to figure out where you're supposed to put it in your Monkey code, and just how low-level you need to go. It has occurred to me that perhaps the canvas handles touch events for mobile browsers to avoid the 300ms delay, but that doesn't really explain why it would act like that on a desktop browser.

I've done some interesting experiments involving events that MUST be triggered by a click before, and I made some interesting discoveries. I think I'll dig some of those up.