From 9bcb06ee305455d24ab22f4c8f3556213da1a1ee Mon Sep 17 00:00:00 2001 From: Ben Harris Date: Sat, 10 Dec 2022 18:22:54 +0000 Subject: 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. --- emcclib.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'emcclib.js') diff --git a/emcclib.js b/emcclib.js index 60dbbf9..cee6d85 100644 --- a/emcclib.js +++ b/emcclib.js @@ -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; -- cgit v1.1