Scaling fix

build_web.sh

@@ -10,8 +10,10 @@ INDEX_TEMPLATE_PATH="src/web/index_template.html"
 if [[ -v 1 ]]; then
     if [ "$1" = "DEBUG" ]; then
         ODIN_FLAGS="-debug"
+        EMCC_FLAGS="-O0"
     elif [ "$1" = "RELEASE" ]; then
         ODIN_FLAGS="-o:size"
+        EMCC_FLAGS="-O2"
     else
         echo "Usage: <script> <DEBUG/RELEASE>"
         exit 1
@@ -46,7 +48,7 @@ files="$OUT_DIR/$WASM_OBJ_NAME $RAYLIB_PATH/wasm/libraylib.a $RAYLIB_PATH/wasm/l
 # source/main_web/main_web.odin
 # TODO (synthas): Investigate why emcc's emscripten flag causes a linker error on itch.io
 EMCC_SETTINGS="-sEXPORTED_RUNTIME_METHODS=['HEAPF32'] -sUSE_GLFW=3 -sWASM_BIGINT -sWARN_ON_UNDEFINED_SYMBOLS=0"
-flags="-O2 $EMCC_SETTINGS --shell-file $INDEX_TEMPLATE_PATH --preload-file src/assets"
+flags="$EMCC_FLAGS $EMCC_SETTINGS --shell-file $INDEX_TEMPLATE_PATH --preload-file src/assets"
 
 # For debugging: Add `-g` to `emcc` (gives better error callstack in chrome)
 emcc -o $OUT_DIR/index.html $files $flags

src/web/index_template.html

@@ -14,6 +14,8 @@
 			margin: 0px;
 			overflow: hidden;
 			background-color: black;
+			width: 100%;
+			height: 100%;
 		}
 		canvas.game_canvas {
 			border: 0px none;
@@ -23,6 +25,8 @@
 			margin-left: auto;
 			margin-right: auto;
 			display: block;
+			width: 100%;
+			height: 100%;
 		}
 	</style>
 </head>
@@ -45,7 +49,6 @@
 
 				return WebAssembly.instantiateStreaming(fetch("index.wasm"), newImports).then(function(output) {
 					var e = output.instance.exports;
-			        console.log(e);
 					odinMemoryInterface.setExports(e);
 					odinMemoryInterface.setMemory(e.memory);
 					return successCallback(output.instance);
@@ -55,16 +58,14 @@
 			// done setting up. At that point we can run code.
 			onRuntimeInitialized: () => {
 				var e = wasmExports;
-
-				// Calls any procedure marked with @init
 				e._start();
-
-				// See source/main_web/main_web.odin for main_start,
-				// main_update and main_end.
 				e.main_start();
 
 				function send_resize() {
 					var canvas = document.getElementById('canvas');
+					canvas.width = document.documentElement.clientWidth;
+                    canvas.height = document.documentElement.clientHeight;
+					console.log(canvas.width, canvas.height);
 					e.web_window_size_changed(canvas.width, canvas.height);
 				}
 
@@ -72,17 +73,11 @@
 					send_resize();
 				}, true);
 
-				// This can probably be done better: Ideally we'd feed the
-				// initial size to `main_start`. But there seems to be a
-				// race condition. `canvas` doesn't have it's correct size yet.
 				send_resize();
 
-				// Runs the "main loop".
 				function do_main_update() {
 					if (!e.main_update()) {
 						e.main_end();
-
-						// Calls procedures marked with @fini
 						e._end();
 						return;
 					}