js: Distinguish manual resizes from device pixel ratio changes

This adds a new callback, rescale_puzzle(), that's called when the
device pixel ratio changes.  This means that resize_puzzle() can safely
set the nominal canvas size, which means that manual resizing of the
puzzle now sticks.

Still missing: paying attention to the device pixel ratio when choosing
the initial (or reset) size.

3 files changed, 14 insertions, 3 deletions

diff --git a/cmake/platforms/emscripten.cmake b/cmake/platforms/emscripten.cmake
index 6526037..5c13f90 100644
--- a/cmake/platforms/emscripten.cmake
+++ b/cmake/platforms/emscripten.cmake
@@ -26,6 +26,8 @@ set(emcc_export_list
   # Callbacks when the resizing controls are used
   _resize_puzzle
   _restore_puzzle_size
+  # Callback when device pixel ratio changes
+  _rescale_puzzle
   # Main program, run at initialisation time
   _main)
 
diff --git a/emcc.c b/emcc.c
index 4591ccb..605938b 100644
--- a/emcc.c
+++ b/emcc.c
@@ -195,8 +195,8 @@ static void resize(void)
     canvas_h = h;
 }
 
-/* Called from JS when the user uses the resize handle */
-void resize_puzzle(int w, int h)
+/* Called from JS when the device pixel ratio changes */
+void rescale_puzzle(int w, int h)
 {
     midend_size(me, &w, &h, true);
     if (canvas_w != w || canvas_h != h) { 
@@ -207,6 +207,13 @@ void resize_puzzle(int w, int h)
     }
 }
 
+/* Called from JS when the user uses the resize handle */
+void resize_puzzle(int w, int h)
+{
+    rescale_puzzle(w, h);
+    js_canvas_set_nominal_size();
+}
+
 /* Called from JS when the user uses the restore button */
 void restore_puzzle_size(int w, int h)
 {
diff --git a/emccpre.js b/emccpre.js
index 0c555f9..c2af60a 100644
--- a/emccpre.js
+++ b/emccpre.js
@@ -535,12 +535,14 @@ function initPuzzle() {
      * <https://developer.mozilla.org/en-US/docs/Web/API/Window/
      * devicePixelRatio> (CC0) to work on older browsers.
      */
+    var rescale_puzzle = Module.cwrap('rescale_puzzle',
+                                      'void', ['number', 'number']);
     var mql = null;
     var update_pixel_ratio = function() {
         var dpr = window.devicePixelRatio;
         if (mql !== null)
             mql.removeListener(update_pixel_ratio);
-        resize_puzzle(nominal_width * dpr, nominal_height * dpr);
+        rescale_puzzle(nominal_width * dpr, nominal_height * dpr);
         mql = window.matchMedia(`(resolution: ${dpr}dppx)`);
         mql.addListener(update_pixel_ratio);
     }