Browse Source

canvas occupies as much of the parent as possible

master
Inderjit Gill 1 year ago
parent
commit
d12516c787
5 changed files with 50 additions and 10 deletions
  1. +3
    -3
      index.html
  2. +7
    -0
      src/geometry.rs
  3. +4
    -0
      src/harbour.rs
  4. +4
    -0
      src/lib.rs
  5. +32
    -7
      web/js/index.js

+ 3
- 3
index.html View File

@@ -11,11 +11,11 @@
justify-content: center;
font-family: monospace;
white-space: pre;
background: #333333;
background: #000;
}
#render-canvas {
background: #101010;
padding: 1em;
background: #000;
padding: 0;
}
</style>
</head>

+ 7
- 0
src/geometry.rs View File

@@ -83,6 +83,13 @@ impl Geometry {
self.init();
}

pub fn resize(&mut self, canvas_width: i32, canvas_height: i32) {
self.canvas_width = canvas_width;
self.canvas_height = canvas_height;

self.init();
}

pub fn clear(&mut self) {
self.geo.clear();
}

+ 4
- 0
src/harbour.rs View File

@@ -51,6 +51,10 @@ impl Harbour {
}
}

pub fn resize_event(&mut self, width: i32, height: i32) {
self.geometry.resize(width, height);
}

// return true if we need to call tick after receiving an input event
// (only true when we resume playing after being paused)
pub fn input(&mut self, button: ControllerButton, action: ControllerAction) -> bool {

+ 4
- 0
src/lib.rs View File

@@ -138,6 +138,10 @@ impl Bridge {
self.harbour.init(random);
}

pub fn event_resize(&mut self, width: i32, height: i32) {
self.harbour.resize_event(width, height);
}

pub fn event_key_down(&mut self, key: String) -> KeyEventReturn {
input_event(&mut self.harbour, key, ControllerAction::Down)
}

+ 32
- 7
web/js/index.js View File

@@ -73,6 +73,27 @@ function get_canvas_aspect_ratio(config) {
return max_u / max_v;
}

// maximise the canvas element within it's parent whilst retaining the required aspect ratio
//
function resize_canvas_element(canvasElement, config) {
const width = canvasElement.parentNode.parentElement.clientWidth;
const height = canvasElement.parentNode.parentElement.clientHeight;

const canvas_aspect_ratio = get_canvas_aspect_ratio(config);
config.canvas_width = height * canvas_aspect_ratio;
config.canvas_height = height;

if (config.canvas_width > width) {
// the window has been resized to a very narrow aspect ratio
// the constraining dimension is now the width, not height
config.canvas_width = width;
config.canvas_height = width / canvas_aspect_ratio;
}

canvasElement.width = config.canvas_width;
canvasElement.height = config.canvas_height;
}

function main() {
// - The game is rendered on a square rendertexture so that the gamecode can
// assume that we're working with square pixels.
@@ -82,6 +103,9 @@ function main() {
// the aspect ratio of the canvas is the same as the uv co-ordinates used
// in mapping the rendertexture onto the canvas
//

const canvasElement = document.getElementById(gState.canvasId);

gState.config.render_texture_width = 512;
gState.config.render_texture_height = 512;

@@ -107,13 +131,7 @@ function main() {

gState.config.crt_update_speed = 0.15;

const canvas_aspect_ratio = get_canvas_aspect_ratio(gState.config);
gState.config.canvas_width = 1000 * canvas_aspect_ratio;
gState.config.canvas_height = 1000;

const canvasElement = document.getElementById(gState.canvasId);
canvasElement.width = gState.config.canvas_width;
canvasElement.height = gState.config.canvas_height;
resize_canvas_element(canvasElement, gState.config);

let renderer = new GLRenderer(gState.config, canvasElement);
renderer.loadTexture(gState.tileset).then(([tilesetWidth, tilesetHeight]) => {
@@ -137,6 +155,7 @@ function main() {

key_event_return.free();
});

document.addEventListener('keyup', event => {
let key_event_return = gState.bridge.event_key_up(event.key);

@@ -150,6 +169,12 @@ function main() {
key_event_return.free();
});

window.addEventListener("resize", () => {
resize_canvas_element(canvasElement, gState.config);
gState.bridge.event_resize(gState.config.canvas_width, gState.config.canvas_height);
render();

});

gState.bridge.init(Math.random());
tick();

Loading…
Cancel
Save