js: Set the default colour from the CSS background of the canvas

This allows the HTML/CSS to decide that it would like a different
background colour without the need to recompile.  The default if the CSS
specifies no colour (and hence the canvas is transparent) is the same
grey as before.

2 files changed, 22 insertions, 2 deletions

diff --git a/emcc.c b/emcc.c
index 1a84efb..75ca396 100644
--- a/emcc.c
+++ b/emcc.c
@@ -51,6 +51,7 @@ extern void js_add_preset(int menuid, const char *name, int value);
 extern int js_add_preset_submenu(int menuid, const char *name);
 extern int js_get_selected_preset(void);
 extern void js_select_preset(int n);
+extern void js_default_colour(float *output);
 extern void js_set_background_colour(const char *bg);
 extern void js_get_date_64(unsigned *p);
 extern void js_update_permalinks(const char *desc, const char *seed);
@@ -226,12 +227,13 @@ void restore_puzzle_size(int w, int h)
 }
 
 /*
- * HTML doesn't give us a default frontend colour of its own, so we
- * just make up a lightish grey ourselves.
+ * Try to extract a background colour from the canvas's CSS.  In case
+ * it doesn't have a usable one, make up a lightish grey ourselves.
  */
 void frontend_default_colour(frontend *fe, float *output)
 {
     output[0] = output[1] = output[2] = 0.9F;
+    js_default_colour(output);
 }
 
 /*
diff --git a/emcclib.js b/emcclib.js
index 02085bd..b63c6b2 100644
--- a/emcclib.js
+++ b/emcclib.js
@@ -144,6 +144,24 @@ mergeInto(LibraryManager.library, {
     },
 
     /*
+     * void js_default_colour(float *output);
+     *
+     * Try to extract a default colour from the CSS computed
+     * background colour of the canvas element.
+     */
+    js_default_colour: function(output) {
+        var col = window.getComputedStyle(onscreen_canvas).backgroundColor;
+        /* We only support opaque sRGB colours. */
+        var m = col.match(
+            /^rgb\((\d+(?:\.\d+)?), (\d+(?:\.\d+)?), (\d+(?:\.\d+)?)\)$/);
+        if (m) {
+            setValue(output,     +m[1] / 255, "float");
+            setValue(output + 4, +m[2] / 255, "float");
+            setValue(output + 8, +m[3] / 255, "float");
+        }
+    },
+
+    /*
      * void js_set_background_colour(const char *bg);
      *
      * Record the puzzle background colour in a CSS variable so