From 4a95c2496a8f4b9fe7fab981fa9e2f8e5f72f72b Mon Sep 17 00:00:00 2001
From: FalcoDJ <48579349+FalcoDJ@users.noreply.github.com>
Date: Sat, 18 Dec 2021 16:22:45 -0500
Subject: [PATCH] Added F11 fullscreen functionality

---
 WASM/basic_template.html | 161 ++++++++++++++++++++++++---------------
 1 file changed, 99 insertions(+), 62 deletions(-)
diff --git a/WASM/basic_template.html b/WASM/basic_template.html
index 1b2f8dd..28c6964 100644
--- a/WASM/basic_template.html
+++ b/WASM/basic_template.html
@@ -1,77 +1,114 @@
-
 <!doctype html>
 <html lang="en-us">
-    <head>
-        <meta name="viewport" content="width=device-width, initial-scale=1">
-        <meta charset="utf-8">
-        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-        <title>Emscripten-Generated Code</title>
-        <style>
-html,body {	width: 100%; height: 100%; }
-body { font-family: arial; margin: 0; padding: 0; background: #000; }
-
-.emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; }
-div.emscripten_border { border: none; }
 
-/* the canvas *must not* have any border or padding, or mouse coords will be wrong */
-canvas.emscripten { border: 0px none; background-color: black; }
-        </style>
-    </head>
-    <body>
-        <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
-        <script type='text/javascript'>
-var Module = {
-    preRun: [],
-    postRun: [],
-    canvas: (function() {
-        var canvas = document.getElementById('canvas');
+<head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="utf-8">
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <title>Emscripten Generated Code</title>
+    <style>
+        html,
+        body {
+            width: 100%;
+            height: 100%;
+        }
+        
+        body {
+            font-family: arial;
+            margin: 0;
+            padding: 0;
+            background: #000;
+        }
+        
+        .emscripten {
+            padding-right: 0;
+            margin-left: auto;
+            margin-right: auto;
+            display: block;
+        }
+        
+        div.emscripten_border {
+            border: none;
+        }
+        /* the canvas *must not* have any border or padding, or mouse coords will be wrong */
+        
+        canvas.emscripten {
+            border: 0px none;
+            background-color: black;
+        }
+    </style>
+</head>
 
-        // As a default initial behavior, pop up an alert when webgl context is lost. To make your
-        // application robust, you may want to override this behavior before shipping!
-        // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
-        canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false);
+<body>
+    <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>
+    <script type='text/javascript'>
+        function openFullscreen(elem) {
+            if (elem.requestFullscreen) {
+                elem.requestFullscreen();
+            } else if (elem.webkitRequestFullscreen) { /* Safari */
+                elem.webkitRequestFullscreen();
+            } else if (elem.msRequestFullscreen) { /* IE11 */
+                elem.msRequestFullscreen();
+            }
+        }
+        var Module = {
+            preRun: [],
+            postRun: [],
+            canvas: (function() {
+                const canvas = document.querySelector('canvas');
 
-        return canvas;
-    })(),
-};
-        </script>
-        <script async type="text/javascript" src="./pge.js"></script>
-        <script type="text/javascript">
-Module.canvas.addEventListener("resize", (e) => {
+                // As a default initial behavior, pop up an alert when webgl context is lost. To make your
+                // application robust, you may want to override this behavior before shipping!
+                // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2
+                canvas.addEventListener("webglcontextlost", function(e) {
+                    alert('WebGL context lost. You will need to reload the page.');
+                    e.preventDefault();
+                }, false);
+                canvas.addEventListener("keydown", (e) => {
+                    if (e.key === "F11") {
+                        openFullscreen(canvas);
+                    }
+                });
 
-    var viewWidth = e.detail.width;
-    var viewHeight = e.detail.width / Module._olc_WindowAspectRatio;
+                return canvas;
+            })(),
+        };
+    </script>
+    <script async type="text/javascript" src="./pge.js"></script>
+    <script type="text/javascript">
+        Module.canvas.addEventListener("resize", (e) => {
 
-    if(viewHeight > e.detail.height)
-    {
-        viewHeight = e.detail.height;
-        viewWidth = e.detail.height * Module._olc_WindowAspectRatio;
-    }
+            var viewWidth = e.detail.width;
+            var viewHeight = e.detail.width / Module._olc_WindowAspectRatio;
 
-    // update dom attributes
-    Module.canvas.setAttribute("width", viewWidth);
-    Module.canvas.setAttribute("height", viewHeight);
+            if (viewHeight > e.detail.height) {
+                viewHeight = e.detail.height;
+                viewWidth = e.detail.height * Module._olc_WindowAspectRatio;
+            }
 
-    var top = (e.detail.height - viewHeight) / 2;
-    var left = (e.detail.width - viewWidth) / 2;
+            // update dom attributes
+            Module.canvas.setAttribute("width", viewWidth);
+            Module.canvas.setAttribute("height", viewHeight);
 
-    // update styles
-    Module.canvas.style.position = "fixed";
-    Module.canvas.style.top = top.toString() + "px";
-    Module.canvas.style.left = left.toString() + "px";
-    Module.canvas.style.width = "";
-    Module.canvas.style.height = "";
+            var top = (e.detail.height - viewHeight) / 2;
+            var left = (e.detail.width - viewWidth) / 2;
 
-    // trigger PGE update
-    Module._olc_PGE_UpdateWindowSize(viewWidth, viewHeight);
+            // update styles
+            Module.canvas.style.position = "fixed";
+            Module.canvas.style.top = top.toString() + "px";
+            Module.canvas.style.left = left.toString() + "px";
+            Module.canvas.style.width = "";
+            Module.canvas.style.height = "";
 
-    // ensure canvas has focus
-    Module.canvas.focus();
-    e.preventDefault();
-});
-</script>
+            // trigger PGE update
+            Module._olc_PGE_UpdateWindowSize(viewWidth, viewHeight);
 
-    </body>
-</html>
+            // ensure canvas has focus
+            Module.canvas.focus();
+            e.preventDefault();
+        });
+    </script>
 
+</body>
 
+</html>
