js: Add a mode where the puzzle tries to fill the viewport

This is activated by putting the puzzle in an element with id
"puzzlecanvascontain".  In that case, the puzzle's default size is as
close to filling that element as is achievable.  Unlike in the normal
mode, this sets the CSS size of the canvas directly.

Because it might take a little while for the page to settle down after
loading, and because the size of the viewport might change, this listens
for "resize" and "load" events, and only bothers changing anything when
the page is fully loaded.

Waiting for the document to be complete might be a problem if we had
images and so forth that we could plausibly be waiting for, but we
don't.
This commit is contained in:
Ben Harris
2022-12-10 18:22:54 +00:00
parent 33b5c48429
commit 9bcb06ee30
2 changed files with 34 additions and 0 deletions

View File

@ -574,6 +574,12 @@ mergeInto(LibraryManager.library, {
* alone and return false.
*/
js_canvas_get_preferred_size: function(wp, hp) {
if (document.readyState == "complete" && containing_div !== null) {
var dpr = window.devicePixelRatio || 1;
setValue(wp, containing_div.clientWidth * dpr, "i32");
setValue(hp, containing_div.clientHeight * dpr, "i32");
return true;
}
return false;
},
@ -591,6 +597,12 @@ mergeInto(LibraryManager.library, {
if (resizable_div !== null)
resizable_div.style.width =
w / (window.devicePixelRatio || 1) + "px";
else {
onscreen_canvas.style.width =
w / (window.devicePixelRatio || 1) + "px";
onscreen_canvas.style.height =
h / (window.devicePixelRatio || 1) + "px";
}
onscreen_canvas.height = h;
offscreen_canvas.height = h;