autofit page

code/game/src/platform_raylib.c

@@ -13,6 +13,17 @@
 #include "debug_ui.h"
 #include "utils/raylib_helpers.h"
 
+#if defined(PLATFORM_WEB)
+#include <emscripten.h>
+EM_JS(int, canvas_get_width, (), {
+  return canvas.width;
+});
+
+EM_JS(int, canvas_get_height, (), {
+  return canvas.height;
+});
+#endif
+
 static uint16_t screenWidth = 1024;
 static uint16_t screenHeight = 768;
 static float target_zoom = 1.5f;
@@ -27,6 +38,12 @@ static bool request_shutdown;
 
 void platform_init() {
     SetTraceLogLevel(LOG_ERROR);
+
+#if defined(PLATFORM_WEB)
+    screenWidth = (uint16_t)canvas_get_width();
+    screenHeight = (uint16_t)canvas_get_height();
+#endif
+
     InitWindow(screenWidth, screenHeight, "eco2d");
     SetWindowState(/*FLAG_WINDOW_UNDECORATED|*/FLAG_WINDOW_MAXIMIZED|FLAG_WINDOW_RESIZABLE|FLAG_MSAA_4X_HINT);
 
@@ -36,7 +53,7 @@ void platform_init() {
 #endif
     // ToggleFullscreen();
     // SetTargetFPS(60.0);
-    
+
     renderer_init();
 }
 
@@ -87,13 +104,13 @@ inline static
 void platform_input_update_input_frame(game_keystate_data data) {
     float mx = 0, my = 0;
     platform_get_block_realpos(&mx, &my);
-    
+
     if (mx != last_blockpos_data.mx || my != last_blockpos_data.my){
         last_blockpos_data.mx = mx;
         last_blockpos_data.my = my;
         game_action_send_blockpos(mx, my);
     }
-    
+
     // NOTE(zaklaus): Test if there are any changes
     if (data.x != last_input_data.x) goto send_data;
     if (data.y != last_input_data.y) goto send_data;
@@ -111,7 +128,7 @@ void platform_input_update_input_frame(game_keystate_data data) {
     if (data.deletion_mode != last_input_data.deletion_mode) goto send_data;
     if (zpl_memcompare(data.placements, last_input_data.placements, zpl_size_of(data.placements))) goto send_data;
     return;
-    
+
     send_data:
     last_input_data = data;
     game_action_send_keystate(&data);
@@ -119,11 +136,11 @@ void platform_input_update_input_frame(game_keystate_data data) {
 
 void platform_input() {
     float mouse_z = (GetMouseWheelMove()*0.5f);
-    
+
     if (mouse_z != 0.0f) {
         target_zoom = zpl_clamp(target_zoom+mouse_z, 0.1f, 10.0f);
     }
-    
+
     // NOTE(zaklaus): keystate handling
     {
         float x=0.0f, y=0.0f;
@@ -132,12 +149,12 @@ void platform_input() {
         if (IsKeyDown(KEY_LEFT) || IsKeyDown(KEY_A)) x -= 1.0f;
         if (IsKeyDown(KEY_UP) || IsKeyDown(KEY_W)) y += 1.0f;
         if (IsKeyDown(KEY_DOWN) || IsKeyDown(KEY_S)) y -= 1.0f;
-        
+
         use = IsKeyPressed(KEY_SPACE);
         sprint = IsKeyDown(KEY_LEFT_SHIFT) || IsKeyDown(KEY_RIGHT_SHIFT);
         ctrl = IsKeyDown(KEY_LEFT_CONTROL) || IsKeyDown(KEY_RIGHT_CONTROL);
         drop = IsKeyPressed(KEY_G) || player_inv.drop_item || storage_inv.drop_item;
-        
+
         // NOTE(zaklaus): NEW! mouse movement
         Vector2 mouse_pos = GetMousePosition();
         mouse_pos.x /= screenWidth;
@@ -145,18 +162,18 @@ void platform_input() {
         mouse_pos.x -= 0.5f;
         mouse_pos.y -= 0.5f;
         mouse_pos = Vector2Normalize(mouse_pos);
-        
+
         if (game_get_kind() == GAMEKIND_SINGLE && IsMouseButtonDown(MOUSE_MIDDLE_BUTTON)) {
             x = mouse_pos.x;
             y = -mouse_pos.y;
         }
-        
+
         inv_keystate *inv = (inv_is_storage_action) ? &storage_inv : &player_inv;
         inv_keystate *inv2 = (!inv_is_storage_action) ? &storage_inv : &player_inv;
-        
+
         // NOTE(zaklaus): don't perform picking if we manipulate our inventories
         pick = (inv_is_inside||inv->item_is_held||inv2->item_is_held) ? false : IsMouseButtonDown(MOUSE_LEFT_BUTTON);
-        
+
         game_keystate_data in_data = {
             .x = x,
             .y = y,
@@ -166,7 +183,7 @@ void platform_input() {
             .sprint = sprint,
             .ctrl = ctrl,
             .pick = pick,
-            
+
             .drop = drop,
             .storage_action = inv_is_storage_action,
             .selected_item = player_inv.selected_item,
@@ -175,18 +192,18 @@ void platform_input() {
             .swap_storage = inv_swap_storage,
             .swap_from = inv->swap_from,
             .swap_to = inv->swap_to,
-            
+
             .deletion_mode = build_is_deletion_mode,
         };
-        
+
         if (build_submit_placements) {
             in_data.placement_num = build_num_placements;
             zpl_memcopy(in_data.placements, build_placements, build_num_placements*zpl_size_of(item_placement));
         }
-        
+
         platform_input_update_input_frame(in_data);
     }
-    
+
     // NOTE(zaklaus): cycle through viewers
     {
         if (IsKeyPressed(KEY_Q)) {
@@ -196,14 +213,14 @@ void platform_input() {
             game_world_view_cycle_active(1);
         }
     }
-    
+
     // NOTE(zaklaus): switch render modes
     {
         if (IsKeyPressed(KEY_O)) {
             renderer_switch(1-gfx_kind);
         }
     }
-    
+
     // NOTE(zaklaus): toggle debug drawing
 #ifndef ECO2D_PROD
     {
@@ -220,13 +237,13 @@ void draw_selected_item() {
     if (oe) {
         // NOTE(zaklaus): sel item
         entity_view *e = game_world_view_active_get_entity(oe->sel_ent);
-        
+
         if (e && e->kind == EKIND_DEVICE) {
             renderer_draw_single(e->x, e->y, ASSET_BLANK, ColorAlpha(RED, 0.4f));
         }else{
             // NOTE(zaklaus): hover item
             entity_view *e = game_world_view_active_get_entity(oe->pick_ent);
-            
+
             if (e && e->kind == EKIND_DEVICE) {
                 renderer_draw_single(e->x, e->y, ASSET_BLANK, ColorAlpha(RED, 0.1f));
             }
@@ -235,16 +252,26 @@ void draw_selected_item() {
 }
 
 void platform_render() {
+#if !defined(PLATFORM_WEB)
     screenWidth = (uint16_t)GetScreenWidth();
     screenHeight = (uint16_t)GetScreenHeight();
-    
+#else
+    uint16_t newScreenWidth = (uint16_t)canvas_get_width();
+    uint16_t newScreenHeight = (uint16_t)canvas_get_height();
+    if (newScreenWidth != screenWidth || newScreenHeight != screenHeight) {
+        screenWidth = newScreenWidth;
+        screenHeight = newScreenHeight;
+        SetWindowSize(screenWidth, screenHeight);
+    }
+#endif
+
     profile(PROF_ENTITY_LERP) {
         game_world_view_active_entity_map(lerp_entity_positions);
         game_world_view_active_entity_map(do_entity_fadeinout);
     }
-    
+
     assets_frame();
-    
+
     BeginDrawing();
     {
         profile (PROF_RENDER) {
@@ -261,7 +288,7 @@ void platform_render() {
         debug_draw();
     }
     EndDrawing();
-    
+
     if (request_shutdown) {
         CloseWindow();
     }

web/eco2d.html

@@ -28,9 +28,17 @@
     <meta name="twitter:description" content="Small C99 2D game engine with a focus on prototyping">
 
     <style>
-        body { margin: 0px; background-color: black;}
+        html, body { margin: 0px; padding: 0px; background-color: black; width: 100%; height: 100%;}
-        canvas.emscripten { border: 0px none; background-color: black; }
+        canvas.emscripten {
-        .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
+            border: 0px none; background-color: black;
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            width: 100%;
+            height: 100%;
+        }
     </style>
     <script type='text/javascript' src="https://cdn.jsdelivr.net/gh/eligrey/FileSaver.js/dist/FileSaver.min.js"> </script>
     <script type='text/javascript'>
@@ -53,9 +61,6 @@
     </script>
     </head>
     <body>
-        <div class="overlay">
-            <input type="button" value="Fullscreen" onclick="Module.requestFullscreen(false, true);">
-        </div>
         <canvas class=emscripten id=canvas oncontextmenu=event.preventDefault() tabindex=-1></canvas>
         <script>
             var Module = {
@@ -73,6 +78,13 @@
                 })(),
                 canvas: (function() {
                     var canvas = document.getElementById('canvas');
+                    canvas.width  = window.innerWidth;
+                    canvas.height = window.innerHeight;
+
+                    window.addEventListener('resize', () => {
+                        canvas.width = window.innerWidth;
+                        canvas.height = window.innerHeight;
+                    })
 
                     canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);