Browse Source

canvas occupies as much of the parent as possible

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 @@
11 11
       justify-content: center;
12 12
       font-family: monospace;
13 13
       white-space: pre;
14
-      background: #333333;
14
+      background: #000;
15 15
       }
16 16
       #render-canvas {
17
-        background: #101010;
18
-        padding: 1em;
17
+        background: #000;
18
+        padding: 0;
19 19
       }
20 20
     </style>
21 21
   </head>

+ 7
- 0
src/geometry.rs View File

@@ -83,6 +83,13 @@ impl Geometry {
83 83
         self.init();
84 84
     }
85 85
 
86
+    pub fn resize(&mut self, canvas_width: i32, canvas_height: i32) {
87
+        self.canvas_width = canvas_width;
88
+        self.canvas_height = canvas_height;
89
+
90
+        self.init();
91
+    }
92
+
86 93
     pub fn clear(&mut self) {
87 94
         self.geo.clear();
88 95
     }

+ 4
- 0
src/harbour.rs View File

@@ -51,6 +51,10 @@ impl Harbour {
51 51
         }
52 52
     }
53 53
 
54
+    pub fn resize_event(&mut self, width: i32, height: i32) {
55
+        self.geometry.resize(width, height);
56
+    }
57
+
54 58
     // return true if we need to call tick after receiving an input event
55 59
     // (only true when we resume playing after being paused)
56 60
     pub fn input(&mut self, button: ControllerButton, action: ControllerAction) -> bool {

+ 4
- 0
src/lib.rs View File

@@ -138,6 +138,10 @@ impl Bridge {
138 138
         self.harbour.init(random);
139 139
     }
140 140
 
141
+    pub fn event_resize(&mut self, width: i32, height: i32) {
142
+        self.harbour.resize_event(width, height);
143
+    }
144
+
141 145
     pub fn event_key_down(&mut self, key: String) -> KeyEventReturn {
142 146
         input_event(&mut self.harbour, key, ControllerAction::Down)
143 147
     }

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

@@ -73,6 +73,27 @@ function get_canvas_aspect_ratio(config) {
73 73
   return max_u / max_v;
74 74
 }
75 75
 
76
+// maximise the canvas element within it's parent whilst retaining the required aspect ratio
77
+//
78
+function resize_canvas_element(canvasElement, config) {
79
+  const width = canvasElement.parentNode.parentElement.clientWidth;
80
+  const height = canvasElement.parentNode.parentElement.clientHeight;
81
+
82
+  const canvas_aspect_ratio = get_canvas_aspect_ratio(config);
83
+  config.canvas_width = height * canvas_aspect_ratio;
84
+  config.canvas_height = height;
85
+
86
+  if (config.canvas_width > width) {
87
+    // the window has been resized to a very narrow aspect ratio
88
+    // the constraining dimension is now the width, not height
89
+    config.canvas_width = width;
90
+    config.canvas_height = width / canvas_aspect_ratio;
91
+  }
92
+
93
+  canvasElement.width = config.canvas_width;
94
+  canvasElement.height = config.canvas_height;
95
+}
96
+
76 97
 function main() {
77 98
   // - The game is rendered on a square rendertexture so that the gamecode can
78 99
   //   assume that we're working with square pixels.
@@ -82,6 +103,9 @@ function main() {
82 103
   //   the aspect ratio of the canvas is the same as the uv co-ordinates used
83 104
   //   in mapping the rendertexture onto the canvas
84 105
   //
106
+
107
+  const canvasElement = document.getElementById(gState.canvasId);
108
+
85 109
   gState.config.render_texture_width = 512;
86 110
   gState.config.render_texture_height = 512;
87 111
 
@@ -107,13 +131,7 @@ function main() {
107 131
 
108 132
   gState.config.crt_update_speed = 0.15;
109 133
 
110
-  const canvas_aspect_ratio = get_canvas_aspect_ratio(gState.config);
111
-  gState.config.canvas_width = 1000 * canvas_aspect_ratio;
112
-  gState.config.canvas_height = 1000;
113
-
114
-  const canvasElement = document.getElementById(gState.canvasId);
115
-  canvasElement.width = gState.config.canvas_width;
116
-  canvasElement.height = gState.config.canvas_height;
134
+  resize_canvas_element(canvasElement, gState.config);
117 135
 
118 136
   let renderer = new GLRenderer(gState.config, canvasElement);
119 137
   renderer.loadTexture(gState.tileset).then(([tilesetWidth, tilesetHeight]) => {
@@ -137,6 +155,7 @@ function main() {
137 155
 
138 156
       key_event_return.free();
139 157
     });
158
+
140 159
     document.addEventListener('keyup', event => {
141 160
       let key_event_return = gState.bridge.event_key_up(event.key);
142 161
 
@@ -150,6 +169,12 @@ function main() {
150 169
       key_event_return.free();
151 170
     });
152 171
 
172
+    window.addEventListener("resize", () => {
173
+      resize_canvas_element(canvasElement, gState.config);
174
+      gState.bridge.event_resize(gState.config.canvas_width, gState.config.canvas_height);
175
+      render();
176
+
177
+    });
153 178
 
154 179
     gState.bridge.init(Math.random());
155 180
     tick();

Loading…
Cancel
Save