simon-git: puzzles (main): Ben Harris

[Commits to Tartarus hosted VCS]

TL;DR:
  27f0daf js: Map mouse co-ordinates correctly even when CSS scales our canvas
  9be9a12 js: Move some styling from style attributes to stylesheet
  24ce626 js: Pay attention to the device pixel ratio
  989c6de js: Pay attention to changes in device pixel ratio
  0254a16 js: Make resizing of puzzles work properly again

Repository:     https://git.tartarus.org/simon/puzzles.git
On the web:     https://git.tartarus.org/?p=simon/puzzles.git
Branch updated: main
Committer:      Ben Harris <bjh21 at bjh21.me.uk>
Date:           2022-10-22 22:32:24

commit 27f0dafcf0d78b286ccc7812c59fbc5d3e95ebe5
web diff https://git.tartarus.org/?p=simon/puzzles.git;a=commitdiff;h=27f0dafcf0d78b286ccc7812c59fbc5d3e95ebe5;hp=4feb5fdf0cc6c9612e2928f1e2a2335fbbd03a71
Author: Ben Harris <bjh21 at bjh21.me.uk>
Date:   Thu Oct 6 10:11:32 2022 +0100

    js: Map mouse co-ordinates correctly even when CSS scales our canvas
    
    Our system for mapping mouse coordinates to canvas coordinates assumed
    that the puzzle canvas had the same dimensions in CSS as its own
    internal width and height.  This is true in the current wrapper HTML,
    but it's very easy to accidentally change and there are circumstances
    where we might want to deliberately change it in future.
    
    To fix this, we now inspect the CSS size of the canvas when processing
    mouse events, and map the coordinates through the scaling and
    translation necessary to convert CSS pixels into canvas pixels.

 emccpre.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

commit 9be9a12476b3958f12caad1d43b39243e7758e73
web diff https://git.tartarus.org/?p=simon/puzzles.git;a=commitdiff;h=9be9a12476b3958f12caad1d43b39243e7758e73;hp=27f0dafcf0d78b286ccc7812c59fbc5d3e95ebe5
Author: Ben Harris <bjh21 at bjh21.me.uk>
Date:   Sat Oct 22 13:33:16 2022 +0100

    js: Move some styling from style attributes to stylesheet
    
    For consistency as much as anything else.

 html/jspage.pl | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

commit 24ce6260d55b53c27bd92a92116816b437e83e0c
web diff https://git.tartarus.org/?p=simon/puzzles.git;a=commitdiff;h=24ce6260d55b53c27bd92a92116816b437e83e0c;hp=9be9a12476b3958f12caad1d43b39243e7758e73
Author: Ben Harris <bjh21 at bjh21.me.uk>
Date:   Sat Oct 22 13:34:36 2022 +0100

    js: Pay attention to the device pixel ratio
    
    The CSS "px" unit isn't always a device pixel.  On devices with
    high-DPI displays, there can often be multiple device pixels to a CSS
    px, while in particularly low-resolution displays (like feature
    phones), the user might zoom out to get several CSS px to a device
    pixel.  And even on desktop browsers, text zooming controls can change
    the ratio.
    
    To make Puzzles' rendering look good on an arbitrary device pixel
    ratio, we really want the pixels of the canvas to be device pixels,
    not CSS px, so that the canvas doesn't have to be scaled by the
    browser for display.  To correct this, we now control the CSS size of
    the puzzle canvas, via its containing <div>, to be the canvas size
    divided by the device pixel ratio.
    
    There is a significant gap, which is that this doesn't yet track
    changes to the device pixel ratio.  This is slightly complicated, so
    I'll put it off to the next commit.

 emcclib.js     | 2 +-
 html/jspage.pl | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

commit 989c6defb0419111f1f22807849f361e26f5a083
web diff https://git.tartarus.org/?p=simon/puzzles.git;a=commitdiff;h=989c6defb0419111f1f22807849f361e26f5a083;hp=24ce6260d55b53c27bd92a92116816b437e83e0c
Author: Ben Harris <bjh21 at bjh21.me.uk>
Date:   Sat Oct 22 18:40:01 2022 +0100

    js: Pay attention to changes in device pixel ratio
    
    Because it's the simplest thing to do, when we notice such a change we
    keep the current puzzle at its existing size measured in device
    pixels.  This has the rather odd consequence that when changing the
    text size in Firefox, the size of the puzzle remains constant.

 emccpre.js | 13 +++++++++++++
 1 file changed, 13 insertions(+)

commit 0254a163ff002aca56a6e08d7a5799f34cf48d94
web diff https://git.tartarus.org/?p=simon/puzzles.git;a=commitdiff;h=0254a163ff002aca56a6e08d7a5799f34cf48d94;hp=989c6defb0419111f1f22807849f361e26f5a083
Author: Ben Harris <bjh21 at bjh21.me.uk>
Date:   Sat Oct 22 18:50:34 2022 +0100

    js: Make resizing of puzzles work properly again
    
    This requires looking at the CSS size of the puzzle canvas rather than
    its internal size, and then adjusting the new size to account for the
    device pixel ratio.

 emccpre.js | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)