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

Auto-size the game to fit the browser window

Browse Source
This commit is contained in:
Eevee (Evelyn Woods) 2020-09-01 05:51:26 -06:00
parent 9dccb310e0
commit c8bdf121d0
2 changed files with 37 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
js/main.js
View File

@ -977,6 +977,12 @@ class Game {
this.demo_el.style.display = 'none';
}
// Auto-size the level canvas, both now and on resize
this.adjust_scale();
window.addEventListener('resize', ev => {
this.adjust_scale();
});
this.frame = 0;
this.tic = 0;
requestAnimationFrame(this.do_frame.bind(this));
@ -1215,6 +1221,32 @@ class Game {
}
}
}
// Auto-size the game canvas to fit the screen, if possible
adjust_scale() {
// TODO make this optional
// The base size is the size of the canvas, i.e. the viewport size
// times the tile size
let base_x = this.tileset.size_x * this.viewport_size_x;
let base_y = this.tileset.size_y * this.viewport_size_y;
// The main UI is centered in a flex item with auto margins, so the
// extra space available is the size of those margins
let style = window.getComputedStyle(this.container);
let extra_x = parseFloat(style['margin-left']) + parseFloat(style['margin-right']);
let extra_y = parseFloat(style['margin-top']) + parseFloat(style['margin-bottom']);
// The total available space, then, is the current size of the
// canvas plus the size of the margins
let total_x = extra_x + this.level_canvas.offsetWidth;
let total_y = extra_y + this.level_canvas.offsetHeight;
// Divide to find the biggest scale that still fits. But don't
// 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));
if (scale <= 0) {
scale = 1;
}
// FIXME this doesn't take into account the inventory, which is also affected by scale
this.container.style.setProperty('--scale', scale);
}
}
async function main() {

10
style.css
View File

@ -91,7 +91,7 @@ main {
--tile-width: 32px;
--tile-height: 32px;
--scale: 2;
--scale: 1;
}
main > header {
@ -233,12 +233,12 @@ dl.score-chart .-sum {
flex-wrap: wrap;
align-items: start;
background-size: calc(2 * var(--tile-width)) calc(2 * var(--tile-height));
width: calc(4 * var(--tile-width) * 2);
min-height: calc(2 * var(--tile-height) * 2);
background-size: calc(var(--tile-width) * var(--scale)) calc(var(--tile-height) * var(--scale));
width: calc(4 * var(--tile-width) * var(--scale));
min-height: calc(2 * var(--tile-height) * var(--scale));
}
.inventory img {
width: calc(2 * var(--tile-width));
width: calc(var(--tile-width) * var(--scale));
}
.controls {
grid-area: controls;