leif/lexys-labyrinth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2 from magical/master

Browse Source 
Improve support for High DPI displays
This commit is contained in:
Eevee 2020-09-11 17:35:52 -06:00 committed by GitHub
commit d710e3ee0a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 11 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
js/main.js
View File

@ -619,18 +619,27 @@ class Player extends PrimaryView {
// The main UI is centered in a flex item with auto margins, so the // The main UI is centered in a flex item with auto margins, so the
// extra space available is the size of those margins // extra space available is the size of those margins
let style = window.getComputedStyle(this.root); let style = window.getComputedStyle(this.root);
if (style['display'] === 'none') {
// the computed margins can be 'auto' in this case
return;
}
let extra_x = parseFloat(style['margin-left']) + parseFloat(style['margin-right']); let extra_x = parseFloat(style['margin-left']) + parseFloat(style['margin-right']);
let extra_y = parseFloat(style['margin-top']) + parseFloat(style['margin-bottom']); let extra_y = parseFloat(style['margin-top']) + parseFloat(style['margin-bottom']);
// The total available space, then, is the current size of the // The total available space, then, is the current size of the
// canvas plus the size of the margins // canvas plus the size of the margins
let total_x = extra_x + this.renderer.canvas.offsetWidth; let total_x = extra_x + this.renderer.canvas.offsetWidth;
let total_y = extra_y + this.renderer.canvas.offsetHeight; let total_y = extra_y + this.renderer.canvas.offsetHeight;
let dpr = window.devicePixelRatio || 1.0;
// Divide to find the biggest scale that still fits. But don't // Divide to find the biggest scale that still fits. But don't
// exceed 90% of the available space, or it'll feel cramped. // exceed 90% of the available space, or it'll feel cramped.
let scale = Math.floor(0.9 * Math.min(total_x / base_x, total_y / base_y)); let scale = Math.floor(0.9 * dpr * Math.min(total_x / base_x, total_y / base_y));
if (scale <= 0) { if (scale <= 1) {
scale = 1; scale = 1;
} }
// High DPI support: scale the canvas down by the inverse of the device
// pixel ratio, thus matching the canvas's resolution to the screen
// resolution and giving us nice, clean pixels.
scale /= dpr;
// FIXME the above logic doesn't take into account the inventory, which is also affected by scale // FIXME the above logic doesn't take into account the inventory, which is also affected by scale
this.scale = scale; this.scale = scale;