From 47286508e3050c2b2697a0eeb1aca642e7b3e35f Mon Sep 17 00:00:00 2001
From: iddev5 <ayushbardhan5@gmail.com>
Date: Sat, 11 Jun 2022 13:15:28 +0530
Subject: [PATCH] mach: wasm: Implement fullscreen support for browser platform

---
 src/platform/mach.js  | 29 ++++++++++++++++++++++-------
 src/platform/wasm.zig | 16 +++++++++-------
 www/template.html     |  5 -----
 3 files changed, 31 insertions(+), 19 deletions(-)

diff --git a/src/platform/mach.js b/src/platform/mach.js
index 08672864..86e2f656 100644
--- a/src/platform/mach.js
+++ b/src/platform/mach.js
@@ -182,13 +182,12 @@ const mach = {
     throw Error(mach.getString(str, len));
   },
 
-  machCanvasInit(width, height, id) {
+  machCanvasInit(id) {
     let canvas = document.createElement("canvas");
     canvas.id = "#mach-canvas-" + mach.canvases.length;
-    canvas.style.width = width + "px";
-    canvas.style.height = height + "px";
-    canvas.width = Math.floor(width * window.devicePixelRatio);
-    canvas.height = Math.floor(height * window.devicePixelRatio);
+    canvas.style.border = "1px solid";
+    canvas.style.position = "absolute";
+    canvas.style.display = "block";
     canvas.tabIndex = 1;
 
     mach.observer.observe(canvas, { attributes: true });
@@ -250,8 +249,24 @@ const mach = {
     if (width > 0 && height > 0) {
       cv.canvas.style.width = width + "px";
       cv.canvas.style.height = height + "px";
-      cv.canvas.width = width * window.devicePixelRatio;
-      cv.canvas.height = height * window.devicePixelRatio;
+      cv.canvas.width = Math.floor(width * window.devicePixelRatio);
+      cv.canvas.height = Math.floor(height * window.devicePixelRatio);
+    }
+  },
+
+  machCanvasSetFullscreen(canvas, value) {
+    const cv = mach.canvases[canvas];
+    if (value) {
+      cv.canvas.style.border = "0px";
+      cv.canvas.style.width = "100%";
+      cv.canvas.style.height = "100%";
+      cv.canvas.style.top = "0";
+      cv.canvas.style.left = "0";
+      cv.canvas.style.margin = "0px";
+    } else {
+      cv.canvas.style.border = "1px solid;"
+      cv.canvas.style.top = "2px";
+      cv.canvas.style.left = "2px";
     }
   },
 
diff --git a/src/platform/wasm.zig b/src/platform/wasm.zig
index 3d015e8e..fa613660 100644
--- a/src/platform/wasm.zig
+++ b/src/platform/wasm.zig
@@ -5,10 +5,11 @@ const structs = @import("../structs.zig");
 const enums = @import("../enums.zig");
 
 const js = struct {
-    extern fn machCanvasInit(width: u32, height: u32, selector_id: *u8) CanvasId;
+    extern fn machCanvasInit(selector_id: *u8) CanvasId;
     extern fn machCanvasDeinit(canvas: CanvasId) void;
     extern fn machCanvasSetTitle(canvas: CanvasId, title: [*]const u8, len: u32) void;
     extern fn machCanvasSetSize(canvas: CanvasId, width: u32, height: u32) void;
+    extern fn machCanvasSetFullscreen(canvas: CanvasId, value: bool) void;
     extern fn machCanvasGetWindowWidth(canvas: CanvasId) u32;
     extern fn machCanvasGetWindowHeight(canvas: CanvasId) u32;
     extern fn machCanvasGetFramebufferWidth(canvas: CanvasId) u32;
@@ -37,14 +38,10 @@ pub const Platform = struct {
     last_framebuffer_size: structs.Size,
 
     pub fn init(allocator: std.mem.Allocator, eng: *Engine) !Platform {
-        const options = eng.options;
         var selector = [1]u8{0} ** 15;
-        const id = js.machCanvasInit(options.width, options.height, &selector[0]);
+        const id = js.machCanvasInit(&selector[0]);
 
-        const title = std.mem.span(options.title);
-        js.machCanvasSetTitle(id, title.ptr, title.len);
-
-        return Platform{
+        var platform = Platform{
             .id = id,
             .selector_id = try allocator.dupe(u8, selector[0 .. selector.len - @as(u32, if (selector[selector.len - 1] == 0) 1 else 0)]),
             .last_window_size = .{
@@ -56,6 +53,9 @@ pub const Platform = struct {
                 .height = js.machCanvasGetFramebufferHeight(id),
             },
         };
+
+        try platform.setOptions(eng.options);
+        return platform;
     }
 
     pub fn setOptions(platform: *Platform, options: structs.Options) !void {
@@ -64,6 +64,8 @@ pub const Platform = struct {
 
         const title = std.mem.span(options.title);
         js.machCanvasSetTitle(platform.id, title.ptr, title.len);
+
+        js.machCanvasSetFullscreen(platform.id, options.fullscreen);
     }
 
     pub fn setShouldClose(_: *Platform, value: bool) void {
diff --git a/www/template.html b/www/template.html
index 67a4dbf8..d163c273 100644
--- a/www/template.html
+++ b/www/template.html
@@ -2,11 +2,6 @@
 <html>
   <head>
     <meta charset="utf-8">
-    <style>
-      canvas {{
-        border: 1px solid;
-      }}
-    </style>
   </head>
   <body>
     <script type="module">