[crawl-ref-commits] webtiles-hidpi-fix branch updated: 0.30-a0-221-g791e556568

       via  791e5565680703c67ef0e7d5586b92ea2e3708b0 (commit)
      from  8d996c0ab6f8533ab60037fc8a81cbbae822608b (commit)

-----------------------------------------------------------------------
commit 791e5565680703c67ef0e7d5586b92ea2e3708b0
Author: advil <ra...@gm...>
Date:   Wed Oct 5 19:19:27 2022 -0400

    fix: possibly address chrome hidpi glitches
    
    I can't say I know why this works, more investigation required. It's not
    impossible there an off-by-one error lurking in here. (Also,
    the shift function is still glitchy for apparently related reasons on
    chrome.)

-----------------------------------------------------------------------

Summary of changes:
 .../webserver/game_data/static/cell_renderer.js    | 53 ++++++++++++++++++----
 1 file changed, 44 insertions(+), 9 deletions(-)

diff --git a/crawl-ref/source/webserver/game_data/static/cell_renderer.js b/crawl-ref/source/webserver/game_data/static/cell_renderer.js
index 1d985830f3..24d2c2f4fb 100644
--- a/crawl-ref/source/webserver/game_data/static/cell_renderer.js
+++ b/crawl-ref/source/webserver/game_data/static/cell_renderer.js
@@ -195,8 +195,21 @@ function ($, view_data, gui, main, tileinfo_player, icons, dngn, enums,
 
         do_render_cell: function(cx, cy, x, y, map_cell, cell)
         {
-            this.ctx.fillStyle = "black";
-            this.ctx.fillRect(x, y, this.cell_width, this.cell_height);
+            this.ctx.save();
+            try {
+                const ratio = window.devicePixelRatio;
+                this.ctx.resetTransform();
+                this.ctx.fillStyle = "black";
+                this.ctx.fillRect(Math.floor(x * ratio), Math.floor(y * ratio),
+                    Math.round(this.cell_width * ratio),
+                    Math.round(this.cell_height * ratio));
+            }
+            finally
+            {
+                this.ctx.restore();
+            }
+            // this.ctx.fillStyle = "black";
+            // this.ctx.fillRect(x, y, this.cell_width, this.cell_height);
 
             map_cell = map_cell || map_knowledge.get(cx, cy);
             cell = cell || map_cell.t;
@@ -1134,13 +1147,35 @@ function ($, view_data, gui, main, tileinfo_player, icons, dngn, enums,
             var h = info.ey - info.sy;
 
             this.ctx.imageSmoothingEnabled = options.get("tile_filter_scaling");
-            this.ctx.drawImage(img,
-                               info.sx, info.sy + sy - pos_sy_adjust,
-                               w, h + ey - pos_ey_adjust,
-                               x + total_x_offset * img_xscale,
-                               y + sy * img_yscale,
-                               w * img_xscale,
-                               (h + ey - pos_ey_adjust) * img_yscale)
+            // should any of the scalings be floored?
+            this.ctx.save();
+            try {
+                const ratio = window.devicePixelRatio;
+                this.ctx.resetTransform();
+                this.ctx.drawImage(img,
+                               info.sx,
+                               info.sy + sy - pos_sy_adjust,
+                               w,
+                               h + ey - pos_ey_adjust,
+                               Math.floor((x + total_x_offset * img_xscale) * ratio),
+                               Math.floor((y + sy * img_yscale) * ratio),
+                               Math.round((w * img_xscale) * ratio),
+                               Math.round(((h + ey - pos_ey_adjust) * img_yscale) * ratio));
+
+            }
+            finally
+            {
+                this.ctx.restore();
+            }
+            // this.ctx.drawImage(img,
+            //                    info.sx,
+            //                    info.sy + sy - pos_sy_adjust,
+            //                    w,
+            //                    h + ey - pos_ey_adjust,
+            //                    x + total_x_offset * img_xscale,
+            //                    y + sy * img_yscale,
+            //                    w * img_xscale,
+            //                    (h + ey - pos_ey_adjust) * img_yscale);
         },
 
         draw_dngn: function(idx, x, y, img_scale)


-- 
Dungeon Crawl Stone Soup